/*  DataCenter — page vocabulary.
    Served to all 32 state hosts as _content/DataCenter.Shared/css/datacenter-shared.css,
    and pulled in by app.css's @import (App.razor is not ours to edit).

    Extracted from the inline <style> blocks in the reference's Components/Pages.
    Those blocks are NOT scoped: a <style> tag inside a .razor page applies to the
    whole document while that page is rendered, so these rules were already global
    -- just restated in up to fourteen places, where they drifted apart.

    NOTHING HERE MAY DUPLICATE A SELECTOR IN app.css. In the reference 35 selectors
    were defined in both files and this one won them all by loading second, so the
    two sheets could not be read independently and reordering them would have
    silently restyled pages. Each of those is now resolved to one definition,
    living in whichever file it belongs to; the shell selectors (.layout, .sidebar,
    .main, .nav-*) and the shared component vocabulary (.pager, .panel, .pill,
    .tile, .table-wrap, .bar-*, .cf-*, .gcard, .kpi2, .data-table) all moved to
    app.css. What is left here is page vocabulary that app.css never mentions.

    A page <style> block sits in <body>, i.e. after both sheets, so a page that
    still needs a local variant keeps it and still wins.
*/

.barrow { display:grid;grid-template-columns:104px 1fr 150px;align-items:center;gap:10px;margin:9px 0 }
.barrow .bf { height:100%;border-radius:6px }
.barrow .bl { font-family:var(--mono);font-size:12px;color:var(--text) }
.barrow .bt { height:9px;border-radius:6px;background:var(--bg4);overflow:hidden }
.barrow .bv { font-family:var(--mono);font-size:11.5px;color:var(--muted2);text-align:right }
.barrow .bv b { color:var(--text) }
.bd-chips { display:flex;flex-wrap:wrap;gap:8px;margin-top:14px }
.bd-grid { display:grid;grid-template-columns:1fr;gap:16px }
.ccard { background:var(--bg2);border:1px solid var(--border);border-top:3px solid var(--rel-color,var(--border2));border-radius:8px;padding:13px 11px;text-align:center }
.ccard .c { font-family:var(--mono);font-size:16px;font-weight:700;color:var(--cyan) }
.ccard .n { font-size:15px;font-weight:600;color:var(--text);margin:4px 0;word-break:break-word }
.ccard .r { font-family:var(--mono);font-size:10px;color:var(--muted) }
.cd { background:var(--bg2);border:1px solid var(--border);border-left:4px solid var(--bucket-color,var(--accent));border-radius:10px;padding:14px 16px }
.cd canvas { max-height:150px }
.cd-det { margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:700;text-decoration:none;color:#0a0e14;background:var(--bucket-color,var(--accent));border-radius:6px;padding:4px 10px;white-space:nowrap }
.cd-det:hover { filter:brightness(1.12) }
.cd-h { display:flex;flex-wrap:wrap;align-items:baseline;gap:10px }
.cd-h .nm { font-size:18px;font-weight:700;color:var(--text) }
.cd-h .pct { font-size:11px;color:var(--muted2) }
.cd-h .rk { font-family:var(--mono);font-size:11px;color:var(--muted) }
.cd-h .tot { font-family:var(--mono);font-weight:700;color:var(--bucket-color,var(--accent)) }
.cd-kv { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-family:var(--mono);font-size:12px }
.cd-kv b { color:var(--text) }
.cd-kv span { color:var(--muted);font-size:10px;text-transform:uppercase }
.cd-wrap { display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:18px }
.cf-card { background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 11px;text-decoration:none;color:var(--text);transition:all .12s }
.cf-card .nm { font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text) }
.cf-card .sb { font-family:var(--mono);font-size:10px;color:var(--muted2);margin-top:2px;line-height:1.4 }
.cf-card.on { background:rgba(34,227,195,.08);border-color:#22e3c3 }
.cf-card:hover { border-color:#22e3c3;transform:translateY(-1px) }
.cf-meta { font-family:var(--mono);font-size:9.5px;color:var(--muted2);line-height:1.3;display:block;margin-top:1px }
.cf-pol-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin-top:10px }
.cf-tbl .booth { min-width:240px;max-width:340px }
.cf-tbl .booth .meta { font-size:9.5px;color:var(--muted2);margin-top:2px }
.cf-tbl .booth b { color:var(--text) }
.cf-tbl tfoot td { border-top:2px solid var(--border);font-weight:800;background:var(--bg3) }
.cgrid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px }
.chart-wrap { background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px }
.chart-wrap .ch-label { font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px }
.chart-wrap canvas { max-height:280px }
.chip b { color:var(--text) }
.chip.on { background:var(--green-dim);color:var(--green);border-color:var(--green) }
.cp-bar { height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;display:inline-block;width:100px;vertical-align:middle }
.cp-bar i { display:block;height:100%;background:linear-gradient(90deg,#ec4899,#a855f7) }
.cp-kpi { display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px }
.cp-kpi .card { background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:13px 15px;position:relative;overflow:hidden }
.cp-kpi .card .lbl { font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px }
.cp-kpi .card .sub { font-family:var(--mono);font-size:10px;color:var(--muted2);margin-top:4px }
.cp-kpi .card .val { font-family:var(--mono);font-size:22px;font-weight:800;color:var(--text);line-height:1.1 }
.cp-kpi .card::before { content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,#ec4899) }
.cp-mtx { display:grid;grid-template-columns:60px repeat(4,1fr);gap:4px;font-family:var(--mono);font-size:11px }
.cp-mtx .c.diag { background:linear-gradient(135deg,rgba(34,227,195,.10),var(--bg3));border-color:rgba(34,227,195,.25) }
.cp-mtx .c.mix { background:linear-gradient(135deg,rgba(245,158,11,.06),var(--bg3)) }
.cp-mtx .h { font-weight:700;color:var(--muted);text-align:center;padding:6px 0;letter-spacing:.1em }
.cp-mtx .lh { font-weight:700;color:var(--muted);padding:8px 4px }
.cp-panel { background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px }
.cp-panel canvas { width:100% !important;max-height:240px }
.cp-panel h3 { font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin:0 0 12px;font-weight:700 }
.cp-picker-sel option { background:#0a1018;color:var(--text) }
.cp-picker-sel:focus { outline:none;border-color:#ec4899;box-shadow:0 0 0 3px rgba(236,72,153,.18) }
.cp-picker-sel:hover { border-color:rgba(236,72,153,.5) }
.cp-section { margin-top:28px }
.cp-section h2 { font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin:0 0 14px;font-weight:800 }
.cp-table { width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px }
.cp-table .num { text-align:right;font-variant-numeric:tabular-nums }
.cp-table td { padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text) }
.cp-table th { font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);font-weight:700 }
.da-bk { border-radius:12px;padding:12px 14px;border:1px solid var(--border,#30363d);background:var(--bg2,#161b22);border-left:3px solid var(--bc) }
.da-bk h4 { font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bc);margin:0 0 8px;font-weight:700 }
.da-ch { position:relative;overflow:hidden;border-radius:12px;padding:12px;text-align:center;border:1px solid color-mix(in srgb,var(--cc) 25%,var(--border,#30363d));background:linear-gradient(160deg,color-mix(in srgb,var(--cc) 8%,var(--bg2,#161b22)),var(--bg2,#161b22)) }
.da-ch h4 { font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--cc);margin:0 0 8px;font-weight:700 }
.da-ch::after { content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cc) }
.da-r { display:flex;justify-content:space-between;padding:3px 0;font-size:11px }
.da-r b { color:var(--text,#e6edf3);font-weight:700 }
.da-r span { color:var(--muted2,#6e7681) }
.da-st { position:relative;overflow:hidden;border-radius:12px;padding:12px 14px;text-align:center;border:1px solid color-mix(in srgb,var(--sc) 30%,var(--border,#30363d));background:linear-gradient(145deg,color-mix(in srgb,var(--sc) 12%,var(--bg2,#161b22)),var(--bg2,#161b22)) }
.da-st-ico { font-size:18px;color:var(--sc);margin-bottom:4px;opacity:.7 }
.da-st-lbl { font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:color-mix(in srgb,var(--sc) 60%,var(--muted,#8b949e));margin-bottom:2px;font-weight:600 }
.da-st-sub { font-size:9px;color:var(--muted,#8b949e);margin-top:2px }
.da-st-val { font-size:20px;font-weight:800;color:var(--text,#e6edf3) }
.da-st::before { content:"";position:absolute;top:-12px;right:-12px;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sc) 15%,transparent),transparent 70%);pointer-events:none }
.data-table td.num { text-align:right;font-weight:600 }
.emhub { padding: 4px 0 24px; }
.emhub__card { margin: 0 0 14px; padding: 14px; background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,0) 100%), var(--vc-bg-surface, #161b22); border: 1px solid var(--vc-border, #30363d); border-left: 3px solid var(--accent, #7c4dff); border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.3); }
.emhub__card-count { margin-left: auto; font-size: 10.5px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; opacity: .85; }
.emhub__card-head { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; }
.emhub__card-title { font-weight: 700; font-size: 14px; color: var(--vc-text-high, #e6edf3); letter-spacing: .02em; }
.emhub__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); flex-shrink: 0; }
.emhub__eyebrow { font-size: 11px; letter-spacing: .25em; color: var(--vc-text-muted, #8b949e); font-weight: 700; }
.emhub__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 8px; }
.emhub__head { padding: 4px 4px 18px; }
.emhub__sub-icon { font-size: 14px; color: var(--swatch); line-height: 1; transition: transform .12s ease; }
.emhub__sub-label { font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emhub__sub::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 60%; border-radius: 0 3px 3px 0; background: var(--swatch); opacity: .8; }
.emhub__sub:active { transform: translateY(1px); }
.emhub__sub:hover { border-color: var(--swatch); background: rgba(255,255,255,.04); }
.emhub__title { margin: 6px 0 4px; font-size: 22px; font-weight: 800; color: var(--vc-text-high, #e6edf3); line-height: 1.15; }
.empty { padding:40px;text-align:center;color:var(--muted) }
.fam-bar { height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;display:inline-block;width:120px;vertical-align:middle }
.fam-bar i { display:block;height:100%;background:linear-gradient(90deg,#22e3c3,#06b6d4) }
.fam-grid2 { display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:18px }
.fam-hero { background:linear-gradient(135deg,#0c1620,#0a1018);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin:0 0 18px;position:relative;overflow:hidden }
.fam-hero .meta { display:flex;gap:18px;flex-wrap:wrap;margin-top:14px }
.fam-hero .meta b { color:var(--text) }
.fam-hero .meta span { font-family:var(--mono);font-size:11.5px;color:var(--muted2) }
.fam-hero .sub { font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--muted);text-transform:uppercase;margin-top:6px }
.fam-hero h1 { font-family:var(--mono);font-weight:900;font-size:30px;margin:0;letter-spacing:.01em;background:linear-gradient(90deg,#a855f7,#22e3c3);-webkit-background-clip:text;background-clip:text;color:transparent }
.fam-hero::before { content:"";position:absolute;inset:0;background:radial-gradient(800px 280px at 0% 0%,rgba(168,85,247,.10),transparent 55%),radial-gradient(700px 250px at 100% 100%,rgba(34,227,195,.10),transparent 55%);pointer-events:none }
.fam-kpi { display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:0 0 24px }
.fam-kpi .card { background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;position:relative;overflow:hidden }
.fam-kpi .card .lbl { font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:6px }
.fam-kpi .card .sub { font-family:var(--mono);font-size:10px;color:var(--muted2);margin-top:4px }
.fam-kpi .card .val { font-family:var(--mono);font-size:24px;font-weight:800;color:var(--text);line-height:1.1 }
.fam-kpi .card::before { content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ac,#22e3c3) }
.fam-panel { background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 16px }
.fam-panel canvas { width:100% !important;max-height:240px }
.fam-panel h3 { font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted2);margin:0 0 12px;font-weight:700 }
.fam-picker-sel option { background:#0a1018;color:var(--text);padding:8px }
.fam-picker-sel:focus { outline:none;border-color:#a855f7;box-shadow:0 0 0 3px rgba(168,85,247,.18),inset 0 1px 0 rgba(255,255,255,.04) }
.fam-picker-sel:hover { border-color:rgba(168,85,247,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 4px 16px rgba(168,85,247,.18) }
.fam-table { width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;overflow-x:auto;display:block }
.fam-table .num { text-align:right;font-variant-numeric:tabular-nums }
.fam-table th { font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--border);font-weight:700 }
.fam-table tr:hover td { background:rgba(255,255,255,.02) }
.finding-card { position:relative;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:14px;overflow:hidden }
.finding-card .fc-sub { font-family:var(--mono);font-size:11px;color:var(--muted2);margin-top:4px }
.finding-card .fc-title { font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px }
.finding-card.fc-amber .fc-num { color:#f59e0b }
.finding-card.fc-amber::before { background:#f59e0b }
.finding-card.fc-cyan .fc-num { color:#22e3c3 }
.finding-card.fc-cyan::before { background:#22e3c3 }
.finding-card.fc-green .fc-num { color:#10b981 }
.finding-card.fc-green::before { background:#10b981 }
.finding-card.fc-red .fc-num { color:#f43f5e }
.finding-card.fc-red::before { background:#f43f5e }
.finding-card::before { content:"";position:absolute;left:0;top:0;bottom:0;width:4px }
.geo-card { background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;color:var(--text);text-decoration:none;transition:.15s;display:block }
.geo-card .gh { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px }
.geo-card .gh .gid { font-family:var(--mono);font-size:11px;color:var(--muted2);padding:2px 6px;border:1px solid var(--border);border-radius:4px }
.geo-card .gh .icon { color:var(--cyan);font-size:18px;margin-right:8px }
.geo-card:hover { border-color:var(--cyan);transform:translateY(-1px) }
.geo-picker { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px }
.geo-picker button { background:var(--cyan);color:#000;border:0;padding:7px 14px;border-radius:6px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;cursor:pointer;font-weight:600 }
.geo-picker label { font-family:var(--mono);font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.08em }
.geo-picker select { background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:6px 10px;border-radius:6px;font-family:var(--mono);font-size:12px;width:100% }
.hub-chip { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--chip) 10%, transparent), rgba(255,255,255,.02)); border: 1px solid color-mix(in srgb, var(--chip) 20%, var(--vc-border, #30363d)); border-radius: 14px; cursor: pointer; font-family: inherit; color: var(--vc-text-high, #e6edf3); overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s; }
.hub-chip:hover { transform: translateY(-2px); border-color: var(--chip); box-shadow: 0 6px 24px color-mix(in srgb, var(--chip) 20%, transparent); }
.hub-chip__glow { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 50px; height: 50px; background: radial-gradient(circle, color-mix(in srgb, var(--chip) 12%, transparent), transparent 70%); border-radius: 50%; pointer-events: none; }
.hub-chip__icon { font-size: 30px; color: var(--chip); z-index: 1; }
.hub-chip__label { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.2; z-index: 1; }
.hub-count { font-size: 11px; font-weight: 700; color: var(--vc-text-muted, #8b949e); background: rgba(255,255,255,.06); padding: 2px 10px; border-radius: 999px; }
.hub-divider { display: flex; align-items: center; margin: 28px 0 24px; }
.hub-divider__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vc-primary, #7c4dff); box-shadow: 0 0 8px var(--vc-primary, #7c4dff); flex-shrink: 0; }
.hub-divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--vc-primary, #7c4dff) 40%, transparent) 50%, transparent); }
.hub-hero { margin-top: 12px; padding: 20px 18px 18px; background: linear-gradient(145deg, color-mix(in srgb, var(--hero) 8%, transparent) 0%, color-mix(in srgb, var(--hero) 2%, transparent) 50%, transparent 100%), var(--vc-bg-surface, #161b22); border: 1px solid color-mix(in srgb, var(--hero) 30%, var(--vc-border, #30363d)); border-radius: 20px; box-shadow: 0 0 40px color-mix(in srgb, var(--hero) 6%, transparent) inset, 0 2px 8px rgba(0,0,0,.25); }
.hub-hero__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hub-hero__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.hub-hero__logo { font-size: 36px; color: var(--hero); }
.hub-hero__sub { font-size: 12px; color: var(--vc-text-muted, #8b949e); margin: 2px 0 0; font-weight: 500; letter-spacing: .03em; }
.hub-hero__title { font-size: 18px; font-weight: 800; color: var(--vc-text-high, #e6edf3); margin: 0; line-height: 1.2; }
.m-absent .v { color:#fb923c }
.m-asd .v { color:#f59e0b }
.m-dead .v { color:#f43f5e }
.m-dup .v { color:#a855f7 }
.m-nomap .v { color:#10b981 }
.m-shifted .v { color:#22e3c3 }
.m-total .v { color:#06b6d4 }
.metric { background:var(--bg3);border:1px solid var(--border);border-radius:6px;padding:8px 10px;text-align:center }
.metric .l { font-family:var(--mono);font-size:11px;text-transform:uppercase;color:var(--muted2);letter-spacing:.08em }
.metric-row { display:grid;grid-template-columns:repeat(2,1fr);gap:6px }
.mistake-bar { display:grid;grid-template-columns:140px 1fr 100px 80px;align-items:center;gap:10px;margin:8px 0;font-family:var(--mono);font-size:12px }
.mistake-bar .mb-fill { height:100%;border-radius:6px }
.mistake-bar .mb-label { color:var(--text) }
.mistake-bar .mb-pct { text-align:right;color:var(--muted2);font-size:11px }
.mistake-bar .mb-track { height:10px;border-radius:6px;background:var(--bg4);overflow:hidden }
.mistake-bar .mb-val { text-align:right;font-weight:600;color:var(--text) }
.neg { color:#ef4444 }
.pos { color:#22c55e }
.rcard .rh a { color:var(--cyan);text-decoration:none }
.rl-chips { display:flex;flex-wrap:wrap;gap:8px;margin-top:14px }
.rl-id .nm { font-family:var(--mono);font-size:26px;font-weight:800;color:#fff;letter-spacing:.02em }
.rl-id::before { content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rel-color,var(--border2)) }
.tagcloud { display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:10px }
.tagcloud .tag { font-family:var(--mono);padding:4px 10px;border-radius:4px;background:var(--bg3);border:1px solid var(--border) }
.tile .label { font-family:var(--mono);font-size:11px;color:var(--muted2);text-transform:uppercase;letter-spacing:.06em }
.y-h { background:#f59e0b }
.y-m { background:#10b981 }
.y-o { background:#7a5c4f }
.y-total { background:#1f7ae0 }
table.vt th { font-family:var(--mono);font-size:10px;text-transform:uppercase;color:var(--muted) }
table.vt th,table.vt td { padding:7px 9px;border-bottom:1px solid var(--border);text-align:left }
table.vt tr:hover td { background:var(--bg3) }

/*  --rel-color / --bucket-color
    Set by the page on the element itself -- style="--bucket-color:#2e8b57" --
    to tint .ccard, .cd, .cd-det, .cd-h .tot and .rl-id for one religion or one
    PDA-G bucket. Defaults above keep the rule visible when a page forgets. */