/* CONCERN archive review pages: shared styles. Builds on /styles.css tokens. */
:root{
  --sev0:#FFFFFF;--sev0s:#8FA9C8;--sev1:#86B5E3;--sev2:#4A8ED2;--sev3:#1F5FA8;--sev4:#0B2E5C;
  --paper:#FBFAF6;--paper-line:#E7E2D3;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
body.ca{font-size:16px}
.ca h1,.ca h2,.ca h3{margin:0}
.ca .wrap.wide{max-width:1360px}

/* Hero */
.ca-hero{background:radial-gradient(900px 380px at 85% 0%,rgba(74,147,214,.28),transparent 60%),linear-gradient(180deg,var(--night),var(--navy));color:var(--white);padding:48px 0 0;position:relative;overflow:hidden}
.ca-hero .eyebrow{margin-bottom:14px}
.ca-hero h1{color:var(--white);font-size:clamp(2rem,4vw,3rem);font-weight:600;margin-bottom:12px}
.ca-hero .lede{font-size:1.15rem;margin:0 0 8px;max-width:44em}
.ca-hero .ca-meta{color:var(--haze);font-size:.95rem;margin:0;max-width:52em}
.ca-hero .ca-meta a{color:var(--white);text-underline-offset:3px}

/* Stat strip inside the hero */
.ca-stats{margin-top:32px;border-top:1px solid rgba(169,205,238,.25);background:rgba(255,255,255,.05)}
.ca-stats ul{list-style:none;margin:0;padding:22px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ca-stats b{display:block;font-family:var(--head);font-weight:600;font-size:2.1rem;line-height:1.05;color:var(--white)}
.ca-stats span{display:block;font-size:.92rem;color:var(--haze);margin-top:4px;line-height:1.35}

/* Small text pieces */
.ca-kicker{font-family:var(--head);font-weight:600;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 6px}
.ca-muted{color:var(--muted)}
.ca-fine{font-size:.88rem;color:var(--muted)}
.ca-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-weight:500;font-size:.8rem;line-height:1.2;color:var(--navy);background:var(--mist);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}
.ca-chip.solid{background:var(--navy);border-color:var(--navy);color:var(--white)}
.ca-chip.hollow{background:var(--white)}

/* Severity key and swatches */
.ca-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none;font-size:.85rem;color:var(--muted)}
.ca-key li{display:inline-flex;align-items:center;gap:6px}
.ca-sw{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid transparent;flex:none}
.ca-sw.s0{background:var(--sev0);border-color:var(--sev0s)}
.ca-sw.s1{background:var(--sev1);border-color:var(--sev1)}
.ca-sw.s2{background:var(--sev2);border-color:var(--sev2)}
.ca-sw.s3{background:var(--sev3);border-color:var(--sev3)}
.ca-sw.s4{background:var(--sev4);border-color:var(--sev4)}
.ca-sw.sq{border-radius:3px}
.ca-sw.rec{background:var(--navy);border-color:var(--navy);border-radius:3px}
.ca-sw.norec{background:var(--white);border-color:var(--navy);border-radius:3px}
.ca-sw.gnd{background:#E6F1FC;border-color:#86B5E3;border-radius:3px}

/* Tooltip */
.ca-tip{position:fixed;z-index:200;max-width:300px;pointer-events:none;background:var(--night);color:var(--white);font-size:.85rem;line-height:1.4;padding:9px 11px;border-radius:6px;box-shadow:0 8px 24px rgba(8,32,63,.28)}
.ca-tip b{font-family:var(--head);font-weight:600}
.ca-tip-muted{color:var(--haze)}

/* About band */
.ca-about{background:var(--mist);border-top:1px solid var(--line);padding:44px 0 52px}
.ca-about-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ca-about h2{font-size:1.05rem;color:var(--navy);margin-bottom:8px}
.ca-about p{font-size:.95rem;color:var(--muted);margin:0 0 .6em}

/* Switcher between the two concepts */
.ca-switch{display:inline-flex;gap:4px;padding:4px;background:rgba(255,255,255,.08);border:1px solid rgba(169,205,238,.3);border-radius:999px;margin-bottom:22px}
.ca-switch a{font-family:var(--head);font-weight:500;font-size:.88rem;color:var(--haze);text-decoration:none;padding:6px 14px;border-radius:999px}
.ca-switch a[aria-current]{background:var(--white);color:var(--navy)}
.ca-switch a:not([aria-current]):hover{color:var(--white)}

button{font:inherit}
.ca-btn{display:inline-block;text-decoration:none;font-family:var(--head);font-weight:600;font-size:.88rem;color:var(--navy);background:var(--white);border:1px solid #BCD0E6;border-radius:999px;padding:7px 14px;cursor:pointer}
.ca-btn:hover{border-color:var(--blue);color:var(--blue)}
.ca-btn.primary{background:var(--navy);border-color:var(--navy);color:var(--white)}
.ca-btn.primary:hover{background:var(--blue);border-color:var(--blue);color:var(--white)}
.ca-link{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font-family:var(--head);font-weight:500;font-size:.88rem;text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

@media (max-width:900px){
  .ca-stats ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .ca-about-grid{grid-template-columns:1fr;gap:20px}
}
@media (max-width:600px){
  .ca-hero{padding-top:36px}
  .ca-stats b{font-size:1.7rem}
  .ca .wrap{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}