@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/LibreFranklin-var-latin.woff2) format("woff2")}
:root{
  --canvas:#F3F1EC;--surface:#FFFFFF;--wash:#F6F4EF;--ink:#17162C;--muted:#5E5D75;--line:#E6E3DB;--track:#E7E4DD;
  --navy:#1B1A3A;--navy2:#26245A;--red:#B22234;--hot:#FF5C70;--focus:#0B6BCB;
  --shadow:0 1px 2px rgba(23,22,44,.06),0 10px 28px rgba(23,22,44,.08);--lift:0 22px 50px rgba(23,22,44,.28);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --canvas:#0C0C17;--surface:#16162A;--wash:#1B1B31;--ink:#F4F3F9;--muted:#A9A8C2;--line:#2C2C46;--track:#2A2A44;--navy:#0F0F22;--navy2:#1B1A3A;--focus:#FFD166;--shadow:0 1px 2px rgba(0,0,0,.5);--lift:0 22px 50px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{--canvas:#0C0C17;--surface:#16162A;--wash:#1B1B31;--ink:#F4F3F9;--muted:#A9A8C2;--line:#2C2C46;--track:#2A2A44;--navy:#0F0F22;--navy2:#1B1A3A;--focus:#FFD166;--shadow:0 1px 2px rgba(0,0,0,.5);--lift:0 22px 50px rgba(0,0,0,.7)}

/* one color per subject: a full spectrum, so no color means a side */
[data-id="education"]{--c:#E8590C;--c2:#F08C00}
[data-id="economy"]{--c:#0B7285;--c2:#1098AD}
[data-id="health"]{--c:#D6336C;--c2:#F06595}
[data-id="housing"]{--c:#9C36B5;--c2:#CC5DE8}
[data-id="transport"]{--c:#1864AB;--c2:#339AF0}
[data-id="environment"]{--c:#2B8A3E;--c2:#51CF66}
[data-id="safety"]{--c:#5F3DC4;--c2:#845EF7}
[data-id="government"]{--c:#A0522D;--c2:#D9822B}
[data-id="immigration"]{--c:#087F5B;--c2:#20C997}
[data-id="defense"]{--c:#495057;--c2:#868E96}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--canvas);color:var(--ink);font-family:"Libre Franklin",system-ui,sans-serif;font-size:15px;line-height:1.35;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1480px;margin:0 auto;padding:0 20px}

/* header + hero (navy) */
.hero{background:radial-gradient(1200px 400px at 85% -10%,#3B2F7A 0,transparent 60%),linear-gradient(180deg,var(--navy2),var(--navy));color:#fff;position:relative}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,#3C3B6E 0 84%,var(--red) 84%)}
.top-in{display:flex;align-items:center;gap:12px;height:68px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo svg{width:40px;height:36px}
.wm{display:flex;flex-direction:column;line-height:1}
.wm b{font-weight:800;font-size:22px;letter-spacing:-.02em}
.wm i{font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.42em;border-top:2px solid var(--hot);padding-top:3px;margin-top:3px}
.tag{font-size:11px;font-weight:700;letter-spacing:.16em;border:1.5px solid rgba(255,255,255,.3);color:rgba(255,255,255,.8);border-radius:6px;padding:4px 7px}
.sp{flex:1}
.ghost{white-space:nowrap;background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 14px;font-weight:600;cursor:pointer}
.ghost:hover{background:rgba(255,255,255,.16)}
.icon-b{width:40px;height:40px;padding:0;display:grid;place-items:center}
.notice{font-size:12.5px;color:rgba(255,255,255,.7);text-align:center;padding:6px 12px;border-top:1px solid rgba(255,255,255,.1)}
.intro{display:flex;align-items:flex-end;gap:24px;padding:22px 20px 24px;flex-wrap:wrap}
.intro h1{font-size:44px;font-weight:900;letter-spacing:-.035em;margin:0;line-height:1;display:flex;align-items:center;gap:14px}
.intro h1 svg{width:54px;height:50px;flex:none}
.intro h1 em{font-style:normal;color:var(--hot);letter-spacing:.06em}
.intro p{margin:8px 0 0;color:rgba(255,255,255,.78);font-size:16px}
.steps{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:6px 13px 6px 6px;font-weight:600;font-size:13px;cursor:pointer}
.step .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-weight:800;font-size:12px}
.step small{opacity:.7;font-weight:500}
.step[aria-current="step"]{border-color:#fff;background:rgba(255,255,255,.14)}
.step.done .n{background:#51CF66;color:#0C2A14}
.step.done .n span{display:none}
.step.done .n::after{content:"";width:9px;height:5px;border:2.5px solid currentColor;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}

/* pool bar */
.pool{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(23,22,44,.06)}
.pool-in{max-width:1480px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 20px;flex-wrap:wrap}
.pm{flex:1;min-width:300px}
.pm-top{display:flex;align-items:baseline;gap:10px;font-size:13px}
.pm-top b{font-size:14px}
.pm-top .muted{color:var(--muted)}
.pm-bar{display:flex;height:14px;border-radius:99px;background:var(--track);overflow:hidden;margin-top:6px;gap:2px}
.pm-bar i{display:block;height:100%;background:var(--c);transition:width .3s cubic-bezier(.2,.8,.2,1),filter .2s;width:0}
.pm-bar i.hot{filter:brightness(1.15) saturate(1.2)}
.pm-note{font-size:12.5px;color:var(--muted);min-height:17px;margin-top:4px}
.pool-acts{display:flex;gap:10px;align-items:center}
.lnk{background:none;border:0;padding:4px 2px;font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--muted)}
.lnk:hover{color:var(--ink)}
.prog{font-size:13px;color:var(--muted);white-space:nowrap}
.prog strong{color:var(--ink);font-size:20px;font-weight:900}
.btn{border:0;border-radius:999px;padding:11px 20px;font-weight:800;cursor:pointer;background:var(--ink);color:var(--surface);display:inline-flex;align-items:center;gap:8px}
.btn[aria-disabled="true"]{opacity:.3;cursor:not-allowed}
.btn svg{width:18px;height:18px}

/* grid */
.grid{list-style:none;margin:18px auto 0;padding:0 20px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;max-width:1480px}
@media (max-width:1240px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.card{position:relative;background:var(--surface);border-radius:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;overflow:hidden;touch-action:pan-y;transition:box-shadow .25s}
.card.dragging{z-index:30;box-shadow:var(--lift);cursor:grabbing}
.card.dragging .band{cursor:grabbing}
.band{touch-action:none;background:linear-gradient(135deg,var(--c) 0%,var(--c) 45%,var(--c2) 140%);color:#fff;padding:12px 14px 14px;position:relative;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none}
.band::after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08)}
.b-top{display:flex;align-items:center;gap:6px;position:relative;z-index:1}
.moves{display:flex;flex-direction:column}
.mv{border:0;background:none;padding:1px;width:24px;height:21px;display:grid;place-items:center;cursor:pointer;color:rgba(255,255,255,.75)}
.mv svg{width:17px;height:17px}
.mv .shape{fill:none;stroke:currentColor;stroke-width:44}
.mv:hover{color:#fff}
.mv:hover .shape{fill:currentColor}
.mv.down svg{transform:rotate(180deg)}
.mv:disabled{opacity:.3;cursor:default}
.rank{display:flex;align-items:baseline;gap:2px;font-variant-numeric:tabular-nums}
.rank .h{font-size:17px;font-weight:700;opacity:.8}
.rank .num{font-size:38px;font-weight:900;letter-spacing:-.05em;line-height:.85}
.rank .of{font-size:12px;opacity:.8;margin-left:3px;font-weight:600}
.ico{margin-left:auto;width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;color:var(--c);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.ico svg{width:23px;height:23px}
.nm{position:relative;z-index:1;margin:12px 0 0;font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1.02;display:inline-flex;flex-direction:column}
.nm .fw{font-size:10.5px;font-weight:700;letter-spacing:.5em;border-top:2px solid rgba(255,255,255,.85);padding-top:4px;margin-top:5px;text-indent:.1em}

/* three clear sections: budget, how is it going now, my opinion */
.body{display:flex;flex-direction:column;flex:1}
.row{padding:11px 14px 9px;border-top:1px solid var(--line);transition:background .25s,opacity .25s}
.row:first-child{border-top:0}
.row[data-m="rate"]{background:var(--wash)}
.rh{display:flex;align-items:center;gap:6px;min-height:24px}
.rh .k{white-space:nowrap;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c)}
.rh .v{margin-left:auto;font-weight:900;font-variant-numeric:tabular-nums;font-size:17px}
.rh .v.empty{color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}
.money{letter-spacing:.04em;font-weight:900;font-size:18px}
.money b{color:var(--line);font-weight:900;transition:color .2s}
.money b.on{color:var(--c)}
.pct{color:var(--muted);font-weight:700;font-size:12px;margin-left:4px;display:inline-block;min-width:30px;text-align:right}
.pct.bump{animation:bump .5s ease}
@keyframes bump{0%{color:var(--c);transform:translateY(0)}40%{color:var(--c);transform:translateY(-2px)}100%{transform:none}}
.more{border:0;background:none;padding:0 2px;cursor:pointer;color:var(--muted);font-weight:900;letter-spacing:.1em}
.menu{position:absolute;z-index:60;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;box-shadow:var(--lift);padding:6px;display:flex;flex-direction:column;min-width:210px}
.menu button{border:0;background:none;text-align:left;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.menu button:hover{background:var(--wash)}
.cnt{margin-left:auto;font-weight:700;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.cnt b{color:var(--ink);font-weight:900;font-size:17px}
.odots{display:flex;gap:4px;margin:8px 0 10px}
.odots i{flex:1;height:6px;border-radius:99px;background:var(--track)}
.odots i.on{background:var(--c)}
.think{width:100%;border:2px solid var(--c);color:var(--c);background:none;border-radius:999px;padding:9px 12px;font-weight:800;font-size:14px;cursor:pointer;transition:background .2s,color .2s}
.think:hover,.card.answered .think{background:var(--c);color:#fff}

body[data-focus] .row{opacity:.35}
body[data-focus="fund"] .row[data-m="fund"],body[data-focus="rate"] .row[data-m="rate"],body[data-focus="view"] .row[data-m="view"]{opacity:1}

/* slider */
.sl{position:relative;height:30px;touch-action:none;cursor:pointer;outline:none;--sc:var(--c,var(--ink))}
.sl .tr{position:absolute;left:11px;right:11px;top:50%;height:8px;margin-top:-4px;border-radius:99px;background:var(--track)}
.row[data-m="rate"] .sl .tr{background:var(--line)}
.sl .fl{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,var(--c2,var(--sc)),var(--sc));width:0}
.sl .th{position:absolute;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;display:grid;place-items:center;color:var(--sc);transition:transform .15s ease;left:11px}
.sl .th svg{width:26px;height:26px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));transition:transform .2s ease}
.sl:focus-visible .th{outline:3px solid var(--focus);border-radius:50%}
.sl.grab .th{transform:scale(1.2)}
.sl[data-state="unset"] .th{opacity:0}
.sl[data-state="unset"] .tr{background:repeating-linear-gradient(90deg,var(--line) 0 7px,transparent 7px 11px)}
.sl[data-state="unset"]:hover .th{opacity:.35}
.sl.anim .fl,.sl.anim .th{transition:all .32s cubic-bezier(.2,.8,.2,1)}
.sl.view .tr::before{content:"";position:absolute;left:50%;top:-5px;width:2px;height:18px;margin-left:-1px;background:var(--line);border-radius:2px}
.sl.view .fl{left:50%;background:var(--sc)}
@media (prefers-reduced-motion:reduce){.sl.anim .fl,.sl.anim .th,.pm-bar i{transition:none}.pct.bump{animation:none}}

.foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:9px 14px 10px}
.share{border:0;background:var(--wash);border-radius:999px;padding:6px 11px;font-weight:800;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis}
.share span{overflow:hidden;text-overflow:ellipsis}
.share svg{flex:none}
.share svg{width:14px;height:14px}
.card.complete .share{background:var(--ink);color:var(--surface)}
.share[aria-disabled="true"]{cursor:not-allowed}
.brand{flex:none;margin-left:auto;display:flex;align-items:center;gap:5px;color:var(--muted)}
.brand svg{width:16px;height:15px}
.brand span{display:flex;flex-direction:column;line-height:1}
.brand b{font-size:9.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.brand i{font-style:normal;font-size:5.6px;font-weight:700;letter-spacing:.38em;border-top:1px solid var(--red);padding-top:1px;margin-top:1px}

/* coach */
.coach{max-width:1480px;margin:14px auto 0;padding:0 20px}
.coach-in{display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--surface);border-radius:16px;padding:12px 16px;flex-wrap:wrap}
.coach-in .cn{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.coach-in p{margin:0;font-size:15px;font-weight:600;flex:1;min-width:240px}
.coach-in .btn{background:var(--surface);color:var(--ink)}
.coach-in .lnk{color:var(--surface)}

/* officials */
.off{max-width:1480px;margin:36px auto 0;padding:0 20px 64px}
.off-in{background:linear-gradient(135deg,var(--navy2),var(--navy));color:#fff;border-radius:24px;padding:28px;display:grid;grid-template-columns:1.1fr 1.4fr;gap:24px;align-items:center}
.off h2{font-size:30px;font-weight:900;letter-spacing:-.025em;margin:0 0 8px;line-height:1.05}
.off p{margin:0;color:rgba(255,255,255,.75)}
.offs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.of-card{border:1.5px dashed rgba(255,255,255,.3);border-radius:16px;padding:14px}
.of-card .role{font-size:12px;opacity:.7;font-weight:600}
.of-card .who{font-weight:800;margin:2px 0 8px}
.of-card .match{display:flex;align-items:baseline;gap:6px;font-size:12px;opacity:.8}
.of-card .match b{font-size:32px;font-weight:900;opacity:.5}
.of-card .st{font-size:12px;opacity:.7;margin-top:4px}
.ex{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(255,255,255,.35);border-radius:5px;padding:1px 5px;margin-left:4px}

/* dialogs */
dialog{border:0;border-radius:24px;padding:0;background:var(--surface);color:var(--ink);box-shadow:var(--lift);max-width:min(560px,calc(100vw - 24px));width:100%}
dialog::backdrop{background:rgba(12,12,23,.6);backdrop-filter:blur(3px)}
.dl{padding:28px}
.dl h2{font-size:32px;font-weight:900;letter-spacing:-.03em;margin:8px 0 8px;line-height:1.03}
.dl h2 em{font-style:normal;color:var(--red)}
.dl p{margin:0 0 16px;color:var(--muted);font-size:16px}
.wsteps{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:8px}
.wsteps li{display:flex;gap:12px;align-items:center;border-radius:14px;padding:10px 12px;background:var(--wash)}
.wsteps .n{width:30px;height:30px;border-radius:50%;color:#fff;display:grid;place-items:center;font-weight:800;flex:none;background:var(--c)}
.wsteps b{display:block}
.wsteps span{font-size:13px;color:var(--muted)}
.dl-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dl-small{font-size:12px;color:var(--muted);margin-top:14px}
.dl .lnk{color:var(--muted)}
.ghost2{background:none;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer}

/* opinion window */
.opd{max-width:min(640px,calc(100vw - 24px))}
.opd-band{background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;padding:20px 24px 18px;display:flex;align-items:center;gap:14px}
.opd-band .nm{margin:0;font-size:28px}
.opd-band .ico{margin-left:auto}
.opd-band p{margin:6px 0 0;font-size:14px;opacity:.92}
.qs{list-style:none;margin:0;padding:8px 24px;max-height:min(60vh,560px);overflow:auto}
.q{padding:14px 0;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.q-h{display:flex;align-items:baseline;gap:8px}
.q-h b{font-size:16px;font-weight:800}
.q-h .q-v{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--c)}
.q-h .q-clr{border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;padding:0}
.poles{display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:13px;line-height:1.3;color:var(--muted)}
.poles span:last-child{text-align:right}
.poles span.lean{color:var(--ink);font-weight:700}
.opd-foot{display:flex;align-items:center;gap:12px;padding:14px 24px 20px;border-top:1px solid var(--line)}
.opd-foot .cnt{margin:0}
.opd-foot .btn{margin-left:auto}

/* share */
.sharedl{max-width:min(860px,calc(100vw - 24px))}
.sh-wrap{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:24px;align-items:start}
.sc{width:340px;aspect-ratio:4/5;border-radius:20px;background:linear-gradient(150deg,var(--c,#26245A) 0%,var(--c,#26245A) 50%,var(--c2,#1B1A3A) 140%);color:#fff;padding:24px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.sc::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.09)}
.sc .ico{position:absolute;right:22px;top:22px;margin:0;z-index:1}
.sc .sc-rank{font-size:14px;font-weight:700;opacity:.9;position:relative;z-index:1}
.sc .sc-rank b{font-size:52px;font-weight:900;letter-spacing:-.05em;display:block;line-height:.9}
.sc .nm{margin-top:16px;font-size:36px}
.sc .nm .fw{font-size:14px}
.sc .sc-rows{margin-top:auto;position:relative;z-index:1}
.sc .sc-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.25);padding:9px 0;font-size:13.5px;font-weight:600}
.sc .sc-row b{font-size:20px;font-weight:900;letter-spacing:.04em}
.sc .sc-row b i{font-style:normal;opacity:.3}
.sc .sc-foot{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;opacity:.9;margin-top:8px;gap:8px}
.sc .brand{color:#fff;margin:0}
.sc .brand b{color:#fff}
.sc .brand i{border-color:#fff}
.sc.ten .t-row{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;font-size:13.5px;font-weight:700;padding:4px 0;border-top:1px solid rgba(255,255,255,.14);position:relative;z-index:1}
.sc.ten .t-row i{width:10px;height:10px;border-radius:3px;background:var(--c);display:inline-block}
.sc.ten .t-row em{font-style:normal;font-weight:900;letter-spacing:.05em}
.sh-side h2{font-size:26px;font-weight:900;margin:0 0 6px;letter-spacing:-.02em}
.sh-side p{color:var(--muted);margin:0 0 14px}

@media (max-width:860px){.off-in{grid-template-columns:1fr}.sh-wrap{grid-template-columns:1fr}}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}.intro h1{font-size:30px;gap:10px}.intro h1 svg{width:40px;height:37px}.intro{padding-top:16px}
  .steps{margin-left:0;flex-wrap:nowrap;overflow-x:auto;width:100%;padding-bottom:4px}.step{flex:none}
  .pool-in{gap:8px 14px;padding:8px 16px}.pm{min-width:100%}.pm-top .muted{display:none}.pool-acts{order:3;width:100%}.prog{margin-right:auto}
  .btn#sharet{padding:9px 14px;font-size:14px}.tag{display:none}.offs{grid-template-columns:1fr}.sc{width:100%}
}

/* light frame so the cards are the star */
:root{--canvas:#F4F5F7;--wash:#F4F5F7}
.hero{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.hero::before{height:4px}
.top-in{height:72px}
.logo svg{width:42px;height:38px}
.ttl{margin:0;font-size:26px;font-weight:900;letter-spacing:-.025em;white-space:nowrap}
.ttl em{font-style:normal;color:var(--red);letter-spacing:.08em;margin-left:2px}
.tag{border-color:var(--line);color:var(--muted)}
.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.ghost:hover{background:var(--wash)}
.notice{color:var(--muted);border-top:1px solid var(--line);background:var(--wash)}
.intro{display:flex;align-items:center;gap:16px;padding:16px 20px 4px;flex-wrap:wrap}
.intro p{margin:0;color:var(--muted);font-size:15px}
.step{border-color:var(--line);background:var(--surface);color:var(--ink)}
.step .n{background:var(--wash)}
.step[aria-current="step"]{border-color:var(--ink);background:var(--surface)}
.step.done .n{background:#2B8A3E;color:#fff}
.pool{margin-top:12px;border-top:1px solid var(--line)}
.off-in{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.off p{color:var(--muted)}
.of-card{border-color:var(--line)}
.ex{border-color:var(--line)}
.row[data-m="view"]{padding:10px 14px 12px}
.opb{position:relative;overflow:hidden;width:100%;display:flex;align-items:center;gap:8px;border:2px dashed var(--line);background:var(--surface);border-radius:14px;padding:11px 14px;cursor:pointer;text-align:left;transition:border-color .2s,background .2s,color .2s}
.opb .opf{position:absolute;inset:0 auto 0 0;background:var(--c);opacity:.13;width:0;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.opb>span{position:relative}
.opk{font-weight:800;font-size:14px}
.ops{font-size:12px;color:var(--muted)}
.opn{margin-left:auto;font-weight:900;font-size:18px;font-variant-numeric:tabular-nums;color:var(--muted)}
.opb[data-state="empty"]{color:var(--muted)}
.opb[data-state="empty"]:hover{border-color:var(--c);color:var(--c)}
.opb[data-state="part"]{border:2px solid var(--c);color:var(--ink)}
.opb[data-state="part"] .opn{color:var(--c)}
.opb[data-state="full"]{border:2px solid var(--c);background:var(--c);color:#fff}
.opb[data-state="full"] .opf{display:none}
.opb[data-state="full"] .ops,.opb[data-state="full"] .opn{color:#fff}
@media (max-width:600px){.ttl{font-size:19px}.top-in{gap:8px}.logo svg{width:32px;height:29px}#restart{display:none}}
:root[data-theme="dark"]{--canvas:#0C0C17;--wash:#141426;--red:#FF6B7D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--canvas:#0C0C17;--wash:#141426;--red:#FF6B7D}}

.brand svg{width:24px;height:22px}
.brand b{font-size:13px}
.brand i{font-size:7.4px;letter-spacing:.34em;border-top-width:1.5px}
.sc .ico{width:72px;height:72px;right:20px;top:20px}
.sc .ico svg{width:38px;height:38px}
.sc .sc-foot{margin-top:12px}
.sc .brand svg{width:40px;height:36px}
.sc .brand b{font-size:21px}
.sc .brand i{font-size:11.5px;border-top-width:2px;padding-top:3px;margin-top:3px}
.sc .demo{font-size:10px;font-weight:800;letter-spacing:.16em;border:1.5px solid rgba(255,255,255,.5);border-radius:5px;padding:2px 6px}
.cap-l{display:block;font-weight:800;font-size:13px;margin-bottom:6px}
.cap{width:100%;font:inherit;font-size:14px;line-height:1.45;color:var(--ink);background:var(--wash);border:1.5px solid var(--line);border-radius:14px;padding:12px;resize:vertical;margin-bottom:12px}
.sh-side .lnk{margin-top:6px}
.opk,.ops{white-space:nowrap}

.rh .k.kw{white-space:normal;line-height:1.25}
.sl-line{display:flex;align-items:center;gap:6px}
.sl-line .sl{flex:1;min-width:0}
.sl-line .v{font-weight:900;font-size:17px;min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
.sl-line .v.empty{color:var(--muted);font-weight:500;font-size:12px;white-space:nowrap}
#w-go{white-space:normal;text-align:left}

/* epic pass: depth, a big watermark icon, a clear finished state */
.card{transition:box-shadow .25s,translate .2s}
.card:not(.dragging):hover{translate:0 -3px;box-shadow:0 2px 4px rgba(23,22,44,.08),0 18px 40px rgba(23,22,44,.14)}
.band{padding-bottom:16px}
.wmk{position:absolute;right:-22px;bottom:-34px;width:150px;height:150px;color:rgba(255,255,255,.16);pointer-events:none;transform:rotate(-12deg)}
.wmk svg{width:100%;height:100%;stroke-width:1.6}
.rank .num{font-size:44px}
.nm{font-size:23px}
.ready{display:none;margin-left:8px;align-self:center;background:rgba(255,255,255,.95);color:var(--c);font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;border-radius:999px;padding:4px 9px}
.card.complete .ready{display:inline-flex}
.card.complete{box-shadow:0 0 0 2px var(--c),0 12px 32px color-mix(in srgb,var(--c) 28%,transparent)}
.card.complete .share{background:var(--c);color:#fff}
.pct{color:var(--ink);font-size:15px;font-weight:800}
.card.pop{animation:pop .6s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{0%{scale:1}35%{scale:1.035}100%{scale:1}}

.rank{white-space:nowrap}
.ready{font-size:9.5px;padding:3px 7px;margin-left:6px}

.off-in{grid-template-columns:1.15fr 1fr}
.off-k{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 6px}
.off h2{font-size:34px}
.offs{grid-template-columns:repeat(2,1fr)}
.of-card{border:2px dashed var(--line);background:var(--wash)}
.of-card .who{color:var(--muted);font-weight:700}
.of-card .match{opacity:.7}
.off-cta{margin-top:16px}
@media (max-width:860px){.offs{grid-template-columns:1fr 1fr}}

.menu[hidden]{display:none}
html,body{overflow-x:clip}
.pct{font-size:17px}
body[data-lock] .row,body[data-lock] .foot{pointer-events:none}
body[data-lock="fund"] .row[data-m="fund"],body[data-lock="rate"] .row[data-m="rate"],body[data-lock="view"] .row[data-m="view"]{pointer-events:auto}
body[data-lock]:not([data-lock="order"]) .band{pointer-events:none;cursor:default}

.intro .tagline{font-size:20px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.intro .tagline b{color:var(--red);font-weight:900}

.q-h{align-items:center}
.qmoves{display:flex;flex-direction:column;margin-right:2px}
.qmv{color:var(--muted);width:22px;height:18px}
.qmv:hover{color:var(--c)}
.qrank{font-weight:900;color:var(--c);font-size:15px;min-width:28px;font-variant-numeric:tabular-nums}
.q:first-child .q-h b{font-size:17px}
.topq{margin:8px 2px 0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topq b{color:var(--c);font-weight:800}

/* always know where you are: pills in the sticky bar, the tour bar fixed at the bottom */
.pool .steps{order:-1;width:100%;margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 0 4px}
.pool .steps::-webkit-scrollbar{display:none}
.pool .step{flex:none;padding:4px 12px 4px 4px;font-size:12.5px}
.pool .step .n{width:22px;height:22px}
.coach{position:fixed;left:0;right:0;bottom:14px;z-index:45;margin:0 auto;max-width:980px;padding:0 12px}
.coach-in{box-shadow:0 18px 44px rgba(12,12,23,.35)}
body.touring{padding-bottom:120px}
@media (max-width:600px){.coach{bottom:8px;padding:0 8px}.coach-in{padding:10px 12px;gap:8px}.coach-in p{font-size:14px;min-width:0;flex-basis:100%}.coach-in .lnk{margin-right:auto}}

/* one sticky bar that changes with the step (Mike 2026-10-28: on the order step, no budget) */
.pool .coach{position:static;order:0;width:100%;max-width:none;margin:0;padding:0}
.pool .coach-in{box-shadow:none;border-radius:14px;padding:9px 12px 9px 16px}
.pool .pm{order:1}.pool .pool-acts{order:2}.pool .prog{order:3}.pool #sharet{order:4}
body.touring{padding-bottom:0}
body.touring .pool .prog,body.touring #sharet,body.touring #reset,body.touring #example{display:none}
body.touring:not([data-lock="fund"]) .pool .pm,body.touring:not([data-lock="fund"]) .pool .pool-acts{display:none}

/* opening screen: one big, clear yes */
#w-h:focus{outline:none}
.w-acts{flex-direction:column;align-items:stretch;gap:12px;margin-top:22px}
#w-go{width:100%;justify-content:center;gap:12px;font-size:19px;font-weight:900;padding:19px 24px;border-radius:18px;white-space:normal;text-align:center;line-height:1.2;box-shadow:0 12px 28px rgba(23,22,44,.28);transition:transform .15s,box-shadow .15s}
#w-go:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(23,22,44,.34)}
#w-go svg{width:22px;height:22px;flex:none;color:#FF6B7D}
.w-acts .lnk{align-self:center;font-size:14.5px}
#welcome .dl-small{text-align:center;margin-top:12px;margin-bottom:0}
#welcome .wsteps{margin-bottom:0}

.wsteps li>div>span{display:block;line-height:1.35;margin-top:2px}

/* every step has its own color (the opening screen's 1 2 3 4), so moving on is unmistakable */
.coach-in{transition:background-color .45s ease}
body[data-step="1"]{--st:#C2410C}
body[data-step="2"]{--st:#2B8A3E}
body[data-step="3"]{--st:#1864AB}
body[data-step="4"]{--st:#C2255C}
body[data-step] .coach-in{background:var(--st);color:#fff}
body[data-step] .coach-in .btn{background:#fff;color:#17162C}
body[data-step] .coach-in .lnk{color:#fff}
body[data-step] .pool .step[aria-current="step"]{border-color:var(--st);background:color-mix(in srgb,var(--st) 10%,var(--surface))}
body[data-step] .pool .step[aria-current="step"] .n{background:var(--st);color:#fff}
.coach-in.flash{animation:stepflash .6s ease}
@keyframes stepflash{0%{transform:scale(.985);filter:brightness(1.25)}100%{transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.coach-in{transition:none}.coach-in.flash{animation:none}}

.pm-why{font-size:13.5px;font-weight:700;color:var(--ink);margin-top:2px}
.pm-why:not(:empty)::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#C2410C;color:#fff;font-size:11px;font-weight:900;margin-right:8px;vertical-align:1px}
.pm-why.ok::before{content:"\2713";background:#2B8A3E}

.nud{flex:none;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--c);font-weight:900;font-size:17px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.nud:hover{border-color:var(--c)}
.nud:active{background:var(--c);color:#fff;border-color:var(--c)}
.row[data-m="fund"] .sl-line{gap:4px}

/* summary */
.sumd{max-width:min(780px,calc(100vw - 24px))}
#sum-in{padding:26px 28px 22px}
.sum-head{display:flex;align-items:flex-start;gap:16px}
.sum-head .kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.sum-head h2{margin:0;font-size:30px;font-weight:900;letter-spacing:-.025em;line-height:1.05}
.sum-head h2 em{font-style:normal;color:var(--red);letter-spacing:.06em}
.sum-logo{margin-left:auto;width:52px;height:48px;flex:none}
.sum-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 12px}
.sf{border-radius:14px;padding:12px 14px;background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;display:flex;flex-direction:column;gap:2px}
.sf-k{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.sf-n{font-size:17px;font-weight:900;line-height:1.1}
.sf-v{font-size:13px;font-weight:700;opacity:.92}
.sum-why{margin:4px 0 12px;font-weight:700;font-size:14px}
.sum-why::before{content:"?";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#C2410C;color:#fff;font-size:11px;font-weight:900;margin-right:8px;vertical-align:1px}
.sum-why.ok::before{content:"\2713";background:#2B8A3E}
.sum-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sum-list li{display:grid;grid-template-columns:26px minmax(0,1.3fr) minmax(0,1.4fr) 62px 92px;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.sl-r{font-weight:900;color:var(--c);font-size:16px;text-align:center}
.sl-n{display:flex;align-items:center;gap:8px;font-weight:800;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-i{width:26px;height:26px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;flex:none}
.sl-i svg{width:15px;height:15px}
.sl-m{display:flex;align-items:center;gap:8px}
.sl-m .w{display:block;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--c2),var(--c));min-width:3px;flex:none;max-width:calc(100% - 64px)}
.sl-m b{font-weight:900;font-size:13.5px;white-space:nowrap}
.sl-g{font-weight:900;font-size:16px;text-align:right}
.sl-g small,.sl-o small{font-size:11px;font-weight:600;color:var(--muted)}
.sl-o{text-align:right;font-weight:800;font-size:13.5px}
.sl-o.none{color:var(--muted)}
.sum-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.sum-acts .lnk{margin-left:auto}
@media (max-width:600px){#sum-in{padding:20px 16px}.sum-head h2{font-size:24px}.sum-list li{grid-template-columns:22px minmax(0,1fr) 54px;grid-template-areas:"r n g" ". m o"}.sl-r{grid-area:r}.sl-n{grid-area:n}.sl-g{grid-area:g}.sl-m{grid-area:m}.sl-o{grid-area:o}.sum-acts .btn{width:100%}}

#sum-h:focus{outline:none}
@media (max-width:600px){.sl-o small{display:none}}

/* ask all my representatives (concept) */
.askd{max-width:min(620px,calc(100vw - 24px))}
#ask-h:focus{outline:none}
.ask-k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 4px}
.askd .dl p b{color:var(--ink)}
.ask-zip{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px;margin:4px 0 14px}
.ask-zip input{font:inherit;font-weight:800;font-size:16px;width:110px;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.ask-reps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ask-l{font-size:11px!important;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px!important}
.ask-r{border:2px dashed var(--line);border-radius:12px;padding:9px 10px;margin-bottom:8px;background:var(--wash);transition:background .25s,border-color .25s}
.ask-r b{display:block;font-size:13.5px;line-height:1.2}
.ask-s{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ask-r.asked{border:2px solid #2B8A3E;background:color-mix(in srgb,#2B8A3E 10%,var(--surface))}
.ask-r.asked .ask-s{color:#2B8A3E;font-weight:800}
.ask-r.asked .ask-s::before{content:"\2713  "}
.ask-again{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:6px 0 16px}
.ask-again input{width:18px;height:18px;accent-color:#2B8A3E}
#askgo{font-size:17px;padding:14px 22px}
#askgo:disabled{opacity:1;background:#2B8A3E}
.off-cta .ghost2{margin-left:6px}
@media (max-width:600px){.ask-reps{grid-template-columns:1fr}.askd .dl-acts .btn{width:100%}}

/* judge pass 1 (2026-10-28) */
[data-id="education"]{--t:#C2410C}[data-id="economy"]{--t:#0B7285}[data-id="health"]{--t:#C2255C}[data-id="housing"]{--t:#862E9C}[data-id="transport"]{--t:#1864AB}
[data-id="environment"]{--t:#237032}[data-id="safety"]{--t:#5F3DC4}[data-id="government"]{--t:#8A4520}[data-id="immigration"]{--t:#08694B}[data-id="defense"]{--t:#495057}
:root[data-theme="dark"] [data-id]{--t:var(--c2)}:root[data-theme="dark"] [data-id="safety"]{--t:#9F8BE0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) [data-id]{--t:var(--c2)}:root:not([data-theme="light"]) [data-id="safety"]{--t:#9F8BE0}}
.rh .k{color:var(--t);font-size:12.5px;font-weight:800;letter-spacing:0;text-transform:none}
.rh .k.kw{font-size:12.5px}
.money b.on,.qrank,.topq b,.opb[data-state="part"] .opn{color:var(--t)}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,0) 70%);pointer-events:none}
.rank .of,.rank .h{opacity:1}
.coach-in .cn{opacity:1}
.mv{width:34px;height:30px;color:rgba(255,255,255,.92)}
.mv svg{width:20px;height:20px}
.mv:disabled{opacity:.4}
.qmv{width:30px;height:26px}
.qmv svg{width:18px;height:18px}
.topq{margin-top:8px}
.tq-none{color:var(--muted)}
h1,h2,.tagline,.coach-in p,.pm-why,.sum-why{text-wrap:balance}
.nw{white-space:nowrap}
#w-go span{display:inline;text-wrap:balance}
#w-go svg{display:inline-block;vertical-align:-3px;margin-left:8px}
#askgo:disabled{background:var(--muted)}
.sum-head{position:relative}
.sum-x{position:absolute;right:-6px;top:-8px;width:44px;height:44px;border-radius:50%;border:0;background:none;font-size:30px;line-height:1;color:var(--muted);cursor:pointer}
.sum-x:hover{background:var(--wash);color:var(--ink)}
.sum-logo{margin-right:44px}
.sum-cols{display:grid;grid-template-columns:26px minmax(0,1.3fr) minmax(0,1.4fr) 62px 92px;gap:10px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 0 6px}
.sum-cols span:nth-child(4),.sum-cols span:nth-child(5){text-align:right}
@media (max-width:600px){
  .mv{width:40px;height:34px}
  .sum-logo{display:none}.sum-cols{display:none}
  .sl-g::before{content:"Grade ";font-size:11px;font-weight:700;color:var(--muted)}
  .sum-acts{position:sticky;bottom:-20px;background:var(--surface);padding:12px 0 6px;margin-top:8px}
  .pool.compact .steps,.pool.compact .pm-top,.pool.compact .pm-note,.pool.compact .pool-acts,.pool.compact .prog{display:none}
  .pool.compact .pool-in{padding:6px 12px;gap:6px}
  .pool.compact .coach-in{padding:8px 10px}
  .pool.compact .coach-in p{font-size:13px;line-height:1.3}
  .pool.compact .coach-in .cn{font-size:10.5px}
  .pool.compact #sharet{padding:7px 12px;font-size:13px}
  .pool.compact .pm{min-width:0;flex:1}
}

/* sections line up across each row, even when a name takes two lines */
@supports (grid-template-rows: subgrid){
  .card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
  .grid{row-gap:16px}
}

/* judge pass 2 (2026-10-28) */
.qmv{color:var(--muted)}
.qmv:hover{color:var(--t)}
.q-h .q-v{color:var(--t)}
.poles span.lean{color:var(--t)}
.opd-band{background:linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2)),linear-gradient(135deg,var(--c),var(--c2))}
.topq{white-space:nowrap}
.ico{flex-shrink:0}
.ready{font-size:9px;padding:2px 6px;color:var(--t)}
.band::before{background:linear-gradient(180deg,rgba(0,0,0,.22),rgba(0,0,0,.04) 75%)}
body.touring .pm-top .muted{display:none}
.step .sh{display:none}
:root{--focus:#3C3B6E}
.dl p{text-wrap:pretty}
@media (max-width:420px){.step .lg{display:none}.step .sh{display:inline}}
@media (max-width:600px){
  .sum-head h2{padding-right:48px}
  .sum-acts{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .sl-o::before{content:"Opinions ";font-size:11px;font-weight:700;color:var(--muted)}
}

/* judge pass 3 (2026-10-28) */
.sharedl{position:relative}
.dlg-x{position:absolute;right:10px;top:10px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--wash);font-size:28px;line-height:1;color:var(--ink);cursor:pointer}
.dlg-x:hover{background:var(--line)}
#shclose{display:none}
.sh-side h2{padding-right:44px}
.mv .shape{stroke-width:52}

/* where you live (Mike 2026-10-29): ZIP, or city and state, in the welcome window */
.wloc{margin:16px 0 18px}
.wloc label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.wloc label span{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.wloc input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.wloc input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent}
.wloc-out{margin:6px 0 0!important;font-size:13px!important;min-height:1.2em}
.wloc-out.ok{color:var(--ink)!important;font-weight:600}
.loc-b{font-weight:600}

/* MyGrade: the name leads, the question follows quietly */
.kq{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
/* share: social row along the bottom of the share window */
.sh-social{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.sh-social .soc{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;border:1px solid var(--line,#d9dbe1);color:var(--ink,#14141f);background:var(--surface,#fff);transition:transform .12s}
.sh-social .soc:hover,.sh-social .soc:focus-visible{transform:translateY(-1px);border-color:currentColor}
.sh-social svg{width:18px;height:18px}
/* the My-names keep their capitals: MyBudget, MyGrade, MyOpinion read like MyVote */
.rh .k{text-transform:none;letter-spacing:0;font-size:13px}
.rh .k.kw{white-space:normal}
.rh .k .kq{display:block;font-size:11.5px;margin-top:1px}

/* share: the preview is the image itself, plus the MyOpinion picker (Mike 2026-10-29: "They pick.") */
.sh-prev{width:340px;position:sticky;top:0}
#shcard{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:min(76vh,700px);overflow:auto;border-radius:18px;scrollbar-width:thin}
#shcard:empty{aspect-ratio:4/5;background:linear-gradient(110deg,var(--wash) 30%,var(--line) 50%,var(--wash) 70%) 0 0/300% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{background-position:-100% 0}}
#shcard img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:var(--shadow);animation:shin .25s ease}
#shcard img:first-child{grid-column:1/-1;border-radius:18px}
@keyframes shin{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#shcard:empty,#shcard img{animation:none}}
.pk{margin:4px 0 16px}
.pk-head{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap;margin-bottom:8px}
.pk-head b{font-size:15px;font-weight:800}
.pk-n{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.pk-head .lnk{padding:0}
.pk-head .lnk:first-of-type{margin-left:auto}
.pk-list{max-height:262px;overflow:auto;border:1.5px solid var(--line);border-radius:16px;padding:4px;overscroll-behavior:contain}
.pk-g{margin:10px 10px 2px!important;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--t)!important;display:flex;align-items:center;gap:7px}
.pk-g:first-child{margin-top:6px!important}
.pk-g i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.pk-i{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:12px;cursor:pointer;transition:background .15s}
.pk-i:hover{background:var(--wash)}
.pk-i input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--c);cursor:pointer}
.pk-i>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pk-i b{font-size:14px;font-weight:800;line-height:1.25}
.pk-i span span{font-size:13px;color:var(--muted);line-height:1.3}
.pk-i:has(input:checked){background:color-mix(in srgb,var(--c) 12%,var(--surface))}
.pk-i:has(input:checked) b{color:var(--t)}
.pk-i:has(input:checked) span span{color:var(--ink)}
.pk-i:has(input:disabled){opacity:.45;cursor:not-allowed}
.pk-i:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:-2px}
.sh-side .pk-full{font-size:12.5px;font-weight:700;color:var(--muted);margin:6px 2px 0;min-height:0}
.sh-side .pk-full:empty{display:none}
.cap-h{display:flex;align-items:baseline;gap:10px}
.cap-h .lnk{margin-left:auto;padding:0}
@media (max-width:860px){
  .sh-wrap{padding:18px 16px 20px;gap:16px}
  .sh-prev{width:100%;position:static}
  #shcard{display:flex;gap:10px;overflow-x:auto;max-height:none;padding:2px 2px 8px;scroll-snap-type:x mandatory;border-radius:0}
  #shcard img,#shcard:empty{flex:none;width:min(64%,300px);scroll-snap-align:start}
  #shcard:not(.multi) img{margin:0 auto}
  #shcard:empty{width:min(64%,300px);margin:0 auto}
}

/* official mode (Mike 2026-10-29: "Fill it all out. Or don't run.") */
.offbar{max-width:1480px;margin:16px auto 0;padding:0 20px}
.ob-in{background:var(--surface);border-radius:20px;box-shadow:0 0 0 2px var(--ink),var(--shadow);padding:18px 20px;display:grid;gap:12px}
.ob-top{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.ob-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.ob-k{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.ob-who h2{margin:0;font-size:26px;font-weight:900;letter-spacing:-.02em;line-height:1.08;overflow-wrap:anywhere}
#ob-office{color:var(--muted);font-weight:600;font-size:14.5px}
.ob-acts{margin-left:auto;display:flex;gap:14px}
.ob-acts .lnk{padding:0}
.ob-std{margin:0;font-weight:800;font-size:15px}
.ob-std a{color:var(--muted);font-weight:600;font-size:13px;margin-left:4px;text-underline-offset:3px}
.ob-prog{display:flex;align-items:center;gap:14px}
.ob-bar{flex:1;height:12px;border-radius:99px;background:var(--track);overflow:hidden}
.ob-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#3C3B6E,var(--red));border-radius:99px;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.offbar.ob-done .ob-bar i{background:#2B8A3E}
#ob-n{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-miss{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ob-ml{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.ob-c{border:1.5px solid var(--line);background:var(--surface);border-radius:999px;padding:7px 13px;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:border-color .15s,background .15s;color:var(--ink)}
.ob-c i{width:9px;height:9px;border-radius:3px;background:var(--c,var(--ink));flex:none}
.ob-c:hover{border-color:var(--c,var(--ink));background:var(--wash)}
.ob-miss .lnk{padding:0 4px 0 0}
.ob-ok{font-weight:800;color:#2B8A3E}
.card.flash{animation:cflash 1.3s ease}
@keyframes cflash{0%,100%{box-shadow:var(--shadow)}25%,60%{box-shadow:0 0 0 4px var(--c),0 18px 40px color-mix(in srgb,var(--c) 35%,transparent)}}
@media (prefers-reduced-motion:reduce){.card.flash{animation:none;box-shadow:0 0 0 4px var(--c)}.ob-bar i{transition:none}}
.run-std{font-weight:800;color:var(--ink)!important;font-size:17px!important}
.run-f{display:grid;gap:6px;margin:0 0 4px}
.run-f label{font-weight:700;font-size:14.5px;margin-top:6px}
.run-f input{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.run-f input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent}
.run-msg{color:var(--red)!important;font-weight:700;min-height:1.3em;margin:6px 0 10px!important;font-size:13.5px!important}
#rundlg .dl-small a{color:var(--muted);font-weight:600;text-underline-offset:3px}
@media (max-width:600px){.offbar{padding:0 16px}.ob-in{padding:16px}.ob-who h2{font-size:22px}.ob-acts{margin-left:0;width:100%}#ob-share{width:100%;justify-content:center}}
/* the share window stays where the person is (a relative dialog jumped the page to the top) */
.sharedl{position:fixed}
#shcard img:nth-child(2):last-child{grid-column:1/-1}
@media (max-width:600px){
  .ob-miss{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
  .ob-miss::-webkit-scrollbar{display:none}
  .ob-c,.ob-ml,.ob-miss .lnk{flex:none}
}
body.official .card .share[aria-disabled="true"]{background:var(--wash);color:var(--muted)}

/* picker rows, clarity first: the question, a five-step scale, both sides written out (Mike 2026-10-29) */
.pk-b{display:flex;flex-direction:column;min-width:0;flex:1}
.pk-i .pk-b>b{font-size:14.5px;font-weight:800;line-height:1.3;color:var(--ink)}
.pk-i:has(input:checked) .pk-b>b{color:var(--ink)}
.pk-sc{position:relative;display:flex;justify-content:space-between;align-items:center;height:22px;margin:8px 2px 4px}
.pk-sc::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:3px;margin-top:-1.5px;background:var(--line);border-radius:3px}
.pk-sc i{position:relative;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--line)}
.pk-sc i:nth-child(3){border-color:var(--muted);opacity:.6}
.pk-sc i.on{width:20px;height:20px;background:var(--c);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--c);opacity:1}
.pk-sd{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:start}
.pk-i .pk-sd span{font-size:12.5px;line-height:1.3;color:var(--muted)}
.pk-i .pk-sd span:last-child{text-align:right}
.pk-i .pk-sd span.on{color:var(--ink);font-weight:800}
.pk-sd em{font-style:normal;font-size:12.5px;font-weight:800;color:var(--ink);text-align:center;white-space:nowrap}
.pk-i{padding:11px 12px}
/* official mode: the record is the main action, images are second */
.ob-out{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ob-out .ghost2[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
#ob-pdf[aria-busy="true"]{opacity:.7;cursor:progress}
.opd-note{padding:12px 24px 4px;border-top:1px solid var(--line);display:grid;gap:6px}
.opd-note label{font-weight:800;font-size:14px}
.opd-note label span{font-weight:500;color:var(--muted);font-size:12.5px;margin-left:6px}
.opd-note textarea{width:100%;font:inherit;font-size:15px;line-height:1.4;color:var(--ink);background:var(--wash);border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;resize:vertical}
.opd-note textarea:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent}
.opd-nc{font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:600px){.ob-out .btn,.ob-out .ghost2{width:100%;justify-content:center}.opd-note{padding:10px 16px 2px}}

/* MyPriorities in a subject: an ordered list you can drag or move with the arrows (Mike 2026-10-29) */
.pk-sub{font-size:13px!important;margin:-2px 0 8px!important;color:var(--muted)}
ol.pk-list{list-style:none;margin:0;padding:4px}
.pk-i{display:flex;gap:6px;align-items:flex-start;padding:10px 8px;border-radius:12px;position:relative;transition:background .15s}
.pk-hd{display:flex;align-items:center;gap:2px;flex:none}
.pk-mv{display:flex;flex-direction:column}
.pk-mv .qmv{width:30px;height:24px;color:var(--muted)}
.pk-mv .qmv:hover{color:var(--t)}
.pk-mv .qmv:disabled{opacity:.25}
.pk-rk{display:flex;align-items:center;gap:4px;min-width:34px;padding:6px 4px;border-radius:8px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--muted)}
.pk-rk svg,.qrank svg{width:9px;height:14px;fill:currentColor;opacity:.55;flex:none}
.pk-rk b{font-size:17px;font-weight:900;color:var(--t);font-variant-numeric:tabular-nums}
.pk-rk:hover{background:var(--wash)}
.pk-l{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:0;cursor:pointer}
.pk-l input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--c);cursor:pointer}
.pk-i:has(input:checked){background:color-mix(in srgb,var(--c) 11%,var(--surface))}
.pk-i:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:-2px}
.pk-i.out{opacity:.62}
.pk-i.out .pk-l{cursor:default}
.pk-out{display:block;font-size:12px!important;font-weight:700;color:var(--muted)!important;margin-top:4px}
.pk-g{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--t);margin:0 0 2px}
.pk-g i{width:10px;height:10px;border-radius:3px;background:var(--c)}
.pk-i.lifting{z-index:3;background:var(--surface);box-shadow:var(--lift);transition:none;cursor:grabbing}
.pk-i.drop-a::before,.pk-i.drop-b::after,.q.drop-a::before,.q.drop-b::after{content:"";position:absolute;left:8px;right:8px;height:3px;border-radius:3px;background:var(--c,var(--ink))}
.pk-i.drop-a::before,.q.drop-a::before{top:-2px}
.pk-i.drop-b::after,.q.drop-b::after{bottom:-2px}
.q{position:relative}
.q.lifting{z-index:3;background:var(--surface);box-shadow:var(--lift);border-radius:14px;transition:none}
.qrank{display:inline-flex;align-items:center;gap:5px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:8px;padding:4px 6px 4px 4px;margin-left:-4px}
.qrank:hover{background:var(--wash)}
.opd-band p b{font-weight:800}
/* officials share one thing: the full PDF record */
body.official .card .share{display:none}
ol.pk-list.pk-sort{max-height:none;overflow:visible}
ol.pk-list:not(.pk-sort){max-height:380px}
/* the Top 10 as a PDF, for anyone */
.sh-pdf{margin:14px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
.sh-pdf label{display:block;font-weight:800;font-size:13px;margin-bottom:6px}
.sh-pdf label span{font-weight:500;color:var(--muted);margin-left:6px}
.sh-pdf-row{display:flex;gap:8px;flex-wrap:wrap}
.sh-pdf-row input{flex:1;min-width:160px;font:inherit;font-size:16px;padding:9px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.sh-pdf-row input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent}
.sh-pdf .ghost2[aria-busy="true"],.sum-acts .ghost2[aria-busy="true"]{opacity:.7;cursor:progress}