/* Connectability Score: the one look every Strata page uses. Loaded with /connectability.js.
   Band colours are tokens so they follow the page theme (dark by default, data-theme="light"). */
:root{--cs-hi:#6fd3b5;--cs-mid:#d9b46a;--cs-lo:#f19a92;}
:root[data-theme="light"]{--cs-hi:#2f9e7e;--cs-mid:#9a6b10;--cs-lo:#c4514a;}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){--cs-hi:#2f9e7e;--cs-mid:#9a6b10;--cs-lo:#c4514a;}}

/* score bar: number plus a 64 px track */
.cs-bar{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.cs-bar b{min-width:22px;font-weight:600;font-variant-numeric:tabular-nums;}
.cs-bar i{display:block;height:7px;width:64px;background:color-mix(in oklch,var(--foreground,#fff) 12%,transparent);position:relative;}
.cs-bar i s{position:absolute;left:0;top:0;bottom:0;}

/* the (i) button and the method dialog */
.cs-i{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid var(--border-strong,rgba(255,255,255,.2));border-radius:50%;color:var(--subtle-foreground,#8a94a6);font:600 9.5px/1 'Inter',sans-serif;cursor:pointer;background:transparent;margin-left:6px;vertical-align:middle;padding:0;letter-spacing:0;text-transform:none;}
.cs-i:hover{border-color:var(--primary,#117ACA);color:var(--primary,#117ACA);}
#cs-info{position:fixed;inset:0;background:rgba(0,10,20,.72);z-index:90;display:none;align-items:center;justify-content:center;padding:24px;}
#cs-info.on{display:flex;}
#cs-info .bx{background:var(--card,#002147);color:var(--foreground,#fff);border:1px solid var(--border-strong,rgba(255,255,255,.2));max-width:620px;width:100%;max-height:84vh;overflow:auto;padding:22px 24px 24px;font-family:'Inter',system-ui,sans-serif;}
#cs-info h3{font-size:17px;margin:0 0 4px;}
#cs-info .sub2{font-size:12px;color:var(--subtle-foreground,#8a94a6);margin:0 0 12px;line-height:1.5;}
#cs-info dl{margin:0;}
#cs-info dt{font-weight:600;font-size:13px;color:var(--primary,#117ACA);margin-top:14px;}
#cs-info dd{margin:4px 0 0;font-size:12.6px;color:var(--muted-foreground,#a9bbd2);line-height:1.6;}
#cs-info .cls{float:right;background:transparent;border:1px solid var(--border-strong,rgba(255,255,255,.2));color:var(--muted-foreground,#a9bbd2);font:600 11px/1 'Inter',sans-serif;padding:6px 10px;cursor:pointer;}

/* legend sections: a bold label, then the swatches */
.cs-lg{display:block;flex-basis:100%;margin:2px 0;}
.cs-lg b{font-weight:600;margin-right:10px;}
.cs-lg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 5px 0 10px;vertical-align:baseline;}
.cs-lg i.ring{background:none;border:2px solid currentColor;width:7px;height:7px;}

/* score breakdown rows in a detail panel */
.cs-big{font-size:30px;font-weight:600;line-height:1.1;margin:8px 0 2px;font-variant-numeric:tabular-nums;}
.cs-big small{font-size:12px;font-weight:500;color:var(--muted-foreground,#a9bbd2);margin-left:6px;}
.cs-parts{display:grid;gap:3px;margin:6px 0;}
.cs-part{display:flex;justify-content:space-between;gap:12px;font-size:12px;}
.cs-part span{color:var(--muted-foreground,#a9bbd2);}
.cs-part small{display:block;color:var(--subtle-foreground,#8a94a6);font-size:11px;}
.cs-part b{font-variant-numeric:tabular-nums;}
.cs-h{margin:12px 0 4px;padding-left:8px;border-left:2px solid var(--primary,#117ACA);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted-foreground,#a9bbd2);font-weight:600;}
.cs-hub{margin-top:10px;font-size:12px;color:var(--muted-foreground,#a9bbd2);}
.cs-hub b{font-weight:600;font-variant-numeric:tabular-nums;}