/* =============================================
   D4H HCC Guideline Auditor — UI Styles
   ============================================= */

:root {
  --blue:        #2563EB;
  --blue-hover:  #1D4ED8;
  --blue-light:  #EFF6FF;
  --blue-mid:    #DBEAFE;
  --bg:          #F1F5F9;
  --surface:     #FFFFFF;
  --border:      #E2E8F0;
  --border-mid:  #CBD5E1;
  --text:        #0F172A;
  --muted:       #64748B;
  --faint:       #94A3B8;
  --green:       #16A34A;
  --green-bg:    #DCFCE7;
  --green-bd:    #86EFAC;
  --amber:       #B45309;
  --amber-bg:    #FEF3C7;
  --amber-bd:    #FCD34D;
  --red:         #DC2626;
  --red-bg:      #FEF2F2;
  --red-bd:      #FECACA;
  --purple:      #7C3AED;
  --purple-bg:   #EDE9FE;
  --purple-bd:   #C4B5FD;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.10), 0 3px 8px rgba(0,0,0,0.06);
}

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

html, body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-feature-settings: 'cv11', 'ss01';
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ═══════════════════════════════════════
   UPLOAD SCREEN
═══════════════════════════════════════ */
#upload-screen {
  height: 100%; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: radial-gradient(ellipse at 30% 20%, #EEF4FF 0%, #F8FAFF 55%, #F0FDF4 100%);
  padding: 40px 20px;
  overflow-x: hidden; overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Center shorter upload forms while allowing long forms to start at the top
   and scroll fully inside the fixed-height application shell. */
#upload-screen > .upload-top-bar { margin-top: auto; }
#upload-screen > .upload-note { margin-bottom: auto; }

.upload-logo-wrap { margin-bottom: 10px; }

.upload-subtitle {
  font-size: 14px; font-weight: 400; color: var(--muted);
  margin-bottom: 36px; letter-spacing: -0.01em; max-width: 480px; text-align: center;
  line-height: 1.5;
}

.upload-zone-row {
  display: flex; align-items: center; gap: 24px; margin-bottom: 0;
}

.upload-card {
  position: relative; width: 240px; height: 180px;
  background: var(--surface);
  border: 1.5px dashed var(--border-mid);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.04);
}
.upload-card:hover {
  border-color: var(--blue); border-style: solid;
  background: linear-gradient(160deg, #F8FBFF 0%, #EFF6FF 100%);
  box-shadow: 0 0 0 4px rgba(37,99,235,0.10), 0 4px 20px rgba(37,99,235,0.10);
  transform: translateY(-2px);
}
.upload-card.has-file {
  border-style: solid; border-color: var(--green);
  background: linear-gradient(160deg, #F8FFF9 0%, #F0FDF4 100%);
  box-shadow: 0 0 0 4px rgba(22,163,74,0.08), 0 4px 16px rgba(22,163,74,0.08);
}
.upload-card.drag-over {
  border-color: var(--blue) !important; border-style: solid !important;
  background: var(--blue-light) !important;
}
.upload-card input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.upload-icon { font-size: 40px; line-height: 1; }
.upload-card h3 { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.upload-card p  { font-size: 12px; color: var(--muted); }
.upload-card .fname {
  font-size: 11px; color: var(--green); font-weight: 600;
  padding: 0 14px; text-align: center; word-break: break-all;
  max-height: 32px; overflow: hidden;
}

.initial-claims-upload {
  width: 100%; max-width: 600px; margin: 14px 0 0; padding: 13px 14px;
  border: 1px solid #BFDBFE; border-radius: var(--radius-md); background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-xs);
}
.initial-claims-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.initial-claims-heading > div { display: grid; gap: 3px; min-width: 0; }
.initial-claims-title { color: #0F2745; font-size: 12px; font-weight: 750; }
.initial-claims-title > span {
  margin-left: 5px; color: #1D4ED8; font-size: 9px; font-weight: 800;
  letter-spacing: .3px; text-transform: uppercase;
}
.initial-claims-copy { color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.initial-claims-add {
  flex: 0 0 auto; cursor: pointer; border: 0; border-radius: 7px; padding: 8px 11px;
  background: #1D4ED8; color: #fff; font-size: 11px; font-weight: 750;
}
.initial-claims-add:hover { background: #1E40AF; }
.initial-claims-list { display: grid; gap: 6px; margin-top: 11px; }
.initial-claims-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center;
  padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; background: #F8FAFC;
}
.initial-claims-item-name { min-width: 0; overflow: hidden; color: var(--text); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.initial-claims-item-state { color: var(--muted); font-size: 9.5px; }
.initial-claims-item-state.imported { color: #15803D; font-weight: 700; }
.initial-claims-item-state.error { color: #B91C1C; font-weight: 700; }
.initial-claims-remove {
  grid-row: 1 / span 2; grid-column: 2; cursor: pointer; border: 0; background: transparent;
  color: #64748B; font-size: 10px; font-weight: 650;
}
.initial-claims-remove:hover { color: #B91C1C; }
.initial-claims-remove:disabled { cursor: default; color: #15803D; }
.initial-claims-status { min-height: 0; margin-top: 6px; color: #475569; font-size: 10.5px; }
.initial-claims-status.error { color: #B91C1C; font-weight: 650; }

.document-upload-status {
  width: 100%; max-width: 600px; margin: 0 0 14px;
  padding: 11px 13px; border: 1px solid var(--blue-mid); border-radius: var(--radius-md);
  background: var(--blue-light); color: #1E40AF;
}
.document-upload-status.success { border-color: var(--green-bd); background: var(--green-bg); color: #166534; }
.document-upload-status.error { border-color: var(--red-bd); background: var(--red-bg); color: #991B1B; }
.document-upload-status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 7px; font-size: 11.5px; font-weight: 600;
}
.document-upload-track { height: 5px; border-radius: 99px; background: rgba(37,99,235,.15); overflow: hidden; }
.document-upload-fill { width: 0; height: 100%; background: var(--blue); border-radius: inherit; transition: width .2s ease; }
.document-upload-status.success .document-upload-fill { background: var(--green); }
.document-upload-status.error .document-upload-fill { background: var(--red); }

.upload-plus { font-size: 28px; color: var(--faint); font-weight: 300; flex-shrink: 0; }

/* ── Guideline separator ── */
.guide-sep {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 600px; margin: 28px 0 16px;
}
.guide-sep-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-mid), transparent);
}
.guide-sep-label {
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  white-space: nowrap; display: flex; align-items: center; gap: 6px;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.guide-sep-opt {
  background: var(--purple-bg); color: var(--purple);
  border: 1px solid var(--purple-bd);
  font-size: 9.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px;
}

/* ── Guideline upload row ── */
.guide-upload-row {
  display: flex; align-items: flex-start; gap: 20px;
  width: 100%; max-width: 600px; margin-bottom: 28px;
}

.guide-card { width: 186px; height: 140px; }
.guide-card.has-file { border-color: var(--purple); background: linear-gradient(160deg, #FAF8FF 0%, #EDE9FE 100%);
  box-shadow: 0 0 0 4px rgba(124,58,237,0.08), 0 4px 16px rgba(124,58,237,0.08); }
.guide-card.has-file .fname { color: var(--purple); }

.guide-meta {
  flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: 4px;
}

.guide-meta-fields { display: flex; flex-direction: column; gap: 10px; }

.guide-field { display: flex; flex-direction: column; gap: 4px; }
.guide-field-lbl {
  font-size: 11px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.3px;
}
.guide-field-inp {
  height: 32px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 10px; font-size: 12.5px; font-family: inherit; color: var(--text);
  background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.guide-field-inp:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124,58,237,0.10); }

.guide-date-row { display: flex; gap: 10px; }
.guide-field-sm { flex: 1; }

.guide-status {
  font-size: 12px; line-height: 1.5; min-height: 18px;
  display: flex; align-items: center; gap: 6px;
}
.guide-status.processing { color: var(--muted); }
.guide-status.success    { color: var(--green); font-weight: 600; }
.guide-status.error      { color: var(--red); }

/* ── Open button ── */
.btn-open {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  color: #fff; border: none;
  padding: 12px 48px; border-radius: var(--radius-md);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; font-family: inherit;
  transition: opacity .15s, box-shadow .15s, transform .15s;
  box-shadow: 0 2px 6px rgba(37,99,235,0.35), 0 6px 20px rgba(37,99,235,0.20);
}
.btn-open:hover:not(:disabled) {
  opacity: 0.92;
  box-shadow: 0 4px 10px rgba(37,99,235,0.45), 0 8px 28px rgba(37,99,235,0.25);
  transform: translateY(-1px);
}
.btn-open:active:not(:disabled) { transform: translateY(0); }
.btn-open:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }

.upload-note { margin-top: 18px; font-size: 11.5px; color: var(--faint); letter-spacing: 0.01em; }

.claim-import-dialog { width: min(620px, calc(100vw - 32px)); }
.claim-import-modal-copy { margin: 0 0 13px; color: #475569; font-size: 12px; line-height: 1.5; }
.claim-import-modal-body { display: grid; gap: 9px; max-height: min(52vh, 440px); overflow: auto; }
.claim-import-mapping-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 9px; }
.claim-import-field { display: grid; gap: 5px; color: #334155; font-size: 11px; font-weight: 700; }
.claim-import-field select {
  width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 1px solid #CBD5E1;
  border-radius: 6px; background: #fff; color: #0F172A; font: inherit; font-weight: 500;
}
.claim-import-field select:focus { border-color: #2563EB; outline: 2px solid rgba(37,99,235,.12); }
.claim-import-member-list { display: grid; gap: 7px; }
.claim-import-member-option {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: center;
  padding: 9px 10px; border: 1px solid #CBD5E1; border-radius: 7px; cursor: pointer;
}
.claim-import-member-option input { grid-row: 1 / span 2; }
.claim-import-member-option strong { color: #0F172A; font-size: 11px; }
.claim-import-member-option span { color: #64748B; font-size: 10px; }
.claim-import-modal-error { min-height: 16px; margin-top: 8px; color: #B91C1C; font-size: 11px; font-weight: 650; }

/* ═══════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════ */
#dashboard { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* ── Header ── */
.hdr {
  height: 74px; flex-shrink: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px; padding: 0 20px;
  box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,0.04);
  z-index: 20;
}
.hdr-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }
.hdr-patient { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; overflow: hidden; }
.document-path {
  display: flex; align-items: center; gap: 5px; min-width: 0; margin-bottom: 1px;
  color: #64748B; font-size: 10.5px; line-height: 1.35; white-space: nowrap;
}
.document-path-link,
.document-path-current {
  display: inline-block; min-width: 0; max-width: 190px; overflow: hidden;
  color: #475569; text-decoration: none; text-overflow: ellipsis; vertical-align: bottom;
}
.document-path-link { border-radius: 3px; font-weight: 600; }
.document-path-link:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.document-path-link:focus-visible { outline: 2px solid #93C5FD; outline-offset: 2px; }
.document-path-current { color: #0F172A; font-weight: 700; }
.document-path-separator { flex: 0 0 auto; color: #94A3B8; }
.pt-name { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; white-space: nowrap; }
.pt-meta { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  background: var(--blue-light); color: var(--blue);
  border: 1px solid rgba(37,99,235,0.18);
  letter-spacing: -0.01em;
}
.chip.green { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.chip.amber { background: var(--amber-bg); color: var(--amber); border-color: var(--amber-bd); }
.chip.red   { background: var(--red-bg);   color: var(--red);   border-color: var(--red-bd);  }

.ai-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #0F172A; color: #A78BFA;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px;
}

.btn-load-guide {
  background: transparent; border: 1px dashed var(--purple-bd);
  color: var(--purple); padding: 5px 12px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .15s; letter-spacing: -0.01em;
  max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-load-guide:hover { background: var(--purple-bg); border-style: solid; }
.btn-load-guide.has-guideline {
  background: var(--purple-bg); border-style: solid; border-color: var(--purple-bd);
}

.btn-new {
  background: transparent; border: 1px solid var(--border);
  color: var(--muted); padding: 6px 14px; border-radius: var(--radius-sm);
  font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.btn-new:hover { background: var(--bg); color: var(--text); border-color: var(--blue); }

/* ── Main split ── */
.main-split { flex: 1; display: flex; overflow: hidden; }

/* ═══════════════════════════════════════
   PDF PANEL
═══════════════════════════════════════ */
.pdf-panel {
  flex: 0 0 60%; display: flex; flex-direction: column; overflow: hidden;
  position: relative; border-right: 1px solid var(--border); background: var(--bg);
}
.pdf-toolbar {
  height: 42px; flex-shrink: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 5px; padding: 0 14px;
}
.pdf-toolbar-grp { display: flex; align-items: center; gap: 3px; }
.pdf-sep { width: 1px; height: 18px; background: var(--border); margin: 0 5px; }
.pbtn {
  background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
  height: 28px; min-width: 28px; padding: 0 6px;
  font-size: 14px; cursor: pointer; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .13s; font-family: inherit;
}
.pbtn:hover:not(:disabled) { background: var(--bg); border-color: var(--border); color: var(--text); }
.pbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.pdf-page-inp {
  width: 38px; height: 28px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  text-align: center; font-size: 12.5px; font-family: inherit; color: var(--text);
  background: var(--surface);
}
.pdf-page-inp:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.pdf-pg-info  { font-size: 12.5px; color: var(--muted); }
.pdf-zoom-lbl { font-size: 12.5px; color: var(--muted); min-width: 38px; text-align: center; }
.pdf-fname    { font-size: 11.5px; color: var(--faint); margin-left: 4px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-status {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: 99px; background: #F1F5F9; color: #64748B;
  font-size: 10px; font-weight: 700; white-space: nowrap;
}
.scan-status.scanning { background: #DBEAFE; color: #1D4ED8; }
.scan-status.complete { background: #DCFCE7; color: #15803D; }
.scan-status.error { background: #FEE2E2; color: #B91C1C; }
.pdf-keyboard-hint { font-size: 10px; color: #9CA3AF; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.audit-notes-toggle {
  margin-left: auto; gap: 5px; min-width: auto; padding: 0 8px;
  font-size: 11px; font-weight: 700;
}
.audit-notes-toggle[aria-expanded="true"] { background: #EFF6FF; border-color: #BFDBFE; color: var(--blue); }
.audit-notes-count {
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E2E8F0; color: #475569; font-size: 9.5px;
}
.audit-notes-toggle[aria-expanded="true"] .audit-notes-count { background: #BFDBFE; color: #1D4ED8; }
.audit-notes-drawer {
  position: absolute; z-index: 12; top: 56px; right: 14px;
  width: min(370px, calc(100% - 28px)); height: min(460px, calc(100% - 70px));
  min-width: min(280px, calc(100% - 20px)); min-height: 220px;
  max-width: calc(100% - 20px); max-height: calc(100% - 62px); overflow: hidden;
  background: var(--surface); border: 1px solid #BFDBFE; border-radius: 9px;
  box-shadow: 0 18px 45px rgba(15,23,42,.28), 0 4px 12px rgba(15,23,42,.14);
  display: flex; flex-direction: column;
}
.audit-notes-drawer[hidden] { display: none; }
.audit-notes-drawer.is-dragging { box-shadow: 0 22px 54px rgba(15,23,42,.34), 0 5px 15px rgba(15,23,42,.18); }
.audit-notes-drawer.is-resizing { box-shadow: 0 22px 54px rgba(15,23,42,.34), 0 5px 15px rgba(15,23,42,.18); }
.audit-notes-header {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  min-height: 42px; padding: 7px 8px 7px 24px; border-bottom: 1px solid #BFDBFE;
  background: #EFF6FF; cursor: grab; user-select: none; touch-action: none;
}
.audit-notes-drawer.is-dragging .audit-notes-header { cursor: grabbing; }
.audit-notes-title { color: #1D4ED8; font-size: 13px; font-weight: 750; }
.audit-note-icon-btn {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  width: 26px; height: 26px; border-radius: var(--radius-sm); font-family: inherit;
}
.audit-note-icon-btn:hover { background: var(--bg); color: var(--text); }
.audit-notes-list { flex: 1; overflow-y: auto; padding: 10px 14px; }
.audit-notes-empty, .audit-notes-message {
  min-height: 54px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 11.5px; text-align: center;
}
.audit-notes-message.error { color: #B91C1C; }
.audit-note-item { padding: 9px 0; border-bottom: 1px solid var(--border); }
.audit-note-item:last-child { border-bottom: 0; }
.audit-note-body { color: var(--text); font-size: 12px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.audit-note-references { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.audit-note-reference-link, .audit-note-reference-add {
  border: 1px solid #BFDBFE; border-radius: 99px; background: #EFF6FF; color: #1D4ED8;
  cursor: pointer; padding: 3px 7px; font-family: inherit; font-size: 9.5px; font-weight: 650;
}
.audit-note-reference-link:hover, .audit-note-reference-add:hover { background: #DBEAFE; }
.audit-note-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--faint); font-size: 9.5px; }
.audit-note-author { color: #334155; font-weight: 700; }
.audit-note-actions { margin-left: auto; display: flex; gap: 3px; }
.audit-note-action {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 2px 5px; border-radius: 4px; font: inherit;
}
.audit-note-action:hover { background: var(--bg); color: var(--text); }
.audit-note-action.delete:hover { background: #FEF2F2; color: #B91C1C; }
.audit-note-form { flex-shrink: 0; padding: 10px 14px 12px; border-top: 1px solid var(--border); background: #F8FAFC; }
.audit-note-form-label { display: block; margin-bottom: 5px; color: var(--text); font-size: 10.5px; font-weight: 700; }
.audit-note-form textarea {
  display: block; width: 100%; resize: vertical; min-height: 62px; max-height: 130px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 9px;
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 11.5px; line-height: 1.45;
}
.audit-note-form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.audit-note-reference-editor { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.audit-note-reference-add { flex-shrink: 0; border-radius: var(--radius-sm); }
.audit-note-reference-add:disabled { opacity: .55; cursor: wait; }
.audit-note-reference-help { color: var(--faint); font-size: 9px; line-height: 1.3; }
.audit-note-reference-draft { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.audit-note-reference-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 5px 3px 7px;
  border-radius: 99px; background: #E2E8F0; color: #334155; font-size: 9.5px; font-weight: 600;
}
.audit-note-reference-chip button {
  width: 15px; height: 15px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: #64748B; cursor: pointer; font: 12px/15px Arial, sans-serif;
}
.audit-note-reference-chip button:hover { background: #CBD5E1; color: #0F172A; }
.audit-note-form-footer { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.audit-note-form-status { flex: 1; min-height: 14px; color: #B91C1C; font-size: 10px; }
.audit-note-save, .audit-note-cancel {
  border-radius: var(--radius-sm); padding: 5px 9px; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 600;
}
.audit-note-save { border: 1px solid var(--blue); background: var(--blue); color: white; }
.audit-note-save:disabled { opacity: .55; cursor: wait; }
.audit-note-cancel { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.audit-notes-resize-handle {
  position: absolute; right: 0; bottom: 0; z-index: 3; width: 20px; height: 20px;
  cursor: nwse-resize; touch-action: none;
}
.audit-notes-resize-handle::after {
  content: ''; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px;
  border-right: 2px solid #60A5FA; border-bottom: 2px solid #60A5FA;
}
.audit-notes-resize-handle.top-left { left: 0; top: 0; right: auto; bottom: auto; }
.audit-notes-resize-handle.top-left::after {
  left: 4px; top: 4px; right: auto; bottom: auto;
  border: 0; border-left: 2px solid #60A5FA; border-top: 2px solid #60A5FA;
}

@media (max-width: 980px) {
  .pdf-keyboard-hint { display: none; }
}

@media (max-height: 560px) {
  .audit-notes-drawer { min-height: 180px; }
}

.pdf-scroll {
  flex: 1; overflow: auto; display: flex; flex-direction: column;
  align-items: center; padding: 28px 24px; gap: 16px;
  background: #3D4F68;
}
.pdf-scroll::-webkit-scrollbar { width: 6px; }
.pdf-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.pdf-page-wrap {
  position: relative; background: white;
  box-shadow: 0 6px 32px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.20);
}
.pdf-page-wrap canvas { display: block; }
.pdf-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 48px; color: rgba(255,255,255,0.65); font-size: 13.5px;
}
.spinner {
  width: 28px; height: 28px; border: 2.5px solid rgba(255,255,255,0.2);
  border-top-color: rgba(255,255,255,0.85);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.spinner-sm {
  width: 14px; height: 14px; border: 2px solid rgba(100,116,139,0.25);
  border-top-color: var(--muted); border-radius: 50%; animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ev-strip {
  flex-shrink: 0; background: #FFFBEB;
  border-top: 2px solid #FCD34D; padding: 10px 18px;
  max-height: 150px; overflow: hidden; display: none; flex-direction: column;
}
.ev-strip-hdr { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: #92400E; margin-bottom: 4px; }
.ev-strip-code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #B45309; }
.ev-strip-txt  { min-height: 0; overflow-y: auto; font-size: 12.5px; line-height: 1.55; color: #1C1917; }

/* ═══════════════════════════════════════
   CODE PANEL
═══════════════════════════════════════ */
.code-panel {
  flex: 0 0 40%; display: flex; flex-direction: column; overflow: hidden; background: var(--bg);
}
.cp-header {
  flex-shrink: 0; background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 14px 16px 12px;
}
.cp-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; flex-wrap: wrap; gap: 6px; }
.cp-title { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; letter-spacing: -0.02em; }
.cnt-badge { background: var(--blue); color: white; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }

/* Guideline filter bar */
.gi-filter { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.gi-filter-lbl { font-size: 10.5px; color: var(--muted); font-weight: 600; letter-spacing: 0.2px; }
.gi-ftab {
  padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--muted); white-space: nowrap; transition: all .15s; font-family: inherit;
}
.gi-ftab:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.gi-ftab.active { background: var(--purple); color: white; border-color: var(--purple); font-weight: 600; }

.cp-stats { display: flex; gap: 7px; margin-bottom: 12px; }
.cp-stat {
  flex: 1; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cp-stat-val { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.cp-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; }
.cp-stat.green { border-color: var(--green-bd); background: linear-gradient(160deg, #F0FDF4 0%, #DCFCE7 100%); }
.cp-stat.green .cp-stat-val { color: var(--green); }
.cp-stat.amber { border-color: var(--amber-bd); background: linear-gradient(160deg, #FFFBEB 0%, #FEF3C7 100%); }
.cp-stat.amber .cp-stat-val { color: var(--amber); }
.cp-stat.red   { border-color: var(--red-bd);   background: linear-gradient(160deg, #FFF5F5 0%, #FEF2F2 100%); }
.cp-stat.red   .cp-stat-val { color: var(--red); }

.raf-row {
  display: flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: 12px;
  border: 1px solid rgba(37,99,235,0.18);
}
.raf-lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--blue); white-space: nowrap; }
.raf-bar-wrap { flex: 1; height: 6px; background: rgba(37,99,235,0.15); border-radius: 3px; overflow: hidden; }
.raf-bar-fill { height: 100%; background: linear-gradient(90deg, #3B82F6, #2563EB); border-radius: 3px; transition: width .5s ease; }
.raf-num { font-size: 14px; font-weight: 800; color: var(--blue); white-space: nowrap; letter-spacing: -0.02em; }

.filter-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.ftab {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 500;
  border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--muted); white-space: nowrap; transition: all .15s; font-family: inherit;
}
.ftab:hover { background: var(--bg); color: var(--text); border-color: var(--border); }
.ftab.active { background: var(--blue); color: white; border-color: var(--blue); font-weight: 600;
  box-shadow: 0 1px 6px rgba(37,99,235,0.30); }

/* ── Code list ── */
.code-list {
  flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.code-list::-webkit-scrollbar { width: 4px; }
.code-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.code-list-empty { text-align: center; padding: 36px 16px; font-size: 13.5px; color: var(--muted); }

/* ═══════════════════════════════════════
   CODE CARD
═══════════════════════════════════════ */
.ccard {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--faint);
  cursor: pointer;
  transition: box-shadow .2s, transform .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.ccard:hover  { box-shadow: var(--shadow-md); transform: translateY(-1px); border-color: var(--border-mid); }
.ccard.sel    { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.12), var(--shadow-md); }
.ccard.dim    { opacity: 0.60; }
.ccard.dim:hover { opacity: 1; }

/* verdict left stripe overlay */
.ccard.gi-conflict { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--red); }
.ccard.gi-verify   { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--amber); }
.ccard.gi-aligned  { box-shadow: var(--shadow-sm), inset 3px 0 0 var(--green); }

.cc-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 14px 7px; flex-wrap: wrap;
}
.cc-id { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }

.hcc-pill {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; white-space: nowrap; letter-spacing: 0.1px; flex-shrink: 0;
}
.cc-icd {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13.5px; font-weight: 600;
  background: #F1F5F9; color: var(--text);
  padding: 2px 9px; border-radius: 6px;
  border: 1px solid var(--border); flex-shrink: 0;
}
.sev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sev-high     { background: var(--red); }
.sev-moderate { background: var(--amber); }
.sev-low      { background: var(--green); }

/* Guideline verdict micro-badge in card top-right */
.gi-micro-badge {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0;
}
.gi-micro-badge.conflict { background: var(--red-bg);    color: var(--red);    border: 1px solid var(--red-bd); }
.gi-micro-badge.verify   { background: var(--amber-bg);  color: var(--amber);  border: 1px solid var(--amber-bd); }
.gi-micro-badge.aligned  { background: var(--green-bg);  color: var(--green);  border: 1px solid var(--green-bd); }
.gi-micro-badge.no-data  { background: var(--bg);        color: var(--faint);  border: 1px solid var(--border); }

.cc-conf { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.cc-conf-pct { font-size: 12.5px; font-weight: 700; letter-spacing: -0.02em; min-width: 32px; text-align: right; }
.cc-conf-pct.conf-hi { color: var(--green); }
.cc-conf-pct.conf-md { color: var(--amber); }
.cc-conf-pct.conf-lo { color: var(--red); }
.cc-conf-track { width: 52px; height: 5px; background: var(--border); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.cc-conf-fill  { height: 100%; border-radius: 3px; transition: width .3s; }
.conf-fill-hi  { background: linear-gradient(90deg, #4ADE80, #16A34A); }
.conf-fill-md  { background: linear-gradient(90deg, #FCD34D, #B45309); }
.conf-fill-lo  { background: linear-gradient(90deg, #FCA5A5, #DC2626); }
.cc-unscored,
.oc-unscored {
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: 3px 7px; border-radius: 10px; white-space: nowrap;
}
.oc-unscored { font-size: 10px; padding: 2px 6px; }

.cc-desc {
  font-size: 13.5px; font-weight: 600; color: var(--text);
  line-height: 1.45; letter-spacing: -0.015em;
  padding: 0 14px 8px;
  cursor: pointer; outline: none; border-radius: 6px;
}
.cc-desc:hover { color: #1D4ED8; }
.cc-desc:focus-visible { box-shadow: inset 0 0 0 2px #93C5FD; }

.cc-meta {
  display: flex; align-items: center; gap: 0;
  padding: 0 14px 11px; flex-wrap: wrap;
  cursor: pointer; outline: none; border-radius: 6px;
}
.cc-meta:hover .cc-meta-item { color: var(--text); }
.cc-meta:focus-visible {
  box-shadow: inset 0 0 0 2px #93C5FD;
}
.cc-meta:focus-visible .cc-meta-item { color: var(--text); }
.status-badge {
  font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.25px; flex-shrink: 0;
}
.sb-approved { background: var(--green-bg); color: var(--green); }
.sb-unreviewed { background: #E2E8F0; color: #475569; }
.sb-declined { background: var(--red-bg);   color: var(--red);   }

.cc-meta-sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--border-mid); margin: 0 8px; flex-shrink: 0; }
.cc-meta-item { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }

/* ── Expandable sections ── */
.exp-sect { border-top: 1px solid var(--border); }
.exp-tog {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 9px 14px; background: none; border: none;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer; text-align: left; font-family: inherit;
  transition: background .12s, color .12s; letter-spacing: -0.01em;
}
.exp-tog:hover { background: #F8FAFC; color: var(--text); }
.exp-tog[aria-expanded="true"] { color: var(--text); background: #F8FAFC; }
.exp-sect-icon { flex-shrink: 0; opacity: 0.55; }
.exp-tog:hover .exp-sect-icon,
.exp-tog[aria-expanded="true"] .exp-sect-icon { opacity: 0.9; }
.exp-chev {
  margin-left: auto; flex-shrink: 0; opacity: 0.45;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.exp-chev.rotated { transform: rotate(90deg); }
.exp-body { max-height: 0; overflow: hidden; transition: max-height .26s cubic-bezier(.4,0,.2,1); }
.exp-body.open { max-height: 600px; }

.exp-ev-txt      { font-size: 12px; color: #334155; line-height: 1.65; padding: 11px 14px 14px; border-top: 1px dashed var(--border); background: #FAFAFA; }
.exp-note-txt    { font-size: 12px; line-height: 1.6; padding: 11px 14px 14px; border-top: 1px dashed var(--amber-bd); }
.exp-body--note .exp-note-txt     { background: #FFFBEB; color: #78350F; }
.exp-body--overcod .exp-note-txt  { background: var(--red-bg); color: #7F1D1D; border-top-color: var(--red-bd); }
.exp-reviewer-txt { font-size: 12px; color: #0C4A6E; line-height: 1.6; padding: 11px 14px 14px; background: #F0F9FF; border-top: 1px dashed #BAE6FD; }

.meat-summary { border-top: 1px solid var(--border); padding: 10px 14px 12px; background: #FAFAFA; }
.meat-summary-title { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.meat-boxes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.meat-box {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px;
  min-width: 0; padding: 6px 7px; border-radius: 7px; border: 1px solid var(--border);
  background: #fff; color: var(--faint); cursor: pointer; font-family: inherit; text-align: left;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}
.meat-box:hover, .meat-box:focus-visible { border-color: #94A3B8; outline: none; }
.meat-box.present { border-color: #93C5FD; background: #EFF6FF; color: #1D4ED8; }
.meat-box.present:hover, .meat-box.present:focus-visible { border-color: #60A5FA; background: #E0F2FE; }
.meat-box.present.active { border-color: #2563EB; background: #DBEAFE; box-shadow: 0 0 0 1px #2563EB; }
.meat-box.empty.active { border-color: #94A3B8; background: #F1F5F9; color: #64748B; }
.meat-box-letter { font-size: 11px; font-weight: 800; }
.meat-box-label { overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; font-weight: 600; }
.meat-box-count { font-size: 10px; font-weight: 800; }
.meat-detail-display {
  margin-top: 8px; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 7px; background: #F1F5F9; color: #475569;
}
.meat-detail-display.has-evidence { border-color: #BFDBFE; background: #EFF6FF; color: #1E3A8A; }
.meat-detail-title { margin-bottom: 6px; font-size: 11px; font-weight: 800; }
.meat-detail-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.meat-detail-list li { padding-left: 1px; font-size: 11px; line-height: 1.45; }
.meat-detail-location {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid #93C5FD;
  border-radius: 10px; background: #DBEAFE; color: #1D4ED8; font-family: inherit;
  font-size: 9.5px; font-weight: 700; line-height: 1.35; cursor: pointer;
}
.meat-detail-location:hover { background: #BFDBFE; border-color: #60A5FA; }
.meat-detail-location:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.meat-detail-empty { margin: 0; font-size: 11px; line-height: 1.45; }

.key-insight {
  border-top: 1px solid #BFDBFE;
  padding: 11px 14px 13px;
  background: #EFF6FF;
}
.key-insight-label {
  color: #1D4ED8;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.key-insight-headline {
  margin: 5px 0 0;
  color: #172554;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.5;
}
.key-insight-detail {
  margin: 5px 0 0;
  color: #334155;
  font-size: 11px;
  line-height: 1.55;
}

.exp-tog--note     { color: #92400E; }
.exp-tog--note:hover, .exp-tog--note[aria-expanded="true"] { background: #FFFBEB; }
.exp-tog--overcod  { color: #991B1B; }
.exp-tog--overcod:hover, .exp-tog--overcod[aria-expanded="true"] { background: #FEF2F2; }
.exp-tog--reviewer { color: #0369A1; }
.exp-tog--reviewer:hover, .exp-tog--reviewer[aria-expanded="true"] { background: #F0F9FF; }

/* ── Guideline Insight section ── */
.exp-tog--guideline { color: var(--purple); }
.exp-tog--guideline:hover, .exp-tog--guideline[aria-expanded="true"] { background: #FAF8FF; }
.exp-body--guideline { border-top: 1px dashed var(--purple-bd); background: #FAF8FF; }

.gi-insight-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }

/* Verdict banner */
.gi-verdict-banner {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border-radius: var(--radius-md);
  font-size: 12px; line-height: 1.55;
}
.gi-verdict-banner.conflict { background: var(--red-bg);   border: 1px solid var(--red-bd); }
.gi-verdict-banner.verify   { background: var(--amber-bg); border: 1px solid var(--amber-bd); }
.gi-verdict-banner.aligned  { background: var(--green-bg); border: 1px solid var(--green-bd); }
.gi-verdict-banner.no-data  { background: var(--bg);       border: 1px solid var(--border); }

.gi-verdict-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.gi-verdict-text { flex: 1; }
.gi-verdict-text.conflict { color: #7F1D1D; }
.gi-verdict-text.verify   { color: #78350F; }
.gi-verdict-text.aligned  { color: #14532D; }
.gi-verdict-text.no-data  { color: var(--muted); }

/* Guideline metadata pill */
.gi-meta-pill {
  display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--purple); font-weight: 600;
}
.gi-meta-pill span { color: var(--muted); font-weight: 400; }
.gi-page-ref { color: var(--purple); font-weight: 700; background: var(--purple-bg); padding: 1px 6px; border-radius: 4px; font-size: 10px; }

/* Key points / rules list */
.gi-rules-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--muted); margin-bottom: 4px;
}
.gi-rules-list { display: flex; flex-direction: column; gap: 5px; }
.gi-rule-item {
  font-size: 11.5px; color: #334155; line-height: 1.5;
  padding: 6px 10px;
  background: rgba(255,255,255,0.7);
  border-left: 2px solid var(--purple-bd);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Action row ── */
.cc-actions {
  display: flex; gap: 6px; padding: 9px 13px 12px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, #FAFBFC 0%, #F4F6F8 100%);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.cc-actions.decision-locked { justify-content: flex-end; }
.act {
  flex: 1; padding: 6px 0; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; border: 1.5px solid;
  cursor: pointer; transition: all .15s; text-align: center;
  background: var(--surface); font-family: inherit; letter-spacing: -0.01em;
}
.act.approve { border-color: #86EFAC; color: var(--green); }
.act.approve:hover, .act.approve.on { background: var(--green); color: white; border-color: var(--green); box-shadow: 0 2px 8px rgba(22,163,74,0.30); }
.act.decline { border-color: #FCA5A5; color: var(--red); }
.act.decline:hover, .act.decline.on { background: var(--red); color: white; border-color: var(--red); box-shadow: 0 2px 8px rgba(220,38,38,0.25); }
.act.note { flex: 0 0 34px; width: 34px; padding: 6px 0; border-radius: 20px; border-color: var(--border); color: var(--muted); }
.act.note:hover { background: var(--bg); color: var(--text); }
.act.decision-lock-toggle {
  flex: 0 0 auto; padding: 0; border-radius: 50%;
}
.decision-lock-status { flex: 0 0 auto; cursor: default; }
.decision-lock-control {
  position: relative; width: 30px; height: 30px; padding: 0; border: 1.5px solid;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: visible; transition: background .15s, border-color .15s, color .15s;
}
.decision-lock-control.locked { color: #DC2626; border-color: #FCA5A5; background: #FEF2F2; }
.decision-lock-control.unlocked { color: #16A34A; border-color: transparent; background: transparent; }
.decision-lock-control.locked:hover { color: #B91C1C; border-color: #DC2626; background: #FEE2E2; }
.decision-lock-control.unlocked:hover { color: #15803D; border-color: transparent; background: transparent; }
.decision-lock-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.decision-lock-control::after {
  content: attr(data-lock-tooltip); position: absolute; z-index: 40;
  left: 50%; bottom: calc(100% + 7px); transform: translate(-50%, 3px);
  padding: 4px 7px; border-radius: 5px; background: #0F172A; color: #FFFFFF;
  font: 600 10.5px/1.2 'Inter', system-ui, sans-serif; white-space: nowrap;
  pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}
.decision-lock-control:hover::after,
.decision-lock-control:focus-visible::after {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
}
.act:disabled { cursor: not-allowed; opacity: .58; box-shadow: none; }

/* ═══════════════════════════════════════
   EXCLUDED CODES
═══════════════════════════════════════ */
.excl-section { flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--border); }
.excl-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px 7px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.excl-cnt { background: var(--bg); border: 1px solid var(--border); padding: 1px 8px; border-radius: 20px; font-size: 11px; margin-left: 5px; }
.excl-body { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 10px; overflow: visible; }
.excl-item { padding: 8px 11px; background: var(--bg); border-radius: var(--radius-md); border-left: 3px solid var(--faint); }
.excl-code { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--muted); }
.excl-desc { font-size: 12px; color: var(--muted); margin-left: 6px; }
.excl-rsn  { font-size: 11.5px; color: var(--faint); font-style: italic; margin-top: 3px; line-height: 1.4; }

/* ═══════════════════════════════════════
   MODALS
═══════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,23,42,0.50);
  display: flex; align-items: center; justify-content: center; z-index: 300;
  backdrop-filter: blur(4px);
}
.modal-box {
  background: var(--surface); border-radius: var(--radius-lg); padding: 24px;
  width: 440px; max-width: 92vw;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.modal-box--guide { width: 520px; }
.modal-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em; }
.modal-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 16px; }
.modal-ta {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 12px; font-size: 13px; min-height: 96px; resize: vertical; font-family: inherit;
  outline: none; transition: border-color .15s; line-height: 1.5; color: var(--text);
}
.modal-ta:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.mbtn-cancel {
  background: var(--surface); border: 1px solid var(--border);
  padding: 8px 20px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13.5px; font-weight: 500; font-family: inherit;
  transition: background .13s;
}
.mbtn-cancel:hover { background: var(--bg); }
.mbtn-save {
  background: linear-gradient(135deg, #2563EB, #1D4ED8); color: white; border: none;
  padding: 8px 20px; border-radius: var(--radius-sm);
  cursor: pointer; font-size: 13.5px; font-weight: 600; font-family: inherit;
  transition: opacity .15s; box-shadow: 0 1px 4px rgba(37,99,235,0.3);
}
.mbtn-save:hover:not(:disabled) { opacity: 0.9; }
.mbtn-save:disabled { opacity: 0.35; cursor: not-allowed; }
.mbtn-save--purple { background: linear-gradient(135deg, #7C3AED, #6D28D9); box-shadow: 0 1px 4px rgba(124,58,237,0.3); }

/* Guideline modal upload area */
.modal-guide-upload {
  position: relative; border: 1.5px dashed var(--purple-bd);
  border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  background: var(--purple-bg); cursor: pointer;
  transition: border-color .15s, background .15s;
}
.modal-guide-upload:hover { border-style: solid; background: #EDE9FE; }
.modal-guide-upload.has-file { border-style: solid; border-color: var(--purple); }
.modal-guide-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.modal-guide-icon { font-size: 22px; flex-shrink: 0; }
#modal-guide-fname { font-size: 12.5px; color: var(--purple); font-weight: 500; }

.modal-guide-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }

/* ═══════════════════════════════════════
   DOCUMENT ASSESSMENT BAR
═══════════════════════════════════════ */
.dab {
  flex-shrink: 0;
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 10px 14px;
  font-size: 12px;
  overflow: hidden;
}

.dab-header {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 18px; cursor: pointer; user-select: none;
  transition: background .12s;
}
.dab-header:hover { background: #F8FAFC; }

.dab-section-name {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted); flex-shrink: 0;
}

.dab-verdict-pill {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px;
  border-radius: 20px; flex-shrink: 0; letter-spacing: 0.2px;
  text-transform: uppercase;
}
.dab-verdict-pill.pass  { background: var(--green-bg); color: var(--green);  border: 1px solid var(--green-bd); }
.dab-verdict-pill.fail  { background: var(--red-bg);   color: var(--red);    border: 1px solid var(--red-bd);   }
.dab-verdict-pill.mixed { background: var(--amber-bg); color: var(--amber);  border: 1px solid var(--amber-bd); }

.dab-summary {
  flex: 1; font-size: 11.5px; color: var(--muted); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.dab-counts { display: flex; gap: 5px; flex-shrink: 0; }
.dab-cnt {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
}
.dab-cnt.error { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-bd); }
.dab-cnt.warn  { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bd); }

.dab-chev { font-size: 10px; color: var(--faint); flex-shrink: 0; }

.dab-body {
  display: none;
  border-top: 1px solid var(--border);
  max-height: 320px; overflow-y: auto;
}
.dab-body.open { display: block; }

/* ── Checklist inside dab-body ── */
.dab-checklist { display: flex; flex-direction: column; }

.dab-check-hdr {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--muted);
  padding: 6px 14px 4px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  position: sticky; top: 0;
}
.dab-checklist > .dab-check-hdr:first-child { border-top: none; }

.dab-check-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 14px 8px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.dab-check-row:last-child { border-bottom: none; }
.dab-check-row.pass { background: #FAFFFD; }
.dab-check-row.fail { background: #FFF8F8; }
.dab-check-row.warn { background: #FFFDF5; }

.dab-ci-icon {
  font-size: 13px; font-weight: 800; flex-shrink: 0;
  width: 18px; text-align: center; margin-top: 1px; line-height: 1;
}
.dab-check-row.pass .dab-ci-icon { color: var(--green); }
.dab-check-row.fail .dab-ci-icon { color: var(--red); }
.dab-check-row.warn .dab-ci-icon { color: var(--amber); }

.dab-ci-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dab-ci-label {
  font-size: 12px; font-weight: 600; line-height: 1.4;
  color: var(--text);
}
.dab-check-row.fail .dab-ci-label { color: #7F1D1D; }
.dab-check-row.warn .dab-ci-label { color: #78350F; }
.dab-ci-note {
  font-size: 10.5px; color: var(--muted); line-height: 1.4;
}

/* ── Source check badge on annotation cards ── */
.src-badge {
  font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0;
}
.src-badge.bad { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-bd); }
.src-badge.lab { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-bd); }

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
#toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 500;
  background: #0F172A; color: #F8FAFC;
  padding: 10px 18px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  box-shadow: 0 6px 24px rgba(0,0,0,0.28);
  transition: opacity .25s, transform .25s; pointer-events: none;
}
#toast.hide { opacity: 0; transform: translateY(4px); }

/* ═══════════════════════════════════════
   SCROLLBARS
═══════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ═══════════════════════════════════════
   COMPACT CARDS — toggleable detail panel
═══════════════════════════════════════ */

/* Group conf bar + expand toggle on the right side of cc-top */
.cc-top-right {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Per-card expand/collapse toggle button */
.card-tog {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--border); border-radius: 5px;
  cursor: pointer; color: var(--muted);
  transition: background .12s, color .12s, border-color .12s;
}
.card-tog:hover { background: var(--bg); color: var(--text); border-color: var(--border-mid); }
.ccard.card-open .card-tog { color: var(--text); border-color: var(--border-mid); background: var(--bg); }
.card-tog-chev { transition: transform .2s cubic-bezier(.4,0,.2,1); flex-shrink: 0; }
.ccard.card-open .card-tog-chev { transform: rotate(90deg); }

/* Detail panel — hidden until card-open */
.card-detail { display: none; }
.ccard.card-open .card-detail { display: block; }

/* Expand All button in section header */
/* ═══════════════════════════════════════
   IN OTHER CHARTS
═══════════════════════════════════════ */
.exp-tog--oc { color: #0891B2; }
.exp-tog--oc:hover, .exp-tog--oc[aria-expanded="true"] { background: #F0FDFF; }

.exp-body--oc {
  border-top: 1px dashed #BAE6FD; background: #F0F9FF;
  max-height: 0; overflow: hidden;
  transition: max-height .26s cubic-bezier(.4,0,.2,1);
}
.exp-body--oc.open { max-height: 500px; }

.oc-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #0891B2; color: white;
  font-size: 10px; font-weight: 700;
  border-radius: 9px; margin-left: 4px; flex-shrink: 0;
}

.oc-list { display: flex; flex-direction: column; }

.oc-item { border-bottom: 1px solid #BAE6FD; }
.oc-item:last-child { border-bottom: none; }

.oc-tog {
  width: 100%; display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: none; border: none;
  cursor: pointer; font-size: 12px; font-weight: 500;
  color: #0C4A6E; transition: background .12s;
}
.oc-tog:hover { background: #E0F2FE; }
.oc-tog[aria-expanded="true"] { background: #E0F2FE; }

.oc-label { flex: 1; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }

.oc-badges {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0; margin-left: auto; margin-right: 4px;
}

.exp-body--oc-item {
  max-height: 0; overflow: hidden;
  transition: max-height .22s cubic-bezier(.4,0,.2,1);
}
.exp-body--oc-item.open { max-height: 280px; }