/* Colour — the Uniform spec. Tokens live in base.css; this file lays out the spec and picks the
   chart tokens for the current mode (-m = light or dark step). */

:root{--chart-1-m:var(--chart-1);--chart-2-m:var(--chart-2);--chart-3-m:var(--chart-3);--chart-4-m:var(--chart-4);--chart-5-m:var(--chart-5);--chart-6-m:var(--chart-6);--chart-7-m:var(--chart-7);--chart-8-m:var(--chart-8);--seq-1-m:var(--seq-1);--seq-2-m:var(--seq-2);--seq-3-m:var(--seq-3);--seq-4-m:var(--seq-4);--seq-5-m:var(--seq-5);--seq-6-m:var(--seq-6);--seq-7-m:var(--seq-7);--div--4-m:var(--div--4);--div--3-m:var(--div--3);--div--2-m:var(--div--2);--div--1-m:var(--div--1);--div-0-m:var(--div-0);--div-1-m:var(--div-1);--div-2-m:var(--div-2);--div-3-m:var(--div-3);--div-4-m:var(--div-4);}
html[data-theme=dark]{--chart-1-m:var(--chart-1-dk);--chart-2-m:var(--chart-2-dk);--chart-3-m:var(--chart-3-dk);--chart-4-m:var(--chart-4-dk);--chart-5-m:var(--chart-5-dk);--chart-6-m:var(--chart-6-dk);--chart-7-m:var(--chart-7-dk);--chart-8-m:var(--chart-8-dk);--seq-1-m:var(--seq-1-dk);--seq-2-m:var(--seq-2-dk);--seq-3-m:var(--seq-3-dk);--seq-4-m:var(--seq-4-dk);--seq-5-m:var(--seq-5-dk);--seq-6-m:var(--seq-6-dk);--seq-7-m:var(--seq-7-dk);--div--4-m:var(--div--4-dk);--div--3-m:var(--div--3-dk);--div--2-m:var(--div--2-dk);--div--1-m:var(--div--1-dk);--div-0-m:var(--div-0-dk);--div-1-m:var(--div-1-dk);--div-2-m:var(--div-2-dk);--div-3-m:var(--div-3-dk);--div-4-m:var(--div-4-dk);}

