/* charity8: the eight-tile charity header (govreg-cec, 18 Oct 2026). Tiles link to the matching tab. */
body.ux.cec a.kpi-tile.c8-tile { display: block; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
body.ux.cec a.kpi-tile.c8-tile:hover, body.ux.cec a.kpi-tile.c8-tile:focus-visible { border-color: var(--c-red, #c8102e); box-shadow: var(--c-sh, 0 6px 18px rgba(0,0,0,.08)); }
body.ux.cec a.kpi-tile.c8-tile:focus-visible { outline: 2px solid var(--c-red, #c8102e); outline-offset: 2px; }
body.ux.cec .cec-ph-kpis .kpi-row:has(.c8-tile) { gap: 0.7rem; }
body.ux.cec .cec-ph-kpis .c8-tile .kpi-label { min-height: 2.4em; }
body.ux.cec .cec-ph-kpis .c8-tile .kpi-sub { line-height: 1.35; overflow-wrap: anywhere; }
body.ux.cec .c8-tile.c8-bad { background: #fbe7e5; border-color: #e3a6a0; }
body.ux.cec .c8-tile.c8-bad .kpi-label, body.ux.cec .c8-tile.c8-bad .kpi-num { color: #9a1b12; }
body.ux.cec .c8-tile.c8-warn .kpi-num { color: #9a1b12; }
body.ux.cec .c8-long { display: inline-block; font-size: 0.68rem; font-weight: 800; border: 1px solid var(--c-line); border-radius: 999px; padding: 0 0.4rem; margin-left: 0.2rem; color: #55575b; white-space: nowrap; }
@media (max-width: 620px) { body.ux.cec .c8-conn { display: none; } body.ux.cec .cec-ph-kpis .c8-tile .kpi-num { font-size: 1.45rem; } body.ux.cec .cec-ph-kpis .c8-tile .kpi-label { min-height: 0; } }

/* 18 Oct (Jason): equal tiles, dotted red outline, block height matched to the Contact box by a small script in charity8.js */
body.ux.cec .cec-ph-kpis .kpi-row:has(.c8-tile) { grid-auto-rows: 1fr; align-content: stretch; }
body.ux.cec a.kpi-tile.c8-tile { border: 1.5px dashed var(--c-red, #c8102e); height: 100%; box-sizing: border-box; }
body.ux.cec a.kpi-tile.c8-tile:hover, body.ux.cec a.kpi-tile.c8-tile:focus-visible { border-style: solid; }
body.ux.cec .c8-known { font-size: 0.72rem; color: #6b6e73; white-space: nowrap; }

/* 29 Oct 2026 (Jason): N/A tiles, with a "Small charity" pill whose (i) explains on hover or focus */
body.ux.cec .c8-tile.c8-na .kpi-num { color: #8a8c90; }
body.ux.cec .c8-tile .c8-small { display: inline-flex; align-items: center; gap: .4rem; }
body.ux.cec .c8-tile .c8-i { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid currentColor; font: italic 700 10px/1 Georgia, serif; cursor: help; }
body.ux.cec .c8-tile .c8-i:hover::after, body.ux.cec .c8-tile .c8-i:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 30; padding: 6px 10px; border-radius: 8px; background: #121314; color: #fff; font: 400 12px/1.4 inherit; font-family: inherit; font-style: normal; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
body.ux.cec .c8-tile .c8-i:focus-visible { outline: 2px solid #121314; outline-offset: 2px; }