#section-electorate { --kb-green: #16805a; --kb-amber: #b7791f; --kb-red: #ad3c48; }
#section-electorate > .page-heading { margin-bottom: 15px; }

#section-electorate .kb-summary { padding: 0; overflow: hidden; border-color: #dbe3eb; box-shadow: 0 12px 36px rgba(18, 35, 57, .06); }
#section-electorate .kb-summary-grid { grid-template-columns: 1.25fr .9fr 1.15fr .9fr .8fr .85fr; }
#section-electorate .kb-summary-grid > div { position: relative; min-height: 106px; padding: 18px 17px; border-left-color: #e2e8ef; background: #fff; }
#section-electorate .kb-summary-grid > div:first-child { padding-left: 20px; background: #17283e; }
#section-electorate .kb-summary-grid > div:first-child span,
#section-electorate .kb-summary-grid > div:first-child small { color: #aab9c9; }
#section-electorate .kb-summary-grid > div:first-child strong { color: #fff; font-size: 27px; }
#section-electorate .kb-summary-grid > div:last-child::after { content: ""; position: absolute; right: 14px; bottom: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--kb-green); box-shadow: 0 0 0 4px #e5f4ee; }
#section-electorate .kb-summary strong { color: #111827; font-size: 21px; line-height: 1.1; }
#section-electorate .kb-summary small { display: block; max-width: 150px; color: #657387; font-size: 9px; line-height: 1.4; }

#section-electorate .territorial-intelligence { overflow: hidden; border: 1px solid #d8e1e9; border-radius: 14px; box-shadow: 0 14px 40px rgba(16, 33, 55, .07); }
#section-electorate .territorial-map-toolbar { padding: 18px 20px; }

#section-electorate .kb-block { border-color: #dbe3eb; border-radius: 13px; box-shadow: 0 10px 30px rgba(18, 35, 57, .05); }
#section-electorate .kb-head { align-items: flex-end; padding-bottom: 13px; border-bottom: 1px solid #e3e9ef; }
#section-electorate .kb-head > small { color: #718095; font-size: 9px; }

#section-electorate .kb-turnout { grid-template-columns: 240px 1fr; gap: 28px; }
#section-electorate .kb-turnout-main { display: grid; width: 170px; height: 170px; place-content: center; justify-self: center; padding: 24px; border: 0; border-radius: 50%; background: radial-gradient(circle at center, #fff 0 59%, transparent 60%), conic-gradient(#2563a7 var(--turnout), #e7edf3 0); box-shadow: inset 0 0 0 1px #dfe6ed; }
#section-electorate .kb-turnout-main strong { color: #111827; font-size: 40px; }
#section-electorate .kb-turnout-main span { max-width: 110px; margin: 3px auto 0; color: #506078; font-size: 10px; line-height: 1.3; }
#section-electorate .kb-turnout-scenarios { gap: 8px; }
#section-electorate .kb-turnout-scenarios div { position: relative; padding: 14px 13px 20px; border: 1px solid #e1e7ed; border-radius: 8px; background: #fff; }
#section-electorate .kb-turnout-scenarios strong { color: #111827; }
#section-electorate .kb-turnout-scenarios i { position: absolute; right: 12px; bottom: 9px; left: 12px; height: 4px; border-radius: 999px; background: #e8edf2; overflow: hidden; }
#section-electorate .kb-turnout-scenarios i b { display: block; width: var(--scenario); height: 100%; border-radius: inherit; background: #2c669e; }
#section-electorate .kb-turnout > div:last-child > p { margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid #8aa2ba; background: #f5f7fa; color: #425269; font-size: 10px; line-height: 1.45; }