.colour{padding-top:34px;padding-bottom:10px}
.cl-spec{display:grid;gap:64px;--sp-line:#0000001a;--sp-dim:#0000008c;--sp-card:#ffffff8c;--sp-card-sh:inset 0 0 0 1px #fff}
html[data-theme=dark] .cl-spec{--sp-line:#ffffff17;--sp-dim:#ffffff80;--sp-card:#ffffff0a;--sp-card-sh:inset 0 0 0 1px #ffffff12}
.cz{display:inline-block;width:22px;height:22px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px #00000026,inset 0 0 0 1px #ffffff14;flex:none}
.cz.big{width:100%;height:44px;border-radius:10px}

/* contrast badge */
.cbg{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap;font:var(--sw-readout);letter-spacing:0;padding:4px 7px;border-radius:7px;background:var(--sp-card);box-shadow:inset 0 0 0 1px var(--sp-line)}
.cbg small{font:var(--sw-label);letter-spacing:.06em;text-transform:uppercase;color:var(--sp-dim)}
.cbg.ok small{color:var(--lt-ok)}.cbg.mid small{color:var(--lt-warn)}.cbg.no small{color:var(--lt-err)}
html[data-theme=dark] .cbg.ok small{color:var(--dk-ok)}html[data-theme=dark] .cbg.mid small{color:var(--dk-warn)}html[data-theme=dark] .cbg.no small{color:var(--dk-err)}

/* 01 neutrals: dark column on the dark material, light on light, whatever the page mode */
.cn{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:14px}
.cn-col{display:grid;gap:2px;padding:18px;border-radius:22px}
.cn-col.dk{background:var(--dk-panel-b);color:var(--dk-ink);--sp-dim:var(--dk-lab-dim);--sp-line:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff12}
.cn-col.lt{background:var(--lt-panel-a);color:var(--lt-ink);--sp-dim:var(--lt-lab-dim);--sp-line:#0000001a;box-shadow:inset 0 0 0 1px #0000001a}
.cn-top{padding-bottom:10px}
.cn-top .clbl{color:var(--sp-dim)}
.cn-row{display:grid;grid-template-columns:22px minmax(0,1fr) 128px 70px 50px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--sp-line)}
.cn-row b{display:block;font:var(--sw-heading)}
.cn-row span{font:var(--sw-small);color:var(--sp-dim)}
.cn-row code{font:var(--sw-value);color:var(--sp-dim);white-space:nowrap}
.cn-row code:nth-of-type(2){color:inherit}

/* 02 accents */
.ca{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ca-card{display:grid;grid-template-columns:1fr 64px;gap:8px 10px;align-content:start;text-align:left;padding:12px;border-radius:20px;background:var(--sp-card);box-shadow:var(--sp-card-sh);transition:box-shadow .12s}
.ca-card:hover{box-shadow:inset 0 0 0 1px var(--sp-dim)}
.ca-card[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}
.ca-sw{display:grid;place-items:end start;height:78px;padding:10px 12px;border-radius:12px;background:var(--c)}
.ca-sw.sm{place-items:end center;padding:10px 0}
.ca-sw b{font:600 22px/1 var(--ff-sans);letter-spacing:-.02em}
.ca-n{grid-column:1/-1;font:var(--sw-title)}
.ca-card code{grid-column:1/-1;font:var(--sw-value);color:var(--sp-dim)}
.ca-card>*{min-width:0}
.ca-ck{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:6px 10px;align-items:center;padding-top:8px;border-top:1px solid var(--sp-line)}
.ca-ck i{font:var(--sw-small);font-style:normal;color:var(--sp-dim)}

/* 03 status */
.cs3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.cs3-card{display:grid;gap:8px;padding:14px;border-radius:20px;background:var(--sp-card);box-shadow:var(--sp-card-sh)}
.cs3-sw{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:4px}
.cs3-card>b{font:var(--sw-title)}
.cs3-card>span{font:var(--sw-small);color:var(--sp-dim)}
.cs3-card code{font:var(--sw-value);color:var(--sp-dim)}

/* 04 contrast matrices: each on its own material */
.cm2{display:grid;gap:14px;min-width:0}
.cm2>div{overflow-x:auto;border-radius:22px}
.cmx{width:100%;border-collapse:separate;border-spacing:0 4px;padding:14px 16px;border-radius:22px}
.cmx.dk{background:var(--dk-panel-b);color:var(--dk-ink);--sp-dim:var(--dk-lab-dim);--sp-line:#ffffff17;--sp-card:#ffffff08}
.cmx.lt{background:var(--lt-panel-a);color:var(--lt-ink);--sp-dim:var(--lt-lab-dim);--sp-line:#0000001a;--sp-card:#0000000a}
.cmx.dk .cbg.ok small{color:var(--dk-ok)}.cmx.dk .cbg.mid small{color:var(--dk-warn)}.cmx.dk .cbg.no small{color:var(--dk-err)}
.cmx.lt .cbg.ok small{color:var(--lt-ok)}.cmx.lt .cbg.mid small{color:var(--lt-warn)}.cmx.lt .cbg.no small{color:var(--lt-err)}
.cmx th{font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;color:var(--sp-dim);text-align:left;font-weight:500;padding:4px 6px}
.cmx tbody th{font:var(--sw-body);text-transform:none;letter-spacing:0;color:inherit}
.cmx tbody th span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.cmx tbody th small{color:var(--sp-dim)}
.cmx tbody th .cz{width:14px;height:14px;border-radius:4px}
.cmx td{padding:0 3px}

/* 05 charts */
.cc2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:start}
.cx{margin:0;display:grid;gap:10px;padding:20px;border-radius:22px;background:var(--lt-panel-a);color:var(--lt-ink);--cx-dim:var(--lt-lab-dim);--cx-grid:#0000001a;box-shadow:inset 0 0 0 1px #0000001a}
html[data-theme=dark] .cx{background:var(--dk-field-a);color:var(--dk-ink);--cx-dim:var(--dk-lab-dim);--cx-grid:#ffffff14;box-shadow:inset 0 0 0 1px #ffffff12}
.cx figcaption b{display:block;font:var(--sw-title)}
.cx figcaption span{font:var(--sw-small);color:var(--cx-dim)}
.cx-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font:var(--sw-small)}
.cx-leg span{display:flex;align-items:center;gap:6px}
.cx-leg i{width:10px;height:10px;border-radius:3px}
.cx-plot{position:relative}
.cx-plot svg{display:block;width:100%;height:auto;overflow:visible}
.cx .gl{stroke:var(--cx-grid);stroke-width:1}
.cx .gl.base{stroke:var(--cx-dim);opacity:.5}
.cx .ax{font:var(--sw-kbd);fill:var(--cx-dim)}
.cx .dl{font:var(--sw-readout);fill:currentColor}
.cx .hit{fill:transparent}
.cx .cbar path{transition:opacity .1s}
.cx-plot:has(.cbar.on) .cbar:not(.on) path{opacity:.35}
.cx-tip{position:absolute;pointer-events:none;padding:6px 9px;border-radius:8px;font:var(--sw-readout);white-space:nowrap;background:var(--dk-menu);color:var(--dk-ink);box-shadow:0 6px 18px #0000004d}
.cx-tab summary{font:var(--sw-small);color:var(--cx-dim);cursor:pointer}
.cx-tab table{margin-top:8px;border-collapse:collapse;font:var(--sw-value)}
.cx-tab td,.cx-tab th{padding:4px 14px 4px 0;text-align:left;border-bottom:1px solid var(--cx-grid)}
.cx-tab th{font:var(--sw-label);letter-spacing:var(--sw-label-ls);text-transform:uppercase;color:var(--cx-dim)}
.cc2-side{display:grid;gap:10px}
.cr{display:grid;gap:8px;padding:14px;border-radius:18px;background:var(--sp-card);box-shadow:var(--sp-card-sh)}
.cr .clbl{color:var(--sp-dim)}
.cr p{font:var(--sw-small);color:var(--sp-dim)}
.cr-row{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.cr-s{display:grid;gap:3px;justify-items:center}
.cr-s i{width:100%;height:28px;border-radius:6px}
.cr-s b{font:var(--sw-readout)}
.cr-s small{font:var(--sw-caption);color:var(--sp-dim)}
.cr-ramp{display:flex;gap:2px}
.cr-ramp i{flex:1;height:24px}
.cr-ramp i:first-child{border-radius:6px 0 0 6px}.cr-ramp i:last-child{border-radius:0 6px 6px 0}

/* 06 web */
.cw{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.cw-card{display:grid;gap:8px;align-content:start;padding:12px;border-radius:20px;background:var(--sp-card);box-shadow:var(--sp-card-sh)}
.cw-card>b{font:var(--sw-title)}
.cw-card p{font:var(--sw-small);color:var(--sp-dim)}
.cw-card code{font:var(--sw-value)}
.cw-demo{position:relative;height:120px;border-radius:12px;overflow:hidden;background:var(--lt-panel-a);box-shadow:inset 0 0 0 1px var(--sp-line)}
html[data-theme=dark] .cw-demo{background:var(--dk-page)}
.cw-demo.glow{background-image:var(--glow);display:grid;place-items:center;font:var(--web-h4);letter-spacing:var(--web-h4-ls)}
.cw-demo.bands{display:grid;grid-template-rows:1fr 1fr 1fr}
.cw-demo.bands i:nth-child(1){background:var(--lt-panel-a)}.cw-demo.bands i:nth-child(2){background:var(--lt-page)}.cw-demo.bands i:nth-child(3){background:var(--dk-page)}
.cw-demo.acc{display:flex;align-items:center;justify-content:center;gap:16px}
.cw-btn{padding:9px 14px;border-radius:10px;background:var(--acc);color:var(--acc-ink);font:var(--sw-control)}
.cw-link{font:var(--sw-control);color:var(--acc-on-light,var(--acc))}
html[data-theme=dark] .cw-link{color:var(--acc)}
.cw-demo.photo{background:linear-gradient(180deg,var(--lt-panel-a),var(--lt-panel-b))}
.cw-demo.photo i{position:absolute;left:50%;bottom:14px;width:92px;height:70px;transform:translateX(-50%);border-radius:14px 14px 8px 8px;background:linear-gradient(180deg,var(--dk-key-a),var(--dk-housing-b));box-shadow:0 14px 18px -10px #00000080}

@media (max-width:1100px){.cc2{grid-template-columns:1fr}.cn-row{grid-template-columns:22px minmax(0,1fr) 70px}.cn-row code:first-of-type,.cn-row code:last-of-type{display:none}}