/* ============================================================
   Ceresity Demo — Shared Stylesheet
   All screens should link this file so styling stays consistent.
   Design tokens live in :root — change a color once, everywhere updates.
   ============================================================ */

:root{
  --page:#f7f9ff; --white:#ffffff; --stroke:#e9eaef; --green:#00e185;
  --text-dark:#0d2137; --text-light:#727d9c; --title:#232323; --muted:#64748b;
  --crumb:#bbbbbb; --btn-bg:#f4f5fb; --btn-text:#454567;
  --section-bg:#f7f9fa; --section-num:rgba(58,152,169,0.4);
  --sug-tag-bg:rgba(0,225,133,0.05); --sug-tag-text:#3a98a9;
  --y50:#fefce8; --y200:#fef08a; --y400:#facc15; --y600:#ca8a04;
  --badge-bg:#eafff6; --index-active:rgba(221,246,236,0.28);
  --hl-rest:#fefce8; --hl-hover:#FEF08A;
  --teal:#2e8a9c;
  --bot-grad:linear-gradient(140deg,#10D98C 0%, #1FC2C6 52%, #4FA3FF 100%);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scroll-behavior:smooth; }
body{ font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--page); color:var(--title); -webkit-font-smoothing:antialiased; }
.app{ width:1440px; margin:0 auto; padding:10px; }
.stack{ display:flex; flex-direction:column; gap:8px; }
svg{ display:block; }
.anchor{ scroll-margin-top:16px; }

/* ---------- Top card ---------- */
.topcard{ background:var(--white); border-radius:12px; padding:17px 19px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.title-area{ display:flex; flex-direction:column; gap:9px; }
.title{ font-size:20px; font-weight:800; color:var(--title); }
.breadcrumb{ font-size:14px; font-weight:600; color:var(--crumb); }
.breadcrumb .u{ text-decoration:underline; } .breadcrumb .i{ font-style:italic; }
.actions{ display:flex; align-items:center; gap:10px; }
.iconbtn,.textbtn,.primarybtn{ height:32px; border:none; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px; padding:8px 12px;
  font-family:inherit; font-size:14px; font-weight:600; white-space:nowrap; }
.iconbtn,.textbtn{ background:var(--btn-bg); color:var(--btn-text); }
.iconbtn svg,.textbtn svg{ color:var(--btn-text); }
.iconbtn{ width:44px; } .iconbtn svg{ width:20px; height:20px; } .textbtn svg{ width:16px; height:16px; }
.primarybtn{ background:var(--green); color:#fff; } .primarybtn svg{ width:16px; height:16px; color:#fff; }

/* ---------- Main card ---------- */
.maincard{ background:var(--white); border-radius:8px; padding:16px; display:flex; flex-direction:column; gap:24px; }
.tabs-wrap{ padding:0 8px; }
.tabs{ display:flex; align-items:center; border-bottom:1px solid var(--stroke); overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{ display:flex; align-items:center; gap:10px; height:56px; padding:22px 14px; cursor:pointer;
  flex:0 0 auto; white-space:nowrap; }
.tab svg{ width:24px; height:24px; } .tab .lbl{ font-size:16px; }
.tab.active{ border-bottom:2px solid var(--green); color:#040b15; }
.tab.active .lbl{ font-weight:600; } .tab.active svg{ color:#040b15; }
.tab:not(.active){ color:var(--text-light); } .tab:not(.active) .lbl{ font-weight:400; }

/* While a trace root is set, tabs that hold something for it carry a small
   dot. Deliberately quiet — it points at where to look next without
   competing with the active-tab underline. */
.tab{ position:relative; }
.tab.has-root-data::after{ content:""; position:absolute; top:14px; right:9px; width:5px; height:5px;
  border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(0,225,133,0.16); }
.tab.has-root-data:not(.active){ color:var(--text-dark); }
.tab.has-root-data:not(.active) .lbl{ font-weight:500; }
/* the dot is the marker on the active tab too, just dimmer — the underline
   already says "you are here" */
.tab.has-root-data.active::after{ background:#0d8a5f; box-shadow:none; opacity:.55; }
.tab:not(.active) svg{ color:var(--text-light); }

.stats{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; }
.stats-left{ display:flex; gap:8px; } .stats-right{ display:flex; gap:10px; align-items:center; }

/* Burden scores reuse the .statcard look so they read as siblings of the
   Similar Trials / Relevant Documents cards rather than a separate widget. */
.soa-burden-bar{ display:flex; gap:8px; margin-bottom:16px; }
.soa-burden-bar .statcard{ flex:0 1 275px; }
.statcard{ background:var(--white); border:1px solid var(--stroke); border-radius:12px;
  padding:8px 12px; display:flex; align-items:center; justify-content:center; }
.statcard.w275{ width:275px; } .statcard.clickable{ cursor:pointer; user-select:none; }
.statcard.clickable:hover{ border-color:#cfd3e0; }
.statcard.toggled{ border-color:var(--green); background:rgba(0,225,133,0.05); }
.stats-right .statcard{ width:156px; justify-content:flex-start; }
.stat-row{ display:flex; align-items:center; justify-content:space-between; height:28px; width:100%; }
.stat-label{ font-size:14px; font-weight:600; color:var(--text-light); white-space:nowrap; }
.stat-right{ display:flex; align-items:center; gap:8px; }
.stat-num{ color:var(--text-dark); font-weight:600; }
.stat-num .big{ font-size:20px; } .stat-num .small{ font-size:12px; letter-spacing:0.18px; }
.stat-edit,.stat-info{ width:18px; height:18px; color:var(--green); cursor:pointer; }
.stat-inline{ display:flex; align-items:center; gap:12px; white-space:nowrap; }
.funnel{ width:24px; height:24px; color:var(--text-light); }
.checkbox{ width:16px; height:16px; min-width:16px; background:var(--white); border:1px solid #cbd5e1;
  border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,0.05); display:flex; align-items:center; justify-content:center; }
.checkbox svg{ width:10px; height:10px; color:#fff; opacity:0; }
.checkbox.checked{ background:var(--green); border-color:var(--green); } .checkbox.checked svg{ opacity:1; }

/* ---------- Content row ---------- */
.content{ display:flex; gap:16px; align-items:stretch; position:relative; }

/* left index */
.index{ flex:0 0 244px; width:244px; background:var(--white); border:1px solid var(--stroke);
  border-radius:16px; padding:8px; display:flex; flex-direction:column; gap:2px; align-self:flex-start; }
.index-head{ display:flex; align-items:center; justify-content:space-between; padding:8px 8px 6px; }
.index-head .h{ font-size:14px; font-weight:600; color:var(--text-dark); }
.index-toggle{ width:24px; height:24px; color:var(--text-light); cursor:pointer; background:none; border:none; padding:0;
  display:flex; align-items:center; justify-content:center; border-radius:6px; }
.index-toggle:hover{ background:#f4f5fb; color:var(--text-dark); }
.index-divider{ height:1px; background:var(--stroke); width:100%; margin-bottom:4px; }
.index-item{ display:flex; align-items:center; justify-content:space-between; min-height:40px;
  padding:8px 8px 8px 10px; border-radius:8px; cursor:pointer; position:relative; }
.index-item:hover{ background:#f6f8fb; }
.index-item .left{ display:flex; gap:10px; align-items:center; min-width:0; }
.index-item .num{ font-size:12px; font-weight:700; letter-spacing:0.18px; color:var(--text-light);
  width:16px; flex:0 0 16px; text-align:center; }
.index-item .name{ font-size:14px; font-weight:500; color:var(--text-dark); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.index-item .right{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.index-item .badge{ background:var(--badge-bg); border:0.6px solid rgba(0,225,133,0.18); border-radius:7px;
  min-width:22px; text-align:center; padding:2px 7px; font-size:12px; font-weight:600; color:var(--green); }
.index-item .caret{ width:16px; height:16px; color:var(--text-light); transform:rotate(-90deg); transition:transform .2s ease; }
.index-item.open .caret{ transform:rotate(0deg); }
.index-item.active{ background:var(--index-active); box-shadow:inset 2px 0 0 var(--green); }
.index-item.active .num{ color:var(--green); } .index-item.active .name{ color:var(--green); font-weight:600; }
.subs{ display:none; flex-direction:column; gap:1px; padding:2px 0 6px; }
.subs.open{ display:flex; }
.sub-item{ font-size:13px; font-weight:500; color:var(--text-light); padding:7px 8px 7px 36px;
  border-radius:8px; cursor:pointer; position:relative; }
.sub-item:hover{ background:#f6f8fb; color:var(--text-dark); }
.sub-item::before{ content:""; position:absolute; left:22px; top:50%; width:5px; height:5px; border-radius:50%;
  background:#cbd5e1; transform:translateY(-50%); }
.sub-item.active{ color:var(--green); background:var(--index-active); } .sub-item.active::before{ background:var(--green); }

.index-rail{ display:none; flex:0 0 46px; width:46px; align-self:flex-start; background:var(--white);
  border:1px solid var(--stroke); border-radius:16px; padding:10px 0; flex-direction:column; align-items:center; gap:10px; }
.index-rail button{ background:none; border:none; cursor:pointer; color:var(--text-light); padding:6px; border-radius:6px; }
.index-rail button:hover{ background:#f4f5fb; } .index-rail svg{ width:20px; height:20px; }
.rail-nums{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:6px; }
.rail-num{ width:30px; height:30px; border-radius:8px; font-family:inherit; font-size:12px; font-weight:700;
  letter-spacing:0.3px; color:var(--text-light)!important; display:flex; align-items:center; justify-content:center; }
.rail-num:hover{ background:var(--index-active)!important; color:var(--green)!important; }
.content.collapsed .index{ display:none; } .content.collapsed .index-rail{ display:flex; }

/* middle document */
.doc{ flex:1 1 auto; min-width:0; border:1px solid var(--stroke); border-radius:16px; padding:27px;
  display:flex; flex-direction:column; gap:24px; }
.doc-section{ display:flex; flex-direction:column; gap:24px; }
.doc-title{ font-size:16px; font-weight:700; color:var(--title); line-height:1.35; }
.doc-head{ display:flex; flex-direction:column; gap:6px; }
.phase-meta{ font-size:12px; font-weight:500; color:var(--text-light); letter-spacing:0.2px; }
.sec-head{ background:var(--section-bg); border-radius:8px; padding:12px 17px; display:flex; align-items:center; justify-content:space-between; }
.sec-head .label{ display:flex; gap:8px; align-items:center; font-size:16px; font-weight:700; }
.sec-head .num{ color:var(--section-num); } .sec-head .name{ color:var(--title); }
.sug-count{ background:var(--sug-tag-bg); border-radius:8px; padding:6px 14px; font-size:14px; font-weight:600;
  color:var(--sug-tag-text); cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px; }
.sug-count:hover{ background:rgba(0,225,133,0.12); }
.sug-count svg{ width:14px; height:14px; }
.para-wrap{ padding:0 16px; }
.para{ font-size:14px; font-weight:400; line-height:21px; color:var(--muted); text-align:justify; }
.show-more{ color:var(--green); font-weight:600; text-decoration:underline; cursor:pointer; }
.sub-block{ padding:0 16px; display:flex; flex-direction:column; gap:24px; }
.sub-head{ font-size:16px; font-weight:600; color:var(--text-dark); }
.sub-divider{ height:1px; background:var(--stroke); width:100%; }
.index-item .badge.empty{ background:#f1f3f8; border-color:#e6e9f0; color:#9aa3b6; }
.empty-state{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:44px 24px;
  border:1px dashed var(--stroke); border-radius:14px; background:#fcfdff; }
.empty-ic{ width:60px; height:60px; border-radius:50%; background:#f3f6fb; display:flex; align-items:center; justify-content:center; color:#b6c0d2; margin-bottom:4px; }
.empty-ic svg{ width:28px; height:28px; }
.empty-t{ font-size:15px; font-weight:700; color:var(--text-dark); }
.empty-s{ font-size:13px; line-height:20px; color:var(--text-light); max-width:380px; }

/* flags — phrase-level highlights are ALWAYS visible (default unchecked state) */
.flag{ border-radius:4px; padding:1px 2px; background:var(--hl-rest); cursor:pointer;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; transition:background .15s ease, color .15s ease; }
.flag.flag-active{ background:var(--hl-hover)!important; color:#000!important; }

/* section-level flag (whole sub-section is the finding, e.g. Exclusion Criteria) */
.flag-section{ position:relative; border-radius:10px; transition:background .15s ease, box-shadow .15s ease; cursor:pointer; }
.flag-section > .sub-head{ display:inline-block; background:var(--hl-rest); border-radius:4px; padding:2px 6px; transition:background .15s ease; }
.flag-section.flag-active{ background:rgba(254,240,138,0.28); box-shadow:inset 3px 0 0 var(--y400); }
.flag-section.flag-active > .sub-head{ background:var(--hl-hover); color:#000; }

/* findings-only (CHECKED) view: keep sections, show flagged items only */
.content.findings-on .doc-section:not(:has(.flag, .flag-section)){ display:none; }
.content.findings-on .sub-block:not(:has(.flag)):not(.flag-section){ display:none; }
.content.findings-on .sub-divider{ display:none; }
.content.findings-on .para:not(.has-flag){ display:none; }
.content.findings-on .has-flag .ctx{ display:none; }
.content.findings-on .incl-list .incl-intro{ display:none; }
.content.findings-on .incl-list li:not(.has-flag){ display:none; }
.content.findings-on .incl-list li.has-flag .ctx{ display:none; }
.content.findings-on .incl-list ol{ gap:14px; }
.content.findings-on .incl-list li::before{ display:none; }
.content.findings-on .incl-list li.has-flag{ padding-left:0; }
.content.findings-on .flag-section .excl-list{ display:none; }   /* condensed: show only the section head */

.incl-list{ padding:0 16px; }
.incl-intro{ font-size:14px; line-height:21px; color:var(--muted); margin-bottom:14px; }
.incl-list ol{ list-style:none; counter-reset:incl; display:flex; flex-direction:column; gap:10px; padding-left:0; }
.incl-list li{ counter-increment:incl; font-size:14px; line-height:21px; color:var(--muted); text-align:justify;
  position:relative; padding-left:30px; }
.incl-list li::before{ content:counter(incl) "."; position:absolute; left:0; top:0; width:22px; text-align:right;
  font-weight:600; color:var(--text-dark); }

/* ---------- Right column ---------- */
.suggestcol{ flex:0 0 339px; width:339px; position:relative; }
.hint{ position:absolute; top:380px; left:0; width:339px; text-align:center; font-size:13px; color:#c4cbd9;
  font-weight:500; padding:0 24px; line-height:1.5; transition:opacity .2s ease; pointer-events:none; }

/* hover suggestion card */
.suggestion-card{ position:absolute; top:380px; left:0; width:339px; background:var(--white);
  border:1px solid rgba(0,225,133,0.49); border-radius:12px; overflow:hidden; box-shadow:0 0 0 3px rgba(0,225,133,0.08);
  display:flex; flex-direction:column; gap:12px; padding-bottom:16px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(4px); transition:opacity .15s ease, transform .15s ease; z-index:5; }
.suggestion-card.show{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); }
.sug-header{ background:rgba(0,225,133,0.03); border-bottom:1px solid rgba(0,225,133,0.16); padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; min-height:41px; }
.sug-h-left{ display:flex; align-items:center; gap:8px; }
.sug-header svg.spark{ width:18px; height:18px; color:var(--green); }
.sug-header .t{ font-size:14px; font-weight:600; color:var(--green); }
.sug-pager{ display:flex; align-items:center; gap:8px; }
.pager-label{ font-size:13px; font-weight:600; color:var(--text-light); }
.pager-btn{ width:28px; height:28px; border-radius:50%; border:1px solid var(--stroke); background:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--text-light); padding:0; }
.pager-btn:hover{ background:#f4f5fb; color:var(--text-dark); }
.pager-btn svg{ width:14px; height:14px; }
.sug-body{ padding:0 16px; font-size:14px; line-height:21px; color:#000; }
.sug-row{ padding:0 16px; display:flex; align-items:center; justify-content:space-between; }
.pill-yellow{ background:var(--y50); border:0.5px solid var(--y200); border-radius:34px; padding:3px 10px;
  font-size:10px; font-weight:500; color:var(--y600); letter-spacing:0.15px; white-space:nowrap; }
.view-details{ display:flex; align-items:center; gap:4px; cursor:pointer; text-decoration:none; }
.view-details .vd{ font-size:11px; font-weight:600; color:var(--green); text-decoration:underline; }
.view-details svg{ width:14px; height:14px; color:var(--green); }
.sug-divider{ height:1px; background:#e7e9f0; margin:0 16px; }
.sug-tags{ padding:0 16px; display:flex; flex-direction:column; gap:8px; }
.sug-tags .affects{ font-size:10px; font-weight:500; color:var(--text-dark); letter-spacing:0.15px; }
.sug-tags .pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ border-radius:34px; padding:4px 12px; font-size:12px; letter-spacing:0.18px; white-space:nowrap; }
.pill.green{ background:var(--green); color:#fff; font-weight:600; }
.pill.outline{ border:1px solid #ebf0ee; color:var(--text-light); font-weight:500; }
.pill.link{ cursor:pointer; } .pill.link:hover{ border-color:var(--green); color:var(--green); }
/* interlinking source note */
.sug-source{ margin:0 16px; background:#f5f7fa; border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.sug-source p{ font-size:13px; line-height:19px; color:var(--text-light); }
.sug-source a{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--teal);
  text-decoration:underline; cursor:pointer; }
.sug-source a svg{ width:14px; height:14px; }

/* ---------- side panels (suggestions list / filters) ---------- */
.side-panel{ position:sticky; top:14px; width:339px; background:var(--white); border:1px solid var(--stroke);
  border-radius:14px; display:none; flex-direction:column; max-height:calc(100vh - 28px); overflow:hidden; }
.side-panel.show{ display:flex; }
.panel-head{ display:flex; align-items:flex-start; justify-content:space-between; padding:16px; border-bottom:1px solid var(--stroke); }
.panel-title{ display:flex; flex-direction:column; gap:2px; }
.panel-title .pt{ font-size:16px; font-weight:700; color:var(--title); }
.panel-title .ps{ font-size:12px; font-weight:600; color:#7c83ff; }
.panel-close{ width:30px; height:30px; border:none; background:none; cursor:pointer; color:var(--text-light);
  display:flex; align-items:center; justify-content:center; border-radius:8px; }
.panel-close:hover{ background:#f4f5fb; color:var(--text-dark); } .panel-close svg{ width:20px; height:20px; }
.panel-scroll{ padding:16px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; }

/* gray list cards */
.lc{ flex:0 0 auto; background:#fcfcfd; border:1px solid #ededf2; border-radius:14px; overflow:hidden; display:flex; flex-direction:column;
  gap:12px; padding-bottom:14px; cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; }
.lc .lc-h{ background:#f7f8fa; border-bottom:1px solid #f0f1f5; padding:11px 14px; display:flex; align-items:center; gap:8px; }
.lc .lc-h svg{ width:17px; height:17px; color:#aab2c4; } .lc .lc-h .t{ font-size:14px; font-weight:600; color:#9aa3b6; }
.lc .lc-body{ padding:0 14px; font-size:13px; line-height:20px; color:#41495a; }
.lc .lc-row{ padding:2px 14px 0; display:flex; align-items:center; justify-content:space-between; }
.lc .pill-yellow{ background:#f6f7f9; border-color:#e6e8ee; color:#8a93a6; }
.lc .view-details .vd{ color:#8a93a6; } .lc .view-details svg{ color:#8a93a6; }
.lc.active{ background:#fff; border-color:rgba(0,225,133,0.5); box-shadow:0 0 0 3px rgba(0,225,133,0.08); }
.lc.active .lc-h{ background:rgba(0,225,133,0.03); border-bottom-color:rgba(0,225,133,0.16); }
.lc.active .lc-h svg{ color:var(--green); } .lc.active .lc-h .t{ color:var(--green); }
.lc.active .lc-body{ color:#000; }
.lc.active .pill-yellow{ background:var(--y50); border-color:var(--y200); color:var(--y600); }
.lc.active .view-details .vd{ color:var(--green); } .lc.active .view-details svg{ color:var(--green); }

/* information panel — opened by the "i" leg of any trace widget */
.panel-scroll .info-sec{ display:flex; flex-direction:column; gap:8px; }
.info-sec-h{ font-size:10px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; color:#9aa3b6; }
.info-text{ font-size:13px; line-height:19px; color:var(--text-dark); }
.info-note{ font-size:12px; line-height:18px; color:var(--text-light); font-style:italic; }
.info-kv{ display:grid; grid-template-columns:minmax(74px,96px) 1fr; gap:10px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid #f1f3f8; }
.info-sec .info-kv:last-child{ border-bottom:none; }
.info-kv .k{ font-size:11px; font-weight:600; color:var(--text-light); }
.info-kv .v{ font-size:12.5px; line-height:18px; color:var(--text-dark); word-break:break-word; }
.info-kv .v b{ font-weight:700; }
.info-mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; color:var(--btn-text);
  background:var(--btn-bg); border:1px solid var(--stroke); border-radius:4px; padding:1px 6px; }
.info-path{ display:block; margin-top:3px; font-size:10.5px; line-height:15px; color:#9aa3b6; }
.info-chips{ display:inline-flex; flex-wrap:wrap; gap:5px; }
.info-chip{ font-size:10.5px; font-weight:600; color:var(--sug-tag-text); background:var(--sug-tag-bg);
  border:0.6px solid rgba(0,225,133,0.22); border-radius:6px; padding:2px 7px; }
.info-none{ font-size:12px; color:#aab2c4; font-style:italic; }
.info-root-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%;
  border:1px solid rgba(0,225,133,0.35); background:var(--badge-bg); color:#0d8a5f; border-radius:9px;
  padding:9px 12px; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s, border-color .15s; }
.info-root-btn:hover{ background:#d7fbec; }
.info-root-btn svg{ width:14px; height:14px; }

/* filters panel */
.filters-body{ padding:16px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
.filters-sec{ display:flex; flex-direction:column; gap:10px; }
.filters-sec.bordered{ border-top:1px solid var(--stroke); padding-top:16px; }
.filters-label{ font-size:14px; font-weight:600; color:var(--title); }
.country-field{ position:relative; }
.country-select{ border:1px solid var(--stroke); border-radius:8px; padding:8px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; cursor:pointer; }
.country-select .ph{ font-size:14px; font-weight:400; color:var(--text-light); }
.country-chip{ background:#f1f3f8; border-radius:6px; padding:4px 9px; font-size:14px; font-weight:400; color:var(--text-dark); display:flex; align-items:center; gap:6px; }
.country-chip svg{ width:12px; height:12px; color:var(--text-light); cursor:pointer; }
.country-select .chev{ margin-left:auto; width:18px; height:18px; color:var(--text-light); transition:transform .2s ease; }
.country-field.open .chev{ transform:rotate(180deg); }
.country-menu{ display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); background:#fff; border:1px solid var(--stroke);
  border-radius:8px; box-shadow:0 8px 24px rgba(20,40,80,0.1); padding:6px; z-index:5; max-height:220px; overflow-y:auto; }
.country-field.open .country-menu{ display:block; }
.country-opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:14px; font-weight:400; color:var(--text-dark); }
.country-opt:hover{ background:#f6f8fb; }
.fcheck{ display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; font-weight:400; color:var(--text-dark); }
/* the Display section — Findings only moved here from the toggle above the tabs */
.filters-help{ font-size:11.5px; line-height:17px; color:var(--text-light); padding-left:26px; margin-top:-4px; }
#filterFindings,#sapFilterFindings{ font-weight:500; }
/* a filter that changes the document is echoed on the Filter by card */
.statcard.has-filter{ border-color:rgba(0,225,133,0.5); background:rgba(0,225,133,0.05); }
.statcard.has-filter .stat-label{ color:#0d8a5f; font-weight:600; }
.statcard.has-filter .funnel{ color:var(--green); }
.filters-footer{ display:flex; gap:10px; padding:16px; border-top:1px solid var(--stroke); }
.filters-footer button{ flex:1; height:44px; border-radius:10px; border:none; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600; }
.btn-reset{ background:#f1f3f8; color:var(--text-dark); } .btn-apply{ background:var(--green); color:#fff; }

/* ---------- Evidence overlay (Top Evidence — single column) ---------- */
.evidence-overlay{ position:fixed; inset:0; background:var(--page); z-index:50; overflow-y:auto; display:none; }
.evidence-overlay.show{ display:block; }
.ev-wrap{ width:1440px; margin:0 auto; padding:10px 10px 90px; display:flex; flex-direction:column; gap:8px; }
.ev-topcard{ background:#fff; border-radius:12px; padding:17px 19px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ev-left{ display:flex; align-items:center; gap:14px; }
.ev-back{ width:40px; height:40px; border-radius:10px; background:var(--btn-bg); color:var(--btn-text); border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center; }
.ev-back:hover{ background:#e9ebf4; } .ev-back svg{ width:20px; height:20px; }

.ev-card{ background:#fff; border:1px solid var(--stroke); border-radius:12px; overflow:hidden; }
.ev-card-head{ background:#f8fafb; border-bottom:1px solid #eef1f4; padding:13px 18px; display:flex; align-items:center; gap:10px; }
.ev-card-head svg{ width:18px; height:18px; color:#8b97aa; }
.ev-card-head .lbl{ font-size:13px; font-weight:600; letter-spacing:1.1px; color:#7a879a; text-transform:uppercase; }
.ev-card-head.green{ background:rgba(0,225,133,0.04); border-bottom-color:rgba(0,225,133,0.14); }
.ev-card-head.green svg{ color:var(--green); } .ev-card-head.green .lbl{ color:var(--green); }
.ev-card-body{ padding:18px; }
.ev-extract{ background:var(--y200); border-radius:4px; padding:2px 4px; font-size:15px; line-height:26px; color:#1c2433;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.ev-text{ font-size:15px; line-height:24px; color:#232323; }
.ev-proposed{ margin:0; padding-left:20px; }
.ev-proposed li{ margin:0 0 8px; font-size:15px; line-height:24px; color:#232323; }
.ev-proposed li:last-child{ margin-bottom:0; }
.ev-checks{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.ev-check{ display:inline-flex; align-items:flex-start; gap:10px; border-radius:10px; padding:9px 14px; font-size:15px; line-height:22px; max-width:100%; }
.ev-check svg{ width:18px; height:18px; flex:0 0 18px; margin-top:1px; }
.ev-check.ok{ background:rgba(0,225,133,0.09); color:#1c2433; } .ev-check.ok svg{ color:var(--green); }
.ev-check.bad{ background:#fdeded; color:#1c2433; } .ev-check.bad svg{ color:#ef4444; }
.ev-check.na{ background:#f3f4f7; color:#6b7280; } .ev-check.na svg{ color:#9aa3b3; }
.ev-srcs{ display:flex; flex-direction:column; gap:14px; }
.ev-group{ border:1px solid var(--stroke); border-radius:12px; overflow:hidden; }
.ev-group-head{ padding:12px 16px; display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none; }
.ev-pill{ background:var(--teal); color:#fff; border-radius:20px; padding:5px 12px; font-size:12px; font-weight:600; white-space:nowrap; }
.ev-count{ font-size:13px; color:var(--text-light); }
.ev-group-head .gchev{ margin-left:auto; width:18px; height:18px; color:var(--teal); transition:transform .2s ease; }
.ev-group.collapsed .gchev{ transform:rotate(180deg); }
.ev-group-body{ padding:0 16px 16px; display:flex; flex-direction:column; gap:12px; }
.ev-group.collapsed .ev-group-body{ display:none; }
.ev-item{ background:#f8fafb; border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.ev-item .it{ font-size:14px; font-weight:600; color:var(--title); line-height:20px; }
.ev-item .id{ font-size:13px; line-height:20px; color:var(--text-light); }
.ev-page{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--teal); text-decoration:underline; cursor:pointer; }
.ev-page svg{ width:14px; height:14px; }
.ev-ask{ display:flex; align-items:center; gap:16px; padding:16px 18px; border:1.5px solid transparent; border-radius:14px;
  background:
    linear-gradient(120deg,#f6fcfa 0%, #eef4fd 60%, #f5f1fc 100%) padding-box,
    linear-gradient(135deg,#00E185 0%, #28C9C0 50%, #5AA8FF 100%) border-box; }
.ev-ask-ava{ width:46px; height:46px; border-radius:50%; background:var(--bot-grad); display:flex; align-items:center; justify-content:center; flex:0 0 46px; }
.ev-ask-ava svg{ width:24px; height:24px; color:#fff; }
.ev-ask-txt{ flex:1; min-width:0; }
.ev-ask-txt .t{ font-size:15px; font-weight:700; color:#1c2433; }
.ev-ask-txt .s{ font-size:13px; color:#6b7a90; line-height:19px; margin-top:3px; }
.ev-research{ flex:0 0 auto; background:var(--green); color:#fff; border:none; border-radius:12px;
  height:46px; padding:0 22px; font-family:inherit; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:10px; }
.ev-research:hover{ filter:brightness(0.97); }
.ev-research svg{ width:18px; height:18px; }

/* ---------- Ceresity Bot chatbot ---------- */
.chatbot{ position:fixed; top:16px; right:16px; bottom:16px; width:430px;
  border:1.5px solid transparent; border-radius:26px;
  background:
    linear-gradient(165deg,#f6fcfa 0%, #eef4fd 52%, #f5f1fc 100%) padding-box,
    linear-gradient(140deg,#00E185 0%, #28C9C0 45%, #5AA8FF 100%) border-box;
  display:none; flex-direction:column; z-index:70; overflow:hidden; }
.evidence-overlay.chat-open .chatbot{ display:flex; }
.evidence-overlay.chat-open .ev-wrap{ width:auto; margin:0 462px 0 0; padding:10px 28px 40px; }
.cb-head{ display:flex; align-items:center; gap:12px; padding:18px; border-bottom:1px solid rgba(20,40,80,0.06); }
.cb-ava{ width:42px; height:42px; border-radius:50%; background:var(--bot-grad); display:flex; align-items:center; justify-content:center; position:relative; flex:0 0 42px; }
.cb-ava svg{ width:21px; height:21px; color:#fff; }
.cb-ava .dot{ position:absolute; right:0; top:0; width:11px; height:11px; border-radius:50%; background:#22c55e; border:2px solid #fff; }
.cb-title{ flex:1; min-width:0; } .cb-title .n{ font-size:16px; font-weight:700; color:#1c2433; } .cb-title .s{ font-size:13px; color:#7a879a; }
.hbtns{ display:flex; align-items:center; gap:6px; }
.cb-ic{ width:36px; height:36px; border-radius:50%; border:none; background:transparent; color:#46566f; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cb-ic:hover{ background:rgba(20,40,80,0.06); } .cb-ic svg{ width:18px; height:18px; } .cb-ic.close{ border:1px solid #d6dee9; }
.cb-body{ flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:14px; }
.cb-row.bot{ display:flex; gap:10px; align-items:flex-start; }
.cb-bot-ava{ width:30px; height:30px; border-radius:50%; background:var(--bot-grad); display:flex; align-items:center; justify-content:center; flex:0 0 30px; margin-top:2px; }
.cb-bot-ava svg{ width:15px; height:15px; color:#fff; }
.cb-bubble{ background:#fff; border:1px solid rgba(20,40,80,0.06); border-radius:16px; border-top-left-radius:6px; padding:14px 16px; font-size:14px; line-height:21px; color:#2a3344; }
.cb-bubble p{ margin-bottom:10px; } .cb-bubble p:last-child{ margin-bottom:0; } .cb-bubble strong{ color:#1c2433; font-weight:700; }
.cb-user{ align-self:flex-end; max-width:88%; background:var(--bot-grad); color:#fff; border-radius:16px; border-bottom-right-radius:6px; padding:14px 16px; font-size:14px; line-height:21px; }
.cb-note{ align-self:flex-end; max-width:88%; text-align:right; font-size:12px; color:#8a93a6; line-height:18px; }
.cb-sugs{ padding:8px 18px 0; }
.cb-sugs .lbl{ font-size:13px; color:#7a879a; margin-bottom:8px; }
.cb-chips{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
.cb-chip{ white-space:nowrap; border:1px solid #dbe2ec; background:rgba(255,255,255,0.7); border-radius:20px; padding:8px 14px; font-family:inherit; font-size:13px; color:#3a4458; cursor:pointer; }
.cb-chip:hover{ border-color:var(--green); color:#0d8f5a; background:#fff; }
.cb-input{ margin:12px 18px 18px; background:rgba(255,255,255,0.85); border:1px solid #e1e7f0; border-radius:28px; padding:6px 6px 6px 18px; display:flex; align-items:center; gap:8px; }
.cb-input input{ flex:1; border:none; outline:none; font-family:inherit; font-size:14px; color:#2a3344; background:transparent; }
.cb-send{ width:42px; height:42px; border-radius:50%; border:none; background:var(--bot-grad); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:0 0 42px; }
.cb-send svg{ width:18px; height:18px; }

/* ============================================================
   SAP tab — statistical analysis plan review.
   Reuses the Protocol tab's document + suggestion-card layout; only the
   severity tiers, the rule board, the back-check table and the two
   drawer actions are specific to this tab.
   ============================================================ */
:root{
  --sev-crit:#d9534f; --sev-crit-bg:rgba(217,83,79,0.08); --sev-crit-line:rgba(217,83,79,0.35);
  --sev-minor:#ca8a04; --sev-minor-bg:rgba(250,204,21,0.12); --sev-minor-line:rgba(250,204,21,0.5);
  --sev-adv:#12b877;  --sev-adv-bg:rgba(0,225,133,0.07);   --sev-adv-line:rgba(0,225,133,0.35);
}

/* header row — reviewer's aid on the left, Findings Only on the right */
.sap-verdict-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.sap-verdict-bar .statcard{ flex:0 0 auto; }
.sap-aid{ font-size:13px; color:var(--text-light); }

/* severity-tiered flags — same .flag mechanics as the Protocol doc */
.flag.sev-crit{ background:var(--sev-crit-bg); box-shadow:inset 0 -2px 0 var(--sev-crit-line); }
.flag.sev-crit.flag-active{ background:rgba(217,83,79,0.20)!important; color:inherit!important; }
.flag.sev-minor{ background:var(--hl-rest); box-shadow:inset 0 -2px 0 var(--sev-minor-line); }
.flag.sev-minor.flag-active{ background:var(--hl-hover)!important; }
.flag.sev-adv{ background:var(--sev-adv-bg); box-shadow:inset 0 -2px 0 var(--sev-adv-line); }
.flag.sev-adv.flag-active{ background:rgba(0,225,133,0.20)!important; color:inherit!important; }

/* the card is the shared .suggestion-card, positioned beside its highlight the
   same way; it only needs a ceiling because one finding carries a table */
#sapCard{ max-height:calc(100vh - 40px); overflow-y:auto; }
#sapCard::-webkit-scrollbar{ width:6px; }
#sapCard::-webkit-scrollbar-thumb{ background:#dfe3ec; border-radius:4px; }

/* the provenance chain also renders inside an .info-popover */
.info-popover .sap-step:last-child{ padding-bottom:0; }

/* recommendation card bits (the card itself is the shared .suggestion-card) */
.sap-idx{ font-size:11px; font-weight:600; color:var(--text-light); letter-spacing:0.3px; }
.sap-f-title{ font-size:15px; font-weight:700; color:var(--title); line-height:1.35; margin-bottom:3px; }
.sap-f-anchor{ font-size:11px; font-weight:600; color:var(--text-light); letter-spacing:0.2px; margin-bottom:9px; }
.sug-body #sapFRec{ font-size:13.5px; line-height:20px; color:var(--muted); }
.sug-body #sapFRec b{ color:var(--text-dark); font-weight:700; }
.sap-ruleid{ font-size:11px; font-weight:600; color:#9aa3b6; letter-spacing:0.3px; }
.pill-yellow.sev-crit{ background:var(--sev-crit-bg); border-color:var(--sev-crit-line); color:var(--sev-crit); }
.pill-yellow.sev-minor{ background:var(--y50); border-color:var(--y200); color:var(--y600); }
.pill-yellow.sev-adv{ background:var(--sev-adv-bg); border-color:var(--sev-adv-line); color:var(--sev-adv); }

/* provenance chain — rendered inside the Action Trace popover */
.sap-step{ display:grid; grid-template-columns:14px 1fr; gap:10px; padding-bottom:12px; position:relative; }
.sap-step:last-child{ padding-bottom:0; }
.sap-step .mark{ position:relative; display:flex; justify-content:center; }
.sap-step .mark::before{ content:''; width:8px; height:8px; border-radius:50%; margin-top:4px;
  border:1.5px solid rgba(0,225,133,0.55); background:#fff; }
.sap-step:last-child .mark::before{ background:var(--green); }
.sap-step:not(:last-child) .mark::after{ content:''; position:absolute; top:14px; bottom:-6px; width:1px; background:#dfe3ec; }
.sap-step .k{ display:block; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; color:#9aa3b6; }
.sap-step .v{ display:block; font-size:12.5px; line-height:18px; color:var(--text-dark); margin-top:2px; }

/* sample-size back-check — claimed vs recomputed */
/* flex:none — the card is a max-height flex column, so its children would
   otherwise shrink and clip instead of letting the card scroll */
.sap-calc{ display:none; flex:none; margin:0 16px; border:1px solid var(--stroke); border-radius:10px; overflow:hidden; }
.sap-calc.show{ display:block; }
.sap-calc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:#f7f9fa; border-bottom:1px solid var(--stroke); padding:8px 12px; }
.sap-calc-head .t{ font-size:10px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:var(--text-light); }
.sap-calc-head .live{ font-size:10px; font-weight:600; color:var(--green); letter-spacing:0.3px; }
table.sap-cmp{ width:100%; border-collapse:collapse; font-size:11px;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
table.sap-cmp th{ font-size:9px; font-weight:700; letter-spacing:0.4px; text-transform:uppercase; color:#9aa3b6;
  text-align:right; padding:7px 4px; border-bottom:1px solid var(--stroke); }
table.sap-cmp th:first-child{ text-align:left; padding-left:10px; }
table.sap-cmp th:last-child{ padding-right:10px; }
table.sap-cmp td{ padding:6px 4px; border-bottom:1px solid #f1f3f8; color:var(--muted); text-align:right; white-space:nowrap; }
table.sap-cmp td:first-child{ text-align:left; padding-left:10px; color:var(--text-light); white-space:normal; line-height:1.35; }
table.sap-cmp td:last-child{ padding-right:10px; }
table.sap-cmp td.txt{ white-space:normal; }
table.sap-cmp td.recomp{ color:var(--text-dark); font-weight:600; }
table.sap-cmp tr:last-child td{ border-bottom:none; }
table.sap-cmp tr.flag-row td.recomp,table.sap-cmp tr.flag-row td.delta{ color:var(--sev-crit); font-weight:700; }
table.sap-cmp tr.flag-row td.delta{ background:var(--sev-crit-bg); }
table.sap-cmp tr.fix-row td.recomp{ color:#0d8a5f; font-weight:700; }
.sap-ladder{ padding:10px 12px 12px; border-top:1px solid var(--stroke); }
.sap-ladder .llbl{ font-size:9.5px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  color:#9aa3b6; margin-bottom:8px; }
.sap-lrow{ display:grid; grid-template-columns:38px 1fr 52px 38px; align-items:center; gap:6px;
  font-size:11px; color:var(--text-light); padding:2px 0; font-variant-numeric:tabular-nums; }
.sap-lrow .bar{ height:5px; background:#eef1f6; border-radius:3px; overflow:hidden; }
.sap-lrow .bar i{ display:block; height:100%; background:var(--sev-crit); opacity:0.55; border-radius:3px; }
.sap-lrow.ok .bar i{ background:var(--green); opacity:0.9; }
.sap-lrow .dev{ text-align:right; color:var(--sev-crit); font-weight:600; }
.sap-lrow.ok .dev{ color:#0d8a5f; }
.sap-lrow .vd{ text-align:right; font-size:9.5px; font-weight:700; letter-spacing:0.4px; color:var(--sev-crit); }
.sap-lrow.ok .vd{ color:#0d8a5f; }
.sap-calc-note{ padding:9px 12px; border-top:1px solid var(--stroke); font-size:11px; line-height:16px; color:var(--text-light); }
.sap-calc-note b{ color:var(--text-dark); font-weight:700; }

/* suppressed strip */
.sap-supp{ margin-top:16px; background:var(--white); border:1px solid var(--stroke); border-radius:12px; overflow:hidden; }
.sap-supp-head{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:none; padding:13px 16px; font-family:inherit; font-size:14px;
  font-weight:600; color:var(--text-light); }
.sap-supp-head .chev{ width:14px; height:14px; color:#9aa3b6; transition:transform .15s ease; }
.sap-supp.open .sap-supp-head .chev{ transform:rotate(90deg); }
.sap-supp-head .n{ margin-left:auto; font-size:11px; font-weight:600; color:#9aa3b6;
  border:1px solid var(--stroke); border-radius:6px; padding:2px 8px; }
.sap-supp-body{ display:none; border-top:1px solid var(--stroke); padding:4px 16px 12px; }
.sap-supp.open .sap-supp-body{ display:block; }
.sap-supp-item{ display:grid; grid-template-columns:minmax(180px,280px) 1fr; gap:16px; padding:10px 0;
  border-bottom:1px solid #f1f3f8; font-size:13px; color:var(--text-light); }
.sap-supp-item:last-child{ border-bottom:none; }
.sap-supp-item .sname{ display:flex; align-items:center; gap:8px; color:var(--text-dark); font-weight:500; }
.sap-supp-item .sname::before{ content:''; width:5px; height:5px; border-radius:50%; background:#cfd6e4; flex:0 0 5px; }
.sap-supp-item code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--btn-text);
  background:var(--btn-bg); border:1px solid var(--stroke); border-radius:4px; padding:1px 6px; margin-right:6px; }

/* ============================================================
   DASHBOARD — validation and trace numbers per module, and the
   CDISC version each module is validated against.
   ============================================================ */
.dash-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:4px 8px 18px; border-bottom:1px solid var(--stroke); }
.dash-tot .t{ font-size:18px; font-weight:700; color:var(--title); }
.dash-tot .s{ font-size:12.5px; color:var(--text-light); margin-top:4px; max-width:640px; line-height:18px; }
.dash-kpis{ display:flex; gap:10px; }
.dash-kpi{ min-width:104px; border:1px solid var(--stroke); border-radius:12px; padding:10px 14px; }
.dash-kpi .v{ display:block; font-size:26px; font-weight:800; letter-spacing:-0.5px; line-height:1.1; }
.dash-kpi .k{ display:block; font-size:10.5px; font-weight:600; letter-spacing:0.3px; color:var(--text-light); margin-top:2px; }
.dash-kpi.err .v{ color:var(--sev-crit); } .dash-kpi.err{ background:var(--sev-crit-bg); border-color:var(--sev-crit-line); }
.dash-kpi.warn .v{ color:var(--y600); } .dash-kpi.warn{ background:var(--y50); border-color:var(--y200); }
.dash-kpi.brk .v{ color:var(--teal); } .dash-kpi.brk{ background:rgba(46,138,156,0.06); border-color:rgba(46,138,156,0.3); }
.dash-kpi.side .v{ color:var(--btn-text); }

.dash-note{ display:none; margin:14px 8px 0; font-size:12.5px; color:#0d8a5f; background:rgba(0,225,133,0.06);
  border:1px solid rgba(0,225,133,0.35); border-radius:10px; padding:9px 13px; }
.dash-note.show{ display:block; }
.dash-note b{ font-weight:700; }

/* the chain — the number on each arrow is the linkage breaks to the next module */
.dash-chain{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:18px 8px 4px; }
.dash-node{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; font-family:inherit;
  background:var(--white); border:1px solid var(--stroke); border-radius:10px; padding:8px 12px; cursor:pointer; }
.dash-node:hover{ border-color:var(--green); }
.dash-node .n{ font-size:12.5px; font-weight:600; color:var(--text-dark); white-space:nowrap; }
.dash-node .e{ font-size:10.5px; font-weight:600; color:var(--text-light); }
.dash-node.has-err .e{ color:var(--sev-crit); }
.dash-arrow{ display:flex; align-items:center; gap:4px; padding:0 6px; }
.dash-arrow i{ display:block; width:22px; height:1px; background:#cfd6e4; }
.dash-arrow b{ font-size:10.5px; font-weight:700; border-radius:20px; padding:1px 7px; }
.dash-arrow.ok b{ color:#0d8a5f; background:var(--sev-adv-bg); border:1px solid rgba(0,225,133,0.35); }
.dash-arrow.bad b{ color:var(--sev-crit); background:var(--sev-crit-bg); border:1px solid var(--sev-crit-line); }

/* module cards */
.dash-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; padding:16px 8px 8px; }
.dash-card{ border:1px solid var(--stroke); border-radius:14px; padding:14px 16px; display:flex;
  flex-direction:column; gap:11px; background:var(--white); }
.dash-card.err{ border-left:3px solid var(--sev-crit); }
.dash-card.warn{ border-left:3px solid var(--y400); }
.dash-card.ok{ border-left:3px solid var(--green); }
.dash-card.empty{ opacity:.6; }
.dc-head{ display:flex; align-items:center; gap:9px; }
.dc-head .n{ font-size:15px; font-weight:700; color:var(--title); }
.dc-std{ font-family:var(--dx-mono); font-size:10px; font-weight:600; color:var(--sug-tag-text);
  background:var(--sug-tag-bg); border:1px solid rgba(0,225,133,0.25); border-radius:20px; padding:2px 8px; }
.dc-open{ margin-left:auto; display:flex; align-items:center; gap:5px; font-family:inherit; font-size:11.5px;
  font-weight:600; color:var(--text-light); background:none; border:1px solid var(--stroke); border-radius:8px;
  padding:4px 9px; cursor:pointer; }
.dc-open:hover{ border-color:var(--green); color:#0d8a5f; }
.dc-open svg{ width:12px; height:12px; }
.dc-metrics{ display:flex; gap:8px; }
.dc-m{ flex:1 1 0; border:1px solid var(--stroke); border-radius:10px; padding:8px 10px; }
.dc-m .v{ display:block; font-size:19px; font-weight:800; color:var(--text-dark); line-height:1.1; }
.dc-m .v.err{ color:var(--sev-crit); } .dc-m .v.warn{ color:var(--y600); }
.dc-m.brk .v{ color:var(--teal); }
.dc-m .k{ display:block; font-size:9.5px; font-weight:600; letter-spacing:0.2px; color:#9aa3b6; margin-top:3px; }
.dc-note{ font-size:11.5px; line-height:17px; color:var(--text-light); }
.dc-ver{ display:flex; flex-direction:column; gap:5px; border-top:1px dashed var(--stroke); padding-top:11px; }
.dc-ver label{ font-size:9.5px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; color:#9aa3b6; }
.dc-ver select{ font-family:inherit; font-size:12.5px; color:var(--text-dark); background:var(--white);
  border:1px solid var(--stroke); border-radius:9px; padding:7px 10px; cursor:pointer; }
.dc-ver select:focus{ outline:none; border-color:rgba(0,225,133,0.55); }
.dc-vernote{ font-size:11px; line-height:16px; color:#9aa3b6; }

/* version echoes on the module tabs */
.sdtm-issue-ver,.crf-std-tag{ font-family:var(--dx-mono); font-size:11px; font-weight:600;
  color:var(--sug-tag-text); background:var(--sug-tag-bg); border:1px solid rgba(0,225,133,0.25);
  border-radius:20px; padding:3px 10px; }

/* ============================================================
   CSR tab — link integrity. Every number resolves to the output
   it came from; every part of the report traces to the protocol.
   Reuses the Define-XML tab's verdict bar, card and drawers.
   ============================================================ */
.csr-meters{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.csr-meter{ flex:1 1 300px; display:flex; flex-direction:column; gap:7px; text-align:left; cursor:pointer;
  background:var(--white); border:1px solid var(--stroke); border-radius:12px; padding:12px 14px;
  font-family:inherit; transition:border-color .15s ease, background .15s ease; }
.csr-meter:hover{ border-color:#cdd5e2; }
.csr-meter.active{ border-color:rgba(0,225,133,0.5); background:rgba(0,225,133,0.04); }
.csr-meter .mh{ display:flex; align-items:baseline; gap:10px; }
.csr-meter .mh .n{ font-size:13.5px; font-weight:600; color:var(--text-dark); }
.csr-meter .mh .v{ margin-left:auto; font-size:15px; font-weight:700; color:var(--sev-crit); }
.csr-meter .mh .v.ok{ color:#0d8a5f; }
.csr-meter .mh .v em{ font-style:normal; font-weight:500; font-size:11.5px; color:#9aa3b6; }
.csr-meter .bar{ height:6px; border-radius:3px; background:#eef1f6; overflow:hidden; }
.csr-meter .bar i{ display:block; height:100%; border-radius:3px; background:var(--sev-crit); opacity:.65; }
.csr-meter.ok .bar i{ background:var(--green); opacity:.9; }
.csr-meter .s{ font-size:11px; color:var(--text-light); }

/* the report */
#csrDoc .sub-head{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
#csrDoc .para{ text-align:left; }
.sec-head .sec-note{ margin-left:auto; font-size:11px; color:#9aa3b6; }
.csr-trace{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--sug-tag-text);
  background:var(--sug-tag-bg); border:1px solid rgba(0,225,133,0.22); border-radius:20px; padding:2px 9px; }
.csr-trace svg{ width:11px; height:11px; }
.csr-trace b{ font-weight:700; opacity:.75; }
.csr-trace.none{ color:var(--sev-crit); background:var(--sev-crit-bg); border-color:var(--sev-crit-line); }

/* a number that resolves — to an output (green) or to a protocol value (teal) */
.csr-n{ cursor:pointer; border-radius:3px; padding:0 2px; font-weight:600;
  transition:background .15s ease, color .15s ease; }
.csr-n.output{ color:#0d8a5f; box-shadow:inset 0 -1px 0 rgba(0,225,133,0.55); }
.csr-n.protocol{ color:var(--teal); box-shadow:inset 0 -1px 0 rgba(46,138,156,0.45); }
.csr-n:hover,.csr-n.on{ background:rgba(0,225,133,0.12); }
.csr-n.protocol:hover,.csr-n.protocol.on{ background:rgba(46,138,156,0.10); }
#csrDoc.csr-filtered .flag:not(.csr-in-scope){ background:transparent; box-shadow:none; opacity:.6; }

/* citation index */
table.csr-cite td{ vertical-align:middle; }
table.csr-cite td:first-child,table.csr-cite td:nth-child(3),table.csr-cite td:nth-child(4){ white-space:nowrap; }
.csr-status{ font-family:var(--dx-mono); font-size:10px; font-weight:700; letter-spacing:0.3px;
  text-transform:uppercase; border-radius:5px; padding:2px 7px; }
.csr-status.final{ color:#0d8a5f; background:var(--sev-adv-bg); border:1px solid var(--sev-adv-line); }
.csr-status.qc{ color:var(--y600); background:var(--y50); border:1px solid var(--y200); }
.csr-status.missing{ color:var(--sev-crit); background:var(--sev-crit-bg); border:1px solid var(--sev-crit-line); }
.csr-ok{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#0d8a5f; }
.csr-ok svg{ width:12px; height:12px; }
.csr-bad{ font-size:11.5px; font-weight:600; color:var(--sev-crit); }
.csr-warn{ font-size:11.5px; font-weight:600; color:var(--y600); }

/* ============================================================
   PROTOCOL COMPLEXITY page — the TCS questionnaire.
   Basic = answered from the protocol, Advanced = answered by
   the reviewer; the score recomputes on every answer.
   ============================================================ */
.cx-title-area{ display:flex; align-items:center; gap:12px; }
.cx-back{ width:34px; height:34px; border:1px solid var(--stroke); border-radius:9px; display:flex;
  align-items:center; justify-content:center; color:var(--text-light); flex:0 0 34px; }
.cx-back:hover{ border-color:var(--green); color:var(--green); }
.cx-back svg{ width:18px; height:18px; }

/* score header */
.cx-score{ display:flex; gap:24px; align-items:stretch; flex-wrap:wrap; padding:4px 8px 20px;
  border-bottom:1px solid var(--stroke); }
.cx-score-main{ display:flex; align-items:center; gap:18px; flex:1 1 380px; min-width:320px; }
.cx-big{ display:flex; align-items:baseline; gap:3px; }
.cx-big .v{ font-size:52px; font-weight:800; letter-spacing:-1.5px; color:var(--text-dark); line-height:1; }
.cx-big .d{ font-size:18px; font-weight:600; color:#9aa3b6; }
.cx-score-meta{ flex:1 1 auto; min-width:0; }
.cx-score-meta .t{ font-size:15px; font-weight:700; color:var(--title); }
.cx-score-meta .s{ font-size:12.5px; color:var(--text-light); margin-top:2px; }
.cx-score-meta .s b{ color:var(--text-dark); font-weight:700; }
.cx-cov{ height:5px; border-radius:3px; background:#eef1f6; overflow:hidden; margin:10px 0 9px; max-width:420px; }
.cx-cov i{ display:block; height:100%; background:var(--green); border-radius:3px; }
.cx-chips{ display:flex; gap:7px; flex-wrap:wrap; }
.cx-chip{ font-size:11px; color:var(--text-light); border:1px solid var(--stroke); border-radius:20px; padding:3px 10px; }
.cx-chip b{ color:var(--text-dark); font-weight:700; }
.cx-chip.up{ color:var(--sev-crit); border-color:var(--sev-crit-line); background:var(--sev-crit-bg); }
.cx-chip.up b{ color:var(--sev-crit); }
.cx-chip.down{ color:#0d8a5f; border-color:rgba(0,225,133,0.4); background:var(--sev-adv-bg); }
.cx-chip.open{ color:var(--y600); border-color:var(--y200); background:var(--y50); }
.cx-chip.open b{ color:var(--y600); }
.cx-chip.done{ color:#0d8a5f; border-color:rgba(0,225,133,0.4); background:var(--sev-adv-bg); }
.cx-doms{ flex:1 1 420px; min-width:320px; display:flex; flex-direction:column; gap:7px; }
.cx-dom{ display:grid; grid-template-columns:150px 1fr 56px; grid-template-areas:"n b v" "n b a";
  align-items:center; gap:2px 12px; }
.cx-dom .n{ grid-area:n; font-size:12.5px; font-weight:600; color:var(--text-dark); }
.cx-dom .bar{ grid-area:b; height:6px; border-radius:3px; background:#eef1f6; overflow:hidden; }
.cx-dom .bar i{ display:block; height:100%; background:var(--teal); opacity:.75; border-radius:3px; }
.cx-dom .v{ grid-area:v; text-align:right; font-size:12.5px; font-weight:700; color:var(--text-dark); }
.cx-dom .v em{ font-style:normal; font-weight:500; color:#9aa3b6; font-size:11px; }
.cx-dom .a{ grid-area:a; font-size:10.5px; color:#9aa3b6; }

/* tabs + intro */
.tabs .cx-tabn{ margin-left:8px; font-size:11px; font-weight:600; color:var(--text-light);
  background:var(--btn-bg); border-radius:20px; padding:2px 9px; }
.tab.active .cx-tabn{ background:var(--badge-bg); color:#0d8a5f; }
.cx-tabnote{ font-size:12.5px; line-height:19px; color:var(--text-light); padding:14px 8px 0; max-width:900px; }
.cx-tabnote b{ color:var(--text-dark); font-weight:700; }

/* question groups */
.cx-body{ display:flex; flex-direction:column; gap:18px; padding:16px 8px 8px; }
.cx-group{ border:1px solid var(--stroke); border-radius:14px; overflow:hidden; }
.cx-group-head{ display:flex; align-items:center; gap:10px; padding:11px 16px; background:var(--section-bg);
  border-bottom:1px solid var(--stroke); }
.cx-group-head .n{ font-size:14px; font-weight:700; color:var(--title); }
.cx-group-head .s{ font-size:11.5px; color:var(--text-light); }
.cx-group-head .v{ margin-left:auto; font-size:14px; font-weight:700; color:var(--text-dark); }
.cx-group-head .v em{ font-style:normal; font-weight:500; font-size:11px; color:#9aa3b6; }

/* one question */
.cx-q{ border-bottom:1px solid #f1f3f8; }
.cx-q:last-child{ border-bottom:none; }
.cx-q-head{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:none; border:none;
  cursor:pointer; padding:12px 16px; font-family:inherit; }
.cx-q-head:hover{ background:#fbfcfe; }
.cx-num{ width:24px; height:24px; border-radius:7px; background:var(--btn-bg); color:var(--text-light);
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:0 0 24px; }
.cx-q.unanswered .cx-num{ background:var(--y50); color:var(--y600); }
.cx-q-t{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.cx-q-t .ttl{ font-size:14px; font-weight:600; color:var(--text-dark); }
.cx-q-t .dom{ font-size:11px; color:#9aa3b6; }
.cx-tag{ font-size:10px; font-weight:600; border-radius:20px; padding:3px 9px; white-space:nowrap; flex:0 0 auto; }
.cx-tag.auto{ background:var(--sug-tag-bg); border:1px solid rgba(0,225,133,0.25); color:var(--sug-tag-text); }
.cx-tag.adj{ background:rgba(58,152,169,0.07); border:1px solid rgba(58,152,169,0.3); color:var(--teal); }
.cx-tag.user{ background:var(--badge-bg); border:1px solid rgba(0,225,133,0.25); color:#0d8a5f; }
.cx-tag.needs{ background:var(--y50); border:1px solid var(--y200); color:var(--y600); }
.cx-lvl{ font-size:11px; font-weight:700; border-radius:7px; padding:4px 10px; white-space:nowrap; flex:0 0 auto; }
.cx-lvl.low{ background:var(--sev-adv-bg); color:#0d8a5f; border:1px solid var(--sev-adv-line); }
.cx-lvl.mid{ background:var(--y50); color:var(--y600); border:1px solid var(--y200); }
.cx-lvl.high{ background:var(--sev-crit-bg); color:var(--sev-crit); border:1px solid var(--sev-crit-line); }
.cx-lvl.none{ background:var(--btn-bg); color:#9aa3b6; border:1px solid var(--stroke); }
.cx-q-head .chev{ width:15px; height:15px; color:#c4cbd9; transition:transform .15s ease; flex:0 0 15px; }
.cx-q.open .cx-q-head .chev{ transform:rotate(90deg); }
.cx-q-body{ display:none; padding:2px 16px 16px 52px; }
.cx-q.open .cx-q-body{ display:block; }

.cx-rule{ font-size:11px; font-weight:600; letter-spacing:0.2px; color:#9aa3b6; margin-bottom:10px; }
.cx-factors{ display:flex; flex-direction:column; gap:2px; }
.cx-f{ display:flex; align-items:flex-start; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; }
.cx-f:hover{ background:#fbfcfe; }
.cx-f.on{ background:rgba(0,225,133,0.04); }
.cx-f input{ position:absolute; opacity:0; width:0; height:0; }
.cx-f .box{ width:17px; height:17px; border-radius:5px; border:1.5px solid #cfd6e4; background:#fff; flex:0 0 17px;
  display:flex; align-items:center; justify-content:center; color:#fff; margin-top:1px; }
.cx-f .box svg{ width:11px; height:11px; opacity:0; }
.cx-f.on .box{ background:var(--green); border-color:var(--green); }
.cx-f.on .box svg{ opacity:1; }
.cx-f .txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.cx-f .txt .t{ font-size:13px; line-height:19px; color:var(--muted); }
.cx-f.on .txt .t{ color:var(--text-dark); }
.cx-f .txt .ev{ font-size:11px; line-height:16px; color:#9aa3b6; }
.cx-f.on .txt .ev{ color:var(--text-light); }

.cx-levels{ display:flex; flex-direction:column; gap:6px; }
.cx-lv{ display:grid; grid-template-columns:74px 1fr; gap:12px; align-items:start; padding:9px 12px;
  border:1px solid var(--stroke); border-radius:10px; cursor:pointer; }
.cx-lv:hover{ border-color:#cdd5e2; }
.cx-lv.on{ border-color:rgba(0,225,133,0.5); background:rgba(0,225,133,0.04); }
.cx-lv input{ position:absolute; opacity:0; width:0; height:0; }
.cx-lv .k{ font-size:12px; font-weight:700; color:var(--text-light); }
.cx-lv.on .k{ color:#0d8a5f; }
.cx-lv .d{ font-size:12.5px; line-height:18px; color:var(--muted); }
.cx-ev{ margin-top:10px; font-size:11.5px; line-height:17px; color:var(--text-light);
  background:var(--section-bg); border-radius:8px; padding:8px 11px; }
.cx-note{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.cx-note label{ font-size:11.5px; font-weight:600; color:var(--text-light); }
.cx-note textarea{ width:100%; border:1px solid var(--stroke); border-radius:9px; padding:9px 11px;
  font-family:inherit; font-size:12.5px; color:var(--text-dark); resize:vertical; }
.cx-note textarea:focus{ outline:none; border-color:rgba(0,225,133,0.5); }

.cx-q-foot{ display:flex; align-items:center; gap:10px; margin-top:11px; flex-wrap:wrap; }
.cx-count{ font-size:11.5px; color:var(--text-light); }
.cx-count b{ color:var(--text-dark); font-weight:700; }
.cx-none,.cx-revert{ font-family:inherit; font-size:11px; font-weight:600; color:var(--text-light);
  border:1px solid var(--stroke); border-radius:7px; padding:5px 10px; background:none; cursor:pointer; }
.cx-none:hover,.cx-revert:hover{ border-color:#cdd5e2; color:var(--text-dark); }
.cx-revert{ margin-left:auto; }
.cx-meta{ display:flex; gap:22px; flex-wrap:wrap; margin-top:12px; padding-top:10px; border-top:1px dashed var(--stroke); }
.cx-meta span{ font-size:11px; color:#9aa3b6; }
.cx-meta b{ display:block; font-size:9.5px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase;
  color:#b6bdcc; margin-bottom:2px; }

@media (max-width:900px){
  .cx-dom{ grid-template-columns:120px 1fr 50px; }
  .cx-q-body{ padding-left:16px; }
}

/* ============================================================
   DEFINE-XML tab — the Define metadata contract, checked for
   conformance (CORE) and version drift (reconciliation).
   Reuses the SAP tab's index + document + recommendation-card
   layout, its .flag severity mechanics and its .sap-step chain;
   only the pipeline strip, the metadata document and the
   disposition row are specific to this tab.
   ============================================================ */
:root{ --dx-mono:ui-monospace,SFMono-Regular,Menlo,monospace; }

/* verdict bar */
.dx-verdict{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.dx-counts{ display:flex; align-items:baseline; gap:8px; }
.dx-counts .c{ display:flex; align-items:baseline; gap:5px; }
.dx-counts .n{ font-size:17px; font-weight:700; }
.dx-counts .c.err .n{ color:var(--sev-crit); } .dx-counts .c.warn .n{ color:var(--sev-minor); }
.dx-counts .l{ font-size:13px; color:var(--text-light); }
.dx-counts .sep{ color:#c4cbd9; }
.dx-counts .disp{ font-size:12px; color:#9aa3b6; margin-left:4px; }
.dx-vsep{ width:1px; height:16px; background:var(--stroke); }
.dx-pinned{ margin-left:auto; display:flex; align-items:center; gap:9px; background:var(--y50);
  border:1px solid var(--y200); border-radius:8px; padding:6px 11px; }
.dx-pinned .k{ font-size:9.5px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:var(--y600); }
.dx-pinned .v{ font-family:var(--dx-mono); font-size:11px; color:var(--btn-text); }
.dx-pinned .v i{ color:#b6bdcc; font-style:normal; padding:0 3px; }

/* three-pass pipeline strip */
.dx-pipe{ display:flex; align-items:stretch; flex-wrap:wrap; margin-bottom:16px; }
.dx-pass{ flex:1 1 220px; display:flex; align-items:center; gap:11px; background:var(--white);
  border:1px solid var(--stroke); border-radius:10px; padding:11px 13px; text-align:left; cursor:pointer;
  font-family:inherit; transition:border-color .15s ease, background .15s ease; }
.dx-pass:hover{ border-color:#cdd5e2; }
.dx-pass.active{ border-color:rgba(0,225,133,0.5); background:rgba(0,225,133,0.04); }
.dx-pass .state{ width:24px; height:24px; border-radius:7px; display:flex; align-items:center;
  justify-content:center; flex:0 0 24px; }
.dx-pass .state svg{ width:14px; height:14px; }
.dx-pass.ok .state{ background:var(--sev-adv-bg); color:var(--sev-adv); border:1px solid var(--sev-adv-line); }
.dx-pass.fail .state{ background:var(--sev-crit-bg); color:var(--sev-crit); border:1px solid var(--sev-crit-line); }
.dx-pass .n{ display:block; font-size:13px; font-weight:600; color:var(--text-dark); }
.dx-pass .s{ display:block; font-size:10.5px; color:#9aa3b6; margin-top:2px; letter-spacing:0.2px; }
.dx-pass .cnt{ margin-left:auto; font-family:var(--dx-mono); font-size:11px; font-weight:700;
  padding:2px 8px; border-radius:20px; }
.dx-pass.ok .cnt{ color:var(--sev-adv); background:var(--sev-adv-bg); }
.dx-pass.fail .cnt{ color:var(--sev-crit); background:var(--sev-crit-bg); }
.dx-arrow{ display:flex; align-items:center; padding:0 9px; color:#c4cbd9; flex:0 0 auto; }
.dx-arrow svg{ width:14px; height:14px; }

/* the Define document — faint metadata grid, node/edge motif kept subtle */
#dxDoc{ background-image:linear-gradient(rgba(58,152,169,0.035) 1px,transparent 1px),
                        linear-gradient(90deg,rgba(58,152,169,0.035) 1px,transparent 1px);
  background-size:34px 34px; }
.dx-sec{ display:flex; flex-direction:column; gap:12px; }
.dx-sec .sec-head .n{ margin-left:auto; font-size:11px; color:#9aa3b6; }
.dx-kv{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--stroke);
  border:1px solid var(--stroke); border-radius:10px; overflow:hidden; margin:0 16px; }
.dx-kv > div{ background:var(--white); padding:10px 13px; }
.dx-kv .k{ display:block; font-size:9.5px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#9aa3b6; }
.dx-kv .v{ display:block; font-family:var(--dx-mono); font-size:12px; color:var(--text-dark); margin-top:4px; }
.dx-kv .v.txt{ font-family:inherit; }

.dx-tablewrap{ margin:0 16px; overflow-x:auto; }
table.dx{ width:100%; border-collapse:collapse; font-size:13px; }
table.dx th{ font-size:9.5px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#9aa3b6;
  text-align:left; padding:0 10px 8px; border-bottom:1px solid var(--stroke); white-space:nowrap; }
table.dx td{ padding:9px 10px; border-bottom:1px solid #f1f3f8; color:var(--muted); vertical-align:top; }
table.dx tr:last-child td{ border-bottom:none; }
table.dx tr:hover td{ background:#fbfcfe; }
table.dx .m{ font-family:var(--dx-mono); font-size:11.5px; color:var(--text-dark); }
table.dx .sub{ font-size:11.5px; color:var(--text-light); }
table.dx .dash{ color:#c4cbd9; }

/* codelists */
.dx-cls{ display:flex; flex-direction:column; gap:10px; margin:0 16px; }
.dx-cl{ border:1px solid var(--stroke); border-left:2px solid var(--stroke); border-radius:0 10px 10px 0;
  padding:12px 14px; display:flex; flex-direction:column; gap:9px; }
.dx-cl.reconciled{ border-left-color:rgba(0,225,133,0.45); }
.dx-cl.flagged{ border-left-color:var(--sev-crit-line); }
.dx-cl.flagged-warn{ border-left-color:var(--sev-minor-line); }
.dx-cl-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.dx-cl-name{ font-family:var(--dx-mono); font-size:13px; font-weight:700; color:var(--text-dark); }
.dx-cl-label{ font-size:12.5px; color:var(--text-light); }
.dx-attrs{ display:flex; align-items:center; gap:7px; margin-left:auto; flex-wrap:wrap; }
.dx-attr{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--stroke); border-radius:6px;
  padding:2px 8px; font-size:10.5px; color:var(--text-light); }
.dx-attr .k{ font-size:9px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#9aa3b6; }
.dx-attr .m{ font-family:var(--dx-mono); font-size:10.5px; color:var(--btn-text); }
.dx-attr.ok{ border-color:rgba(0,225,133,0.4); color:var(--sev-adv); background:var(--sev-adv-bg); }
.dx-attr.ok svg{ width:11px; height:11px; }
.dx-terms{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dx-terms .tlbl{ font-size:9.5px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase;
  color:#9aa3b6; margin-right:3px; }
.dx-term{ font-family:var(--dx-mono); font-size:11px; color:var(--btn-text); background:var(--btn-bg);
  border:1px solid var(--stroke); border-radius:5px; padding:2px 7px; }
.dx-term .dec{ color:#9aa3b6; }
.flag .dx-term{ background:transparent; border-color:transparent; }

/* value-level metadata */
.dx-vlm{ margin:0 16px; border:1px solid var(--stroke); border-radius:10px; overflow:hidden; }
.dx-vlm-head{ display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid var(--stroke);
  background:var(--section-bg); flex-wrap:wrap; }
.dx-vlm-head .m{ font-family:var(--dx-mono); font-size:12px; color:var(--text-dark); }
.dx-vlm-head .where{ font-family:var(--dx-mono); font-size:11.5px; color:var(--text-light); }
.dx-vlm-head .where b{ color:var(--teal); font-weight:600; }
.dx-resolved{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; color:var(--sev-adv);
  font-family:var(--dx-mono); margin-left:auto; }
.dx-resolved svg{ width:12px; height:12px; }
.dx-vlm-body{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--stroke); }
.dx-vlm-body > div{ background:var(--white); padding:9px 13px; }
.dx-vlm-body .k{ display:block; font-size:9.5px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#9aa3b6; }
.dx-vlm-body .v{ display:block; font-family:var(--dx-mono); font-size:12px; color:var(--text-dark); margin-top:4px; }

/* recommendation card — severity pill + source tag + the two drawers */
.dx-badges{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.dx-srctag{ font-size:9.5px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; color:var(--text-light);
  border:1px solid var(--stroke); border-radius:34px; padding:3px 9px; white-space:nowrap; }
#dxFMsg{ font-size:13.5px; line-height:20px; color:var(--muted); }
#dxFMsg b{ color:var(--text-dark); font-weight:700; }
#dxFMsg .m,.dx-drawer .m,#dxFLocus .m{ font-family:var(--dx-mono); font-size:11.5px; color:var(--text-dark); }
#dxFLocus{ display:flex; gap:6px; flex-wrap:wrap; font-family:var(--dx-mono); text-transform:none; }
#dxFLocus i{ color:#c4cbd9; font-style:normal; }
.dx-legs{ display:flex; gap:8px; padding:0 16px; }
.dx-leg{ flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--stroke);
  border-radius:8px; padding:8px 6px; font-family:inherit; font-size:11.5px; font-weight:600; color:var(--text-light);
  background:none; cursor:pointer; }
.dx-leg:hover{ border-color:#cdd5e2; color:var(--text-dark); }
.dx-leg.on{ border-color:rgba(0,225,133,0.5); color:#0d8a5f; background:rgba(0,225,133,0.06); }
.dx-leg svg{ width:14px; height:14px; }
.dx-drawer{ display:none; flex:none; margin:0 16px; border:1px solid var(--stroke); border-radius:10px;
  padding:12px 13px; background:#fbfcfe; }
.dx-drawer.show{ display:block; }
.dx-drawer .dlbl{ font-size:9.5px; font-weight:700; letter-spacing:0.9px; text-transform:uppercase;
  color:#9aa3b6; margin-bottom:11px; }
.dx-drawer .neg{ color:var(--sev-crit); font-weight:600; }
.dx-drawer .pos{ color:#0d8a5f; font-weight:600; }
.dx-own{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--stroke); border:1px solid var(--stroke);
  border-radius:8px; overflow:hidden; margin-bottom:11px; }
.dx-own > div{ background:var(--white); padding:9px 11px; }
.dx-own .side{ display:block; font-size:9px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#9aa3b6; }
.dx-own .who{ display:block; font-size:11.5px; line-height:16px; color:#9aa3b6; margin-top:3px; }
.dx-own > div.act{ background:rgba(0,225,133,0.06); }
.dx-own > div.act .side{ color:#0d8a5f; }
.dx-own > div.act .who{ color:var(--text-light); }
.dx-drawer p{ font-size:12.5px; line-height:19px; color:var(--text-light); }
.dx-drawer p + p{ margin-top:9px; }
.dx-drawer p b{ color:var(--text-dark); font-weight:700; }

/* disposition row */
.dx-disp{ margin:0 16px; padding-top:12px; border-top:1px solid var(--stroke); display:flex; align-items:center;
  gap:8px; flex-wrap:wrap; }
.dx-disp .dl{ font-size:9.5px; font-weight:700; letter-spacing:0.8px; text-transform:uppercase; color:#9aa3b6; }
.dx-status{ font-family:var(--dx-mono); font-size:10.5px; padding:2px 9px; border-radius:20px;
  border:1px solid var(--stroke); color:var(--text-light); }
.dx-status.waived{ color:var(--y600); border-color:var(--y200); background:var(--y50); }
.dx-status.resolved{ color:#0d8a5f; border-color:rgba(0,225,133,0.4); background:var(--sev-adv-bg); }
.dx-status.routed{ color:#3a98a9; border-color:rgba(58,152,169,0.35); background:rgba(58,152,169,0.06); }
.dx-disp-btns{ display:flex; gap:6px; margin-left:auto; }
.dx-disp-btns button{ font-family:inherit; font-size:11px; color:var(--text-light); border:1px solid var(--stroke);
  border-radius:6px; padding:4px 9px; background:none; cursor:pointer; }
.dx-disp-btns button:hover{ border-color:#cdd5e2; color:var(--text-dark); }
.dx-disp-btns button.on{ border-color:rgba(0,225,133,0.5); color:#0d8a5f; background:rgba(0,225,133,0.06); }

/* a dispositioned finding keeps its anchor but drops out of the alarm state */
.flag.dx-done{ background:var(--btn-bg)!important; box-shadow:inset 0 -2px 0 #dfe3ec!important; color:var(--text-light); }
.flag.dx-done.flag-active{ background:#e7eaf1!important; color:var(--text-dark); }

/* the card carries two drawers, so it needs a ceiling of its own */
#dxCard{ max-height:calc(100vh - 40px); overflow-y:auto; }
#dxCard::-webkit-scrollbar{ width:6px; }
#dxCard::-webkit-scrollbar-thumb{ background:#dfe3ec; border-radius:4px; }
#dxListScroll{ gap:8px; }

/* pass filter — while one pass is open the other pass's highlights stand down */
#dxDoc.dx-filtered .flag:not(.dx-in-scope){ background:transparent; box-shadow:none; opacity:.65; }

/* schema-gate panel in the list column */
.dx-gate{ display:flex; gap:11px; align-items:flex-start; padding:2px 0 4px; }
.dx-gate .ic{ width:22px; height:22px; border-radius:7px; background:var(--sev-adv-bg); border:1px solid var(--sev-adv-line);
  color:var(--sev-adv); display:flex; align-items:center; justify-content:center; flex:0 0 22px; }
.dx-gate .ic svg{ width:13px; height:13px; }
.dx-gate p{ font-size:12.5px; line-height:19px; color:var(--text-light); }
.dx-check{ display:flex; align-items:flex-start; gap:9px; padding:9px 0; border-bottom:1px solid #f1f3f8; }
.dx-check:last-child{ border-bottom:none; }
.dx-check .dot{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex:0 0 7px; background:var(--green); }
.dx-check .n{ display:block; font-size:12.5px; font-weight:600; color:var(--text-dark); }
.dx-check .s{ display:block; font-family:var(--dx-mono); font-size:10.5px; color:#9aa3b6; margin-top:2px; }
.dx-check .tag{ margin-left:auto; font-family:var(--dx-mono); font-size:10px; color:var(--sev-adv); }

/* finding rows in the list panel */
.dx-li{ display:flex; align-items:flex-start; gap:9px; width:100%; text-align:left; padding:10px 11px;
  border:1px solid var(--stroke); border-radius:10px; background:var(--white); cursor:pointer; font-family:inherit; }
.dx-li:hover,.dx-li.active{ border-color:rgba(0,225,133,0.45); background:rgba(0,225,133,0.03); }
.dx-li .dot{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex:0 0 7px; }
.dx-li .dot.err{ background:var(--sev-crit); } .dx-li .dot.warn{ background:var(--sev-minor); }
.dx-li .n{ display:block; font-size:12.5px; font-weight:600; color:var(--text-dark); }
.dx-li .s{ display:block; font-family:var(--dx-mono); font-size:10.5px; color:#9aa3b6; margin-top:3px; }
.dx-li .tag{ margin-left:auto; font-family:var(--dx-mono); font-size:10px; color:#9aa3b6; white-space:nowrap; padding-top:2px; }

/* ---------- SoA tab ---------- */
.soa-panel{ display:none; }
.soa-panel.show{ display:block; }
.soa-wrap{ display:flex; gap:16px; align-items:flex-start; }
.soa-table-area{ flex:1 1 auto; min-width:0; overflow:hidden; }
.soa-scroll{ overflow-x:auto; border:1px solid var(--stroke); border-radius:12px; }
.soa-scroll::-webkit-scrollbar{ height:6px; }
.soa-scroll::-webkit-scrollbar-track{ background:transparent; }
.soa-scroll::-webkit-scrollbar-thumb{ background:#dfe3ec; border-radius:4px; }
.soa-scroll::-webkit-scrollbar-thumb:hover{ background:#cdd3df; }
.soa-scroll{ scrollbar-width:thin; scrollbar-color:#dfe3ec transparent; }
table.soa{ border-collapse:separate; border-spacing:0; width:100%; min-width:1034px; table-layout:fixed; font-size:13px; }
.soa th,.soa td{ padding:14px 10px; border-bottom:1px solid #eef0f4; border-right:1px solid #eef0f4; text-align:center; }
.soa th:last-child,.soa td:last-child{ border-right:none; }
.soa thead .grp{ background:#fbfcfe; font-weight:500; color:var(--text-light); font-size:13px;
  text-align:left; vertical-align:top; padding:16px 12px 18px; line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:0; }
.soa thead .vis{ background:#fbfcfe; font-weight:600; color:var(--text-light); font-size:12px; text-align:left; padding:6px 12px 16px; }
.soa thead .proc{ background:#fbfcfe; }
.soa .proc{ text-align:left; position:sticky; left:0; background:#fff; z-index:2; overflow:visible; }
.soa thead .proc.grp{ z-index:4; font-size:12px; color:var(--text-light); font-weight:600; letter-spacing:0.5px; vertical-align:top; }
.soa thead .proc.vis{ z-index:4; }
.soa tbody tr:last-child td{ border-bottom:none; }
.proc-cell{ display:flex; align-items:center; gap:10px; }
.proc-name{ font-weight:500; color:var(--title); line-height:18px; font-size:14px; flex:0 1 auto; min-width:0; }
.proc-flags{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; }
.soa-chip{ display:inline-flex; align-items:center; gap:5px; border:1px solid #CFF9E8; background:#F7FEFB; color:#2CDE85;
  border-radius:20px; padding:5px 11px 5px 9px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; }
.soa-chip:hover{ background:#eafdf4; }
.soa-chip svg{ width:14px; height:14px; }
.soa-warn{ position:relative; width:26px; height:26px; border:none; background:none; cursor:pointer; color:#f0a020; display:flex; align-items:center; justify-content:center; padding:0; }
.soa-warn svg{ width:18px; height:18px; }
.soa-tip{ position:absolute; top:calc(100% + 7px); left:50%; transform:translateX(-50%); background:#fff; border:1px solid var(--stroke);
  border-radius:7px; padding:5px 10px; font-size:11px; font-weight:600; color:var(--text-dark); white-space:nowrap; box-shadow:0 6px 18px rgba(20,40,80,0.14); opacity:0; pointer-events:none; transition:opacity .15s ease; z-index:50; }
.soa-warn:hover .soa-tip{ opacity:1; }
.soa-band td{ background:#f4f6fa; text-align:center; font-size:11px; font-weight:700; letter-spacing:0.6px; text-transform:uppercase; color:#8a93a6; padding:12px;
  border-right:none; box-shadow:inset 0 8px 9px -8px rgba(23,43,77,0.13); }
.soa-row.added td{ background:#fcfdff; }
.soa-row.added .proc{ background:#fcfdff; }
.soa-row.added:last-child td{ box-shadow:inset 0 -8px 9px -8px rgba(23,43,77,0.06); }
.soa-row.added .proc-name{ color:var(--text-light); }
.soa-dash{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:24px; border:1px solid #eef0f4; border-radius:7px; color:#c2cbd9; font-weight:600; background:#fff; }
.soa-check{ display:inline-flex; width:16px; height:16px; border-radius:50%; background:#ecfdf4; border:1px solid rgba(0,225,133,0.22); align-items:center; justify-content:center; }
.soa-check svg{ width:8px; height:8px; color:#1fd083; }
.soa-row:hover td{ background:#fafbfd; } .soa-row:hover .proc{ background:#fafbfd; z-index:20; }
.soa-row.added:hover td{ background:#f3f5f9; } .soa-row.added:hover .proc{ background:#f3f5f9; }
.soa-row.selected td{ background:rgba(0,225,133,0.04); } .soa-row.selected .proc{ background:rgba(0,225,133,0.05); box-shadow:inset 2px 0 0 var(--green); }
.soa-row.added.selected td{ background:#eef1f6; } .soa-row.added.selected .proc{ background:#eef1f6; box-shadow:inset 2px 0 0 #aab3c4; }

/* persistent "this row is the current root" highlight — stronger than .selected,
   which is just a transient click/trace state */
.soa-row.root-active td{ background:rgba(0,225,133,0.14); box-shadow:inset 0 1px 0 rgba(0,225,133,0.5), inset 0 -1px 0 rgba(0,225,133,0.5); }
.soa-row.root-active .proc{ background:rgba(0,225,133,0.18); box-shadow:inset 4px 0 0 var(--green), inset 0 1px 0 rgba(0,225,133,0.5), inset 0 -1px 0 rgba(0,225,133,0.5); }
.soa-row.root-active .proc-name{ font-weight:700; color:#0d8a5f; }
.soa-row.root-active .proc-name::after{ content:"ROOT"; margin-left:8px; font-size:10px; font-weight:800; letter-spacing:0.5px;
  color:#0d8a5f; background:rgba(0,225,133,0.18); border-radius:5px; padding:2px 6px; vertical-align:middle; }
.soa-row.root-active:hover td{ background:rgba(0,225,133,0.18); } .soa-row.root-active:hover .proc{ background:rgba(0,225,133,0.22); }

/* SoA detail drawer */
.soa-detail{ display:none; flex:0 0 0; width:0; border:1px solid var(--stroke); border-radius:16px; background:#fff; overflow:hidden; flex-direction:column; align-self:flex-start; position:sticky; top:14px; max-height:calc(100vh - 32px); }
.soa-wrap.detail-open .soa-detail{ display:flex; flex:0 0 600px; width:600px; }
.soa-detail-head{ flex:0 0 auto; padding:18px 20px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sd-title{ font-size:18px; font-weight:700; color:var(--title); line-height:24px; }
.soa-detail-body{ flex:1 1 auto; min-height:0; padding:0 20px 20px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; }
.soa-detail-body > *{ flex:0 0 auto; }
.sd2-pills{ display:flex; gap:8px; }
.sd2-pill{ display:inline-flex; align-items:center; gap:6px; border:1px solid #e6e9f0; border-radius:20px; padding:4px 11px; font-size:12px; font-weight:500; color:var(--text-light); }
.sd2-pill .d{ width:6px; height:6px; border-radius:50%; } .sd2-pill .d.teal{ background:#8b7cff; } .sd2-pill .d.red{ background:#ef4444; }
.sd2-pill.gap{ color:#e0533d; border-color:#f6d2cb; }
/* PROTOCOL GAP — the problem (amber, standalone) */
.sd2-gapcard{ background:#fffdf2; border:1px solid #fbe6ad; border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.sd2-gaphead{ display:flex; align-items:center; gap:8px; }
.sd2-gaphead svg{ width:17px; height:17px; color:#d98a1f; flex:0 0 17px; }
.sd2-gaphead .t{ font-size:13px; font-weight:700; letter-spacing:0.6px; color:#c2780a; }
.sd2-gaptext{ font-size:14px; line-height:21px; color:#3a3320; }
.sd2-quote{ border-left:3px solid #f0b429; background:#fffdf6; border-radius:0 8px 8px 0; padding:11px 14px; font-size:13px; line-height:20px; color:#9a916e; }
.sd2-quote .qlbl{ display:block; font-weight:700; font-size:12px; color:#7a6a3a; margin-bottom:5px; }
.sd2-card{ background:#fff; border:1px solid var(--stroke); border-radius:12px; overflow:hidden; }
.sd2-card-head{ background:#f7f9fa; border-bottom:1px solid #eef1f4; padding:12px 16px; display:flex; align-items:center; gap:9px; }
.sd2-card-head svg{ width:17px; height:17px; color:#8b97aa; }
.sd2-card-head .lbl{ font-size:13px; font-weight:600; letter-spacing:0.4px; color:#7a879a; }
.sd2-card-head .per{ margin-left:auto; font-size:12px; font-weight:600; letter-spacing:0.3px; color:#9aa3b6; }
.sd2-card-head.green{ background:rgba(0,225,133,0.06); border-bottom-color:rgba(0,225,133,0.16); }
.sd2-card-head.green svg{ color:var(--green); } .sd2-card-head.green .lbl{ color:#0d9f63; }
.sgpager{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.sgpager .c{ font-size:12px; color:var(--text-light); }
.sgpager button{ width:24px; height:24px; border-radius:50%; border:1px solid var(--stroke); background:#fff; color:var(--text-light); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; }
.sgpager button:hover{ background:#f4f5fb; } .sgpager button svg{ width:13px; height:13px; color:var(--text-light); }
.sgpager button:disabled{ color:#d3d9e3; cursor:default; background:#fff; } .sgpager button:disabled svg{ color:#d3d9e3; }
.sd2-card-body{ padding:16px 16px 18px; }
.sd2-suggtext{ font-size:14px; line-height:22px; color:var(--text-dark); }
.sd2-impact{ display:flex; }
.sd2-impact .imp{ flex:1; min-width:0; display:flex; align-items:center; gap:11px; padding:2px 14px; border-left:1px solid #eef1f4; }
.sd2-impact .imp:first-child{ border-left:none; padding-left:2px; }
.sd2-impact .ic{ width:32px; height:32px; flex:0 0 32px; border-radius:50%; border:1px solid var(--stroke); background:#fff; display:flex; align-items:center; justify-content:center; color:var(--text-dark); }
.sd2-impact .ic svg{ width:15px; height:15px; }
.sd2-impact .txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sd2-impact .lab{ font-size:12px; color:var(--text-light); display:flex; align-items:center; gap:5px; white-space:nowrap; }
.sd2-impact .tr{ display:inline-flex; } .sd2-impact .tr svg{ width:14px; height:14px; }
.sd2-impact .tr.up svg{ color:#e8902a; } .sd2-impact .tr.good svg{ color:#16b06e; }
.sd2-impact .val{ font-size:15px; font-weight:700; color:#16b06e; white-space:nowrap; }
.sd2-list{ display:flex; flex-direction:column; gap:11px; }
.sd2-li{ display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:20px; color:var(--text-dark); }
.sd2-li svg{ width:17px; height:17px; flex:0 0 17px; margin-top:1px; }
.sd2-li.ok svg{ color:var(--green); } .sd2-li.warn svg{ color:#e8a020; }
.sd2-evlist{ display:flex; flex-direction:column; gap:12px; }
.sd2-evitem{ position:relative; background:#f7f9fb; border-radius:10px; padding:14px 40px 14px 14px; display:flex; flex-direction:column; gap:7px; }
.sd2-evlink{ position:absolute; top:13px; right:13px; color:var(--green); cursor:pointer; display:inline-flex; }
.sd2-evlink svg{ width:16px; height:16px; }
.sd2-evitem .it{ font-size:13.5px; font-weight:700; color:var(--title); line-height:19px; }
.sd2-evitem .id{ font-size:12.5px; line-height:19px; color:var(--text-light); }
.sd-visits{ display:flex; flex-wrap:wrap; gap:6px; }
.sd-visit{ background:#e9fbf2; border:0.6px solid rgba(0,225,133,0.22); color:#0d8f5a; border-radius:7px; padding:4px 10px; font-size:12px; font-weight:600; }
.sd2-sec{ display:flex; flex-direction:column; gap:10px; } .sd2-h{ font-size:16px; font-weight:700; color:var(--title); } .sd2-muted{ font-size:14px; line-height:21px; color:var(--text-light); } .sd2-line{ height:1px; background:var(--stroke); }

/* ============================================================
   EDIT TRIAL page (edit-trial.html)
   Row-type colours as tokens so a tag colour changes everywhere.
   ============================================================ */
:root{
  --et-header:#f1f3f8;  --et-header-tx:#4b556b;
  --et-visit:#fff4d6;   --et-visit-tx:#8a6d1c;
  --et-procedure:#eef1f6; --et-procedure-tx:#4b556b;
  --et-footer:#eef1f6;  --et-footer-tx:#6b7280;
  --et-ignored:#f6f7f9; --et-ignored-tx:#9aa3b6;
  --et-visit-bg:#fef9ec;
}
.et-panel{ display:none; }
.et-panel.show{ display:block; }

/* -- top line: mode toggle + draft -- */
.et-topline{ display:flex; align-items:center; justify-content:space-between; padding:0 8px 4px; }
.et-modes{ display:inline-flex; background:var(--btn-bg); border-radius:12px; padding:5px; gap:4px; }
.et-mode{ border:none; background:transparent; font-family:inherit; font-size:14px; font-weight:600; color:var(--text-light);
  padding:9px 18px; border-radius:9px; cursor:pointer; }
.et-mode.active{ background:#fff; color:var(--title); box-shadow:0 1px 2px rgba(20,40,80,0.08); }
.et-draft{ display:flex; align-items:center; gap:16px; }
.et-draft-btn{ display:flex; align-items:center; gap:8px; border:1px solid var(--stroke); background:#fff; color:#9aa3b6;
  font-family:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:10px; cursor:not-allowed; }
.et-draft-btn svg{ width:17px; height:17px; }
.et-draft-status{ font-size:14px; font-weight:600; color:var(--text-light); }

/* -- split: form | preview -- */
.et-split{ display:flex; gap:20px; align-items:flex-start; padding:0 8px; margin-top:16px; }
.et-form{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:24px; }
.et-preview{ flex:1 1 0; min-width:0; position:sticky; top:14px; }

/* -- form section -- */
.et-section{ display:flex; flex-direction:column; gap:20px; }
.et-section-head{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--stroke); padding-bottom:14px; }
.et-section-title{ font-size:19px; font-weight:700; color:var(--title); }
.et-section-num{ color:var(--title); }
.et-section-toggle{ width:30px; height:30px; border:none; background:none; cursor:pointer; color:var(--text-light);
  display:flex; align-items:center; justify-content:center; border-radius:8px; }
.et-section-toggle:hover{ background:var(--btn-bg); }
.et-section-toggle svg{ width:20px; height:20px; transition:transform .2s ease; }
.et-section.collapsed .et-section-toggle svg{ transform:rotate(-90deg); }
.et-section.collapsed .et-section-desc,
.et-section.collapsed .et-fields{ display:none; }
.et-section-desc{ font-size:14px; color:var(--text-light); margin-top:-8px; }
.et-fields{ display:flex; flex-direction:column; gap:22px; }

/* -- one field -- */
.et-field{ display:flex; flex-direction:column; gap:10px; }
.et-field-label{ display:flex; align-items:center; gap:9px; font-size:16px; font-weight:600; color:var(--title); }
.et-field-label svg{ width:19px; height:19px; color:#9aa3b6; }
.et-req{ color:#ef4444; font-weight:700; }

/* pills (multi-select) */
.et-pills{ border:1px solid var(--stroke); border-radius:10px; padding:12px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.et-chip{ background:var(--btn-bg); border-radius:8px; padding:7px 10px; font-size:14px; color:var(--text-dark);
  display:flex; align-items:center; gap:7px; }
.et-chip-x{ color:var(--text-light); cursor:pointer; display:flex; } .et-chip-x svg{ width:15px; height:15px; }
.et-chip-x:hover{ color:#ef4444; }
.et-pills-chev{ margin-left:auto; color:var(--text-light); display:flex; } .et-pills-chev svg{ width:20px; height:20px; }

/* select */
.et-select{ position:relative; }
.et-select select{ width:100%; appearance:none; -webkit-appearance:none; border:1px solid var(--stroke); border-radius:10px;
  padding:14px 40px 14px 14px; font-family:inherit; font-size:15px; color:var(--text-dark); background:#fff; cursor:pointer; }
.et-select-chev{ position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--text-light); pointer-events:none; }
.et-select-chev svg{ width:20px; height:20px; }

/* text / textarea */
.et-input,.et-textarea{ width:100%; border:1px solid var(--stroke); border-radius:10px; padding:13px 14px;
  font-family:inherit; font-size:15px; color:var(--text-dark); background:#fff; resize:vertical; }
.et-input:focus,.et-textarea:focus,.et-rt-area:focus,.et-select select:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 3px rgba(0,225,133,0.08); }

/* richtext */
.et-richtext{ border:1px solid var(--stroke); border-radius:10px; overflow:hidden; }
.et-rt-bar{ display:flex; flex-wrap:wrap; gap:2px; padding:8px 10px; border-bottom:1px solid var(--stroke); background:#fcfdff; }
.et-rt-btn{ min-width:30px; height:30px; border:none; background:transparent; border-radius:6px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--btn-text); }
.et-rt-btn:hover{ background:var(--btn-bg); }
.et-rt-area{ width:100%; border:none; padding:14px; font-family:inherit; font-size:15px; color:var(--text-dark); resize:vertical; }

/* -- preview panel -- */
.et-preview-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; gap:10px; }
.et-preview-title{ font-size:19px; font-weight:700; color:var(--title); }
.et-preview-btns{ display:flex; align-items:center; gap:10px; }
.et-pv-btn{ border:1px solid var(--stroke); background:#fff; color:var(--btn-text); font-family:inherit; font-size:13px;
  font-weight:600; padding:9px 14px; border-radius:9px; cursor:pointer; }
.et-pv-btn.primary{ background:var(--green); color:#fff; border-color:var(--green); }
.et-pv-icon{ width:38px; height:38px; border:1px solid var(--stroke); background:#fff; border-radius:9px; cursor:pointer;
  color:var(--text-light); display:flex; align-items:center; justify-content:center; }
.et-pv-icon svg{ width:18px; height:18px; }
.et-preview-doc{ border:1px solid var(--stroke); border-radius:12px; overflow:hidden; background:#fff; }
.et-preview-bar{ background:#2b2f36; color:#cfd3da; font-size:13px; font-weight:600; padding:10px 16px; }
.et-preview-page{ padding:40px 44px; display:flex; flex-direction:column; gap:22px; min-height:520px; }
.et-preview-page p{ font-size:15px; line-height:24px; color:#1c2433; }
.et-preview-page p:first-child{ font-weight:600; }

/* -- SOA tab -- */
.et-soa-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:0 8px 8px; }
.et-soa-desc{ font-size:14px; line-height:21px; color:var(--text-light); max-width:720px; }
.et-soa-actions{ display:flex; gap:10px; flex:0 0 auto; }
.et-soa-btn{ border:1px solid var(--stroke); background:#fff; color:var(--btn-text); font-family:inherit; font-size:14px;
  font-weight:600; padding:10px 18px; border-radius:10px; cursor:pointer; }
.et-soa-btn.primary{ background:var(--green); color:#fff; border-color:var(--green); }
.et-soa-block{ padding:0 8px; margin-top:24px; }
.et-soa-name{ font-size:20px; font-weight:700; color:var(--title); margin-bottom:14px; }

/* tag palette bar */
.et-tagbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.et-tagpill{ border:none; border-radius:20px; padding:8px 16px; font-family:inherit; font-size:14px; font-weight:600;
  cursor:pointer; color:var(--et-header-tx); background:var(--et-header); }
.et-tagpill.visit{ background:var(--et-visit); color:var(--et-visit-tx); }
.et-tagpill.procedure{ background:#e7d9fb; color:#6b4ea8; }
.et-tagpill.footer{ background:var(--et-footer); color:var(--et-footer-tx); }
.et-tagpill.ignored{ background:#fff; color:var(--text-light); border:1px solid var(--stroke); }
.et-tagpill.delete{ background:#fbdcdc; color:#c0392b; }
.et-tagpill:hover{ filter:brightness(0.96); }

/* checkbox marks */
.et-check{ width:18px; height:18px; min-width:18px; border:1.5px solid #cbd5e1; border-radius:5px; background:#fff; cursor:pointer;
  display:inline-block; position:relative; }
.et-check.checked{ background:var(--green); border-color:var(--green); }
.et-check.checked::after{ content:""; position:absolute; left:5px; top:1px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.et-check.head{ margin-right:0; }

/* the row-tagging table */
.et-soa-scroll{ overflow-x:auto; border:1px solid var(--stroke); border-radius:12px; scrollbar-width:thin; scrollbar-color:#dfe3ec transparent; }
.et-soa-scroll::-webkit-scrollbar{ height:7px; }
.et-soa-scroll::-webkit-scrollbar-thumb{ background:#dfe3ec; border-radius:4px; }
table.et-soa-table{ border-collapse:separate; border-spacing:0; width:100%; min-width:1000px; table-layout:fixed; font-size:14px; }
.et-soa-table td{ padding:16px 14px; border-bottom:1px solid #eef0f4; border-right:1px solid #eef0f4;
  color:var(--text-dark); vertical-align:middle; }
.et-soa-table td:last-child{ border-right:none; }
.et-soa-table tr:last-child td{ border-bottom:none; }
.et-cell-first{ width:340px; white-space:nowrap; }
.et-cell-first .et-cell-text{ font-weight:500; color:var(--title); }
.et-soa-row > td:not(.et-cell-first){ text-align:center; color:var(--text-dark); }

/* row-type colour fills */
.et-soa-table td.header{ background:var(--et-header); color:var(--et-header-tx); }
.et-soa-table td.visit{ background:var(--et-visit-bg); }
.et-soa-table td.visit.et-cell-first{ background:var(--et-visit); }
.et-soa-table td.procedure{ background:#fff; }
.et-soa-table td.footer{ background:var(--et-footer); color:var(--et-footer-tx); font-style:italic; font-size:13px; }
.et-soa-table td.ignored{ background:var(--et-ignored); color:var(--et-ignored-tx); }
.et-soa-row.selected > td{ box-shadow:inset 0 0 0 9999px rgba(0,225,133,0.05); }

/* per-row type dropdown inside the first cell */
.et-cell-first .et-check,
.et-cell-first .et-rowtype,
.et-cell-first .et-cell-text{ vertical-align:middle; }
.et-rowtype{ position:relative; display:inline-block; margin:0 12px; vertical-align:middle; }
.et-rowtype select{ appearance:none; -webkit-appearance:none; border:1px solid #d9dee8; border-radius:8px; background:#fff;
  font-family:inherit; font-size:13px; font-weight:600; color:var(--text-dark); padding:8px 30px 8px 12px; cursor:pointer; }
.et-rowtype-chev{ position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--text-light); pointer-events:none; }
.et-rowtype-chev svg{ width:16px; height:16px; }

/* ============================================================
   SIMILAR TRIALS page
   ============================================================ */
.st-head{ padding:4px 8px 0; }

/* panels (tab bodies) */
.st-panel{ display:none; }
.st-panel.show{ display:block; }

/* search row */
.st-searchrow{ display:flex; align-items:center; gap:12px; padding:0 8px; }
.st-searchbox{ flex:1; display:flex; align-items:center; gap:10px; height:48px; background:var(--white);
  border:1px solid var(--stroke); border-radius:12px; padding:0 14px; }
.st-search-ic{ color:var(--text-light); } .st-search-ic svg{ width:20px; height:20px; }
.st-searchbox input{ flex:1; border:none; outline:none; background:transparent; font-family:inherit;
  font-size:14px; color:var(--text-dark); }
.st-searchbox input::placeholder{ color:var(--text-light); }
.st-ai{ display:flex; align-items:center; gap:8px; color:var(--text-dark); font-size:14px; font-weight:600; white-space:nowrap; }
.st-ai svg{ width:18px; height:18px; color:var(--green); }
.st-switch{ width:40px; height:22px; border-radius:20px; background:#dfe3ec; position:relative; cursor:pointer; transition:background .15s; }
.st-switch .st-knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,0.2); transition:left .15s; }
.st-switch.on{ background:var(--green); } .st-switch.on .st-knob{ left:20px; }
.st-filter{ height:48px; display:flex; align-items:center; gap:8px; padding:0 18px; background:var(--white);
  border:1px solid var(--stroke); border-radius:12px; cursor:pointer; font-family:inherit; font-size:14px;
  font-weight:600; color:var(--btn-text); white-space:nowrap; }
.st-filter svg{ width:18px; height:18px; color:var(--text-light); }
.st-scope{ position:relative; }
.st-scope select{ appearance:none; -webkit-appearance:none; height:48px; border:1px solid var(--stroke); border-radius:12px;
  background:var(--white); font-family:inherit; font-size:14px; font-weight:600; color:var(--text-dark);
  padding:0 40px 0 16px; cursor:pointer; }
.st-scope-chev{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-light); pointer-events:none; }
.st-scope-chev svg{ width:18px; height:18px; }

/* green stats strip */
.st-stats{ display:flex; align-items:center; gap:32px; margin:0 8px; background:var(--badge-bg);
  border-radius:12px; padding:16px 24px; }
.st-stat{ display:flex; align-items:center; gap:8px; font-size:15px; }
.st-stat-l{ color:var(--text-dark); font-weight:500; }
.st-stat-v{ color:var(--title); font-weight:700; }

/* data tables (List / Scores) */
.st-tablewrap{ padding:0 8px; }
.st-scroll{ overflow-x:auto; }
table.st-table{ width:100%; border-collapse:collapse; font-size:14px; }
.st-table thead th{ text-align:left; padding:16px 18px; border-bottom:1px solid var(--stroke);
  color:var(--title); font-weight:700; white-space:nowrap; }
.st-th{ display:flex; align-items:center; gap:10px; }
.st-th-sort{ color:var(--text-light); cursor:pointer; } .st-th-sort svg{ width:16px; height:16px; }
.st-th-check{ width:52px; }
.st-table tbody td{ padding:18px; border-bottom:1px solid var(--stroke); color:var(--text-dark);
  vertical-align:top; white-space:nowrap; }
.st-td-first{ white-space:normal; max-width:420px; line-height:20px; }
.st-td-check{ width:52px; }
.st-row.selected{ background:rgba(0,225,133,0.05); }
.st-row:hover{ background:#f6f8fb; }
.st-check{ width:20px; height:20px; border:1.5px solid #cbd5e1; border-radius:5px; background:var(--white);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; }
.st-check svg{ width:12px; height:12px; opacity:0; }
.st-check.checked{ background:var(--green); border-color:var(--green); } .st-check.checked svg{ opacity:1; }
.st-check.head{ background:var(--green); border-color:var(--green); } .st-check.head svg{ opacity:1; }
.st-check.head.checked{ background:var(--green); }

/* dashboard charts */
.st-charts{ display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 8px; }
.st-chart{ background:var(--white); border:1px solid var(--stroke); border-radius:16px; padding:24px; }
.st-chart-title{ text-align:center; font-size:18px; font-weight:700; color:var(--title);
  padding-bottom:16px; border-bottom:1px solid var(--stroke); margin-bottom:24px; }

/* vertical bars */
.st-bars{ display:flex; align-items:flex-end; gap:18px; height:280px; padding-top:8px; }
.st-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; height:100%; }
.st-bar-track{ flex:1; width:26px; display:flex; align-items:flex-end; background:#f1f3f8; border-radius:8px; }
.st-bar-fill{ width:100%; background:var(--y400); border-radius:8px; min-height:4px; transition:height .2s; }
.st-bar-lbl{ font-size:12px; color:var(--text-light); text-align:center; white-space:nowrap; }

/* horizontal bars */
.st-hbars{ display:flex; flex-direction:column; gap:18px; }
.st-hbar-row{ display:flex; align-items:center; gap:14px; }
.st-hbar-lbl{ width:170px; flex:0 0 170px; font-size:14px; color:var(--text-dark); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.st-hbar-track{ flex:1; height:18px; background:#f1f3f8; border-radius:20px; overflow:hidden; }
.st-hbar-fill{ display:block; height:100%; background:var(--y400); border-radius:20px; min-width:4px; }
.st-hbar-val{ width:44px; flex:0 0 44px; text-align:right; font-size:14px; font-weight:600; color:var(--text-dark); }

/* ============================================================
   TRACE GROUP — the 3-action back / info / forward widget used on
   Protocol endpoints+criteria, SOA rows, and CRF cards.
   ============================================================ */
/* criterion rows become flex so the widget sits to the right of the text */
.incl-list li.has-trace{ display:flex; align-items:flex-start; gap:12px; text-align:left; }
.incl-list li .crit-text{ flex:1; min-width:0; }

.trace-group{ display:inline-flex; align-items:center; gap:2px; flex:0 0 auto;
  background:var(--badge-bg); border:1px solid rgba(0,225,133,0.35); border-radius:20px; padding:2px; }
.tg-btn{ display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:none;
  background:transparent; border-radius:50%; color:#12b877; cursor:pointer; padding:0;
  transition:background .15s, color .15s; }
.tg-btn svg{ width:13px; height:13px; }
.tg-btn:hover:not(:disabled){ background:#d7fbec; }
.tg-btn:disabled{ opacity:0.3; cursor:default; }
.tg-btn.tg-info{ color:var(--text-light); }
.tg-btn.tg-info:hover:not(:disabled){ background:var(--btn-bg); color:var(--btn-text); }

/* "Not traced" amber warning (shown when a criterion has no SOA match) */
.trace-warn{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; margin-top:1px;
  border:1px solid #fde3b0; background:#fff8ec; color:#c9820c;
  border-radius:20px; padding:4px 11px; font-size:12px; font-weight:600; white-space:nowrap; cursor:default; }
.trace-warn svg{ width:14px; height:14px; }

/* endpoint sub-head gets the widget on the right of its title */
.sub-head.with-trace{ display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* brief highlight when a trace lands on its target */
@keyframes tracePulse{
  0%   { background:rgba(0,225,133,0.28); }
  100% { background:rgba(0,225,133,0.04); }
}
.soa-row.trace-pulse td{ animation:tracePulse 1.4s ease-out; }
.soa-row.trace-pulse .proc{ animation:tracePulse 1.4s ease-out; }
.sub-block.trace-pulse, .incl-list li.trace-pulse{ animation:tracePulse 1.4s ease-out; border-radius:6px; }

/* persistent Protocol-doc highlight: the exact endpoint/criterion that IS the
   root (.root-active) vs. others that merely trace to the same procedure
   (.root-related, a softer wash so the root itself still stands out most) */
.sub-block.root-active{ background:rgba(0,225,133,0.09); box-shadow:inset 3px 0 0 var(--green);
  border-radius:8px; padding-top:8px; padding-bottom:8px; }
.sub-block.root-related{ background:rgba(0,225,133,0.04); box-shadow:inset 2px 0 0 rgba(0,225,133,0.4);
  border-radius:8px; padding-top:8px; padding-bottom:8px; }
/* .incl-list li has an absolutely-positioned counter pinned to its top edge —
   skip vertical padding here so "1." etc. stay aligned with the text */
.incl-list li.root-active{ background:rgba(0,225,133,0.09); box-shadow:inset 3px 0 0 var(--green); border-radius:6px; }
.incl-list li.root-related{ background:rgba(0,225,133,0.04); box-shadow:inset 2px 0 0 rgba(0,225,133,0.4); border-radius:6px; }
.root-active .sub-head-txt, .root-active .crit-text{ font-weight:700; color:#0d8a5f; }
.root-active .sub-head-txt::after, .root-active .crit-text::after{
  content:"ROOT"; margin-left:8px; font-size:10px; font-weight:800; letter-spacing:0.5px;
  color:#0d8a5f; background:rgba(0,225,133,0.18); border-radius:5px; padding:2px 6px; vertical-align:middle; }
/* a root filters the whole doc down to what's relevant to it */
.root-hidden{ display:none !important; }

/* ============================================================
   ROOT BANNER — shows the active trace root on every tab
   ============================================================ */
.root-banner{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:rgba(0,225,133,0.06); border:1px solid rgba(0,225,133,0.3); border-radius:10px;
  padding:10px 16px; margin:0 8px; }
.rb-left{ display:flex; align-items:center; gap:8px; color:#0d8a5f; font-size:14px; }
.rb-left svg{ width:16px; height:16px; }
.rb-txt b{ color:var(--title); }
.rb-clear{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--stroke); background:var(--white);
  color:var(--btn-text); border-radius:8px; padding:6px 12px; font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .15s, border-color .15s; }
.rb-clear:hover{ background:var(--btn-bg); border-color:#cfd3e0; }
.rb-clear svg{ width:14px; height:14px; }

/* ============================================================
   INFO POPOVER — click-to-open card anchored under a tg-info button
   ============================================================ */
.info-popover{ position:absolute; z-index:200; width:300px; max-width:calc(100vw - 32px);
  background:var(--white); border:1px solid var(--stroke); border-radius:12px;
  box-shadow:0 12px 32px rgba(23,43,77,0.16); }
.ip-head{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  border-bottom:1px solid var(--stroke); }
.ip-title{ font-size:13px; font-weight:700; color:var(--title); }
.ip-close{ width:22px; height:22px; border:none; background:none; color:var(--text-light); cursor:pointer;
  display:flex; align-items:center; justify-content:center; }
.ip-close svg{ width:14px; height:14px; }
.ip-body{ padding:12px 14px; font-size:13px; color:var(--text-dark); line-height:1.5; }
.ip-body .ip-text{ margin-bottom:8px; }
.ip-body .ip-sub{ color:var(--text-light); }
.ip-body .ip-sub b{ color:var(--title); }
.ip-factors{ display:flex; flex-direction:column; gap:6px; }
.ip-factor{ display:flex; align-items:center; justify-content:space-between; background:#f6f8fb;
  border:1px solid var(--stroke); border-radius:8px; padding:7px 10px; }
.ip-factor-k{ font-size:12px; font-weight:600; color:var(--text-light); }
.ip-factor-v{ font-size:13px; font-weight:700; color:var(--title); }

/* ============================================================
   CRF TAB (inline in protocol-review, not separate page)
   ============================================================ */
/* wider than the document tabs — the question table carries eight columns */
.crf-content{ padding:24px; max-width:1360px; margin:0 auto; }
.crf-header{ display:flex; align-items:center; gap:12px; margin-bottom:24px; padding-bottom:18px;
  border-bottom:1px solid var(--stroke); }
.crf-proc-name{ font-size:20px; font-weight:700; color:var(--title); }
.crf-source-tag{ font-size:12px; font-weight:700; letter-spacing:0.4px; color:var(--green);
  background:var(--badge-bg); border:1px solid rgba(0,225,133,0.25); border-radius:20px; padding:4px 12px; }
.crf-body{ display:flex; align-items:flex-start; gap:24px; position:relative; }
.crf-fields{ flex:1; min-width:0; }
/* ---------- question tables — one card per (procedure, group) ---------- */
.crf-tblgrp{ background:var(--white); border:1px solid var(--stroke); border-radius:12px;
  overflow:hidden; margin-bottom:16px; }
.crf-tblgrp-head{ display:flex; align-items:center; gap:9px; padding:12px 16px;
  background:var(--section-bg); border-bottom:1px solid var(--stroke); }
.crf-tblgrp-ic{ width:17px; height:17px; color:var(--text-light); flex:0 0 17px; }
.crf-tblgrp-name{ font-size:14px; font-weight:700; color:var(--title); }
.crf-tblgrp-code{ font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--btn-text);
  background:#eef1f6; border:1px solid var(--stroke); border-radius:20px; padding:2px 9px; }
/* in "all procedures" mode a group name alone repeats (four forms carry
   "Laboratory (LB)"), so the owning procedure names the card */
.crf-tblgrp-proc{ margin-left:auto; font-size:12px; font-weight:600; color:var(--text-light); }

.crf-tblwrap{ overflow-x:auto; }
.crf-tblwrap::-webkit-scrollbar{ height:6px; }
.crf-tblwrap::-webkit-scrollbar-thumb{ background:#dfe3ec; border-radius:4px; }
/* fixed layout so the columns line up card to card — each group is its own
   table, and auto layout would size every one of them differently */
table.crf-tbl{ width:100%; min-width:1080px; border-collapse:collapse; font-size:13px; table-layout:fixed; }
table.crf-tbl th{ text-align:left; font-size:12px; font-weight:600; color:var(--text-light);
  padding:10px 12px; border-bottom:1px solid var(--stroke); white-space:nowrap; }
table.crf-tbl td{ padding:12px; border-bottom:1px solid #f1f3f8; color:var(--muted); vertical-align:middle; }
table.crf-tbl tbody tr:last-child td{ border-bottom:none; }
table.crf-tbl tr.crf-row:hover td{ background:#fbfcfe; }
table.crf-tbl tr.crf-row.active td{ background:rgba(0,225,133,0.05); }
/* severity rail on the question cell, as on the SDTM table */
table.crf-tbl tr.crf-row.error td.c-q{ box-shadow:inset 3px 0 0 var(--sev-crit); }
table.crf-tbl tr.crf-row.warn  td.c-q{ box-shadow:inset 3px 0 0 var(--sev-minor); }
/* this specific question IS the current root */
table.crf-tbl tr.crf-row.root-active td{ background:rgba(0,225,133,0.05); }
table.crf-tbl tr.crf-row.root-active td.c-q{ box-shadow:inset 3px 0 0 var(--green); }
table.crf-tbl tr.crf-row.root-active .crf-q::after{ content:"ROOT"; margin-left:7px; font-size:10px;
  font-weight:800; letter-spacing:0.5px; color:#0d8a5f; background:rgba(0,225,133,0.15);
  border-radius:5px; padding:2px 6px; }

/* columns — the question and the description take the slack */
th.c-q{ width:24%; }
th.c-act{ width:104px; } th.c-var{ width:112px; } th.c-def{ width:100px; }
th.c-type{ width:88px; } th.c-core{ width:112px; } th.c-ver{ width:80px; }
th.c-desc{ width:auto; }
.crf-q{ font-size:14px; font-weight:600; color:var(--title); }
td.c-act{ white-space:nowrap; }
td.c-type, td.c-core, td.c-ver{ font-weight:600; color:var(--text-dark); }
td.c-desc{ font-size:12px; color:var(--text-light); line-height:1.45; }

/* the SDTM/CDASH variable the question feeds, and which standard defines it */
.crf-var{ display:inline-block; font-family:var(--dx-mono); font-size:11px; font-weight:700;
  color:#0d8a5f; background:rgba(0,225,133,0.10); border:1px solid rgba(0,225,133,0.30);
  border-radius:20px; padding:3px 10px; white-space:nowrap; }
.crf-def{ display:inline-block; font-size:11px; font-weight:600; color:var(--btn-text);
  background:#eef1f6; border:1px solid var(--stroke); border-radius:20px; padding:3px 10px; white-space:nowrap; }

/* validation chips — click one to open the field's detail panel */
.crf-chip{ margin-left:7px; font-family:inherit; font-size:10px; font-weight:700; border-radius:20px;
  padding:3px 9px; cursor:pointer; white-space:nowrap; vertical-align:1px; }
.crf-chip.error{ background:var(--sev-crit-bg); color:var(--sev-crit); border:1px solid var(--sev-crit-line); }
.crf-chip.warn{ background:var(--y50); color:var(--y600); border:1px solid var(--y200); }
.crf-chip:hover{ filter:brightness(0.97); box-shadow:0 0 0 2px rgba(0,0,0,0.03); }
/* empty fallback */
.crf-empty{ background:var(--white); border:1px dashed var(--stroke); border-radius:12px; padding:40px 28px; text-align:center; }
.crf-empty-t{ font-size:17px; font-weight:700; color:var(--title); margin-bottom:8px; }
.crf-empty-s{ font-size:14px; color:var(--text-light); line-height:1.5; max-width:520px; margin:0 auto; }

/* hover panel (right-hand, like SOA detail drawer) */
.crf-hover-panel{ flex:0 0 0; width:0; overflow:hidden; align-self:stretch; background:var(--white);
  border:1px solid var(--stroke); border-radius:16px; transition:width .18s ease, opacity .18s ease; opacity:0; }
.crf-hover-panel.show{ flex:0 0 380px; width:380px; opacity:1; box-shadow:0 8px 30px rgba(23,43,77,0.08); }
.crf-hover-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 16px;
  border-bottom:1px solid var(--stroke); }
.crf-hover-title{ font-size:18px; font-weight:800; color:var(--title); }
.crf-hover-body{ padding:20px 22px; max-height:calc(100vh - 320px); overflow-y:auto; }
.crf-d-sec{ font-size:12px; font-weight:700; letter-spacing:0.6px; color:var(--text-light);
  margin:18px 0 12px; }
.crf-d-row{ margin-bottom:14px; }
.crf-d-k{ font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--text-light); margin-bottom:5px; }
.crf-d-v{ font-size:14px; font-weight:600; color:var(--title); background:#f6f8fb; border:1px solid var(--stroke);
  border-radius:10px; padding:10px 13px; }
.crf-ver{ display:flex; align-items:flex-start; gap:10px; border:1px solid var(--stroke); border-radius:10px;
  padding:10px 12px; margin-bottom:10px; }
.crf-ver-ic{ flex:0 0 auto; margin-top:1px; } .crf-ver-ic svg{ width:18px; height:18px; }
.crf-ver-name{ font-size:14px; font-weight:700; color:var(--title); }
.crf-ver-note{ font-size:13px; color:var(--text-light); margin-top:2px; line-height:1.4; }
.crf-ver.ok{ background:rgba(0,225,133,0.05); border-color:rgba(0,225,133,0.25); } .crf-ver.ok .crf-ver-ic{ color:#12b877; }
.crf-ver.warn{ background:#fff8ec; border-color:#fde3b0; } .crf-ver.warn .crf-ver-ic{ color:#c9820c; }
.crf-ver.conflict{ background:#fef1f1; border-color:#f9c9c9; } .crf-ver.conflict .crf-ver-ic{ color:#d64545; }

/* ============================================================
   SDTM TAB (inline in protocol-review)
   ============================================================ */
.sdtm-content{ padding:24px; max-width:1200px; margin:0 auto; }
.sdtm-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:16px;
  border-bottom:1px solid var(--stroke); }
.sdtm-header-left{ display:flex; align-items:center; gap:12px; }
.sdtm-proc-name{ font-size:20px; font-weight:700; color:var(--title); }
.sdtm-source-tag{ font-size:12px; font-weight:700; letter-spacing:0.4px; color:#0e83b3;
  background:#e6f4fb; border:1px solid rgba(14,131,179,0.25); border-radius:20px; padding:4px 12px; }
.sdtm-views{ display:flex; gap:8px; }
.sdtm-view{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:1px solid var(--stroke);
  background:var(--white); color:var(--text-light); font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s; }
.sdtm-view svg{ width:16px; height:16px; }
.sdtm-view:hover{ background:var(--btn-bg); border-color:var(--btn-border); }
.sdtm-view.active{ background:var(--green); border-color:var(--green); color:#fff; }
.sdtm-issuebar{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
  background:#fef1f1; border:1px solid #f9c9c9; border-radius:12px; margin-bottom:22px; }
.sdtm-issue-left{ display:flex; align-items:center; gap:14px; }
.sdtm-issue-title{ font-size:13px; font-weight:700; letter-spacing:0.5px; color:var(--text-dark);
  border-left:3px solid #d64545; padding-left:10px; }
.sdtm-issue-pill{ display:inline-flex; align-items:center; gap:7px; background:#f3ecfe; color:#7c3aed;
  border:1px solid #e5d5fb; border-radius:20px; padding:6px 14px; font-size:13px; font-weight:600; }
.sdtm-issue-pill svg{ width:16px; height:16px; }
.sdtm-issue-total{ font-size:14px; color:var(--text-light); } .sdtm-issue-total b{ color:var(--title); }
.sdtm-body{ }
.sdtm-domain{ margin-bottom:26px; }
.sdtm-domain-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
  padding-bottom:10px; border-bottom:2px solid var(--stroke); }
.sdtm-domain-name{ font-size:13px; font-weight:700; letter-spacing:0.6px; color:var(--text-dark); }
.sdtm-domain-issue{ font-size:12px; color:#d64545; font-weight:600; }

/* SDTM variable card */
.sdtm-card{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  background:var(--white); border:1px solid var(--stroke); border-radius:12px; padding:18px 20px;
  margin-bottom:12px; }
.sdtm-card.error{ border-color:#f9c9c9; background:#fef1f1; }
.sdtm-card.warn{ border-color:#fde3b0; background:#fff8ec; }
/* this specific variable IS the current root */
.sdtm-card.root-active{ border-color:var(--green); background:rgba(0,225,133,0.05); box-shadow:inset 3px 0 0 var(--green); }
.sdtm-card.root-active .sdtm-card-title::after{ content:"ROOT"; margin-left:2px; font-size:10px; font-weight:800; letter-spacing:0.5px;
  color:#0d8a5f; background:rgba(0,225,133,0.15); border-radius:5px; padding:2px 6px; }
.sdtm-card-title{ display:flex; align-items:center; gap:10px; font-size:16px; font-weight:700; color:var(--title); }
.sdtm-card-label{ margin-top:6px; font-size:13px; color:var(--text-light); font-weight:500; }
.sdtm-card-note{ margin-top:8px; font-size:12px; color:var(--muted); display:flex; align-items:flex-start; gap:6px; }
.sdtm-card-note::before{ content:"\25CF"; color:#f0a020; font-size:10px; margin-top:1px; }
.sdtm-badge{ font-size:11px; font-weight:700; border-radius:6px; padding:3px 9px; letter-spacing:0.3px; }
.sdtm-badge.error{ background:#d64545; color:#fff; }
.sdtm-badge.warn{ background:#f0a020; color:#fff; }

/* SDTM hover panel + user-defined variables */
.sdtm-wrap{ display:flex; align-items:flex-start; gap:24px; position:relative; }
.sdtm-content{ flex:1; min-width:0; }
.sdtm-hover-panel{ flex:0 0 0; width:0; overflow:hidden; align-self:stretch; background:var(--white);
  border:1px solid var(--stroke); border-radius:16px; transition:width .18s ease, opacity .18s ease; opacity:0; }
.sdtm-hover-panel.show{ flex:0 0 380px; width:380px; opacity:1; box-shadow:0 8px 30px rgba(23,43,77,0.08); }
.sdtm-hover-head{ display:flex; align-items:center; justify-content:space-between; padding:20px 22px 16px;
  border-bottom:1px solid var(--stroke); }
.sdtm-hover-title{ font-size:18px; font-weight:800; color:var(--title); }
.sdtm-hover-body{ padding:20px 22px; max-height:calc(100vh - 320px); overflow-y:auto; }
.sdtm-detail-tag{ display:inline-flex; align-items:center; gap:7px; border-radius:20px; padding:6px 14px;
  font-size:13px; font-weight:700; margin-bottom:22px; }
.sdtm-detail-tag.std{ background:#e6f4fb; color:#0e83b3; }
.sdtm-detail-tag.user{ background:#f0ecfe; color:#7c3aed; }
.sdtm-d-sec{ font-size:12px; font-weight:700; letter-spacing:0.6px; color:var(--text-light); margin:18px 0 12px; }
.sdtm-d-row{ margin-bottom:14px; }
.sdtm-d-k{ font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--text-light); margin-bottom:5px; }
.sdtm-d-v{ font-size:14px; font-weight:600; color:var(--title); background:#f6f8fb; border:1px solid var(--stroke);
  border-radius:10px; padding:10px 13px; }
.sdtm-card.active{ border-color:var(--green); box-shadow:0 0 0 3px rgba(0,225,133,0.08); }
.sdtm-card.user-defined{ border-left:3px solid #7c3aed; }
.sdtm-user-tag{ font-size:10px; font-weight:700; border-radius:6px; padding:3px 8px; letter-spacing:0.3px;
  background:#f0ecfe; color:#7c3aed; }

/* ---------- SDTM variable table ---------- */
.sdtm-issue-untraced{ font-size:12px; font-weight:600; color:var(--sev-crit); background:var(--sev-crit-bg);
  border:1px solid var(--sev-crit-line); border-radius:20px; padding:3px 10px; }
/* the domain index reuses the Protocol index component, so it needs the same
   collapse behaviour on its own wrapper */
.sdtm-wrap.collapsed .index{ display:none; }
.sdtm-wrap.collapsed .index-rail{ display:flex; }
.sdtm-wrap .index{ margin-top:24px; }
.sdtm-wrap .index-rail{ margin-top:24px; }
.index-item .idx-vars{ font-size:11px; font-weight:600; color:#9aa3b6; }

.sdtm-tblwrap{ border:1px solid var(--stroke); border-radius:12px; overflow-x:auto; }
table.sdtm-tbl{ width:100%; border-collapse:collapse; font-size:13px; }
table.sdtm-tbl th{ position:sticky; top:0; z-index:1; background:var(--section-bg); text-align:left;
  font-size:10px; font-weight:700; letter-spacing:0.7px; text-transform:uppercase; color:var(--text-light);
  padding:10px 12px; border-bottom:1px solid var(--stroke); white-space:nowrap; }
table.sdtm-tbl th.v-act{ text-align:right; }
table.sdtm-tbl td{ padding:10px 12px; border-bottom:1px solid #f1f3f8; color:var(--muted); vertical-align:top; }
table.sdtm-tbl tbody tr:last-child td{ border-bottom:none; }
table.sdtm-tbl tr.sdtm-proc td{ background:#eef4f8; font-size:11px; font-weight:700; letter-spacing:0.7px;
  text-transform:uppercase; color:var(--teal); padding:8px 12px; }
table.sdtm-tbl tr.sdtm-grp td{ background:#fafbfd; padding:7px 12px; }
table.sdtm-tbl tr.sdtm-grp .g{ font-size:11px; font-weight:700; letter-spacing:0.6px; color:var(--text-dark); }
table.sdtm-tbl tr.sdtm-grp .gi{ margin-left:10px; font-size:11px; font-weight:600; color:#d64545; }
table.sdtm-tbl tr.sdtm-row:hover td{ background:#fbfcfe; }
table.sdtm-tbl tr.sdtm-row.error td.v-var{ box-shadow:inset 3px 0 0 var(--sev-crit); }
table.sdtm-tbl tr.sdtm-row.warn td.v-var{ box-shadow:inset 3px 0 0 var(--sev-minor); }
table.sdtm-tbl tr.sdtm-row.active td{ background:rgba(0,225,133,0.05); }
table.sdtm-tbl tr.sdtm-row.root-active td.v-var{ box-shadow:inset 3px 0 0 var(--green); }
td.v-var{ white-space:nowrap; }
td.v-var .m{ font-family:var(--dx-mono); font-size:12.5px; font-weight:700; color:var(--title); }
.sdtm-dom{ display:inline-block; margin-left:8px; font-family:var(--dx-mono); font-size:10px; font-weight:600;
  color:var(--text-light); background:var(--btn-bg); border:1px solid var(--stroke); border-radius:5px; padding:1px 6px; }
td.v-label{ min-width:150px; color:var(--text-dark); }
td.v-type{ white-space:nowrap; }
.sdtm-type{ font-family:var(--dx-mono); font-size:10.5px; font-weight:600; color:var(--btn-text);
  background:var(--btn-bg); border-radius:5px; padding:2px 7px; }
td.v-desc{ min-width:220px; max-width:420px; font-size:12.5px; line-height:18px; color:var(--text-light); }
td.v-std{ white-space:nowrap; }
.sdtm-std{ font-size:10.5px; font-weight:700; border-radius:20px; padding:3px 10px; white-space:nowrap;
  cursor:default; }
.sdtm-std.sdtm{ background:#e6f4fb; color:#0e83b3; border:1px solid #cfe8f5; }
.sdtm-std.org{ background:rgba(0,225,133,0.08); color:#0d8a5f; border:1px solid rgba(0,225,133,0.35); }
.sdtm-std.user{ background:#f0ecfe; color:#7c3aed; border:1px solid #ddd3fb; }
td.v-viol{ min-width:150px; }
.sdtm-vtag{ display:inline-block; margin:0 5px 4px 0; font-family:inherit; font-size:10px; font-weight:700;
  letter-spacing:0.3px; text-transform:uppercase; border-radius:6px; padding:3px 8px; cursor:pointer; }
.sdtm-vtag.error{ background:var(--sev-crit-bg); color:var(--sev-crit); border:1px solid var(--sev-crit-line); }
.sdtm-vtag.warn{ background:var(--y50); color:var(--y600); border:1px solid var(--y200); }
.sdtm-vtag:hover{ filter:brightness(0.97); box-shadow:0 0 0 2px rgba(0,0,0,0.03); }
.sdtm-vok{ color:#c4cbd9; }
td.v-act{ text-align:right; white-space:nowrap; }
td.v-act .trace-group{ display:inline-flex; }

/* detail / violation side panel */
.sdtm-detail-tag.sdtm{ background:#e6f4fb; color:#0e83b3; }
.sdtm-detail-tag.org{ background:rgba(0,225,133,0.10); color:#0d8a5f; }
.sdtm-detail-tag.viol.error{ background:var(--sev-crit-bg); color:var(--sev-crit); }
.sdtm-detail-tag.viol.warn{ background:var(--y50); color:var(--y600); }
.sdtm-v-title{ margin-top:12px; font-size:16px; font-weight:700; color:var(--title); line-height:1.35; }
.sdtm-d-note{ font-size:13px; line-height:19px; color:var(--text-light); }
.sdtm-d-note b{ color:var(--text-dark); font-weight:700; }
.sdtm-d-note.quoted{ margin-top:8px; padding:9px 12px; background:var(--section-bg); border-radius:9px;
  border-left:2px solid var(--y400); color:var(--muted); }
.sdtm-d-note code,.sdtm-d-v code{ font-family:var(--dx-mono); font-size:11.5px; color:var(--btn-text);
  background:var(--btn-bg); border:1px solid var(--stroke); border-radius:5px; padding:1px 6px; }

/* SDTM Code View */
.sdtm-code-card{ background:var(--white); border:1px solid var(--stroke); border-radius:12px; padding:20px;
  margin-bottom:16px; }
.sdtm-code-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.sdtm-code-title{ font-size:16px; font-weight:700; color:var(--title); }
.sdtm-code-var{ font-family:'Courier New', monospace; font-size:14px; color:var(--green); font-weight:600; }
.sdtm-code-meta{ display:flex; align-items:center; gap:8px; }
.sdtm-code-badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.sdtm-code-badge.type{ background:#e2e8f0; color:#334155; }
.sdtm-code-badge.domain{ background:#dbeafe; color:#075985; }
.sdtm-derivation{ background:#f6f8fb; border:1px solid var(--stroke); border-radius:8px; padding:12px 16px;
  margin-bottom:14px; }
.sdtm-derivation-label{ font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--text-light);
  margin-bottom:6px; }
.sdtm-derivation-text{ font-size:13px; font-weight:600; color:var(--title); line-height:1.5; }
.sdtm-code-block{ background:#1e293b; border-radius:8px; padding:16px 18px; overflow-x:auto; }
.sdtm-code-block pre{ margin:0; font-family:'Courier New', Consolas, monospace; font-size:13px; line-height:1.6;
  color:#e2e8f0; white-space:pre; }
.sdtm-code-block .comment{ color:#94a3b8; }
.sdtm-code-block .keyword{ color:#38bdf8; font-weight:600; }
.sdtm-code-block .string{ color:#86efac; }
.sdtm-code-empty{ text-align:center; padding:60px 20px; color:var(--text-light); }
.sdtm-code-empty svg{ width:48px; height:48px; margin:0 auto 16px; opacity:0.3; }
.sdtm-code-empty-title{ font-size:16px; font-weight:700; color:var(--title); margin-bottom:8px; }
.sdtm-code-empty-sub{ font-size:14px; }

/* =====================================================================
   RAW DATA PANEL
   ===================================================================== */
.rd-content{ padding:24px; max-width:100%; margin:0 auto; }
.rd-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; padding:16px 20px;
  background:var(--white); border:1px solid var(--stroke); border-radius:12px; }
.rd-views{ display:flex; gap:8px; }
.rd-view{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; border:1px solid var(--stroke);
  background:var(--white); color:var(--text-light); font-size:13px; font-weight:600; cursor:pointer;
  transition:all .15s; }
.rd-view svg{ width:16px; height:16px; }
.rd-view:hover{ background:var(--btn-bg); border-color:var(--btn-border); }
.rd-view.active{ background:var(--green); border-color:var(--green); color:#fff; }
.rd-note{ font-size:13px; color:var(--text-light); }

/* Raw data domain */
.rd-domain{ margin-bottom:32px; }
.rd-domain-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.rd-domain-title{ display:flex; align-items:baseline; gap:6px; }
.rd-domain-name{ font-size:20px; font-weight:800; color:var(--title); }
.rd-domain-subtitle{ font-size:14px; font-weight:600; color:var(--text-light); }
.rd-domain-info{ display:flex; align-items:center; gap:12px; }
.rd-domain-records{ font-size:13px; color:var(--text-light); }
.rd-issues{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:8px;
  background:#fef2f2; color:#dc2626; font-size:12px; font-weight:600; cursor:help; position:relative; }
.rd-issues svg{ width:14px; height:14px; }
.rd-issues:hover::after{ content:attr(data-missing); position:absolute; top:100%; right:0; margin-top:8px;
  background:#1f2937; color:#fff; padding:10px 14px; border-radius:8px; font-size:11px; font-weight:500;
  white-space:pre-line; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.15); min-width:250px; max-width:350px;
  line-height:1.5; }

/* Raw data table */
.rd-table-wrap{ overflow-x:auto; border:1px solid var(--stroke); border-radius:12px; background:var(--white); }
.rd-table{ width:100%; border-collapse:collapse; font-size:13px; }
.rd-table thead tr{ background:#f6f8fb; border-bottom:2px solid var(--stroke); }
.rd-table th{ padding:12px 14px; text-align:left; font-weight:700; color:var(--title); border-right:1px solid var(--stroke); }
.rd-table th:last-child{ border-right:none; }
.rd-th-id{ width:140px; }
.rd-th-subject{ width:100px; }
.rd-th-inner{ display:flex; flex-direction:column; gap:4px; }
.rd-col-label{ font-size:13px; font-weight:700; color:var(--title); }
.rd-col-origin{ font-size:10px; font-weight:600; letter-spacing:0.3px; padding:2px 6px; border-radius:4px;
  display:inline-block; }
.rd-origin-protocol .rd-col-origin{ background:#fff7e6; color:#f59e0b; }
.rd-origin-assigned .rd-col-origin{ background:#e6f4fb; color:#0e83b3; }
.rd-origin-collected .rd-col-origin{ background:#d7fbec; color:#12b877; }

.rd-table tbody tr{ border-bottom:1px solid var(--stroke); }
.rd-table tbody tr:hover{ background:#f9fafb; }
.rd-table td{ padding:10px 14px; border-right:1px solid var(--stroke); }
.rd-table td:last-child{ border-right:none; }
.rd-id{ font-family:'Courier New', monospace; font-size:12px; color:var(--text-light); }
.rd-subject{ font-weight:600; color:var(--title); }

/* =====================================================================
   ADAM PANEL
   ===================================================================== */
.adam-content{ padding:24px; max-width:1400px; margin:0 auto; }

/* Adam list view */
.adam-list-header{ margin-bottom:32px; }
.adam-list-title{ font-size:28px; font-weight:800; color:var(--title); margin-bottom:8px; }
.adam-list-subtitle{ font-size:15px; color:var(--text-light); }
.adam-datasets{ display:grid; grid-template-columns:repeat(auto-fill, minmax(400px, 1fr)); gap:20px; }

.adam-dataset-card{ background:var(--white); border:1px solid var(--stroke); border-radius:12px; padding:20px;
  cursor:pointer; transition:all .2s; }
.adam-dataset-card:hover{ box-shadow:0 4px 12px rgba(0,0,0,0.08); border-color:var(--green); }
.adam-dataset-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.adam-dataset-name{ font-size:20px; font-weight:800; color:var(--title); }
.adam-dataset-category{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px;
  background:#e6f4fb; color:#0e83b3; }
.adam-dataset-label{ font-size:14px; font-weight:600; color:var(--text); margin-bottom:12px; }
.adam-dataset-desc{ font-size:13px; color:var(--text-light); line-height:1.6; margin-bottom:14px; }
.adam-dataset-footer{ display:flex; align-items:center; justify-content:space-between; padding-top:12px;
  border-top:1px solid var(--stroke); }
.adam-dataset-vars{ font-size:13px; color:var(--text-light); }
.adam-dataset-vars strong{ color:var(--title); font-weight:700; }
.adam-dataset-arrow{ color:var(--green); }
.adam-dataset-arrow svg{ width:18px; height:18px; }

/* Adam detail view */
.adam-detail-view{ display:none !important; }
.adam-detail-view.show{ display:block !important; }
.adam-detail-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;
  padding-bottom:20px; border-bottom:1px solid var(--stroke); }
.adam-back-btn{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:8px;
  border:1px solid var(--stroke); background:var(--white); color:var(--text-light); font-size:14px;
  font-weight:600; cursor:pointer; transition:all .15s; }
.adam-back-btn:hover{ background:var(--btn-bg); border-color:var(--btn-border); color:var(--btn-text); }
.adam-back-btn svg{ width:16px; height:16px; }
.adam-detail-title-area{ flex:1; text-align:center; }
.adam-detail-name{ font-size:24px; font-weight:800; color:var(--title); margin-bottom:4px; }
.adam-detail-label{ font-size:14px; color:var(--text-light); }
.adam-detail-views{ display:flex; gap:8px; }
.adam-detail-view-btn{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px;
  border:1px solid var(--stroke); background:var(--white); color:var(--text-light); font-size:13px;
  font-weight:600; cursor:pointer; transition:all .15s; }
.adam-detail-view-btn svg{ width:16px; height:16px; }
.adam-detail-view-btn:hover{ background:var(--btn-bg); border-color:var(--btn-border); }
.adam-detail-view-btn.active{ background:var(--green); border-color:var(--green); color:#fff; }
.adam-detail-body{ min-height:400px; }

/* Adam data view */
.adam-data-table{ width:100%; border-collapse:collapse; font-size:13px; border:1px solid var(--stroke);
  border-radius:12px; overflow:hidden; background:var(--white); }
.adam-data-table thead tr{ background:#f6f8fb; border-bottom:2px solid var(--stroke); }
.adam-data-table th{ padding:12px 14px; text-align:left; font-weight:700; color:var(--title);
  border-right:1px solid var(--stroke); }
.adam-data-table th:last-child{ border-right:none; }
.adam-data-table tbody tr{ border-bottom:1px solid var(--stroke); }
.adam-data-table tbody tr:hover{ background:#f9fafb; }
.adam-data-table td{ padding:10px 14px; border-right:1px solid var(--stroke); }
.adam-data-table td:last-child{ border-right:none; }

/* Adam schema view */
.adam-schema-card{ background:var(--white); border:1px solid var(--stroke); border-radius:12px; padding:20px;
  margin-bottom:16px; }
.adam-schema-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.adam-schema-var{ font-family:'Courier New', monospace; font-size:16px; font-weight:700; color:var(--green); }
.adam-schema-label{ font-size:13px; color:var(--text-light); margin-top:4px; }
.adam-schema-badges{ display:flex; gap:8px; }
.adam-schema-badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.adam-schema-badge.type{ background:#e2e8f0; color:#334155; }
.adam-schema-badge.source{ background:#d7fbec; color:#12b877; }
.adam-schema-badge.derived{ background:#fef3c7; color:#f59e0b; }
.adam-derivation-block{ background:#f6f8fb; border:1px solid var(--stroke); border-radius:8px; padding:16px; }
.adam-derivation-label{ font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--text-light);
  margin-bottom:8px; }
.adam-derivation-text{ font-size:13px; font-weight:600; color:var(--title); margin-bottom:12px; }
.adam-derivation-from{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.adam-derivation-from-label{ font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--text-light); }
.adam-derivation-sources{ display:flex; flex-wrap:wrap; gap:6px; }
.adam-source-chip{ font-family:'Courier New', monospace; font-size:12px; padding:4px 10px; border-radius:6px;
  background:#e6f4fb; color:#0e83b3; font-weight:600; }
.adam-formula{ background:#1e293b; border-radius:8px; padding:12px 16px; margin-top:8px; }
.adam-formula pre{ margin:0; font-family:'Courier New', Consolas, monospace; font-size:12px; line-height:1.5;
  color:#e2e8f0; white-space:pre-wrap; }

/* Adam code view */
.adam-code-section{ margin-bottom:24px; }
.adam-code-desc{ background:#f6f8fb; border:1px solid var(--stroke); border-radius:8px; padding:16px;
  margin-bottom:16px; }
.adam-code-desc-title{ font-size:14px; font-weight:700; color:var(--title); margin-bottom:8px; }
.adam-code-desc-text{ font-size:13px; color:var(--text); line-height:1.6; }
.adam-code-block{ background:#1e293b; border-radius:12px; padding:20px; overflow-x:auto; max-height:600px;
  overflow-y:auto; }
.adam-code-block pre{ margin:0; font-family:'Courier New', Consolas, monospace; font-size:13px; line-height:1.7;
  color:#e2e8f0; white-space:pre; }
.adam-code-block .comment{ color:#94a3b8; }
.adam-code-block .keyword{ color:#38bdf8; font-weight:600; }
.adam-code-block .string{ color:#86efac; }

/* =====================================================================
   TLF PANEL
   ===================================================================== */
.tlf-content{ padding:24px; max-width:1400px; margin:0 auto; }
.tlf-header{ margin-bottom:32px; }
.tlf-header-left{ }
.tlf-title{ font-size:28px; font-weight:800; color:var(--title); margin-bottom:8px; }
.tlf-subtitle{ font-size:15px; color:var(--text-light); }

/* TLF Categories */
.tlf-category{ margin-bottom:32px; }
.tlf-category-header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; padding-bottom:12px;
  border-bottom:2px solid var(--stroke); }
.tlf-category-name{ font-size:20px; font-weight:800; color:var(--title); }
.tlf-category-count{ font-size:13px; color:var(--text-light); }
.tlf-list{ display:flex; flex-direction:column; gap:12px; }

/* TLF Card */
.tlf-card{ background:var(--white); border:1px solid var(--stroke); border-radius:12px; padding:18px 20px;
  cursor:pointer; transition:all .2s; display:flex; align-items:center; gap:16px; }
.tlf-card:hover{ box-shadow:0 4px 12px rgba(0,0,0,0.08); border-color:var(--green); }
.tlf-card-icon{ width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; }
.tlf-card-icon svg{ width:20px; height:20px; }
.tlf-card-icon.table{ background:#e6f4fb; color:#0e83b3; }
.tlf-card-icon.listing{ background:#d7fbec; color:#12b877; }
.tlf-card-icon.figure{ background:#f0ecfe; color:#7c3aed; }
.tlf-card-content{ flex:1; min-width:0; }
.tlf-card-header{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.tlf-card-number{ font-size:14px; font-weight:800; color:var(--title); }
.tlf-card-title{ font-size:14px; font-weight:600; color:var(--text); }
.tlf-card-meta{ display:flex; align-items:center; gap:12px; }
.tlf-card-adam{ display:flex; gap:6px; flex-wrap:wrap; }
.tlf-adam-chip{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:5px; background:#f0ecfe;
  color:#7c3aed; }
.tlf-card-status{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.tlf-status-badge{ font-size:11px; font-weight:700; padding:4px 10px; border-radius:6px; }
.tlf-status-badge.final{ background:#d7fbec; color:#12b877; }
.tlf-status-badge.qc{ background:#dbeafe; color:#075985; }
.tlf-status-badge.draft{ background:#fef3c7; color:#f59e0b; }
.tlf-card-arrow{ color:var(--green); }
.tlf-card-arrow svg{ width:18px; height:18px; }

/* TLF Modal */
.tlf-modal{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:1000; display:flex; align-items:center;
  justify-content:center; }
.tlf-modal-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); }
.tlf-modal-content{ position:relative; background:var(--white); border-radius:16px; width:90%; max-width:1200px;
  max-height:90vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.tlf-modal-header{ padding:24px 28px; border-bottom:1px solid var(--stroke); display:flex; align-items:flex-start;
  justify-content:space-between; }
.tlf-modal-title-area{ flex:1; }
.tlf-modal-number{ font-size:14px; font-weight:700; color:var(--green); margin-bottom:6px; }
.tlf-modal-title{ font-size:20px; font-weight:800; color:var(--title); }
.tlf-modal-close{ width:36px; height:36px; border-radius:50%; border:1px solid var(--stroke); background:var(--white);
  color:var(--text-light); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0; }
.tlf-modal-close:hover{ background:var(--btn-bg); color:var(--btn-text); }
.tlf-modal-close svg{ width:18px; height:18px; }
.tlf-modal-body{ flex:1; overflow:hidden; display:flex; flex-direction:column; }
.tlf-modal-tabs{ display:flex; gap:4px; padding:16px 28px 0; border-bottom:1px solid var(--stroke); }
.tlf-modal-tab{ padding:10px 20px; border-radius:8px 8px 0 0; border:none; background:transparent;
  color:var(--text-light); font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; }
.tlf-modal-tab:hover{ background:#f6f8fb; }
.tlf-modal-tab.active{ background:var(--white); color:var(--title); border-bottom:2px solid var(--green); }
.tlf-modal-content-area{ flex:1; overflow-y:auto; padding:24px 28px; }

/* TLF Preview */
.tlf-preview{ background:#1e293b; border-radius:12px; padding:24px; overflow-x:auto; }
.tlf-preview pre{ margin:0; font-family:'Courier New', Consolas, monospace; font-size:13px; line-height:1.7;
  color:#e2e8f0; white-space:pre; }

/* TLF Connection View */
.tlf-connection-section{ margin-bottom:24px; }
.tlf-connection-desc{ background:#f6f8fb; border:1px solid var(--stroke); border-radius:8px; padding:16px;
  margin-bottom:16px; }
.tlf-connection-desc-text{ font-size:14px; color:var(--text); line-height:1.6; }
.tlf-connection-title{ font-size:16px; font-weight:700; color:var(--title); margin-bottom:12px; }
.tlf-connection-vars{ display:flex; flex-direction:column; gap:12px; }
.tlf-var-card{ background:var(--white); border:1px solid var(--stroke); border-radius:8px; padding:14px 16px; }
.tlf-var-name{ font-family:'Courier New', monospace; font-size:14px; font-weight:700; color:var(--green);
  margin-bottom:6px; }
.tlf-var-usage{ font-size:13px; color:var(--text); }
.tlf-connection-program{ background:#f6f8fb; border:1px solid var(--stroke); border-radius:8px; padding:14px 16px;
  margin-top:16px; }
.tlf-connection-program-label{ font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--text-light);
  margin-bottom:6px; }
.tlf-connection-program-path{ font-family:'Courier New', monospace; font-size:13px; color:var(--title); }

/* ---------- Tab Loading Indicator ---------- */
.tab-loading{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.3);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  backdrop-filter:blur(2px);
}
.tab-loading-spinner{
  width:48px;
  height:48px;
  border:4px solid rgba(255,255,255,0.3);
  border-top-color:var(--green);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* =====================================================================
   EDIT CHECKS PANEL
   ===================================================================== */
.ec-content{ padding:24px; max-width:1400px; margin:0 auto; }
.ec-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:20px; }
.ec-title{ font-size:28px; font-weight:800; color:var(--title); margin:0 0 8px; }
.ec-subtitle{ font-size:15px; color:var(--text-light); margin:0; }
.ec-summary{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.ec-sum-pill{ font-size:12px; font-weight:700; padding:6px 12px; border-radius:8px; white-space:nowrap; }
.ec-sum-pill.total{ background:#f1f5f9; color:#334155; }
.ec-sum-pill.match{ background:#d7fbec; color:#12b877; }
.ec-sum-pill.mismatch{ background:#fff8ec; color:#c9820c; }
.ec-sum-pill.missing{ background:#fef2f2; color:#dc2626; }

.ec-toolbar{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; padding:16px 20px;
  background:var(--white); border:1px solid var(--stroke); border-radius:12px; }
.ec-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.ec-filter{ padding:7px 14px; border-radius:8px; border:1px solid var(--stroke); background:var(--white);
  color:var(--text-light); font-size:13px; font-weight:600; cursor:pointer; transition:all .15s; }
.ec-filter:hover{ background:var(--btn-bg); }
.ec-filter.active{ background:var(--green); border-color:var(--green); color:#fff; }
.ec-filter.status.match.active{ background:#12b877; border-color:#12b877; }
.ec-filter.status.mismatch.active{ background:#c9820c; border-color:#c9820c; }
.ec-filter.status.missing.active{ background:#dc2626; border-color:#dc2626; }
.ec-search{ width:100%; padding:9px 14px; border:1px solid var(--stroke); border-radius:8px; font-size:13px;
  font-family:inherit; color:var(--title); outline:none; }
.ec-search:focus{ border-color:var(--green); }

.ec-stage-group{ margin-bottom:28px; }
.ec-stage-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.ec-stage-name{ font-size:17px; font-weight:800; color:var(--title); }
.ec-stage-count{ font-size:13px; color:var(--text-light); }

.ec-card{ background:var(--white); border:1px solid var(--stroke); border-left-width:4px; border-radius:10px;
  padding:14px 18px; margin-bottom:10px; }
.ec-card.match{ border-left-color:#12b877; }
.ec-card.mismatch{ border-left-color:#f59e0b; }
.ec-card.missing{ border-left-color:#f9c9c9; }
.ec-card.expandable{ cursor:pointer; }
.ec-card.expandable:hover{ box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.ec-card-top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.ec-id{ font-family:'Courier New', monospace; font-size:12px; color:var(--text-light); }
.ec-status{ font-size:11px; font-weight:800; letter-spacing:0.5px; padding:3px 10px; border-radius:6px; }
.ec-status.match{ background:#d7fbec; color:#12b877; }
.ec-status.mismatch{ background:#fff8ec; color:#c9820c; }
.ec-status.missing{ background:#fef2f2; color:#dc2626; }
.ec-tag{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:6px; background:#e6f4fb; color:#0e83b3; }
.ec-tag.var{ background:#f0ecfe; color:#7c3aed; font-family:'Courier New', monospace; }
.ec-rule{ font-size:13px; color:var(--text-dark); line-height:1.55; }
.ec-detail{ display:none; margin-top:12px; padding-top:12px; border-top:1px dashed var(--stroke); }
.ec-card.open .ec-detail{ display:block; }
.ec-detail-row{ margin-bottom:10px; }
.ec-detail-row:last-child{ margin-bottom:0; }
.ec-detail-k{ display:block; font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--text-light);
  margin-bottom:4px; }
.ec-detail-v{ font-size:13px; color:var(--title); line-height:1.5; }
.ec-detail-row.issue .ec-detail-v{ color:#b45309; }

/* ---------- CRF edit-check blocks in the detail panel ----------
   Three states: validated (covered), improve (exists but short of the rule),
   missing (nothing covers the rule). Each block also says where the check is
   enforced — in the EDC at entry, or on the mapped SDTM data. */
.crf-ec{ border:1px solid var(--stroke); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.crf-ec.validated{ background:rgba(0,225,133,0.05); border-color:rgba(0,225,133,0.25); }
.crf-ec.improve{ background:#fff8ec; border-color:#fde3b0; }
.crf-ec.missing{ background:#fef1f1; border-color:#f9c9c9; }
.crf-ec-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.crf-ec-status{ font-size:10px; font-weight:800; letter-spacing:0.5px; padding:2px 8px; border-radius:5px; }
.crf-ec-status.validated{ background:#d7fbec; color:#12b877; }
.crf-ec-status.improve{ background:#fde3b0; color:#92600a; }
.crf-ec-status.missing{ background:#fbd5d5; color:#b91c1c; }
.crf-ec-src{ margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:0.3px; color:var(--btn-text);
  background:#eef1f6; border:1px solid var(--stroke); border-radius:20px; padding:2px 9px; white-space:nowrap; }
.crf-ec-title{ font-size:13px; font-weight:600; color:var(--title); line-height:1.45; margin-bottom:8px; }
.crf-ec-k{ display:block; font-size:10px; font-weight:700; letter-spacing:0.4px; color:var(--text-light);
  margin-bottom:3px; }
.crf-ec-example{ font-size:12px; color:var(--text-dark); line-height:1.45; }
.crf-ec-none{ font-size:12.5px; color:var(--text-light); line-height:1.5; border:1px dashed var(--stroke);
  border-radius:10px; padding:12px 14px; }
/* the count line on a section head — "1 missing · 2 validated" */
.crf-d-sec-n{ margin-left:8px; font-weight:600; letter-spacing:0; text-transform:none; color:#9aa3b6; }

/* ---------- Raw data violation cells + tooltips ---------- */
.rd-cell-viol{ position:relative; cursor:help; }
.rd-cell-viol.error{ background:#fef2f2; box-shadow:inset 0 0 0 1.5px #f0a5a5; }
.rd-cell-viol.warn{ background:#fff8ec; box-shadow:inset 0 0 0 1.5px #f3d28e; }
.rd-cell-viol.error .rd-viol-val{ color:#b91c1c; font-weight:700; }
.rd-cell-viol.warn .rd-viol-val{ color:#a16207; font-weight:700; }
.rd-cell-viol.error .rd-viol-val:empty::before,
.rd-cell-viol.warn .rd-viol-val:empty::before{ content:"(blank)"; font-style:italic; font-weight:500; opacity:0.7; }
.rd-viol-tip{ display:none; position:absolute; top:100%; left:0; margin-top:6px; z-index:120;
  background:#1f2937; color:#fff; border-radius:8px; padding:12px 14px; min-width:280px; max-width:380px;
  box-shadow:0 4px 12px rgba(0,0,0,0.2); text-align:left; white-space:normal; }
.rd-cell-viol:hover .rd-viol-tip{ display:block; }
.rd-table tbody tr:last-child .rd-viol-tip{ top:auto; bottom:100%; margin-top:0; margin-bottom:6px; }
.rd-viol-head{ font-size:11px; font-weight:800; letter-spacing:0.4px; color:#fca5a5; margin-bottom:8px;
  text-transform:uppercase; }
.rd-viol-item{ padding-top:8px; margin-top:8px; border-top:1px solid rgba(255,255,255,0.15); }
.rd-viol-item:first-of-type{ padding-top:0; margin-top:0; border-top:none; }
.rd-viol-rule{ font-size:12px; font-weight:700; line-height:1.4; margin-bottom:4px; }
.rd-viol-issue{ font-size:11px; font-weight:400; color:#d1d5db; line-height:1.5; }

/* =====================================================================
   SUMMARY PANEL — data-point lineage
   ===================================================================== */
.sum-content{ padding:24px; max-width:1400px; margin:0 auto; }
.sum-header{ margin-bottom:20px; }
.sum-title{ font-size:28px; font-weight:800; color:var(--title); margin:0 0 8px; }
.sum-subtitle{ font-size:15px; color:var(--text-light); margin:0; max-width:760px; line-height:1.5; }

.sum-wrap{ display:flex; gap:20px; align-items:flex-start; }

/* left: data point list */
.sum-list{ width:340px; flex:none; display:flex; flex-direction:column; gap:10px; position:sticky; top:12px; }
.sum-dp{ background:var(--white); border:1px solid var(--stroke); border-left-width:4px; border-radius:10px;
  padding:14px 16px; cursor:pointer; transition:all .15s; }
.sum-dp:hover{ box-shadow:0 2px 8px rgba(0,0,0,0.06); }
.sum-dp.active{ border-color:var(--green); border-left-color:var(--green); background:rgba(0,225,133,0.04); }
.sum-dp.ok{ border-left-color:#12b877; }
.sum-dp.warn{ border-left-color:#f59e0b; }
.sum-dp.error{ border-left-color:#dc2626; }
.sum-dp.active.warn{ border-left-color:#f59e0b; }
.sum-dp.active.error{ border-left-color:#dc2626; }
.sum-dp-tlf{ font-family:'Courier New', monospace; font-size:11px; font-weight:700; color:var(--text-light);
  letter-spacing:0.4px; margin-bottom:4px; }
.sum-dp-label{ font-size:14px; font-weight:700; color:var(--title); margin-bottom:4px; line-height:1.4; }
.sum-dp-value{ font-family:'Courier New', monospace; font-size:12px; color:var(--text-dark); margin-bottom:8px; }
.sum-dp-badge{ display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.5px; padding:3px 9px;
  border-radius:6px; }
.sum-dp-badge.ok{ background:#d7fbec; color:#12b877; }
.sum-dp-badge.warn{ background:#fff8ec; color:#c9820c; }
.sum-dp-badge.error{ background:#fef2f2; color:#dc2626; }

/* right: trace timeline */
.sum-trace{ flex:1; min-width:0; }
.sum-trace-head{ margin-bottom:18px; }
.sum-trace-title{ font-size:19px; font-weight:800; color:var(--title); margin-bottom:4px; }
.sum-trace-sub{ font-size:13px; color:var(--text-light); }
.sum-trace-sub b{ font-family:'Courier New', monospace; color:var(--text-dark); }

.sum-stage{ display:flex; gap:14px; }
.sum-stage-rail{ display:flex; flex-direction:column; align-items:center; flex:none; width:40px; }
.sum-stage-dot{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:2px solid #12b877; background:#eafff6; color:#0b7a52; flex:none; }
.sum-stage-dot svg{ width:20px; height:20px; }
.sum-stage-dot.warn{ border-color:#f59e0b; background:#fff8ec; color:#92600a; }
.sum-stage-dot.error{ border-color:#dc2626; background:#fef2f2; color:#b91c1c; }
.sum-stage-line{ width:2px; flex:1; min-height:18px; background:var(--stroke); margin:4px 0; }

.sum-stage-card{ flex:1; min-width:0; background:var(--white); border:1px solid var(--stroke); border-radius:12px;
  padding:16px 18px; margin-bottom:16px; }
.sum-stage.warn .sum-stage-card{ border-color:#fde3b0; }
.sum-stage.error .sum-stage-card{ border-color:#f9c9c9; }
.sum-stage-top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.sum-stage-name{ font-size:10px; font-weight:800; letter-spacing:0.7px; text-transform:uppercase;
  padding:3px 9px; border-radius:6px; background:#eef1f8; color:#454567; }
.sum-stage-title{ font-size:14px; font-weight:700; color:var(--title); }
.sum-stage-badge{ margin-left:auto; font-size:10px; font-weight:800; letter-spacing:0.5px; padding:3px 9px;
  border-radius:6px; white-space:nowrap; }
.sum-stage-badge.ok{ background:#d7fbec; color:#12b877; }
.sum-stage-badge.warn{ background:#fff8ec; color:#c9820c; }
.sum-stage-badge.error{ background:#fef2f2; color:#dc2626; }
.sum-stage-desc{ font-size:13px; color:var(--text-dark); line-height:1.55; margin-bottom:10px; }
.sum-stage-quote{ font-size:12.5px; font-style:italic; color:var(--muted); line-height:1.55;
  border-left:3px solid var(--stroke); padding:6px 12px; background:#f8fafc; border-radius:0 8px 8px 0;
  margin-bottom:10px; }
.sum-stage-rows{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.sum-row{ display:flex; gap:12px; font-size:12.5px; line-height:1.5; }
.sum-row-k{ flex:none; width:150px; font-size:10.5px; font-weight:700; letter-spacing:0.4px; color:var(--text-light);
  padding-top:2px; }
.sum-row-v{ color:var(--title); min-width:0; }
.sum-stage-checks{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.sum-check{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.5; }
.sum-check-status{ flex:none; font-size:9.5px; font-weight:800; letter-spacing:0.5px; padding:2px 8px;
  border-radius:5px; margin-top:1px; }
.sum-check-status.match{ background:#d7fbec; color:#12b877; }
.sum-check-status.mismatch{ background:#fde3b0; color:#92600a; }
.sum-check-status.missing{ background:#fbd5d5; color:#b91c1c; }
.sum-check-label{ color:var(--text-dark); }
.sum-stage-code{ background:#1e293b; border-radius:10px; padding:14px 16px; overflow-x:auto; margin-bottom:10px; }
.sum-stage-code pre{ margin:0; font-family:'Courier New', Consolas, monospace; font-size:12px; line-height:1.6;
  color:#e2e8f0; white-space:pre; }
.sum-stage-code .keyword{ color:#93c5fd; font-weight:700; }
.sum-stage-code .comment{ color:#94a3b8; font-style:italic; }
.sum-stage-code .string{ color:#fbbf24; }
.sum-stage-link{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--stroke);
  background:var(--white); color:var(--btn-text); font-family:inherit; font-size:12px; font-weight:700;
  padding:7px 12px; border-radius:8px; cursor:pointer; transition:all .15s; }
.sum-stage-link:hover{ border-color:var(--green); color:#0b7a52; }
.sum-stage-link svg{ width:14px; height:14px; }