/* CodeCheck Colorado prototype · shared components for the full clickable app (loaded after shared.css).
   Same tokens as the approved plumbing.html: flag blue #002868, navy #0B1B33, gold #FFD700, red #BF0A30, amber Unverified. */
:root{--good:#1E7A46;--goodt:#E6F4EC;--goodb:#B7DEC6}
/* ---- 44px hit areas without changing the approved visuals ---- */
.seg>a,.seg>div,.am,.chg,.link,.mic,.gps,.pill,.lb,.ch,.cmpbtn,.chip,.fchip,.tchip{position:relative}
.seg>a:after,.seg>div:after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.chg:after{content:"";position:absolute;left:-10px;right:-8px;top:-10px;bottom:-12px}
.link:after{content:"";position:absolute;left:-4px;right:-4px;top:-14px;bottom:-14px}
.am:after{content:"";position:absolute;inset:-4px -3px}
.mic:after{content:"";position:absolute;inset:-4px}
.gps:after,.lr2 .pill:after{content:"";position:absolute;left:-2px;right:-2px;top:-9px;bottom:-9px}
.seg a{height:34px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;font-weight:650;color:#E6EBF4;border-radius:9px;white-space:nowrap;min-width:0}
.seg a.on{background:var(--safety);color:var(--navy);font-weight:750;box-shadow:0 3px 8px -2px rgba(0,0,0,.4)}
.pill.ver{background:var(--goodt);color:var(--good);border:1px solid var(--goodb)}
.gps.sel{background:var(--bluet);color:var(--ink)} .gps.sel i{background:var(--safety);box-shadow:0 0 0 3px rgba(255,215,0,.3)}
button.ibtn{border-radius:12px}
.ibtn.saved svg{fill:#FFD700;stroke:#FFD700}
input,select{font:inherit;color:inherit}
.ld{padding:40px 0;text-align:center;color:var(--muted);font-weight:600}
/* ---- amber Unverified banner (same as sewer-depth.html .unvb) ---- */
.unvx{display:flex;align-items:center;gap:10px;background:var(--ambert);border:1.5px solid #E9B949;border-radius:12px;padding:9px 11px;margin:12px 0 0}
.unvx .ic{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#F5A623;display:flex;align-items:center;justify-content:center}
.unvx p{font-size:12.5px;font-weight:650;color:#7A4B00;line-height:1.35;min-width:0}.unvx p b{font-weight:850;letter-spacing:.06em}
.utag{display:inline-flex;align-items:center;gap:4px;background:var(--ambert);color:#7A4B00;border:1px solid #E9B949;font-size:9.5px;font-weight:850;letter-spacing:.08em;padding:2px 6px;border-radius:20px;text-transform:uppercase;white-space:nowrap}
.vtag{display:inline-flex;align-items:center;gap:4px;background:var(--goodt);color:var(--good);border:1px solid var(--goodb);font-size:9.5px;font-weight:850;letter-spacing:.08em;padding:2px 6px;border-radius:20px;text-transform:uppercase;white-space:nowrap}
/* ---- trade screen extras ---- */
.am.none{grid-column:1/-1;background:#F7F8FB}
.am .fi.nv{background:var(--ambert)}
.othr{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.othr a{display:inline-flex;align-items:center;gap:6px;min-height:44px;background:#fff;border:1px solid rgba(191,10,48,.45);border-radius:12px;padding:6px 10px;font-size:12px;font-weight:700}
.soon{margin-top:2px;padding:16px;display:flex;gap:12px;align-items:flex-start;border-left:4px solid var(--safety)}
.soon .fi{width:40px;height:40px;border-radius:12px;background:var(--safety);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.soon h4{font-size:15px;font-weight:800;letter-spacing:-.2px}
.soon p{font-size:12.5px;font-weight:550;color:var(--muted);line-height:1.4;margin-top:4px}
.nlist{margin-top:2px}
.nrow{display:flex;gap:9px;align-items:center;min-height:44px;padding:6px 0;font-size:12.5px;font-weight:600;line-height:1.3}
.nrow+.nrow{border-top:1px solid var(--line)}
.nrow .fi{width:26px;height:26px;border-radius:8px;background:var(--safety);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.nrow span{flex:1;min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.infoc{margin-top:10px;padding:12px 14px;display:flex;gap:10px;align-items:center}
.infoc .fi{width:34px;height:34px;border-radius:10px;background:var(--bluet);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.infoc p{flex:1;min-width:0;font-size:12.5px;font-weight:650;line-height:1.35}
.infoc p span{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* ---- band for new screens ---- */
.band.nb{padding:10px 16px 18px}
.band.nb>div{position:relative}
.sbox{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;height:50px;display:flex;align-items:center;gap:8px;padding:0 6px 0 12px;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}
.sbox input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:16px;font-weight:550;height:48px}
.sbox input::placeholder{color:var(--muted);font-weight:500}
.sbox .clr{width:44px;height:44px;display:none;align-items:center;justify-content:center}
.sbox.has .clr{display:flex}
.fchips{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.fchips::-webkit-scrollbar{display:none}
.fchip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:22px;background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#E6EBF4;font-size:13px;font-weight:700;white-space:nowrap}
.fchip.on{background:var(--safety);color:var(--navy);box-shadow:0 3px 8px -2px rgba(0,0,0,.4)}
.fchip small{font-size:11px;font-weight:800;opacity:.75}
.bsub{font-size:12px;font-weight:600;color:#C9D3E6;margin-top:8px}
.bsub b{color:#fff}
/* ---- cities list ---- */
.clist{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.ccard{position:relative;display:block;padding:12px 12px 12px 16px;border-left:4px solid var(--flagblue)}
.ccard.part{border-left-color:#E9B949}
.ccard .r1{display:flex;align-items:flex-start;gap:10px}
.ccard .r1 .nm{flex:1;min-width:0}
.ccard h3{font-size:17px;font-weight:800;letter-spacing:-.3px;line-height:1.15}
.ccard .cty{font-size:11.5px;font-weight:600;color:var(--muted);margin-top:2px}
.ccard .r2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.ccard .tag{display:inline-block;background:var(--flagblue);color:#fff;font-weight:750;padding:2px 6px;border-radius:6px;font-size:11px}
.ccard .r3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:11.5px;font-weight:600;color:var(--muted)}
.ccard .r3 .nv{color:var(--amber);font-weight:700}
.ccard .r3 b{color:var(--ink)}
.ccard .cnt{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ccard .pinned{font-size:9.5px;font-weight:850;letter-spacing:.1em;color:var(--red);text-transform:uppercase}
.empty{padding:28px 18px;text-align:center}
.empty h4{font-size:16px;font-weight:800}
.empty p{font-size:13px;color:var(--muted);font-weight:550;margin-top:6px;line-height:1.4}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 16px;border-radius:12px;background:var(--flagblue);color:#fff;font-size:14px;font-weight:750}
.btn.y{background:var(--safety);color:var(--navy)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
/* ---- search ---- */
.topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tchip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 8px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:700;box-shadow:0 1px 2px rgba(11,27,51,.05)}
.tchip .fi{width:28px;height:28px;border-radius:8px;background:var(--safety);display:flex;align-items:center;justify-content:center}
.tchip.on{background:var(--flagblue);border-color:var(--flagblue);color:#fff}
.tchip small{font-size:11px;font-weight:700;color:var(--muted)} .tchip.on small{color:#C9D3E6}
.frow{display:flex;gap:8px;margin-top:10px;align-items:center}
.seg2{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:3px}
.seg2 button{min-height:40px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--muted)}
.seg2 button.on{background:var(--flagblue);color:#fff}
.selw{position:relative;flex:0 0 auto}
.selw select{appearance:none;-webkit-appearance:none;height:46px;border-radius:12px;border:1px solid var(--line);background:#fff;padding:0 30px 0 12px;font-size:16px;font-weight:650;max-width:132px}
.selw:after{content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;border-right:2.4px solid var(--ink);border-bottom:2.4px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.rhd{display:flex;justify-content:space-between;align-items:baseline;margin:16px 2px 8px}
.rhd h3{font-size:15px;font-weight:800;letter-spacing:-.3px}
.rhd span{font-size:11.5px;font-weight:600;color:var(--muted)}
.res{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;padding:12px 10px 12px 16px}
.res+.res{margin-top:8px}
.res:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red)}
.res.u:before{background:#E9B949}
.res .t{flex:1;min-width:0}
.res .tr{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.res .cn{font-size:11.5px;font-weight:800;color:var(--ink)}
.res .sect{font-size:11px;font-weight:800;color:var(--flagblue);background:var(--bluet);padding:2px 6px;border-radius:6px}
.res h4{font-size:15px;font-weight:800;letter-spacing:-.2px;line-height:1.2;margin-top:4px;overflow-wrap:anywhere}
.res p{font-size:12px;font-weight:550;color:var(--muted);line-height:1.3;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.res .v{flex:0 0 auto;max-width:92px;text-align:right}
.res .v b{display:block;font-size:20px;font-weight:900;letter-spacing:-.6px;line-height:1;white-space:nowrap}
.res .v b small{font-size:11px;font-weight:800;margin-left:2px}
.res .v span{display:block;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin-top:3px}
.res .v .w{font-size:12px;font-weight:800;letter-spacing:0;color:var(--ink);text-transform:none;white-space:normal}
mark.hl{background:linear-gradient(transparent 55%,#FFE866 55%);color:inherit}
.more{display:flex;margin:14px auto 0}
/* ---- compare ---- */
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pick .selw select{width:100%;max-width:none;font-size:16px;padding:0 24px 0 10px;background:rgba(255,255,255,.96);border-color:transparent}
.pick .selw:after{right:10px}
.chead{position:sticky;top:0;z-index:20;background:var(--canvas);padding:10px 0 8px;margin:0 -16px;padding-left:16px;padding-right:16px;box-shadow:0 6px 10px -10px rgba(11,27,51,.4)}
.cgrid{display:grid;gap:6px}
.cgrid.n2{grid-template-columns:repeat(2,minmax(0,1fr))}.cgrid.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.chc{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;background:var(--flagblue);color:#fff;border-radius:10px;padding:7px 8px;min-height:44px}
.chc b{font-size:13px;font-weight:800;letter-spacing:-.2px;line-height:1.1;overflow-wrap:anywhere}
.crow{margin-top:10px;padding:10px}
.crow h4{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 2px 8px}
.crow h4 .sect{font-size:10.5px;letter-spacing:.02em;text-transform:none;font-weight:800;color:var(--flagblue);background:var(--bluet);padding:2px 6px;border-radius:6px}
.cell{min-width:0;background:#F7F8FB;border:1px solid var(--line);border-radius:10px;padding:8px;min-height:44px;font-size:12.5px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.cell.loc{background:#fff;border-color:rgba(191,10,48,.45);box-shadow:0 0 0 1px rgba(191,10,48,.10)}
.cell.nv{background:var(--ambert);border-color:var(--amberb);color:var(--amber)}
.cell .big{font-size:20px;font-weight:900;letter-spacing:-.6px;line-height:1.05}
.cell .big small{font-size:11px;font-weight:800;margin-left:2px}
.cell .base{color:#7E8698;font-weight:800}
.cell em{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--muted);margin-top:3px;line-height:1.25}
.cell.nv em{color:var(--amber)}
.cell .li{display:block;padding:3px 0}
.cell .li+.li{border-top:1px dashed var(--line)}
.cell .li b{color:var(--red);font-weight:800}
.cell .lb{display:inline-flex;margin-bottom:4px}
.cell .utag,.cell .vtag{margin-top:5px}
.cmpnote{margin-top:12px;font-size:10.5px;line-height:1.45;color:var(--muted);font-weight:500;padding:0 2px}
.chsec{display:flex;justify-content:space-between;align-items:baseline;margin:18px 2px 0}
.chsec h3{font-size:15px;font-weight:800;letter-spacing:-.3px}
.chsec span{font-size:11.5px;font-weight:600;color:var(--muted)}
/* ---- saved ---- */
.sv{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 12px}
.sv+.sv{margin-top:8px}
.sv .b{width:36px;height:36px;border-radius:10px;background:var(--flagblue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sv .b.c{background:var(--red)}
.sv .t{flex:1;min-width:0;padding:4px 0}
.sv .t b{display:block;font-size:14px;font-weight:800;letter-spacing:-.2px;line-height:1.2;overflow-wrap:anywhere}
.sv .t span{display:block;font-size:12px;font-weight:550;color:var(--muted);margin-top:2px;line-height:1.3}
.sv .t .ex{display:inline-block;margin-top:4px;font-size:9.5px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--flagblue);background:var(--bluet);border-radius:6px;padding:2px 6px}
.sv .rm{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:#F7F8FB;border:1px solid var(--line)}
/* ---- home refinements ---- */
.mic.y{background:var(--safety)!important}.mic.y svg{stroke:#0B1B33!important}
.loc{min-height:44px}
.trade{text-decoration:none}
.trade:not(.on){opacity:1}
.trade .soonb{position:absolute;top:-8px;right:4px;font-size:8.5px;font-weight:850;color:#7A4B00;background:var(--ambert);border:1px solid #E9B949;border-radius:10px;padding:1px 6px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.chip{min-height:40px;display:inline-flex;align-items:center}
.chip:after{content:"";position:absolute;inset:-2px 0}
.cmpbtn{min-height:36px}.cmpbtn:after{content:"";position:absolute;inset:-4px 0}
.sec a{position:relative}.sec a:after{content:"";position:absolute;inset:-12px -6px}
.ri{min-height:48px}
.city .pill:after{content:"";position:absolute;inset:-8px -4px}
.fact{position:relative;min-height:44px}
.av{cursor:pointer}
/* ---- amendment detail extras ---- */
.big.word b{font-size:54px;letter-spacing:-2.4px}
.big.long b{font-size:72px;letter-spacing:-4px}
.vt .v.wd{font-size:24px;letter-spacing:-.8px;line-height:1.05;overflow-wrap:anywhere}
.q p+p{margin-top:8px}
.q li{margin-left:18px}
.okb{display:flex;align-items:center;gap:10px;background:var(--goodt);border:1.5px solid var(--goodb);border-radius:12px;padding:9px 11px;margin:0 0 12px}
.okb .ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--good);display:flex;align-items:center;justify-content:center}
.okb b{display:block;font-size:13px;font-weight:900;letter-spacing:.14em;color:var(--good)}
.okb span{display:block;font-size:12px;font-weight:650;color:var(--good);line-height:1.3;margin-top:1px}
.wi{min-height:48px}.fc{min-height:52px}.callb{min-height:44px}
@media (max-width:359px){.pick{grid-template-columns:1fr}.cgrid.n3 .cell{padding:6px}.cell .big{font-size:17px}}
a.card{display:block}
a.card.am,a.card.res{display:flex}
a.card.sv{display:flex}
.sv .t{color:var(--ink)} .sv .tx{min-width:0;display:block} .sv .tx>b{color:var(--ink)} .sv .tx>span{display:block;font-size:12px;font-weight:550;color:var(--muted);margin-top:2px;line-height:1.3}
.sv .tx>span.ex{display:inline-block;color:var(--flagblue)}
body[data-page="saved"] .recent{padding:2px 12px}
body[data-page="saved"] .ri{display:flex;align-items:center;gap:10px;min-height:52px;padding:7px 0}
body[data-page="saved"] .ri+.ri{border-top:1px solid var(--line)}
body[data-page="saved"] .ri .b{width:28px;height:28px;border-radius:8px;background:var(--flagblue);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
body[data-page="saved"] .ri .t{flex:1;min-width:0}
body[data-page="saved"] .ri .t b{display:block;font-size:12.5px;color:var(--ink);font-weight:700}
body[data-page="saved"] .ri .t span{font-size:11.5px;color:var(--muted);font-weight:500}
/* ---- 44px hit areas, round 2 (from _build/app_crawl.py audit) ---- */
.chg:after{top:-14px;bottom:-14px}
.link:after{top:-15px;bottom:-15px}
.gps:after,.lr2 .pill:after{top:-12px;bottom:-12px}
.codes .tag,.codes .eff,.ccard .tag,.ccard .pill,.ccard .r3>span,.legend>span,.sect,.kick,.av,.loc,.city .pill,.unvx{position:relative}
.codes .tag:after,.ccard .tag:after,.codes .eff:after{content:"";position:absolute;left:-2px;right:-2px;top:-13px;bottom:-13px}
.ccard .pill:after,.city .pill:after{content:"";position:absolute;inset:-12px -4px}
.ccard .r3>span[data-explain]:after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.legend>span:after{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.sect:after{content:"";position:absolute;inset:-13px -3px}
.kick:after{content:"";position:absolute;inset:-14px -4px}
.av:after{content:"";position:absolute;inset:-4px}
.mrow{min-height:28px;align-items:center;padding:2px 0}
.mrow[data-explain]{position:relative}.mrow[data-explain]:after{content:"";position:absolute;left:0;right:0;top:-8px;bottom:-8px}
.meta{gap:0}
.seg2 button{min-height:44px}
.cell .li{display:block;padding:12px 0;min-height:44px}
.cell .li:first-child{padding-top:2px}
.legend>span:after,.ccard .r3>span[data-explain]:after,.kick:after,.codes .eff:after{top:-16px;bottom:-16px}
.codes .tag:after,.ccard .tag:after{top:-14px;bottom:-14px}
.loc{min-height:44px}
.sec a:after{inset:-15px -6px}
.cell{overflow-wrap:break-word;word-break:normal;-webkit-hyphens:auto;hyphens:auto}
/* vs. standard code: long plain-English base summary -> stack tiles full width so the summary reads easily on a 390px phone */
.vs.vslong{grid-template-columns:1fr;gap:8px}
.vs.vslong .vt{padding:10px 12px 11px}
.vs.vslong .vt .v{font-size:26px;letter-spacing:-.9px;margin-top:5px}
.vs.vslong .vt .v.set{font-size:21px;letter-spacing:-.5px}
.vs.vslong .vt .v.wd{font-size:21px}
.vs.vslong .vt.base .d{font-size:13.5px;font-weight:600;line-height:1.4;color:#3D4657;margin-top:6px}
/* delta box: city pill top-left, summary flows inline after it and wraps full width underneath; (i) pinned top-right */
.cmp .delta{display:block;position:relative;padding:8px 10px;line-height:1.5}
.cmp .delta::before{content:"";float:right;width:24px;height:18px}
.cmp .delta .dc{display:inline-block;margin:0 6px 0 0;line-height:1.3;vertical-align:1px;white-space:nowrap;max-width:100%}
.cmp .delta>span:nth-child(2){display:inline}
.cmp .delta .tapi{position:absolute;top:8px;right:10px;margin:0}
.cmp .delta.dlong .dc{display:table;margin:0 0 5px 0;white-space:normal}
/* 2024 section-number note + struck/underlined official text (Oct 5 fix) */
.tagrow{flex-wrap:wrap}
.tagrow .lnote{flex-basis:100%;font-size:11.5px;line-height:1.3;color:#5B6478;font-weight:600;margin-top:4px}
.card.am .lnote,.card.res .lnote{font-size:11px;line-height:1.3;color:#5B6478;font-weight:600;margin:1px 0 2px}
.accb del,.mklg del{text-decoration:line-through;text-decoration-color:#BF0A30;text-decoration-thickness:1.5px;color:#8A93A6}
.accb ins,.mklg ins{text-decoration:underline;text-decoration-color:#1E7A46;text-decoration-thickness:1.5px;text-underline-offset:2px;background:#EAF6EF;color:inherit}
.mklg{font-size:11.5px;line-height:1.4;color:#5B6478;margin:2px 0 8px}