/* Base, shared by index.html and overview.html: reset, body, links, focus rings, code, screen-reader
   text, tabular figures, and the colour fills for the level ramp (--m-*) and the heat ramp (--h1…--h5). */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page-bg);color:var(--ink);font:var(--fs-body)/1.5 var(--font);font-variant-numeric:proportional-nums}
/* Titles and hero figures use the display face (the same as --font unless the scheme pairs two). */
h1,h2,h3,h4,.value,.big-figure,.sx-fig b,.ap-head h3,.pk-head h3{font-family:var(--font-display)}
.value,.big-figure,.sx-fig b{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
a{color:inherit;text-underline-offset:3px}
a:hover{color:var(--accent-ink)}
code{font-size:var(--fs-code);background:var(--grid);padding:calc(0.0625rem * var(--dz)) calc(0.3125rem * var(--dz));border-radius:var(--radius-xs)}
[hidden]{display:none !important}

/* Screen-reader only (also the process form's list legends, which have no class of their own) */
.sr-only,.proc-form .list-field > legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface-2);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);z-index:10}
.skip:focus{left:16px}

/* Focus ring. Controls that sit in a row or grid draw it 1px out instead of 2px. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-3)}
.page-tabs a:focus-visible,.seg-tabs label:has(input:focus-visible),.db-sh:focus-visible,.db-grp > summary:focus-visible,
.proc:focus-visible,.pk-btn:focus-visible,.pf-name input:focus-visible,.cb-field:focus-within,.mx-dir:focus-visible,.mx-scroll:focus-visible,
.sx-part:focus-visible,.sx-fig:focus-visible,.sx-seg:focus-visible,.chg:not(.static):hover,.chg:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

/* Figures line up in columns: numbers are tabular wherever they are read as a column or a value */
.num,.n,.val,.count,.value,.note,.ld-val,.lv-val,.db-val,.db-delta,.seg,.rc-counts,.eg-counts,td.num,th.num,.badge,.big-figure{font-variant-numeric:tabular-nums}

/* Level fills: one colour per level, shared by stacked-bar segments, level chips, keys and strips.
   The integration methods (none → native) reuse the same four steps. */
.swatch{width:12px;height:12px;border-radius:var(--radius-2);display:inline-block;flex:none}
.seg-manual,.seg-none,.lv-manual,.sipoc-strip .s-manual,.pair-key i.mx-sw.seg-manual{background:var(--m-manual);color:var(--on-manual)}
.seg-hybrid,.seg-rekey,.lv-hybrid,.sipoc-strip .s-hybrid,.pair-key i.mx-sw.seg-hybrid{background:var(--m-hybrid);color:var(--on-hybrid)}
.seg-system,.seg-file,.lv-system,.sipoc-strip .s-system,.pair-key i.mx-sw.seg-system{background:var(--m-system);color:var(--on-system)}
.seg-automated,.seg-native,.lv-automated,.sipoc-strip .s-automated,.pair-key i.mx-sw.seg-automated{background:var(--m-automated);color:var(--on-automated)}
.seg-unrated,.lv-unrated,.pair-key i.mx-sw.seg-unrated{background:var(--m-unrated);color:var(--on-unrated)}
/* Heat ramp fills (fewer → more): the people matrix cells and key, and the level grid */
.mx-c.l1 > span,.lvg-c.h1,.mx-key .mx-sw.l1{background:var(--h1);color:var(--on-h1)}
.mx-c.l2 > span,.lvg-c.h2,.mx-key .mx-sw.l2{background:var(--h2);color:var(--on-h2)}
.mx-c.l3 > span,.lvg-c.h3,.mx-key .mx-sw.l3{background:var(--h3);color:var(--on-h3)}
.mx-c.l4 > span,.lvg-c.h4,.mx-key .mx-sw.l4{background:var(--h4);color:var(--on-h4)}
.mx-c.l5 > span,.lvg-c.h5,.mx-key .mx-sw.l5{background:var(--h5);color:var(--on-h5)}