@page{size:letter;margin:0.35in 0.45in}
body{font-family:Arial,Helvetica,sans-serif;font-size:11pt;margin:0;}
#guide{max-width:8in;margin:0 auto}
h1{font-size:17pt;margin:0 0 4px}.sub{color:#333;margin:0 0 8px;font-size:10.5pt;line-height:1.4}
h2{font-size:12pt;margin:6px 0 2px;border-bottom:1px solid #999}
table{border-collapse:collapse;width:100%}td{padding:1px 6px;vertical-align:top}td.r{text-align:right;font-weight:bold;white-space:nowrap}
tr:nth-child(even){background:#f2f2f2}
.fn{color:#333;font-size:9pt;line-height:1.25;margin:3px 0 0}ul.fn{margin:1px 0 0 16px;padding:0}
.pending{color:#7a4b00;font-weight:normal;font-style:italic;white-space:normal}
.unplaced{color:#555;font-weight:normal;white-space:normal}
.disputed{display:block;color:#a00;font-size:8.5pt;font-weight:normal;font-style:italic}
.ifline td:first-child{padding-left:14px}
h3.amb{font-size:10.5pt;margin:4px 0 1px}
#picker{max-width:8in;margin:0 auto 14px;padding:10px;border:1px solid #ccc;border-radius:6px;background:#fafafa}
#picker .row{margin:6px 0}#picker select{font-size:11pt;max-width:100%}
#picker .help{display:block;color:#555;font-size:9.5pt;margin-top:2px}
#districts label{display:inline-block;margin:3px 10px 3px 0}
.apptitle{font-size:14pt}
#guide.dense{font-size:10pt}#guide.dense h1{font-size:15pt}#guide.dense h2{font-size:11pt;margin:4px 0 1px}#guide.dense .sub{font-size:9.5pt}#guide.dense .fn{font-size:8.5pt}#guide.dense td{padding:0 6px}
#guide.denser{font-size:9pt}#guide.denser h1{font-size:13pt}#guide.denser h2{font-size:10pt;margin:3px 0 1px}#guide.denser .sub{font-size:8.5pt;margin-bottom:4px}#guide.denser .fn{font-size:8pt}#guide.denser td{padding:0 5px}#guide.denser h3.amb{font-size:9pt;margin:2px 0 0}
@media print{.noprint{display:none!important}#guide{max-width:none}}
.two{display:inline-block;line-height:1.2}sup{font-size:7pt;line-height:1;vertical-align:3px}
.fn2{columns:3;column-gap:14px;margin-top:3px}.fn2 .j{break-inside:avoid;margin:0 0 2px}.fn2 p,.fn2 ul{font-size:7.5pt;line-height:1.15}.fn2 ul.fn{margin-left:11px}
.src{font-size:7.5pt;font-weight:normal;color:#666;margin-left:4px}.src a{color:#36c}
.indep{font-size:9pt;color:#444;margin:0 0 4px}
table{font-size:inherit}
/* 3 columns: race | notes (lighter) | pick (bold) */
#guide table{table-layout:fixed}col.l{width:41%}col.m{width:27%}col.p{width:32%}
#guide tr:nth-child(even){background:none}#guide tr.alt{background:#f2f2f2}
td.m{color:#555;font-size:8.5pt;padding-left:18px;white-space:nowrap}td.r{padding-left:14px}
#guide.denser td.m{font-size:7.5pt}
.fn2 li.srcs{list-style:none;margin-left:-11px}.lk{font-size:7pt}.lk a{color:#1a4fa0;text-decoration:none}
/* judge tables: 4 columns */
col.jl{width:39%}col.ja{width:20%}col.jm{width:29%}col.jp{width:12%}td.a{font-size:9pt;white-space:nowrap}
tr.jh td{font-size:7.5pt;color:#666;text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid #ccc;padding-top:1px}
#guide.denser td.a{font-size:8pt}
/* footnote size: largest that keeps every guide PDF at one page (step-tested) */
:root{--fnpt:7.7pt}
#guide[class] .fn2 .fn,#guide[class] .fn2 p,#guide[class] .fn.leg{font-size:var(--fnpt);line-height:1.15}.fn.leg{margin:4px 0 0}
a.hl{color:#1a4fa0;text-decoration:none}
@media screen and (max-width:640px){#guide td.a,#guide td.m{white-space:normal;padding-left:6px}}
a.siteurl{float:right;font-size:8pt;font-weight:normal;color:#1a4fa0;text-decoration:none;margin-top:6px}
a.cl{color:inherit;text-decoration:none;border-bottom:1px dotted #9ab}a.cl:hover{color:#1a4fa0}
.bsrc{font-size:8pt;color:#555}.bsrc a{color:#1a4fa0;text-decoration:none}
@media print{a.cl{border-bottom:none}}
/* split judges: each answer sits next to its label; Vote shows "?" on both lines; the pair is grouped */
.sl{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.sl .ans{font-weight:bold;color:#222;padding-right:4px}
tr.sp td.m,tr.sp td.r{background:#eef3fa}tr.sp td.m{border-left:2px solid #7f9cc7}
.q{font-weight:bold;color:#7f5a00}
tr.sp1 td.m,tr.sp1 td.r{box-shadow:inset 0 2px 0 #fff}
/* ---- page design (screen only): faded flag background, flag banner, white content card ---- */
@media screen{
html{background:#eceef3}
.flagbg{position:fixed;inset:0;z-index:-1;background:url(flag.svg) center/cover no-repeat;opacity:.16;filter:grayscale(.55) blur(1px)}
.banner{position:relative;color:#fff;background:linear-gradient(rgba(22,36,74,.90),rgba(22,36,74,.85)),url(flag.svg) center 38%/cover no-repeat;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.banner .bin{max-width:8.6in;margin:0 auto;padding:16px 22px 14px;box-sizing:border-box}
.banner p{margin:0}.banner a{color:#fff}
.btitle{font-size:24pt;font-weight:bold;letter-spacing:.3px;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.45)}.btitle a{text-decoration:none}
.btag{font-size:11.5pt;color:#e6ebf5;margin-top:3px!important}
.bnav{margin-top:8px;font-size:10.5pt}.bnav a{display:inline-block;margin-right:14px;padding:2px 10px;border:1px solid rgba(255,255,255,.55);border-radius:14px;text-decoration:none;background:rgba(255,255,255,.08)}
.bnav a:hover,.bnav a:focus{background:rgba(255,255,255,.22)}
.card{display:block;max-width:8.6in;margin:18px auto 28px;background:#fff;border-radius:12px;box-shadow:0 4px 18px rgba(20,30,60,.18);padding:18px 22px 20px;box-sizing:border-box}
#picker{background:#f7f8fb}
}
@media screen and (max-width:640px){
.banner .bin{padding:10px 12px 9px}.btitle{font-size:17pt}.btag{font-size:9.5pt}.bnav{margin-top:6px;font-size:9.5pt}.bnav a{margin-right:8px;padding:1px 8px}
.card{margin:8px 6px 14px;padding:10px 10px 12px;border-radius:8px}
.flagbg{opacity:.10}
}
@media print{.flagbg,.banner{display:none!important}.card{max-width:none;margin:0;padding:0;box-shadow:none;border-radius:0;background:none}html{background:none}}
/* banner state picker: looks like header text with a subtle caret; still a native, keyboard- and phone-friendly <select> */
.btitle label{cursor:pointer}
.stwrap{display:inline-block;position:relative;white-space:nowrap}
#state{font:inherit;color:#fff;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-opacity='.75' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 4px center/.45em auto;
  border:0;border-bottom:1px dashed rgba(255,255,255,.35);border-radius:4px 4px 0 0;padding:0 1.05em 0 2px;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer;text-shadow:inherit;letter-spacing:inherit;line-height:inherit;max-width:100%}
#state:hover{background-color:rgba(255,255,255,.08);border-bottom-color:rgba(255,255,255,.7)}
#state:focus-visible{outline:2px solid #fff;outline-offset:2px;background-color:rgba(255,255,255,.12)}
#state option{color:#111;background:#fff;text-shadow:none;font-size:12pt;font-weight:normal}
#guide .unavail{padding:28px 6px 34px;text-align:center}
#guide .unavail h1{font-size:16pt;margin:0 0 8px;border:0}
#guide .unavail p{margin:4px 0;font-size:11pt;color:#333}
#guide .unavail p.noted{color:#2f5d2f;font-size:10pt;margin-top:10px}
/* typeahead hint (typeahead.js): tiny label under a dropdown while typing */
#ta-hint{position:fixed;z-index:50;display:none;font:9pt Arial,Helvetica,sans-serif;color:#fff;background:rgba(29,43,87,.92);border-radius:4px;padding:1px 6px;pointer-events:none;letter-spacing:.5px;box-shadow:0 1px 3px rgba(0,0,0,.25)}
#ta-hint.miss{background:rgba(120,40,40,.92)}
@media print{#ta-hint{display:none!important}}
/* phones / narrow windows (screen only; desktop and print untouched): just the white guide card, full width, no flag sides.
   Root cause of the old sideways scroll: nowrap pick/notes cells (e.g. "Ty Masterson / Jeffrey Klemp (R)") spilled out of their
   fixed-width table columns, which widened the page and the fixed flag background with it. Let those cells wrap here. */
@media screen and (max-width:700px){
html{background:#fff;overflow-x:hidden}
.flagbg{display:none}
.card{max-width:none;margin:0;padding:10px 10px 14px;border-radius:0;box-shadow:none}
#picker{max-width:none;padding:8px}#picker select,#picker input{max-width:100%;box-sizing:border-box}
#guide td.r,#guide td.a,#guide td.m{white-space:normal;overflow-wrap:normal}
#guide .sl .ans{white-space:nowrap;flex-shrink:0}
}
/* phones: tables read as stacked lines instead of cramped columns. Words never split; .nw groups (from guide.js) keep
   "Kelly (D)", "Gov. Laura", "District 48", "GOP-endorsed" and each running mate together. Desktop and print untouched. */
@media screen and (max-width:700px){
.nw{white-space:nowrap}
#guide td{text-wrap:pretty;hyphens:manual;overflow-wrap:normal;word-break:normal;min-width:0}
#guide table,#guide tbody{display:block;width:100%}
#guide colgroup{display:none}
/* races: name on the left (as wide as it needs), pick on the right, its note (e.g. "Republican-endorsed") right under the pick */
#guide tr{display:grid;grid-template-columns:minmax(0,1fr) fit-content(58%);column-gap:10px;align-items:start;padding:2px 0}
#guide tr>td{padding:0 4px}
#guide tr>td:first-child{grid-column:1;grid-row:1 / span 2}
#guide td.r{grid-column:2;grid-row:1;text-align:right;padding-left:0}
#guide td.m{grid-column:2;grid-row:2;text-align:right;padding-left:0;line-height:1.2}
#guide td.m:empty{display:none}
/* judges: line 1 = judge ........ vote; line 2 = appointed by | notes. Split judges keep their two "?" lines in the blue box. */
#guide table.jt tr{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;column-gap:0}
#guide .jt tr>td:nth-child(1){grid-column:1 / span 2;grid-row:1}
#guide .jt tr>td:nth-child(2){grid-column:1;grid-row:2;padding-right:8px}
#guide .jt tr>td:nth-child(3){grid-column:2;grid-row:2;text-align:left;padding-left:6px}
#guide .jt tr>td:nth-child(4){grid-column:3;grid-row:1;padding-left:10px}
#guide .jt tr.sp1>td:nth-child(1){grid-column:1 / span 3}
#guide .jt tr.sp1>td:nth-child(4){grid-row:2}
#guide .jt tr.sp2>td:nth-child(1){grid-column:2;grid-row:1;text-align:left;padding-left:6px}
#guide .jt tr.sp2>td:nth-child(2){grid-column:3;grid-row:1;padding-left:10px}
#guide .jt tr.sp2{padding-top:0}#guide .jt tr.sp1{padding-bottom:0}
#guide .jt tr.jh>td:nth-child(3){text-align:left}
#guide tr.jh>td{border-bottom:0}#guide tr.jh{border-bottom:1px solid #ccc;padding-bottom:1px}
#guide .jt tr.sp>td.m,#guide .jt tr.sp>td.r{align-self:stretch;box-shadow:none;padding-top:2px;padding-bottom:2px}
#guide .jt tr.sp1>td.r,#guide .jt tr.sp2>td.r{padding-right:6px}
}

/* phone search box for dropdowns (combo.js): only on touch phones; desktop and print untouched */
html.combo-on select{pointer-events:none}
html.combo-open,html.combo-open body{overflow:hidden}
#combo{position:fixed;inset:0;z-index:100;font:12pt Arial,Helvetica,sans-serif}
#combo[hidden]{display:none}
#combo .cb-back{position:absolute;inset:0;background:rgba(20,28,52,.45)}
#combo .cb-panel{position:absolute;left:6px;right:6px;top:6px;display:flex;flex-direction:column;background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.35);overflow:hidden;color:#111}
#combo .cb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px 4px;font-weight:bold;font-size:11pt;color:#1d2b57}
#combo .cb-cancel{font:inherit;font-weight:normal;font-size:11pt;color:#1a4fa0;background:none;border:0;padding:6px 4px;cursor:pointer}
#combo input{margin:2px 10px 6px;padding:9px 10px;font:inherit;font-size:16px;border:1px solid #9aa6c2;border-radius:6px;box-sizing:border-box;width:calc(100% - 20px);-webkit-appearance:none;appearance:none}
#combo input:focus{outline:2px solid #1d2b57;outline-offset:0}
#combo ul{list-style:none;margin:0;padding:0 0 4px;overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch;border-top:1px solid #e3e6ee}
#combo li{padding:10px 12px;border-bottom:1px solid #eef0f5;cursor:pointer;line-height:1.25;overflow-wrap:break-word}
#combo li[aria-selected=true]{font-weight:bold}#combo li[aria-selected=true]::after{content:" \2713";color:#2f6d2f}
#combo li.act{background:#e7eefb}
#combo li.cb-blank{color:#444;font-style:italic}
#combo li.cb-none{color:#888;cursor:default}
#combo .cb-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media print{#combo{display:none!important}}
/* printout: shading and row rules strong enough for home printers, so each race on the left lines up with its vote on the
   right. Backgrounds only (no layout change), and print-color-adjust:exact so browsers don't drop them. A split judge's two
   lines stay one group: no rule between them, one rule under the pair. */
@media print{
html,body,#guide{-webkit-print-color-adjust:exact;print-color-adjust:exact}
#guide tr.alt{background:#e0e0e0}
#guide td{background-image:linear-gradient(#8a8a8a,#8a8a8a);background-repeat:no-repeat;background-position:0 100%;background-size:100% .7pt}
#guide tr.sp1 td.m,#guide tr.sp1 td.r,#guide tr.jh td{background-image:none}
#guide tr.sp td.m,#guide tr.sp td.r{background-color:#dbe5f4}
#guide tr.sp td.m{border-left-color:#4d72ab}
}
