/* The hidden attribute must win over any display rule below (the prototype's host page supplied this). */
[hidden]{display:none!important}
/* Layout: a ballot. Landing is one statement over three columns of ranking boxes receding into the distance; weighing in is one bucket per page of floating boxes; results are a tally sheet of nested bars. */
:root{
  /* palette after democrats.org: white ground, deep navy ink, one bright blue, red as the single accent */
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#000C2E; --muted:#4B556F; --line:#D5DAE6;
  --accent:#0044C9; --accent-ink:#FFFFFF; --hl:#F53C27; --hl-ink:#FFFFFF; --soft:#DCE7FB; --soft-ink:#000C2E; --hero:#0044C9; --hero-ink:#FFFFFF;
  --mark:#F5C12E; --mark-ink:#131C33; --b1:#0044C9; --b5:#7DA5F0; --b10:#CFDDF8; --track:#EEF1F7; --err:#C92A17; --ok:#1B7A46; --shadow:rgba(0,12,46,.14);
  --display:"Barlow Condensed","Arial Narrow","Arial Black",Arial,sans-serif;
  --body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --read:"Source Serif 4",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#000C2E; --surface:#0A1A45; --ink:#FFFFFF; --muted:#A8B3D1; --line:#223465;
  --accent:#7DA8FF; --accent-ink:#000C2E; --hl:#F53C27; --hl-ink:#FFFFFF; --soft:#16307A; --soft-ink:#FFFFFF; --hero:#0A2F8C; --hero-ink:#FFFFFF;
  --mark:#F5C12E; --mark-ink:#131C33; --b1:#FFFFFF; --b5:#7DA8FF; --b10:#2A4FB0; --track:#13235A; --err:#FF8D7E; --ok:#6FD39B; --shadow:rgba(0,0,0,.5); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#000C2E; --surface:#0A1A45; --ink:#FFFFFF; --muted:#A8B3D1; --line:#223465;
  --accent:#7DA8FF; --accent-ink:#000C2E; --hl:#F53C27; --hl-ink:#FFFFFF; --soft:#16307A; --soft-ink:#FFFFFF; --hero:#0A2F8C; --hero-ink:#FFFFFF;
  --mark:#F5C12E; --mark-ink:#131C33; --b1:#FFFFFF; --b5:#7DA8FF; --b10:#2A4FB0; --track:#13235A; --err:#FF8D7E; --ok:#6FD39B; --shadow:rgba(0,0,0,.5); color-scheme:dark }
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.5 var(--body);margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-block:16px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:24px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.05}
h2{font-size:1.95rem;font-weight:800}
h3{font-size:1.35rem;font-weight:700}
p{margin:0}
.muted{color:var(--muted)} .small{font-size:.875rem}
button,input,select,textarea{font:inherit;color:var(--ink)}
.dd-wrap{position:relative;display:block;min-width:0}
.dd-btn{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:10px 12px;cursor:pointer;text-align:left}
.dd-btn::after{content:"▾";color:var(--muted)}
.dd-list{position:absolute;z-index:40;left:0;top:calc(100% + 4px);min-width:100%;max-width:min(92vw,420px);max-height:280px;overflow:auto;margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px var(--shadow)}
.dd-list button{display:block;width:100%;text-align:left;border:0;background:none;color:var(--ink);padding:8px 10px;border-radius:5px;cursor:pointer}
.dd-list button:hover,.dd-list button:focus-visible{background:var(--accent);color:var(--accent-ink);outline:none}
.dd-list button[aria-selected="true"]{font-weight:700}
.dd-list .grp{padding:8px 10px 2px;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#view-weigh{overflow-x:clip}
#done{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center}
#done svg{width:min(46vw,240px);height:auto}
#done .ring{fill:none;stroke:var(--ok);stroke-width:8;stroke-dasharray:327}
#done .tick{fill:none;stroke:var(--ok);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:72}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.stack{display:flex;flex-direction:column;gap:20px}
.longdesc{max-width:66ch;font-family:var(--read);font-size:1.08rem;line-height:1.55}
.hero p:not(.lbl){font-family:var(--read);font-size:1.15rem}

.topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.topleft{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px}
#mainnav{display:flex;flex-wrap:wrap;gap:4px 16px}
#mainnav a{font-size:.85rem;font-weight:600;color:var(--muted);text-decoration:none}
#mainnav a:hover,#mainnav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.brand{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink);text-decoration:none}
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.tools a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:700;font-size:.9rem}
.tools a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.tools .dd-wrap,.acts .dd-wrap{width:auto}
.tools .dd-btn,.acts .dd-btn{padding:6px 10px;font-size:.875rem}
.themebtn{border:1px solid var(--line);background:var(--surface);border-radius:999px;width:34px;height:34px;cursor:pointer;padding:0;line-height:1;font-size:1rem}
.proto{background:var(--soft);color:var(--soft-ink);font-size:.8rem;font-weight:600;padding:6px 12px;border-radius:4px}