#section-electorate .kb-inventory { grid-template-columns: repeat(5, 1fr); gap: 0; overflow: hidden; border: 1px solid #e0e6ec; border-radius: 10px; }
#section-electorate .kb-inventory > div { position: relative; min-height: 104px; padding: 15px; border-right: 1px solid #e4e9ef; border-bottom: 1px solid #e4e9ef; border-radius: 0; background: #fff; }
#section-electorate .kb-inventory > div:nth-child(5n) { border-right: 0; }
#section-electorate .kb-inventory > div:nth-last-child(-n+5) { border-bottom: 0; }
#section-electorate .kb-inventory strong { color: #111827; font-size: 24px; }
#section-electorate .kb-inventory span { min-height: 27px; color: #44546a; font-size: 10px; line-height: 1.35; }
#section-electorate .kb-inventory small { display: inline-block; margin-top: 9px; padding: 3px 6px; border-radius: 5px; font-size: 8px; font-weight: 800; }
#section-electorate .kb-inventory .has-data::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #27805f; }
#section-electorate .kb-inventory .has-data small { background: #e7f4ef; color: #176d50; }
#section-electorate .kb-inventory .no-data { background: #f7f8fa; }
#section-electorate .kb-inventory .no-data strong,
#section-electorate .kb-inventory .no-data span { color: #8a95a4; }
#section-electorate .kb-inventory .no-data small { background: #eceff3; color: #717d8d; }

#section-electorate .kb-sources-table { border: 1px solid #e0e6ec; border-radius: 10px; }
#section-electorate .kb-sources-table table { min-width: 820px; }
#section-electorate .kb-sources-table thead { position: sticky; top: 0; z-index: 1; background: #f5f7fa; }
#section-electorate .kb-sources-table th { padding: 11px 12px; color: #536176; }
#section-electorate .kb-sources-table td { padding: 12px; color: #26364b; }
#section-electorate .kb-sources-table tbody tr:hover { background: #f7fafd; }
#section-electorate .kb-sources-table a { display: inline-block; padding: 5px 7px; border: 1px solid #cfdce8; border-radius: 6px; background: #f6f9fc; }

#section-electorate .kb-lights { grid-template-columns: repeat(3, 1fr); gap: 8px; }
#section-electorate .kb-light { grid-template-columns: 12px 1fr; min-height: 76px; padding: 13px; border: 1px solid #e1e7ed; border-radius: 8px; background: #fff; }
#section-electorate .kb-light i { grid-row: 1 / 3; align-self: start; margin-top: 2px; }
#section-electorate .kb-light b { color: #172238; font-size: 10px; }
#section-electorate .kb-light small { font-size: 9px; font-weight: 800; }
#section-electorate .kb-light.available i { background: var(--kb-green); box-shadow: 0 0 0 4px #e5f4ee; }
#section-electorate .kb-light.available small { color: var(--kb-green); }
#section-electorate .kb-light.partial i { background: var(--kb-amber); box-shadow: 0 0 0 4px #faf0dc; }
#section-electorate .kb-light.partial small { color: var(--kb-amber); }
#section-electorate .kb-light.missing i { background: var(--kb-red); box-shadow: 0 0 0 4px #f8e9eb; }
#section-electorate .kb-light.missing small { color: var(--kb-red); }
#section-electorate #electorateQuality > p { margin: 12px 0 0; padding: 11px 12px; background: #f5f7fa; color: #46566c; font-size: 10px; line-height: 1.5; }

@media (max-width: 1180px) {
  #section-electorate .kb-summary-grid { grid-template-columns: repeat(3, 1fr); }
  #section-electorate .kb-summary-grid > div:nth-child(4) { border-left: 0; }
  #section-electorate .kb-inventory { grid-template-columns: repeat(2, 1fr); }
  #section-electorate .kb-inventory > div:nth-child(5n) { border-right: 1px solid #e4e9ef; }
  #section-electorate .kb-inventory > div:nth-child(2n) { border-right: 0; }
  #section-electorate .kb-inventory > div:nth-last-child(-n+5) { border-bottom: 1px solid #e4e9ef; }
  #section-electorate .kb-inventory > div:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 760px) {
  #section-electorate .kb-summary-grid,
  #section-electorate .kb-turnout,
  #section-electorate .kb-lights { grid-template-columns: 1fr; }
  #section-electorate .kb-summary-grid > div { min-height: auto; border-left: 0; border-top: 1px solid #e2e8ef; }
  #section-electorate .kb-summary-grid > div:first-child { border-top: 0; }
  #section-electorate .kb-turnout-main { width: 150px; height: 150px; }
  #section-electorate .kb-inventory { grid-template-columns: 1fr; }
  #section-electorate .kb-inventory > div { min-height: 88px; border-right: 0 !important; border-bottom: 1px solid #e4e9ef !important; }
  #section-electorate .kb-inventory > div:last-child { border-bottom: 0 !important; }
}