/* ===================================================================
   Sentinel MCP Scorecard - registry stylesheet
   Design tokens honored from ../style.css; registry-specific classes
   lifted from the approved lane1/registry-mockup.html. Self-contained
   (tokens included) so registry pages render without the marketing CSS.
   Pure ASCII. Generated pages link only this file.
   =================================================================== */
:root {
  --bg:#0a0e17; --surface:#0a0e17; --surface-raised:#111a2b; --surface-card:#0f1626;
  --border:#1e2a3d; --border-soft:#16202f; --border-strong:#57687f;
  --text:#e8eef6; --text-muted:#93a1b5;
  --accent:#4c8dff; --accent-hover:#3f7df0; --accent-on:#fff; --accent-soft:rgba(76,141,255,.14);
  --btn-bg:#2f6bdb; --btn-bg-hover:#2a61c8;
  --risk-critical:#ff5c5c; --risk-high:#ff9f43; --risk-medium:#ffd24c; --risk-low:#6fb1ff; --risk-pass:#3ecf8e;
  --badge-text-critical:#1a0000; --badge-text-high:#2a1500; --badge-text-medium:#2a2200; --badge-text-low:#001a33; --badge-text-pass:#00220f;
  --nav-bg:rgba(10,14,23,.82); --hero-glow:radial-gradient(60% 60% at 50% 0%, rgba(76,141,255,.16), transparent 70%);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 1px 0 rgba(255,255,255,.02),0 8px 30px rgba(0,0,0,.35);
}
:root[data-theme="light"], .light {
  --bg:#f6f8fc; --surface:#f6f8fc; --surface-raised:#fff; --surface-card:#fff;
  --border:#d9e0ea; --border-soft:#e6ebf2; --border-strong:#9aa6b8;
  --text:#0f1b2d; --text-muted:#5a6b80;
  --accent:#2563eb; --accent-hover:#1d4ed8; --accent-soft:rgba(37,99,235,.1);
  --btn-bg:#2563eb; --btn-bg-hover:#1d4ed8;
  --risk-critical:#cf222e; --risk-high:#bc4c00; --risk-medium:#9a6700; --risk-low:#0969da; --risk-pass:#1a7f37;
  --badge-text-critical:#fff; --badge-text-high:#fff; --badge-text-medium:#fff; --badge-text-low:#fff; --badge-text-pass:#fff;
  --nav-bg:rgba(246,248,252,.85); --hero-glow:radial-gradient(60% 60% at 50% 0%, rgba(37,99,235,.1), transparent 70%);
  --shadow:0 1px 0 rgba(0,0,0,.02),0 8px 24px rgba(15,27,45,.08);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#f6f8fc; --surface:#f6f8fc; --surface-raised:#fff; --surface-card:#fff;
    --border:#d9e0ea; --border-soft:#e6ebf2; --border-strong:#9aa6b8;
    --text:#0f1b2d; --text-muted:#5a6b80;
    --accent:#2563eb; --accent-hover:#1d4ed8; --accent-soft:rgba(37,99,235,.1);
    --btn-bg:#2563eb; --btn-bg-hover:#1d4ed8;
    --risk-critical:#cf222e; --risk-high:#bc4c00; --risk-medium:#9a6700; --risk-low:#0969da; --risk-pass:#1a7f37;
    --badge-text-critical:#fff; --badge-text-high:#fff; --badge-text-medium:#fff; --badge-text-low:#fff; --badge-text-pass:#fff;
    --nav-bg:rgba(246,248,252,.85);
  }
}

/* Body-only styles for the MCP Scorecard. The nav, footer, buttons, tokens and
   theme/font chrome are inherited from the shared ../style.css (linked first) so
   these pages match the rest of the site; only registry-specific components live
   here, scoped under .reg to avoid colliding with the marketing classes. */
.reg h1,.reg h2,.reg h3 { text-wrap:balance; line-height:1.15; }
.reg code,.reg .mono { font-family:var(--mono); font-size:.86em; }
.reg a { color:var(--accent); text-decoration:none; }
.reg a:hover { text-decoration:underline; }
/* buttons inside .reg keep the shared button colors - the generic .reg a rule
   (0,1,1) otherwise out-specifies .btn-primary (0,1,0) and turns its text accent-blue */
.reg a.btn-primary, .reg a.btn-primary:hover { color:var(--accent-on); text-decoration:none; }
.reg a.btn-ghost, .reg a.btn-ghost:hover { color:var(--text); text-decoration:none; }
.reg :focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
.reg .accent-text { color:var(--accent); }

/* Hero: .wrap, .hero, .hero-sub, .pill and .eyebrow are inherited from the shared
   style.css (centered, same padding + type scale + width as the homepage) - the
   registry does NOT redefine them. Only the registry-only hero extras live here,
   centered to sit correctly inside the shared centered hero. */
