/* Shared look for the leaderboard and admin pages: the ballot design from the game page. */
* { box-sizing: border-box; }
html, body { margin: 0; }
[hidden] { display: none !important; }
body { background: #e9ecf2; color: #1e2440; font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.5; }
.cnl-hub-top { background: #2C3659; }
.cnl-hub-bar { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.cnl-hub-logo { display: flex; align-items: center; min-height: 36px; color: #fff; text-decoration: none; }
.cnl-hub-logo img { height: 36px; width: auto; display: block; }
.cnl-hub-logo-text { font-family: "pragmatica-extended", "Archivo", sans-serif; font-stretch: 125%; font-weight: 800; font-size: 14px; line-height: 1.1; text-transform: uppercase; }
.cnl-hub-links { display: flex; gap: 20px; }
.cnl-hub-links a { color: #B9BFD6; text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 0; white-space: nowrap; }
.cnl-hub-links a:hover { color: #fff; text-decoration: underline; }

.cnl-midterms-wrap { max-width: 980px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); }
.cnl-midterms-box { background: #fff; border: 3px solid #1e2440; margin-top: 24px; }
.cnl-midterms-box-head { background: #1e2440; color: #fff; padding: 12px 22px 14px; }
.cnl-midterms-box-head p { margin: 4px 0 0; color: #c9cde0; font-size: 15px; }
.cnl-midterms-box-body { padding: 22px; }
.cnl-midterms-disp { font-family: "Archivo", sans-serif; font-stretch: 75%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1; margin: 0; text-wrap: balance; }
h1.cnl-midterms-disp { font-size: clamp(40px, 7vw, 68px); }
h2.cnl-midterms-disp { font-size: clamp(24px, 3.6vw, 32px); }
.cnl-midterms-num { font-family: "Archivo", Arial, sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; }
.cnl-midterms-muted { color: #555c7c; }
.cnl-midterms-dem { color: #2a55c8; } .cnl-midterms-gop { color: #c3372d; } .cnl-midterms-ind { color: #7f55b8; }
.cnl-midterms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; border-top: 2px solid #1e2440; margin-top: 20px; }
.cnl-midterms-stats div { padding: 12px 16px 4px 0; }
.cnl-midterms-stats span { display: block; font-size: 13px; font-weight: 600; color: #555c7c; }
.cnl-midterms-stats b { font-family: "Archivo", Arial, sans-serif; font-size: 19px; font-weight: 800; }
.cnl-midterms-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cnl-midterms-table th, .cnl-midterms-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid #d5d8e3; vertical-align: top; }
.cnl-midterms-table th { font-size: 13px; color: #555c7c; font-weight: 600; border-bottom: 2px solid #1e2440; }
.cnl-midterms-table td.n, .cnl-midterms-table th.n { text-align: right; font-variant-numeric: tabular-nums; }
.cnl-midterms-scroll { overflow-x: auto; }
.cnl-midterms-btn { font: inherit; font-weight: 700; font-size: 15px; background: #9e2e2a; color: #fff; border: 0; padding: 11px 16px; cursor: pointer; }
.cnl-midterms-btn.alt { background: #fff; color: #1e2440; border: 2px solid #1e2440; padding: 9px 14px; }
.cnl-midterms-btn:disabled { opacity: 0.55; cursor: default; }
.cnl-midterms-btn:focus-visible, .cnl-midterms-input:focus-visible, .cnl-midterms-choice:focus-visible { outline: 3px solid #2a55c8; outline-offset: 2px; }
.cnl-midterms-input { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #1e2440; background: #fff; color: #1e2440; min-width: 0; width: 100%; }
.cnl-midterms-label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
@media (max-width: 640px) {
  .cnl-midterms-box-body { padding: 16px; }
  .cnl-hub-links { gap: 14px; }
}
.linkbtn { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }
.linkbtn[disabled] { opacity: 0.5; cursor: progress; }