.btn{display:inline-block;border:1px solid transparent;border-radius:6px;padding:12px 20px;font-weight:700;background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;text-align:center}
.btn:disabled{background:var(--track);color:var(--muted);border-color:var(--line);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line)}
.btn.sm{padding:7px 12px;font-size:.85rem}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.lbl{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:10px 12px;min-width:0;width:100%}
::placeholder{color:var(--muted);opacity:1}
.msg{font-size:.875rem;min-height:1.3em}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok);font-weight:600}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.row .field{flex:1 1 180px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.narrow{max-width:620px}

/* Landing */
.hero{display:flex;flex-direction:column;gap:24px;background:var(--hero);color:var(--hero-ink);padding:clamp(28px,6vw,64px) 0;box-shadow:0 0 0 100vmax var(--hero);clip-path:inset(0 -100vmax)}
.hero .lbl,.hero .muted{color:var(--hero-ink);opacity:.85}
.hero .btn{background:var(--hero-ink);color:var(--hero)}
.hero .btn.ghost{background:transparent;color:var(--hero-ink);border-color:var(--hero-ink)}
.hero h1{font-size:clamp(3rem,10.5vw,7.25rem);font-weight:800;letter-spacing:-.005em;line-height:1.04;max-width:13ch}
.hero h1.long{font-size:clamp(2.6rem,8vw,5.25rem);max-width:17ch}
.hero h1 em{font-style:normal;display:inline-block;line-height:1;background:var(--hl);color:var(--hl-ink);padding:.04em .12em .12em;margin-top:.08em;border-radius:6px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn{font-family:var(--display);font-size:1.45rem;font-weight:800;letter-spacing:.04em;padding:12px 26px}
.buckets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;padding-top:4px}
.bucket h2{font-size:clamp(2.6rem,6vw,4.2rem);font-weight:800;letter-spacing:0}
.bucket p{color:var(--muted);margin-top:6px}
.cbox>*{opacity:calc(1 - var(--i)*.13)}
.cloud{display:flex;flex-direction:column;align-items:center;margin-top:18px;padding-bottom:4px}
.cbox{width:100%;display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-weight:600;line-height:1.25;min-height:3.4rem;box-shadow:0 2px 8px var(--shadow);
  transform-origin:top center;transform:translateX(calc(var(--x)*1%)) scale(calc(1 - var(--i)*.085));position:relative;z-index:calc(10 - var(--i));background:color-mix(in srgb,var(--surface),var(--bg) calc(var(--i)*13%));border-color:color-mix(in srgb,var(--line),var(--bg) calc(var(--i)*13%));filter:blur(calc(var(--i)*.3px));margin-top:calc(var(--i)*-5px)}

#view-plan{align-items:center;text-align:center}
#view-plan .hero{align-self:stretch;align-items:center}
#view-plan .card{width:100%;border:0;background:none;padding:0}
#view-plan .row{justify-content:center}
#view-plan textarea{text-align:left}
/* Weigh in */
.stepper{display:flex;flex-direction:column;gap:8px}
.segs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.segs i{height:6px;border-radius:3px;background:var(--track)}
.segs i.on{background:var(--accent)}
.bigname{font-size:clamp(3rem,9vw,5rem);font-weight:800;letter-spacing:0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)}
.tabs button{border:0;background:none;padding:8px 12px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.tiles{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:3px;max-width:520px}
.tiles button{aspect-ratio:1;border:1px solid var(--line);background:var(--bg);border-radius:3px;font-size:clamp(.55rem,2.2vw,.72rem);font-weight:700;padding:0;cursor:pointer}
.tiles button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
ol.list,ul.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#ranked{gap:10px;max-width:760px}
.pcard{display:grid;grid-template-columns:auto 2.2rem minmax(0,1fr) auto;align-items:start;gap:6px 10px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 2px 8px var(--shadow);cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pcard .grip{grid-row:1 / span 2;color:var(--muted);font-size:1.1rem;line-height:1.6}
.pcard .num{grid-row:1 / span 2}
.pcard .ctl{grid-column:4;grid-row:1 / span 2}
.pcard .opts{grid-column:3;grid-row:2}
.pcard.ph{border:2px dashed var(--muted);background:transparent;box-shadow:none}
.pcard.ph>*{visibility:hidden}
.pcard.ghost{position:fixed;z-index:50;pointer-events:none;opacity:.72;margin:0;cursor:grabbing;border:2px solid var(--accent);box-shadow:0 14px 30px var(--shadow)}
.dropline{height:4px;border-radius:2px;background:var(--accent);margin-block:-7px;list-style:none}
.dropline.off{visibility:hidden}
.num{font-family:var(--display);font-weight:800;font-size:1.5rem;font-variant-numeric:tabular-nums;text-align:right;line-height:1.2}
.badge{width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:6px;font-size:1.55rem;text-align:center;line-height:1}
.badge.r1{background:var(--ok);color:var(--surface)} .badge.r2{background:var(--accent);color:var(--accent-ink)} .badge.r3{background:var(--mark);color:var(--mark-ink)} .badge.r4{background:var(--track);color:var(--ink)}
#code-row .field,#lcode-row .field,#li-code-row .field{flex:0 0 auto}
#code,#lcode,#li-code{width:9.5ch;box-sizing:content-box;text-align:center;font-size:1.25rem;font-weight:700;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.rtitle{font-weight:600;line-height:1.3}
.info{border:1px solid var(--line);background:var(--surface);border-radius:999px;width:24px;height:24px;font-size:.78rem;font-weight:700;font-style:italic;cursor:pointer;padding:0;margin-left:6px;vertical-align:1px;color:var(--accent)}
.info[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.rdesc{color:var(--muted);font-size:.9rem;margin:4px 0 0 1.25rem;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.rdesc textarea{font-size:.9rem;cursor:text;user-select:text;-webkit-user-select:text}
.rdesc .linkbtn{color:var(--accent)}
.dbtns{display:flex;flex-wrap:wrap;gap:6px;max-width:520px}
.dbtns button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:8px 10px;min-width:4.4rem;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer}
.dbtns button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.exp{display:inline-block;width:1.25rem;border:0;background:none;padding:0;cursor:pointer;font-size:.8rem;line-height:1;color:var(--ink);text-align:left;vertical-align:1px}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap}
.opts button:hover{color:var(--ink);border-color:var(--muted)}
.linkbtn{border:0;background:none;padding:2px 0;font-size:.82rem;font-weight:600;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--ink)}
.ctl{display:flex;align-items:flex-start;gap:4px}
.ctl .arr{display:flex;flex-direction:column;gap:2px}
.ctl button{border:1px solid var(--line);background:var(--bg);border-radius:4px;width:34px;height:30px;cursor:pointer;line-height:1}
.ctl button:disabled{color:var(--muted);opacity:.55;cursor:default}
#aside{max-width:760px}
#aside li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
#aside .rtitle{flex:1 1 200px;color:var(--muted)}
.tag{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.tag.op{border-color:var(--err);color:var(--err)}
.navrow{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:2px solid var(--ink);padding-top:20px}
.notice{border:2px solid var(--accent);border-radius:6px;padding:12px 14px;font-weight:600}

.modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:760px}
.modecard,.bcard{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--surface);border:2px solid var(--line);border-radius:10px;padding:20px;cursor:pointer;box-shadow:0 2px 8px var(--shadow)}
.modecard:hover,.bcard:hover{border-color:var(--accent)}
.modecard b,.btitle{font-family:var(--display);font-size:1.75rem;font-weight:800;line-height:1.05}
.modecard .n{font-size:.8rem;font-weight:700;color:var(--accent)}
.brcards{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch;max-width:880px}
.bcard{min-height:9rem}
.bcard.won{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bdesc{font-size:.9rem;color:var(--muted)} .bcard.won .bdesc{color:inherit}
.vs{align-self:center;font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--muted);text-transform:uppercase}
.brbar{height:6px;border-radius:3px;background:var(--track);max-width:880px;overflow:hidden} .brbar i{display:block;height:100%;background:var(--accent)}
@media (max-width:760px){.modes,.brcards{grid-template-columns:minmax(0,1fr)} .vs{justify-self:center} .bcard{min-height:0}}
@media (prefers-reduced-motion:no-preference){.brbar i{transition:width .25s ease}}
body.brfocus .topbar,body.brfocus .proto,body.brfocus .stepper,body.brfocus footer,body.brfocus .navrow,body.brfocus #bk-head,body.brfocus #bk-long{display:none}
body.brfocus .wrap{padding-block:20px 24px}
@media (max-width:760px){.bcard{padding:14px;min-height:9.5rem} .btitle{font-size:1.45rem} .brcards{gap:6px}}
.bkh{font-size:2.1rem;font-weight:800}
/* playbook lists: one grid, so each rank sits on the same line across the three buckets */
.bookgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;row-gap:10px}
.bookgrid>*{grid-column:var(--c);grid-row:var(--r)}
.bookgrid .bkh{margin-bottom:10px}
.bkrow{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:10px;align-items:start;font-weight:600;line-height:1.25}
.bkrow>.tl{padding-top:.45rem}
.bkrow .rdesc{font-weight:400;line-height:1.45}
@media (max-width:760px){.bookgrid{display:flex;flex-direction:column}.bookgrid>*{order:calc(var(--c)*100 + var(--r))}.bookgrid .bkh{margin-top:14px}}
.tl{display:grid;grid-template-columns:1.25rem minmax(0,1fr);min-width:0;align-items:start}
.tl>.exp{margin-top:.25rem}
.tl>.rdesc{grid-column:2;margin-left:0}
.addcard{max-width:760px;margin-top:-10px;background:var(--surface);border:1px dashed var(--muted);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.addcard h3{font-size:1.2rem}
.addcard .msg:empty{display:none}
.addcard .row{align-items:stretch}
.booktop{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.s29list{margin:6px 0 0;padding-left:1.2em}
@media (max-width:760px){.booktop{grid-template-columns:minmax(0,1fr)}}
.booklist li.muted{display:block;font-weight:400}
.countcard{border:2px solid var(--accent)}
.countcard .btn{font-family:var(--display);font-size:1.4rem;font-weight:800;letter-spacing:.03em}
.hero .btn.pending,.btn.pending{background:var(--track)!important;color:var(--muted)!important;border-color:var(--line)!important;cursor:not-allowed}
.prof{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:8px 28px;align-items:center}
.prof svg{width:100%;height:auto;display:block}
.pring{fill:none;stroke:var(--line)}
.pval{fill:var(--accent);fill-opacity:.2;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.pdot{fill:var(--accent)}
.plab{cursor:pointer}
.plab text{fill:var(--ink);font:700 13px var(--body)}
.plab:hover text,.plab.on text{fill:var(--accent);text-decoration:underline}
.plab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.profinfo{display:flex;flex-direction:column;gap:10px;min-width:0;align-items:flex-start}
.ptype{font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.02}
.pdesc{min-height:3em;max-width:52ch}
.pmatch b{font-family:var(--display);font-size:2rem;line-height:1}
.bigname{margin-bottom:.16em}
.prof{position:relative}
.ptip{position:absolute;z-index:5;left:0;top:0;width:min(270px,86%);background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:8px;padding:10px 12px;box-shadow:0 8px 20px var(--shadow);font-size:.9rem;line-height:1.4;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s}
.ptip.show{opacity:1;visibility:visible}
.ptip.pin{pointer-events:auto}
.ptip b{display:block;margin-bottom:2px;padding-right:24px}
.ptip-x{position:absolute;top:2px;right:2px;width:30px;height:30px;border:0;background:none;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--ink)}
.pstand{font-size:1.05rem}
.rboxes{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.rbox{display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 14px}
.rbox b{font-family:var(--display);font-size:1.7rem;line-height:1.05}
.topcard small{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (min-width:761px){.modes.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1000px}}
@media (max-width:760px){.prof{grid-template-columns:minmax(0,1fr)}}
/* Results */
.filters{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;padding:9px 14px;font-weight:600;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"],.seg a[aria-current="page"]{background:var(--ink);color:var(--bg)}
.seg a{padding:9px 14px;font-weight:600;color:var(--muted);text-decoration:none}
.filters .field{flex:0 1 auto}
.filters .field.sel{flex:0 1 200px}
.summary{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--muted)}
.sw{display:inline-block;width:12px;height:12px;border-radius:2px;margin-right:6px;vertical-align:-1px}
#results{border-top:2px solid var(--ink)}
#results li,.thead{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:6px 14px;align-items:center}
#results li{padding:12px 0;border-bottom:1px solid var(--line)}
.thead{align-items:end;padding-bottom:6px}
.res-title{font-weight:600;line-height:1.25;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.chip{background:var(--soft);color:var(--soft-ink);font-size:.72rem;font-weight:700;padding:1px 7px;border-radius:999px;white-space:nowrap}
.bar{position:relative;height:14px;background:var(--track);border-radius:2px;margin-top:6px;background-image:linear-gradient(90deg,transparent calc(25% - 1px),var(--line) calc(25% - 1px),var(--line) 25%,transparent 25%,transparent calc(50% - 1px),var(--line) calc(50% - 1px),var(--line) 50%,transparent 50%,transparent calc(75% - 1px),var(--line) calc(75% - 1px),var(--line) 75%,transparent 75%)}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:2px}
.bar .x10{background:var(--b10)} .bar .x5{background:var(--b5)} .bar .x1{background:var(--b1)}
.figs{display:grid;grid-template-columns:repeat(5,3.9rem);text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.figs.head{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.figs .opp{color:var(--err)}
.axis{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* Admin */
.admin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.alist li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.alist .t{flex:1 1 220px;min-width:0;font-weight:600;overflow-wrap:anywhere}
.alist .off{color:var(--muted);text-decoration:line-through}
.acts{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.inbox li{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid var(--line)}
.inbox .t{font-weight:600;overflow-wrap:anywhere}
.check{display:flex;gap:10px;align-items:flex-start}
.check input{margin-top:4px}
.field label.check{text-transform:none;letter-spacing:0;font-size:.95rem;color:var(--ink)}
.tog{appearance:none;-webkit-appearance:none;width:40px;height:22px;border-radius:999px;background:var(--muted);position:relative;cursor:pointer;flex:none;transition:background .15s}
.tog::before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:transform .15s}
.tog:checked{background:var(--accent)} .tog:checked::before{transform:translateX(18px)}
.check input.tog{margin:1px 0 0}
#csv-out{font:12px/1.4 ui-monospace,Menlo,Consolas,monospace}

footer{border-top:2px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:16px}
.flinks{display:flex;flex-wrap:wrap;gap:8px 28px}
.flinks a{color:var(--ink);font-weight:700;text-underline-offset:4px}
.notes{display:flex;flex-direction:column;gap:6px;max-width:70ch;color:var(--muted)}
.notes ul{margin:0;padding-left:1.2em}

@media (max-width:760px){
  .buckets,.admin{grid-template-columns:minmax(0,1fr)}
  .cbox:nth-child(n+5){display:none}
  .pcard{grid-template-columns:2.2rem minmax(0,1fr) auto;padding:12px}
  .pcard .grip{display:none}
  .pcard .num{grid-row:1}
  .pcard .ctl{grid-column:3;grid-row:1}
  .pcard .opts{grid-column:1 / -1;grid-row:2}
  .opts button{padding:3px 8px;font-size:.74rem}
  #results li,.thead{grid-template-columns:1.8rem minmax(0,1fr)}
  #results .figs{grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));text-align:left;font-size:.9rem;gap:2px 8px}
  #results .figs span::after{content:attr(data-l);font-weight:500;color:var(--muted);margin-left:4px;font-size:.72rem}
  .thead .figs{display:none}
}
@media (prefers-reduced-motion:no-preference){ .bar i{transition:width .35s ease} }

/* the human check sits above the message line and takes no room until it loads */
.ts:empty{display:none}

/* the share box is kept compact: tighter spacing, and the status line takes no room while empty */
.sharecard{padding:16px 18px;gap:10px}
.sharecard .msg:empty{display:none}
.sharecard .small{margin:0}

/* if the human check fails to load, show Cloudflare's error number so the cause can be found */
.ts[data-err]::after{content:"Human check error " attr(data-err);display:block;font-size:.8rem;color:var(--muted);margin-top:4px}

/* code entry: spinner while the code is checked, then a tick that draws itself */
.codechk{align-self:flex-end;width:30px;height:30px;margin:0 0 9px 2px;flex:0 0 auto}
.codechk svg{display:block;width:100%;height:100%}
.codechk .ring{fill:none;stroke:var(--line);stroke-width:3;transform-origin:50% 50%}
.codechk .tick{fill:none;stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:18.5;stroke-dashoffset:18.5}
.codechk.wait .ring{stroke:var(--accent);stroke-dasharray:58 24;animation:chkspin .8s linear infinite}
.codechk.ok .ring{stroke:var(--ok);transition:stroke .2s}
.codechk.ok .tick{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease-out .05s}
@keyframes chkspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.codechk.wait .ring{animation:none}.codechk.ok .tick{transition:none}}

/* the privacy policy pages */
.policy{max-width:70ch;font-family:var(--read);font-size:1.05rem;line-height:1.6}
.policy h1{font-family:var(--display);font-size:clamp(2.4rem,6vw,3.6rem);line-height:1;margin:.2em 0 .1em}
.policy h2{font-family:var(--body);font-size:1.25rem;margin:1.6em 0 .4em}
.policy h3{font-family:var(--body);font-size:1rem;margin:1.1em 0 .3em}
.policy ul{padding-left:1.2em;margin:.4em 0}
.policy li{margin:.35em 0}
.policy a{color:var(--accent)}