.reg .stat-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:26px; margin:26px 0 0; }
.reg .stat { display:flex; flex-direction:column; }
.reg .stat .n { font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; }
.reg .stat .l { color:var(--text-muted); font-size:.82rem; }
.reg .hero-badge { display:flex; gap:14px; align-items:center; margin:24px auto 0; padding:14px 16px; text-align:left;
                   background:var(--surface-card); border:1px solid var(--border); border-radius:12px; max-width:64ch; box-shadow:var(--shadow); }
.reg .hero-badge-mark { display:inline-flex; border-radius:4px; flex:none; }
.reg .hero-badge-mark:hover { opacity:.85; text-decoration:none; }
.reg .hero-badge .cap { font-size:.88rem; flex:1 1 0; min-width:0; }
.reg .hero-badge .cap code { color:var(--text); }
.reg .hero-badge .cap b { color:var(--text); }
.reg .hero-badge .cap .mono { display:block; margin-top:8px; color:var(--text-muted); font-size:.74rem;
                              white-space:pre; overflow-x:auto; max-width:100%; padding:8px 10px;
                              background:var(--surface-raised); border:1px solid var(--border); border-radius:8px; }

/* thin, theme-colored scrollbars on all registry scroll containers (the default
   Windows bar is a chunky gray slab that fights the design) */
.reg .hero-badge .cap .mono, .embed, .tablewrap {
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.reg .hero-badge .cap .mono::-webkit-scrollbar, .embed::-webkit-scrollbar, .tablewrap::-webkit-scrollbar { height: 8px; }
.reg .hero-badge .cap .mono::-webkit-scrollbar-track, .embed::-webkit-scrollbar-track, .tablewrap::-webkit-scrollbar-track { background: transparent; }
.reg .hero-badge .cap .mono::-webkit-scrollbar-thumb, .embed::-webkit-scrollbar-thumb, .tablewrap::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 99px;
}
.reg .hero-badge .cap .mono::-webkit-scrollbar-thumb:hover, .embed::-webkit-scrollbar-thumb:hover, .tablewrap::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* Content sections: match the homepage .content rhythm (64px, top divider). */
section.block { padding:64px 0; border-top:1px solid var(--border-soft); }
section.block h2 { font-size:clamp(1.6rem,3vw,2.2rem); font-weight:800; letter-spacing:-.6px; margin:8px 0 6px; }
.lead { color:var(--text-muted); max-width:66ch; }

/* breadcrumb */
.crumb { color:var(--text-muted); font-size:.85rem; padding:18px 0 0; }
.crumb a { color:var(--text-muted); }
.crumb a:hover { color:var(--text); }

/* CTA */
.cta-card { background:linear-gradient(180deg,var(--accent-soft),transparent); border:1px solid var(--border);
            border-radius:16px; padding:26px; margin-top:22px; display:flex; gap:22px; flex-wrap:wrap; align-items:center;
            justify-content:space-between; box-shadow:var(--shadow); }
.cta-card .copy { max-width:48ch; }
.cta-card h3 { font-size:1.15rem; }
.cta-card p { color:var(--text-muted); font-size:.92rem; margin:6px 0 0; }

/* grade badge (big shield) */
.grademark { --c:var(--risk-critical); display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.grademark .shield { width:72px; height:82px; display:grid; place-items:center; position:relative; color:var(--c); }
.grademark .letter { position:absolute; font-weight:800; font-size:2rem; color:var(--c); }
.grademark .word { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--c); }

/* caught cards */
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin-top:20px; }
.card { background:var(--surface-card); border:1px solid var(--border); border-radius:14px; padding:24px;
        box-shadow:var(--shadow); position:relative; overflow:hidden; }
.card .stripe { position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c,var(--risk-critical)); }
.card h3 { font-size:1rem; font-family:var(--mono); font-weight:600; }
.card .meta { color:var(--text-muted); font-size:.8rem; margin-top:2px; }
.card .finding { margin-top:12px; font-size:.9rem; }
.tag { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:999px; }
.tag-real { background:rgba(62,207,142,.14); color:var(--risk-pass); border:1px solid var(--risk-pass); }
.tag-cve { background:rgba(255,92,92,.14); color:var(--risk-critical); border:1px solid var(--risk-critical); }
.rulechip { font-family:var(--mono); font-size:.74rem; background:var(--surface-raised); border:1px solid var(--border);
            padding:2px 7px; border-radius:6px; color:var(--text); }
.cta-note { font-size:.76rem; color:var(--text-muted); margin-top:10px; }

/* severity badge inline */
.sev { display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:6px; }
.sev::before { content:""; width:8px; height:8px; border-radius:2px; background:currentColor; }
.sev-crit { color:var(--risk-critical); background:color-mix(in srgb,var(--risk-critical) 14%,transparent); }
.sev-high { color:var(--risk-high); background:color-mix(in srgb,var(--risk-high) 14%,transparent); }
.sev-med { color:var(--risk-medium); background:color-mix(in srgb,var(--risk-medium) 16%,transparent); }
.sev-low { color:var(--risk-low); background:color-mix(in srgb,var(--risk-low) 14%,transparent); }
.sev-pass { color:var(--risk-pass); background:color-mix(in srgb,var(--risk-pass) 14%,transparent); }

