/* ============================================================ 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{ /* Brand tokens taken from ceresity.com's own stylesheet, so the demo and the site cannot drift: --green is the site's --green, --brand-ink is the colour it puts ON that green (a near-black with a green cast, not pure black), and --forest is its darker green for text on light. The two tints are the site's --bg-card-alt / --bg-card, used for secondary and selected controls. */ --page:#f7f9ff; --white:#ffffff; --stroke:#e9eaef; --green:#2ee89e; --brand-ink:#0d1a1e; --forest:#1e5c46; --green-tint:#e7f5ee; --green-tint-2:#f5faf8; --pill:100px; /* ---- Categorical identity palette ------------------------------------- Validated with the dataviz validator against the light surface, all-pairs (these appear on screen together, not merely adjacent): CVD separation worst pair ΔE 10.9 (target ≥8) normal-vision floor worst pair ΔE 21.4 (floor 15) contrast all three ≥ 3:1 Three slots is the honest ceiling here, not laziness. Red, amber and green are reserved for severity and must never carry identity. And a second blue-family hue fails the normal-vision floor against --cat-1 (ΔE 6.9 — full-colour readers genuinely cannot separate them), so there is room for exactly one blue. Assign in fixed order and never cycle: a fourth value takes --cat-none. --------------------------------------------------------------------- */ --cat-1:#0e83b3; --cat-1-bg:#e8f4fb; --cat-1-line:rgba(14,131,179,0.26); --cat-2:#c2497a; --cat-2-bg:#fdedf3; --cat-2-line:rgba(194,73,122,0.26); --cat-3:#7c3aed; --cat-3-bg:#f1edfe; --cat-3-line:rgba(124,58,237,0.24); --cat-none:#52607e; --cat-none-bg:#eef1f6; --cat-none-line:rgba(82,96,126,0.20); /* Darker steps for TEXT in a category colour. The validated hue above is a MARK colour, checked at ≥3:1 against the surface; a 10px bold label needs 4.5:1, which --cat-1 missed at 3.82. Same hue, stepped down — marks keep the validated value, labels use these. */ --cat-1-ink:#0a6285; --cat-2-ink:#a3355f; --cat-3-ink:#6425cc; --cat-none-ink:#414d66; /* ---- Surface tints ---------------------------------------------------- Where the UI needed warmth rather than more accent colour. These are surfaces, not marks: very low chroma, so they carry no meaning and cannot be confused with the severity set. This is the lever that adds colour broadly without competing with anything that signifies. */ --tint-cool:#f4f8fd; --tint-warm:#fdf8f4; --tint-mint:#f2fbf7; --tint-lilac:#f7f5fe; --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(46,232,158,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; } /* the back arrow is a third child of a space-between row, which would otherwise push the title into the middle — pinning the slack after the title keeps the arrow and the trial name together on the left. Harmless where there is no arrow, since auto and space-between agree with two children. */ .title-area{ display:flex; flex-direction:column; gap:9px; margin-right:auto; } .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; } /* the site's primary CTA: brand green, near-black label, fully rounded */ .primarybtn{ background:var(--green); color:var(--brand-ink); border-radius:var(--pill); } .primarybtn svg{ width:16px; height:16px; color:var(--brand-ink); } /* ---------- Version picker ---------- The header's version control opens the list of review runs. Anchored to the button rather than centred as a modal: it switches between versions of what is already on screen, it is not a separate task. */ .ver-wrap{ position:relative; } .ver-chev{ width:14px!important; height:14px!important; transition:transform .18s ease; } .ver-wrap.open .ver-chev{ transform:rotate(180deg); } .ver-wrap.open .textbtn{ background:#e9ebf4; } .ver-pop{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:400px; background:var(--white); border:1px solid var(--stroke); border-radius:14px; overflow:hidden; box-shadow:0 16px 44px rgba(13,33,55,0.16); } .ver-wrap.open .ver-pop{ display:block; } .ver-pop-h{ padding:14px 16px; border-bottom:1px solid var(--stroke); } .ver-pop-h .t{ display:block; font-size:14px; font-weight:700; color:var(--title); } .ver-pop-h .s{ display:block; font-size:11.5px; line-height:16px; color:var(--text-light); margin-top:3px; } .ver-list{ max-height:min(430px, 60vh); overflow-y:auto; } .ver-item{ display:flex; gap:11px; width:100%; padding:12px 16px; border:none; background:none; cursor:pointer; text-align:left; font-family:inherit; border-bottom:1px solid #f4f5fa; } .ver-item:hover{ background:#fafbff; } .ver-item.active{ background:var(--badge-bg); } .ver-tick{ width:16px; height:16px; flex:none; margin-top:2px; color:#0a8f57; } .ver-item:not(.active) .ver-tick{ visibility:hidden; } .ver-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; } .ver-txt .vt{ font-size:13.5px; font-weight:700; color:var(--title); } .ver-item.active .vt{ color:#0a7d4d; } .ver-txt .vm{ font-size:11px; font-weight:600; color:#9aa3b6; } .ver-txt .vd{ font-size:12px; line-height:17px; color:var(--text-light); } .ver-new{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border:none; border-top:1px solid var(--stroke); background:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; color:#0a8f57; } .ver-new:hover{ background:var(--badge-bg); } a.ver-new{ text-decoration:none; } .ver-new svg{ width:15px; height:15px; } /* ---------- Version picker ---------- The header's version control opens the list of review runs. Anchored to the button rather than centred as a modal: it is a switch between versions of what is already on screen, not a separate task. */ .ver-wrap{ position:relative; } .ver-chev{ width:14px!important; height:14px!important; transition:transform .18s ease; } .ver-wrap.open .ver-chev{ transform:rotate(180deg); } .ver-wrap.open .textbtn{ background:#e9ebf4; } .ver-pop{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:400px; background:var(--white); border:1px solid var(--stroke); border-radius:14px; overflow:hidden; box-shadow:0 16px 44px rgba(13,33,55,0.16); } .ver-wrap.open .ver-pop{ display:block; } .ver-pop-h{ padding:14px 16px; border-bottom:1px solid var(--stroke); } .ver-pop-h .t{ display:block; font-size:14px; font-weight:700; color:var(--title); } .ver-pop-h .s{ display:block; font-size:11.5px; line-height:16px; color:var(--text-light); margin-top:3px; } .ver-list{ max-height:min(430px, 60vh); overflow-y:auto; } .ver-item{ display:flex; gap:11px; width:100%; padding:12px 16px; border:none; background:none; cursor:pointer; text-align:left; font-family:inherit; border-bottom:1px solid #f4f5fa; } .ver-item:hover{ background:#fafbff; } .ver-item.active{ background:var(--badge-bg); } .ver-tick{ width:16px; height:16px; flex:none; margin-top:2px; color:#0a8f57; } .ver-item:not(.active) .ver-tick{ visibility:hidden; } .ver-txt{ display:flex; flex-direction:column; gap:3px; min-width:0; } .ver-txt .vt{ font-size:13.5px; font-weight:700; color:var(--title); } .ver-item.active .vt{ color:#0a7d4d; } .ver-txt .vm{ font-size:11px; font-weight:600; color:#9aa3b6; } .ver-txt .vd{ font-size:12px; line-height:17px; color:var(--text-light); } .ver-new{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px; border:none; border-top:1px solid var(--stroke); background:none; cursor:pointer; font-family:inherit; font-size:13px; font-weight:700; color:#0a8f57; } .ver-new:hover{ background:var(--badge-bg); } a.ver-new{ text-decoration:none; } .ver-new svg{ width:15px; height:15px; } /* ---------- 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, every tab that holds something for it carries the count of what it holds — `data-root-n`, written by updateTabRootHighlight(). The number is the point: it says how much is waiting there, not merely that something is. Kept small so it never competes with the active-tab underline. */ .tab{ position:relative; } .tab.has-root-data::after{ content:attr(data-root-n); position:absolute; top:9px; right:2px; min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:var(--green); color:var(--brand-ink); font-size:10.5px; font-weight:700; line-height:17px; text-align:center; box-shadow:0 0 0 3px rgba(46,232,158,0.16); } .tab.has-root-data:not(.active){ color:var(--text-dark); } .tab.has-root-data:not(.active) .lbl{ font-weight:500; } /* same badge on the active tab, just quieter — the underline already says "you are here" */ .tab.has-root-data.active::after{ background:#0d8a5f; box-shadow:none; opacity:.62; } /* Protocol Amendment 2 — predicted added/removed per tab, next to the label */ .amend-badge{ display:inline-flex; gap:5px; font-size:10.5px; font-weight:800; font-style:normal; } .amend-badge .up{ color:var(--sev-crit); font-style:normal; } .amend-badge .down{ color:#0a8f57; font-style:normal; } /* the tab labels have to make room for the badge */ .tab.has-root-data{ padding-right:26px; } .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. */ .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(46,232,158,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; } /* square, label-less variant — the pencil beside Filter by */ .statcard.icon-only{ width:44px; padding:8px; text-decoration:none; } .statcard.icon-only .stat-inline{ gap:0; } .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:var(--brand-ink); 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 */ /* The index follows the document. It is a navigation control for a page that scrolls for screens at a time — having to scroll back up to reach it defeats the point. Sticky rather than fixed so it still sits inside the column and stops at the bottom of the document. It scrolls internally when the list is taller than the viewport. */ .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; position:sticky; top:14px; max-height:calc(100vh - 28px); overflow-y:auto; overscroll-behavior:contain; } .index::-webkit-scrollbar{ width:6px; } .index::-webkit-scrollbar-thumb{ background:#e4e7f0; border-radius:3px; } .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(46,232,158,0.18); border-radius:7px; min-width:22px; text-align:center; padding:2px 7px; font-size:12px; font-weight:600; color:var(--green); } /* a badge carrying a suggestion count is now the control that opens that section's list, so it has to read as clickable */ .index-item .badge[data-suglist]{ cursor:pointer; transition:background .15s ease, border-color .15s ease; } .index-item .badge[data-suglist]:hover{ background:rgba(46,232,158,0.16); border-color:rgba(46,232,158,0.45); } .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; position:sticky; top:14px; max-height:calc(100vh - 28px); overflow-y:auto; overscroll-behavior:contain; } .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; } /* nothing sits opposite the label any more, so the heading is label-only — `space-between` is kept for the SAP/CSR heads that reuse this class */ .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(46,232,158,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; margin-left:4px; } /* important validation comment — one of the ranked few the review wants read first. Stepped down from --green because the mark sits on the yellow finding highlight as well as on white, and the brand green is too light on both. */ .key-star{ color:#0a8f57; font-weight:700; font-size:12px; line-height:1; margin-left:3px; vertical-align:super; cursor:help; } /* collapsed passage: the remainder is in the DOM but hidden, and the trailing "…" disappears once it is revealed (see renderRuns in protocol.js) */ .mt-rest{ display:none; } .mt-rest.open{ display:inline; } .mt-ellip.hide{ display:none; } .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 */ /* A WHOLE-SECTION finding (`flagSection` in protocol.content.js) has no per-item flag to mark, because the whole block IS the finding. The rules above hide any paragraph or list item without `.has-flag`, which left such a block showing its heading and nothing else — Interim/Other Analyses was a heading over empty space in findings-only view. Inside a flag-section, keep the content. */ .content.findings-on .sub-block.flag-section .para, .content.findings-on .sub-block.flag-section .incl-list li, .content.findings-on .sub-block.flag-section .incl-list .incl-intro{ display:block; } .content.findings-on .sub-block.flag-section .incl-list li .ctx{ display:inline; } .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 */ /* A long suggestion used to run off the bottom of the card, which silently truncated the text. The card is now bounded by the viewport and the body scrolls inside it — the header and the tags stay put. */ .suggestion-card{ position:absolute; top:380px; left:0; width:339px; background:var(--white); border:1px solid rgba(46,232,158,0.49); border-radius:12px; overflow:hidden; box-shadow:0 0 0 3px rgba(46,232,158,0.08); display:flex; flex-direction:column; gap:12px; padding-bottom:16px; max-height:calc(100vh - 28px); 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(46,232,158,0.03); border-bottom:1px solid rgba(46,232,158,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; overflow-y:auto; overscroll-behavior:contain; min-height:0; } .sug-body::-webkit-scrollbar{ width:6px; } .sug-body::-webkit-scrollbar-thumb{ background:#e4e7f0; border-radius:3px; } .sug-header,.sug-row,.sug-divider,.sug-tags,.sug-source{ flex:none; } .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:var(--brand-ink); 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) ---------- Absolutely positioned rather than sticky: alignPanel() in protocol.js drops the panel level with whatever opened it, the same way positionCard() places the hover suggestion card. A finding halfway down a long document therefore opens its detail beside itself instead of at the top of the column. The top/max-height below are only the fallback for a panel opened with no anchor (the toolbar's Filters button). */ .side-panel{ position:absolute; top:14px; left:0; z-index:6; 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; box-shadow:0 8px 30px rgba(23,43,77,0.08); } .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; overscroll-behavior:contain; display:flex; flex-direction:column; gap:20px; min-height:0; } .panel-scroll::-webkit-scrollbar{ width:6px; } .panel-scroll::-webkit-scrollbar-thumb{ background:#e4e7f0; border-radius:3px; } /* 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(46,232,158,0.5); box-shadow:0 0 0 3px rgba(46,232,158,0.08); } .lc.active .lc-h{ background:rgba(46,232,158,0.03); border-bottom-color:rgba(46,232,158,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(46,232,158,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(46,232,158,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(46,232,158,0.5); background:rgba(46,232,158,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:var(--brand-ink); border-radius:var(--pill); } /* ---------- 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(46,232,158,0.04); border-bottom-color:rgba(46,232,158,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(46,232,158,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; } /* A cited trial that resolves to a registry record. Same weight as the plain title it replaces, so the citation does not shout — the glyph carries it. */ .ev-it-link{ color:inherit; text-decoration:none; display:block; } .ev-it-link:hover{ color:var(--forest); text-decoration:underline; text-underline-offset:2px; } .ev-it-link .ev-out{ width:12px; height:12px; margin-left:5px; vertical-align:-1px; color:#9aa3b6; } .ev-it-link:hover .ev-out{ color:var(--forest); } .ev-it-nolink{ cursor:help; } .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:var(--brand-ink); border:none; border-radius:var(--pill); 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(46,232,158,0.07); --sev-adv-line:rgba(46,232,158,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(46,232,158,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(46,232,158,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 — validations per module, split by type. Everything under `.rd` is the headline half of the tab: the two totals and the per-module breakdown. Scoped to that one class because several of the names here (.card, .legend) are generic enough to collide with the rest of the sheet. The two series have fixed colors — red is always a validation error, teal is always a linkage error. ============================================================ */ .rd{ display:flex; flex-direction:column; gap:18px; padding:4px 8px 8px; --st-good:#0ca30c; --st-warn:#fab219; --st-serious:#ec835a; --st-crit:#d03b3b; --st-neutral:#c9cfdd; --ink:#0d2137; --ink-2:#52607e; --ink-3:#8a93a6; --card-shadow:0 1px 2px rgba(23,43,77,0.04), 0 8px 24px rgba(23,43,77,0.04); } /* card shell */ .rd .card{ background:var(--white); border:1px solid var(--stroke); border-radius:20px; padding:22px 26px 24px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; } .rd .card-title{ font-size:19px; font-weight:700; color:var(--title); text-align:center; letter-spacing:-0.2px; } /* a card carrying a series legend puts its title on the left and the legend on the right; a card without one centres its title */ .rd .card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .rd .card-head .card-title{ text-align:left; } .rd .card-rule{ height:1px; background:var(--stroke); margin:16px -4px 20px; } .rd .legend{ display:flex; gap:16px; flex-wrap:wrap; flex:none; } .rd .legend .li{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; } .rd .legend .sw{ width:10px; height:10px; border-radius:50%; flex:none; } /* KPI row */ .rd .kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; } .rd .kpi{ background:var(--white); border:1px solid var(--stroke); border-radius:18px; box-shadow:var(--card-shadow); padding:20px 22px; display:flex; flex-direction:column; gap:7px; } .rd .kpi .k-label{ font-size:13px; font-weight:600; color:var(--ink-2); display:flex; align-items:center; gap:8px; } .rd .kpi .k-label svg{ width:15px; height:15px; flex:none; } .rd .kpi .k-value{ font-size:36px; line-height:1.05; font-weight:800; color:var(--ink); } .rd .kpi .k-sub{ font-size:12px; line-height:17px; color:var(--ink-3); } .rd .kpi.tone-crit .k-label svg{ color:var(--st-crit); } .rd .kpi.tone-serious .k-label svg{ color:var(--st-serious); } .rd .kpi.tone-warn .k-label svg{ color:#b07c00; } .rd .kpi.tone-good .k-label svg{ color:var(--st-good); } .rd .kpi.tone-link .k-label svg{ color:var(--teal); } /* per-module breakdown: one row per module, one labelled track per type */ .rd .vtab{ display:flex; flex-direction:column; } /* The module names are short ("SOA", "Define-XML") and the counts are single numbers, so those four tracks are sized to their content; the two pickers split everything that is left so the row fills the width of the card. */ .rd .vrow{ display:grid; grid-template-columns:190px 130px 130px minmax(0,1fr) minmax(0,1fr); align-items:center; gap:18px; padding:12px 4px; font-size:14px; } .rd .vrow:hover{ background:#fafbff; } /* the module name is the link into the tab; the row itself is not clickable, because it now carries a