/* registry table */
.tablewrap { overflow-x:auto; border:1px solid var(--border); border-radius:14px; margin-top:18px; background:var(--surface-card); }
table.reg-t { width:100%; border-collapse:collapse; font-size:.9rem; min-width:680px; }
table.reg-t th,table.reg-t td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--border-soft); }
table.reg-t th { color:var(--text-muted); font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; }
table.reg-t td.num { font-variant-numeric:tabular-nums; text-align:right; }
table.reg-t tr:last-child td { border-bottom:none; }
table.reg-t tbody tr:hover { background:var(--surface-raised); }
.repo { font-family:var(--mono); font-size:.86rem; }
.repo a { color:var(--text); }
.repo a:hover { color:var(--accent); }
.gradepill { font-weight:800; padding:2px 9px; border-radius:7px; font-size:.8rem; display:inline-block; }
.g-A{color:var(--badge-text-pass);background:var(--risk-pass);} .g-B{color:var(--badge-text-pass);background:var(--risk-pass);}
.g-C{color:var(--badge-text-medium);background:var(--risk-medium);} .g-D{color:var(--badge-text-high);background:var(--risk-high);}
.g-F{color:var(--badge-text-critical);background:var(--risk-critical);}
.queued { color:var(--text-muted); border:1px dashed var(--border-strong); padding:2px 9px; border-radius:7px; font-size:.78rem; }

/* score page */
.scorepage { background:var(--surface-card); border:1px solid var(--border); border-radius:16px; padding:26px; margin-top:20px; box-shadow:var(--shadow); }
.scorehead { display:flex; gap:22px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--border-soft); padding-bottom:20px; }
.scorehead .id h3 { font-family:var(--mono); font-size:1.1rem; }
.scorehead .id .m { color:var(--text-muted); font-size:.82rem; margin-top:4px; }
.dims { display:grid; gap:12px; margin-top:20px; }
.dim { display:grid; grid-template-columns:240px 1fr 46px; gap:14px; align-items:center; }
.dim .name { font-size:.9rem; } .dim .name small{ color:var(--text-muted); }
.bar { height:9px; border-radius:99px; background:var(--surface-raised); overflow:hidden; }
.bar > span { display:block; height:100%; border-radius:99px; }
.dim .val { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; font-size:.9rem; }

.evidence { background:var(--surface-raised); border:1px solid var(--border); border-left:4px solid var(--c,var(--risk-high));
            border-radius:10px; padding:16px; margin-top:16px; }
.evidence .step { font-family:var(--mono); font-size:.82rem; background:var(--surface-card); border:1px solid var(--border);
                  border-radius:8px; padding:9px 11px; margin-top:10px; }
.evidence .step .loc { color:var(--accent); }
.evidence .rule-desc { margin:10px 0 0; font-size:.9rem; color:var(--text); }
.cwes { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.cwe { font-family:var(--mono); font-size:.72rem; background:var(--surface-card); border:1px solid var(--border);
       padding:2px 8px; border-radius:6px; color:var(--accent); }
.cwe:hover { border-color:var(--accent); text-decoration:none; }
.cleanline { color:var(--risk-pass); font-weight:600; margin-top:16px; display:flex; align-items:center; gap:8px; }
.embed { background:var(--surface-raised); border:1px solid var(--border); border-radius:10px; padding:13px 15px; margin-top:16px;
         font-family:var(--mono); font-size:.8rem; overflow-x:auto; white-space:pre; }
.verify { color:var(--text-muted); font-size:.84rem; margin-top:14px; }
.verify code { color:var(--text); }

/* badge row */
.badgerow { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.badgerow figure { margin:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.badgerow figcaption { font-size:.76rem; color:var(--text-muted); }

.scope { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:18px; }
.scope .s { background:var(--surface-card); border:1px solid var(--border); border-radius:12px; padding:15px; }
.scope .s h4 { margin:0 0 4px; font-size:.92rem; }
.scope .s p { margin:0; color:var(--text-muted); font-size:.84rem; }

.sources { margin-top:24px; border-top:1px solid var(--border-soft); padding-top:16px; font-size:.82rem; color:var(--text-muted); }
.sources ol { margin:10px 0 0; padding-left:22px; display:grid; gap:6px; }
.sources a { color:var(--accent); }
.reg sup.cite a { color:var(--accent); font-size:.62em; font-weight:700; text-decoration:none; padding:0 1px; }

/* anchored section jumps clear the sticky nav (registry ids sit on divs/h3s
   inside cards, not padded sections, so they need an explicit offset) */
.reg [id] { scroll-margin-top:84px; }
/* .pagenav* styles are shared - defined in ../style.css */

@media (max-width:640px){ .dim{ grid-template-columns:1fr; } .dim .val{ text-align:left; } }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; } }
