/* HANS governance pages (/vote, /vote/{id}, /vote/claim, /vote/trade, /stake v3, /swap's v3 lock step): the brand v2
   components on top of /assets/hans-app.css. Load after it; it adds components and never redefines hans-app.css's
   tokens. Blue only (BRAND.md §2): every tint is one of hans-app.css's tokens or an rgba of the kit's blue range, and a
   state is told by its tone and shape (live glows, done is filled, waiting is dashed, ended is dim), an icon and its
   words. Only transform and opacity animate; everything is still under prefers-reduced-motion. Phones (660 px and
   below) and coarse pointers get 44 px targets; phones get their own layouts: stacked, 16 px gutters, no sideways scroll
   at 320 px. Numbers are never truncated. */

[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.u{font-family:var(--unb);font-weight:600;letter-spacing:-.02em}
.dim{color:var(--dim)}
.mut{color:var(--muted)}
.okc{color:var(--ok)}
.warnc{color:var(--warn)}
.dangerc{color:var(--danger);font-weight:600}
b.w,strong.w{color:#fff;font-weight:600}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* The viewer's local time after a UTC deadline (computed in the browser; UTC stays the source of truth). */
.lt{color:var(--dim);font-weight:400;font-family:var(--sgk);letter-spacing:0}
/* Numbers are never cut: they wrap instead of ending in "…" (the money-page tiles too, and /stake's position cells,
   four to a row above 820 px: "Counts from Thu Oct 29" takes two lines at 900 px). */
.out .v,.metric .num,.strip .num,.pos-grid .v{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
/* Page-wide states: last good numbers when Base can't be read, disabled links, the dimmed second button. */
.was{color:var(--dim)!important}
.is-off{opacity:.45;pointer-events:none;cursor:not-allowed}
.is-dim{opacity:.45}
.fresh.busy::before{background:var(--ice);box-shadow:0 0 10px var(--ice);animation:chip-pulse 2.4s ease-in-out infinite}
.fresh.was::before{background:var(--dim);box-shadow:none}
.net-warn-wrap{margin-bottom:18px}
.net-warn{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin-top:0}
.net-warn .btn-sm{flex:none}

/* Links that read as links (sky, underlined on hover). Standalone ones are 44 px targets on phones. */
.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--sky);font-size:13.5px;font-weight:600;cursor:pointer;background:none;border:0;padding:0;text-decoration:none;text-align:left;transition:color .2s ease}
.tlink:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(148,195,255,.6)}
.links-row{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:18px}
.links-row.center{justify-content:center}

/* Header with four apps (Earn↗ · Stake · Swap · Vote) and the rehearsal line inside the sticky header. On the v2 pages
   the switcher moves into the kit's dock at 980 px and below (.hv-hide-mobile), so the brand keeps its mark and, down
   to 541 px, its name. The header markup that keeps its switcher (the core's test page) compacts as before: on phones
   every header control is a 44 px target whatever the pointer; at 540 px and below Earn↗ (an external link) leaves the
   switcher and the wallet chip drops its avatar, so the chip keeps showing "13,125 sHANS" (ellipsis if it must); the
   brand mark goes at 384 px there. The profile button never disappears. */
.rehearsal{font-variant-numeric:tabular-nums}
.test-chip{flex:none;padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(207,227,255,.45);color:var(--ice);font-family:var(--sgk);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.pfbtn{flex:none}
footer .meta a+a{margin-left:20px}
@media(max-width:660px){
  .brand{min-width:44px;min-height:44px;justify-content:center}
  .pfbtn{width:44px;height:44px}
  .app-nav a{min-width:44px;min-height:44px;justify-content:center}
  .chip,.app-head .btn-solid{min-height:44px}
  .chip{min-width:44px}
  .acct-more{width:44px;height:44px}
}
/* Tablets and phones in landscape (661-980 px, UXR1-01): where the switcher stays in the header (the core's test page),
   the four apps, the profile button and the chip with the Test tag need about 900 px (920 with 44 px touch targets), so
   the header compacts the way phones do: the brand keeps its mark, the chip its sHANS (the address is in the profile
   sheet), the gaps and the switcher's padding shrink. */
@media(max-width:980px){
  .app-head .bar{gap:10px}
  .brand b{display:none}
  .app-nav a{padding:7px 11px}
  .chip .addr{display:none}
  .hv-head .brand b{display:inline}
  .hv-head .bar{justify-content:space-between}
}
/* Phones: the Test tag goes (the rehearsal line says it), then the wallet menu (its actions are in the profile sheet),
   then Earn↗ and the avatar; widths measured with a 1 px sweep, fine and coarse, with and without the tag. */
@media(max-width:660px){.chip .test-chip{display:none}}
@media(max-width:600px){.acct-more{display:none}}
@media(max-width:540px){
  .app-nav .nav-ext{display:none}
  .chip .pfp{display:none}
  .chip{padding:4px 12px}
  .hv-head .chip{padding:0 14px}
  .acct-wrap{flex:0 1 auto;min-width:0}
  .chip{min-width:0}
  .chip .bal{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .app-nav a{padding:7px 10px}
  .hv-head .brand b{display:none}
}
@media(max-width:430px){.app-head .bar{gap:4px}.acct-wrap{gap:4px}.app-nav{margin-left:0}.app-nav a{padding:0 5px}.pfbtn{width:44px;height:44px}.chip{padding:4px 7px}.hv-head .acct-wrap{gap:8px}.hv-head .chip{padding:0 12px}}
@media(max-width:384px){.brand{display:none}.hv-head .brand{display:inline-flex}}
/* hans-app.css hides the chip balance at 370 px; it now fits down to 320 px once Earn and the avatar go. */
@media(max-width:370px){.chip .bal{display:inline}}
@media(max-width:340px){.app-nav a{padding:0 4px}.chip{padding:4px 6px}.chip .bal{font-size:9.5px}.hv-head .chip{padding:0 10px}.hv-head .chip .bal{font-size:11px}}

/* Compact hero (tools: no visual) ----------------------------------------------------------------------------------- */
.app-hero.compact{padding:46px 0 30px}
.app-hero.compact h1{max-width:none;font-size:clamp(40px,4.8vw,68px)}
.app-hero.compact .hero-sub{max-width:62ch;margin-top:20px}
.app-hero.compact .eyebrow{margin-bottom:18px}
.sub-short{display:none}

/* Vote sub-navigation: a .seg of links (Proposals · My votes · Trade) and the freshness line. */
.subnav-row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-bottom:24px}
.subnav-row.stack{flex-direction:column;align-items:flex-start;gap:12px}
.sub-nav .dot{width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live)}
.fresh{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:999px;background:rgba(98,160,255,.06);box-shadow:inset 0 0 0 1px rgba(160,200,255,.16);color:var(--dim);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fresh::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live)}
.back-link{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;color:var(--sky);font-size:13.5px;font-weight:600;cursor:pointer;transition:color .2s ease,transform .45s var(--spring)}
.back-link:hover{color:#fff;transform:translateX(-2px)}

/* Section titles inside a column ---------------------------------------------------------------------------------- */
.group-title{display:flex;align-items:center;gap:10px;margin:34px 0 14px;color:var(--ice);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.group-title::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live)}
.main-col>.group-title:first-child{margin-top:4px}
.main-col{min-width:0}

/* State chips: .badge-st plus the governance states (UX spec §4). Chips carry the state word only; countdowns sit
   in the text beside them. Live states glow, done states are filled, waiting states dashed, ended states dim. */
.badge-st{white-space:nowrap}
.badge-st.voting,.badge-st.open{border-color:rgba(170,210,255,.6);background:rgba(98,160,255,.16);color:var(--ice-2);box-shadow:0 0 20px -2px rgba(98,160,255,.5)}
.badge-st.voting::before,.badge-st.open::before{position:relative;background:var(--live);box-shadow:0 0 10px var(--live);animation:chip-pulse 2.4s ease-in-out infinite}
.badge-st.upcoming,.badge-st.held,.badge-st.scheduled,.badge-st.returning{border-style:dashed;border-color:rgba(207,227,255,.5);background:transparent;color:var(--ice)}
.badge-st.upcoming::before,.badge-st.held::before,.badge-st.scheduled::before,.badge-st.returning::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.badge-st.passed,.badge-st.minted,.badge-st.readymint,.badge-st.matured,.badge-st.filled,.badge-st.refunded{border-color:rgba(98,160,255,.55);background:linear-gradient(180deg,rgba(98,160,255,.32),rgba(61,123,255,.18));color:#fff;box-shadow:inset 0 1px 0 rgba(235,244,255,.25),0 0 18px -4px rgba(98,160,255,.6)}
.badge-st.passed::before,.badge-st.minted::before,.badge-st.readymint::before,.badge-st.matured::before,.badge-st.filled::before,.badge-st.refunded::before{width:12px;height:12px;border-radius:0;background:currentColor;-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.badge-st.failed,.badge-st.cancelled,.badge-st.expired,.badge-st.frozen{color:var(--dim);border-color:var(--line);background:rgba(10,22,52,.3)}
.badge-st.vetoed{border-color:rgba(160,200,255,.35);background:repeating-linear-gradient(135deg,rgba(31,79,184,.35) 0 4px,rgba(7,16,39,.5) 4px 8px);color:var(--ice)}
.badge-st.vetoed::before{width:10px;height:2px;border-radius:2px}
.badge-st.small{min-height:22px;padding:0 9px;font-size:9.5px}
@keyframes chip-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.chip-row{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.chip-row .cd-line{font-size:13.5px}

/* Countdown line */
.cd-line{color:var(--muted);font-size:14.5px}
.cd-line b{color:#fff;font-weight:600}
.cd{font-variant-numeric:tabular-nums}

/* Turnout and YES meters (UX spec §4): a glowing track; YES is light, NO is dark and striped (shape as well as tone). */
.bars{display:grid;gap:18px}
.meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:10px;font-size:13.5px;color:var(--muted)}
.meter-head b{color:#fff;font-family:var(--unb);font-size:15px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.meter-head .need{white-space:nowrap}
.meter-head .tick-ok{color:var(--ok);font-weight:700}
.meter-head .tick-no{color:var(--warn);font-weight:700}
.meter-track{position:relative;height:10px;border-radius:10px;background:rgba(160,200,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.meter-fill{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:10px;background:linear-gradient(90deg,#3D7BFF,#CFE3FF);box-shadow:0 0 14px rgba(98,160,255,.7);transform-origin:0 50%;animation:meter-in .9s var(--ease) both}
.meter-fill.no{left:auto;right:0;background:repeating-linear-gradient(135deg,rgba(31,79,184,.95) 0 5px,rgba(61,123,255,.7) 5px 10px);box-shadow:none;transform-origin:100% 50%}
.meter.split .meter-fill.yes{border-radius:10px 0 0 10px;background:linear-gradient(90deg,#94C3FF,#EAF3FF)}
.meter.split .meter-fill.no{border-radius:0 10px 10px 0}
.meter-mark{position:absolute;top:-6px;bottom:-6px;left:var(--m);width:2px;margin-left:-1px;border-radius:2px;background:#fff;box-shadow:0 0 0 2px rgba(2,5,13,.8),0 0 10px rgba(255,255,255,.7)}
.meter-legend{display:flex;justify-content:space-between;gap:10px;margin-top:8px;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.meter-legend .yes::before,.meter-legend .no::before{content:"";display:inline-block;width:9px;height:9px;margin-right:7px;border-radius:3px;vertical-align:0}
.meter-legend .yes::before{background:#CFE3FF;box-shadow:0 0 8px rgba(148,195,255,.6)}
.meter-legend .no::before{background:repeating-linear-gradient(135deg,#1F4FB8 0 2px,#3D7BFF 2px 4px)}
.final-tag{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ice);font-family:var(--sgk);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
@keyframes meter-in{from{transform:scaleX(0)}}
.verdict{margin-top:18px;padding:12px 16px;border-radius:16px;background:var(--tile);box-shadow:var(--tile-line);color:var(--muted);font-size:14px}
.verdict b{color:#fff}
.verdict.pass b{color:var(--ok)}

/* Proposal cards on /vote --------------------------------------------------------------------------------------- */
.prop-card+.prop-card{margin-top:18px}
.prop-card .card-head{align-items:flex-start}
.prop-card .card-head .badge-st{margin-top:8px}
/* DOM order is the phone order (countdown, key terms, Your vote, bars); desktop shows the bars above the panel. */
.prop-body{display:flex;flex-direction:column;gap:18px;padding-top:16px}
.prop-body>.vote-panel,.prop-body>.empty-line{order:2}
.prop-body>.links-row{order:3}
.key-terms{display:flex;flex-wrap:wrap;gap:6px 20px;color:var(--muted);font-size:14px}
.key-terms b{color:#fff;font-weight:600}
.key-terms span{white-space:nowrap}
.proj-line{color:var(--muted);font-size:14px}
.proj-line b{color:#fff;font-family:var(--unb);font-weight:600;letter-spacing:-.02em}
.empty-line{padding:16px 20px;border-radius:18px;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(160,200,255,.16);color:var(--muted);font-size:14.5px}
.empty-line b{color:#fff;font-weight:600}
.app-grid>.empty-card,.prop-grid>.empty-card,.trade-layout>.empty-card{grid-column:1/-1;grid-row:1;margin-top:0}
/* The empty state's sub line is centred under its centred title (UXR1-04; the not-live and none-ever states). */
.empty-card .sub{margin-left:auto;margin-right:auto}
.read-failed{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}

/* Past votes: compact rows (two lines on phones); cancelled ones as one dim line at the end */
.past{padding:8px 26px}
.past-row{display:grid;grid-template-columns:minmax(0,1fr) 124px 76px 76px 100px;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.past-row:first-child{border-top:0}
.past-row.head{min-height:0;padding:14px 0 8px;color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.pname-cell{display:flex;min-width:0;flex-direction:column;gap:2px}
.past-row .pname{min-width:0;overflow:hidden;color:#fff;font-size:14.5px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.past-row a.pname:hover{color:var(--ice);text-decoration:underline;text-underline-offset:4px}
.past-row .psub{color:var(--dim);font-size:12.5px}
.past-row>.pmeta{display:none}
.past-cancelled{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:14px 0 16px;border-top:1px solid var(--line);color:var(--dim);font-size:13.5px}
.past-cancelled .tlink{color:var(--muted);font-weight:500}

/* Side: power tiles and How voting works */
/* Sticky under the header while it fits the room there; taller (.tall, set by vote/app.js) it scrolls with the page. */
.side.sticky{position:sticky;top:var(--stick-top)}
.side.sticky.tall{position:static}
.power .metric .num{font-size:clamp(20px,1.8vw,25px)}
.connect-card{padding:22px}
.connect-card p{color:var(--muted);font-size:14.5px;line-height:1.55}
.connect-card p b{color:#fff;font-weight:600}
.connect-card .cta{margin-top:16px}
/* How it works: numbered glass wells joined by a glowing line. */
.how{padding:22px 24px}
.how-steps{display:grid;gap:16px;margin-top:16px;list-style:none;counter-reset:how}
.how-steps li{position:relative;min-height:40px;padding-left:46px;counter-increment:how;color:var(--muted);font-size:14px;line-height:1.55}
.how-steps li::before{content:counter(how);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(98,160,255,.35),rgba(7,16,39,.9) 70%);box-shadow:inset 0 0 0 1px rgba(170,210,255,.45),0 0 16px -4px rgba(98,160,255,.8);color:var(--ice-2);font-family:var(--unb);font-size:12px;font-weight:600}
.how-steps li:not(:last-child)::after{content:"";position:absolute;left:14px;top:34px;bottom:-14px;width:2px;border-radius:2px;background:linear-gradient(rgba(148,195,255,.55),rgba(98,160,255,.06))}
.how-steps b{color:#fff;font-weight:600}

/* The Your vote panel (UX spec §7.4): a brighter glass tile; on a proposal's page it stands on its own. -------------- */
.vote-panel{position:relative;isolation:isolate;padding:22px 22px 22px;border-radius:24px;
  background:radial-gradient(120% 80% at 50% -10%,rgba(98,160,255,.2),rgba(98,160,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)),rgba(14,32,76,.5);
  box-shadow:inset 0 0 0 1px rgba(170,210,255,.3),inset 0 1px 0 rgba(235,244,255,.24),0 30px 60px -32px rgba(61,123,255,.7)}
/* On a proposal's page the panel stands on its own: the denser glass of a card under its bright tint. */
.o-vote>.vote-panel{background:radial-gradient(120% 80% at 50% -10%,rgba(98,160,255,.2),rgba(98,160,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.012)),rgba(12,28,68,.8)}
.app-card>.card-body>.vote-panel,.vp-solo{margin:0}
.vp-eyebrow{color:var(--sky);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.vp-lead{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.5}
.vp-lead b{color:#fff;font-family:var(--unb);font-size:clamp(20px,1.9vw,24px);font-weight:600;letter-spacing:-.03em}
.vp-lead strong{color:#fff;font-weight:600}
/* The pre-sign summary: the full list on desktop; on phones one sentence above the buttons and a toggle. */
.presign-line{display:none;margin-top:10px;color:var(--muted);font-size:14px;line-height:1.55}
.presign-toggle{display:inline;font-size:13.5px}
.presign{margin-top:16px;padding:16px 18px 14px;border-radius:18px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line),inset 0 2px 10px rgba(0,0,0,.3)}
.presign-title{color:var(--ice);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.presign ol{display:grid;gap:10px;margin-top:12px;list-style:none;counter-reset:ps}
.presign li{position:relative;padding-left:32px;color:var(--muted);font-size:14px;line-height:1.5;counter-increment:ps}
.presign li::before{content:counter(ps);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(98,160,255,.16);box-shadow:inset 0 0 0 1px rgba(160,200,255,.35);color:var(--ice-2);font-size:11px;font-weight:700}
.presign li b{color:#fff;font-weight:600}
.presign-foot{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.presign-foot b{color:var(--ice);font-weight:600}
.vote-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.vote-btns.one{grid-template-columns:minmax(0,1fr)}
.vote-btns .cta{margin-top:0;min-height:62px;font-size:15px}
.vote-btns .cta .lbl-sub{display:block;margin-top:3px;font-size:11.5px;font-weight:600;letter-spacing:.01em;opacity:.7;text-transform:none}
.vote-btns .cta .stack{display:flex;flex-direction:column;align-items:center;line-height:1.15}
.vp-note{margin-top:12px;color:var(--dim);font-size:13px;text-align:center}
.vp-note.left{text-align:left}
.vp-note b{color:var(--ice);font-weight:600}
.vp-who{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);color:var(--dim);font-size:13px;line-height:1.55;text-align:center}
.vp-who .tlink{display:inline;font-size:13px}
/* "Or claim your ballots in order to split your votes or trade them.": the action is the link-styled button in the
   sentence (a 44 px target on touch, below), dim while the box is busy or not fresh. */
.vp-claim{line-height:1.55}
.vp-claim .tlink{display:inline;font-size:13px}
.vp-claim .tlink:disabled{color:var(--dim);cursor:not-allowed;text-decoration:none}
/* Look here: ice words, an outlined well and an "!" mark (never amber). */
.vp-warn,.cap-note,.block-note{position:relative;margin-top:12px;padding:11px 14px 11px 40px;border-radius:16px;background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(207,227,255,.42),0 0 26px -14px rgba(98,160,255,.6);color:var(--warn);font-size:13px;line-height:1.5}
.vp-warn::before,.cap-note::before,.block-note::before{content:"";position:absolute;left:14px;top:12px;width:16px;height:16px;background:var(--ice);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.vp-warn b,.cap-note b,.block-note b{color:#fff;font-weight:600}
.vp-info{margin-top:12px;padding:11px 14px;border-radius:16px;background:var(--tile);box-shadow:var(--tile-line);color:var(--muted);font-size:13px;line-height:1.5}
.vp-info b{color:#fff}
.vp-info.row{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.vp-info.row .btn-sm{flex:none}
.vp-buy{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.5}
.vp-reasons{display:grid;gap:8px;margin-top:12px;list-style:none}
.vp-reasons li{padding:11px 14px;border-radius:16px;background:var(--tile);box-shadow:var(--tile-line);color:var(--muted);font-size:13.5px;line-height:1.5}
.vp-reasons li b{color:#fff;font-weight:600}
.vp-reasons .tlink{margin-left:6px}
.vp-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.vp-actions .cta{margin-top:0}
.vp-actions.one{grid-template-columns:minmax(0,1fr)}
.vp-proj{display:grid;gap:0;margin-top:12px}
.vp-proj>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.vp-proj>div:last-child{border-bottom:0}
.vp-proj .v{color:#fff;font-family:var(--unb);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-proj .zero{color:var(--dim)}
/* Votes kept in the wallet (claimed to sell or vote later): shown with their own one-click vote, right in the success panel. */
.kept-block{max-width:520px;margin:20px auto 0;padding:16px 16px;border-radius:20px;background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(207,227,255,.4);text-align:left}
.kept-block p{color:var(--warn);font-size:14px;line-height:1.55}
.kept-block p b{color:#fff;font-weight:600}
.kept-block .vote-btns{margin-top:14px}
.kept-block .links-row{margin-top:8px}
/* Split my votes inside a kept block (My votes): the help line is the panel's quiet note, not the block's look-here tone. */
.kept-block .vp-split{margin-top:14px}
.kept-block .vp-split p.vp-note{color:var(--dim)}
.kept-done{max-width:520px;margin:14px auto 0;text-align:left}

/* "Also this week": YES or NO for every other live proposal of the week (UX §19.2: no "Decide later") */
.also{margin-top:16px;padding:14px 16px;border-radius:18px;background:var(--tile);box-shadow:var(--tile-line)}
.also-title{color:var(--ice);font-size:13px;font-weight:600}
.also-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;margin-top:12px}
.also-row .an{min-width:0;color:#fff;font-size:14px;font-weight:600}
.choice{position:relative;display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:var(--glass-hi),rgba(10,22,52,.55);box-shadow:inset 0 0 0 1px var(--line-2)}
.choice button{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:color .25s ease}
.choice button[aria-pressed="true"]{color:#fff}
.choice button:disabled{opacity:.4;cursor:not-allowed}
.also-help{margin-top:10px;color:var(--dim);font-size:12.5px;line-height:1.5}

/* Success: an ice orb with a check springs in (the page's module adds a coin burst where motion is allowed) */
.success-panel{padding:12px 0 4px;text-align:center}
.success-glyph{position:relative;width:64px;height:64px;margin:4px auto 20px;border-radius:50%;background:var(--ice-btn);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 10px rgba(40,90,200,.45),0 0 0 8px rgba(98,160,255,.12),0 0 44px rgba(98,160,255,.75);animation:success-pop .7s var(--spring) backwards}
.success-glyph::before{content:"";position:absolute;inset:18px;background:#06122E;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.success-glyph::after{content:"";position:absolute;inset:-14px;border-radius:50%;box-shadow:0 0 0 1px rgba(170,210,255,.45);animation:success-ring 1.6s var(--ease) .2s both}
.success-panel h3{font-family:var(--unb);font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.035em}
.success-panel .sline{max-width:54ch;margin:12px auto 0;color:var(--muted);font-size:15px}
.success-panel .sline b{color:#fff;font-weight:600}
.success-panel .sline.record{margin-top:6px;color:var(--dim);font-size:13.5px}
.success-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.success-actions .cta{width:auto;min-width:180px;margin-top:0;padding:0 26px}
.success-panel .vote-btns.inline-vote{max-width:420px;margin:18px auto 0}
@keyframes success-pop{from{opacity:0;transform:scale(.5) rotate(-14deg)}}
@keyframes success-ring{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.5)}}

/* Proposal page ------------------------------------------------------------------------------------------------- */
.prop-top{padding-top:30px;padding-bottom:22px}
.prop-title{margin-top:16px}
.prop-title h1{max-width:22ch;font-family:var(--unb);font-size:clamp(32px,4.2vw,58px);font-weight:700;line-height:1.04;letter-spacing:-.05em}
.prop-title .eyebrow{margin-bottom:16px}
.prop-title .key-terms{margin-top:14px}
.status-row{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:18px}
.status-line{color:var(--muted);font-size:15.5px;line-height:1.55}
.status-line b{color:#fff;font-weight:600}
.status-extra{margin-top:8px;color:var(--muted);font-size:14px}
/* The DOM is in phone order (Your vote, results, terms, next, who, trade, credit) so keyboard and screen-reader
   order match what phones show; desktop places the vote panel and trade card in the right column with grid. */
.prop-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);grid-auto-flow:row dense;align-items:start;gap:18px 22px}
.prop-grid>*{grid-column:1;min-width:0}
/* Right column (desktop): each grid box stretches over its own rows and the card inside it is the sticky one, so a card
   sticks under the header only inside its own rows. Your vote stops above the Trade card instead of sliding under it
   (a sticky grid item is held by the whole grid, and the later Trade card painted over it); the Trade card then sticks
   beside Who can do what. With no Trade card, Your vote spans all five rows. A panel taller than the room under the
   header (.tall, set by vote/proposal/app.js) scrolls with the page, so its buttons are never pinned below the fold. */
.prop-grid>.o-vote{grid-column:2;grid-row:1/span 3;align-self:stretch}
.prop-grid>.o-trade{grid-column:2;grid-row:4/span 2;align-self:stretch}
.prop-grid:has(>.o-trade[hidden])>.o-vote{grid-row:1/span 5}
.prop-grid>.o-vote>.vote-panel,.prop-grid>.o-trade>.app-card{position:sticky;top:var(--stick-top)}
.prop-grid>.o-vote.tall>.vote-panel{position:relative;top:auto}
.sec-card .card-body{padding-top:20px}
.tiles4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.tiles2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.tiles4 .out .v,.tiles2 .out .v{font-size:clamp(15px,1.4vw,19px)}
.terms-rows{display:grid}
.terms-rows>div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--line)}
.terms-rows>div:last-child{border-bottom:0}
.terms-rows dt{color:var(--dim);font-size:13.5px}
.terms-rows dd{min-width:0;color:#fff;font-size:14.5px;overflow-wrap:anywhere}
.terms-rows dd .chk{display:block;margin-top:5px;color:var(--ok);font-size:13px}
.terms-rows dd .chk.warn{color:var(--warn);font-weight:600}
.terms-rows dd a{color:var(--sky)}
.raw{margin-top:14px}
.raw summary{display:inline-flex;align-items:center;min-height:40px;padding-right:6px;color:var(--sky);font-size:13.5px;font-weight:600;cursor:pointer;list-style:none}
.raw summary::-webkit-details-marker{display:none}
.raw summary::after{content:"";width:7px;height:7px;margin-left:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .35s var(--spring)}
.raw[open] summary::after{transform:rotate(225deg) translate(-2px,0)}
.raw pre{margin-top:10px;padding:14px 16px;overflow:auto;border-radius:16px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere}

/* Timeline stepper (the kit's journey steps): done steps are lit and joined by a glowing line, the current one pulses,
   skipped steps use the dim colour (not opacity, so their text keeps AA contrast). */
.steps{list-style:none;margin-top:6px}
.steps li{position:relative;padding:0 0 20px 36px}
.steps li:last-child{padding-bottom:0}
.steps li::before{content:"";position:absolute;left:2px;top:3px;width:16px;height:16px;box-sizing:border-box;border:2px solid rgba(160,200,255,.32);border-radius:50%;background:var(--ink-2)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:9px;top:23px;bottom:2px;width:2px;border-radius:2px;background:rgba(160,200,255,.14)}
.steps li.done::before{border-color:#EAF3FF;background:#CFE3FF;box-shadow:0 0 0 4px rgba(98,160,255,.18),0 0 14px rgba(98,160,255,.9)}
.steps li.done:not(:last-child)::after{background:linear-gradient(#EAF3FF,#62A0FF);box-shadow:0 0 10px rgba(98,160,255,.8)}
.steps li.current::before{border-color:#fff;background:var(--azure);box-shadow:0 0 0 5px rgba(98,160,255,.22),0 0 18px rgba(98,160,255,1);animation:step-pulse 2.4s ease-in-out infinite}
.steps li.failed::before{border-color:rgba(207,227,255,.7);background:transparent;box-shadow:none}
.steps li.failed .st-t{color:var(--warn)}
.steps li.skip::before{border-color:rgba(125,144,182,.45)}
.steps li.skip .st-t{color:var(--dim);font-weight:500;text-decoration:line-through;text-decoration-color:rgba(125,144,182,.7)}
.st-t{display:block;color:#fff;font-size:14.5px;font-weight:600;line-height:1.4}
.steps li.future .st-t{color:var(--muted);font-weight:500}
.st-s{display:block;margin-top:3px;color:var(--dim);font-size:13.5px;line-height:1.5}
.st-s a{color:var(--sky)}
.timing{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
@keyframes step-pulse{50%{box-shadow:0 0 0 8px rgba(98,160,255,.08),0 0 22px rgba(98,160,255,.9)}}

/* Disclosures: one pattern everywhere (Who can do what, My votes history, Trade prices): a 44 px summary with a
   count or a one-line summary and a rotating chevron, native <details> for aria-expanded. */
.disclose>summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none}
.disclose>summary::-webkit-details-marker{display:none}
.disclose .chev{flex:none;width:9px;height:9px;margin-left:auto;margin-right:4px;border-right:1.5px solid var(--sky);border-bottom:1.5px solid var(--sky);transform:rotate(45deg);transition:transform .35s var(--spring)}
.disclose[open]>summary .chev{transform:rotate(-135deg)}
.disc-count{flex:none;color:var(--dim);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none}
.disclose ul.who-list{list-style:none;padding:6px 28px 24px}
.who-list li{position:relative;padding:11px 0 11px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.55}
.who-list li:first-child{border-top:0}
.who-list li::before{content:"";position:absolute;left:3px;top:19px;width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 8px rgba(148,195,255,.8)}
.who-list li b{color:#fff;font-weight:600}
.credit{padding:6px 4px 0;color:var(--dim);font-size:12.5px;line-height:1.55}
.credit a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.trade-mini{padding:22px 24px}
.trade-mini .tm-rows{display:grid;margin-top:12px}
.trade-mini .tm-rows>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px}
.trade-mini .tm-rows b{color:#fff;font-family:var(--unb);font-size:14px;font-weight:600;white-space:nowrap}
.trade-mini .cta{margin-top:16px}

/* Ramp preview (decoration; the values are in text beside it): voting power is the bright line, the early-unlock
   penalty the dashed one (the script draws the lines; their colours are set here). */
.ramp{margin-top:20px;padding:16px 18px 14px;border-radius:20px;background:var(--tile);box-shadow:var(--tile-line)}
.ramp svg{display:block;width:100%;height:120px;overflow:visible}
.ramp svg line{stroke:rgba(160,200,255,.1)}
.ramp svg stop{stop-color:#62A0FF}
.ramp svg path[stroke]:not([stroke-dasharray]){stroke:#CFE3FF;filter:drop-shadow(0 0 5px rgba(98,160,255,.9))}
.ramp svg path[stroke-dasharray]{stroke:#5A6C92}
.ramp .legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;color:var(--muted);font-size:13px}
.ramp .legend span{display:inline-flex;align-items:center;gap:8px}
.ramp .legend i{display:inline-block;width:16px;height:3px;border-radius:2px}
.ramp .legend .lv i{background:#CFE3FF;box-shadow:0 0 8px rgba(98,160,255,.8)}
.ramp .legend .lp i{background:repeating-linear-gradient(90deg,#7D90B6 0 4px,transparent 4px 7px)}
.ramp .legend b{color:#fff;font-weight:600}
.ramp-cap{margin-top:10px;color:var(--dim);font-size:13px;line-height:1.55}
.guidance{margin-top:18px;padding:13px 16px;border-radius:18px;background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(160,200,255,.32);color:var(--muted);font-size:14px;line-height:1.5}
.guidance b{color:#fff;font-weight:600}
.guidance .sub{display:block;margin-top:5px;color:var(--dim);font-size:13px}
.guidance .sub a{color:var(--sky)}
.outputs.four{grid-template-columns:repeat(2,minmax(0,1fr))}

/* /stake position extras */
.badges{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.pos-note.held{color:var(--ice)}
.pos-note.held b{color:#fff}
/* A matured position waits for a decision (renew or unlock): it stands out with a lit rim and a glow. */
.pos.decide{background:radial-gradient(120% 90% at 50% -20%,rgba(98,160,255,.22),rgba(98,160,255,0) 60%),var(--tile-hot);box-shadow:inset 0 0 0 1px rgba(190,220,255,.5),inset 0 1px 0 rgba(235,244,255,.25),0 0 0 4px rgba(98,160,255,.08),0 30px 60px -34px rgba(61,123,255,.9)}
.renew-remind{position:relative;margin-top:14px;padding:11px 14px 11px 40px;border-radius:16px;background:rgba(98,160,255,.1);box-shadow:inset 0 0 0 1px rgba(170,210,255,.38);color:var(--ice);font-size:13.5px;line-height:1.5}
.renew-remind::before{content:"";position:absolute;left:14px;top:13px;width:16px;height:16px;background:var(--sky);-webkit-mask:var(--i-check) center/contain no-repeat;mask:var(--i-check) center/contain no-repeat}
.renew-remind b{color:#fff;font-weight:600}
.renew-remind .lt{color:var(--muted)}
.idle-note{margin-top:12px;color:var(--muted);font-size:13.5px;line-height:1.5}
.chooser{margin-top:18px;padding:20px 22px;border-radius:22px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 2px 12px rgba(0,0,0,.3)}
.chooser-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.chooser-head h4{font-family:var(--unb);font-size:15px;font-weight:600;letter-spacing:-.01em}
.chooser-head span{color:var(--dim);font-size:13px}
.chooser-ctl{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.chooser .seg>button{min-height:40px}
.chooser .weeks-num-wrap{gap:10px}
.chooser input[type=range]{margin-top:12px}
.kept-bar{display:flex;height:14px;margin-top:16px;overflow:hidden;border-radius:999px;background:rgba(160,200,255,.12);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
.kept-bar .kept{background:linear-gradient(90deg,#3D7BFF,#CFE3FF);box-shadow:0 0 14px rgba(98,160,255,.6)}
.kept-bar .newp{background:repeating-linear-gradient(135deg,rgba(148,195,255,.6) 0 5px,rgba(148,195,255,.16) 5px 10px)}
.kept-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;color:var(--muted);font-size:13px}
.kept-legend b{color:#fff;font-weight:600}
.kept-legend .k::before,.kept-legend .n::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:3px;vertical-align:-1px}
.kept-legend .k::before{background:#CFE3FF;box-shadow:0 0 8px rgba(98,160,255,.7)}
.kept-legend .n::before{background:repeating-linear-gradient(135deg,rgba(148,195,255,.75) 0 3px,rgba(148,195,255,.2) 3px 6px)}
.preview-rows{display:grid;margin-top:16px}
.preview-rows>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.preview-rows>div:last-child{border-bottom:0}
.preview-rows .ck{color:var(--muted)}
.preview-rows .cv{color:#fff;font-family:var(--unb);font-size:13.5px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.preview-rows .cv small{display:block;margin-top:3px;color:var(--dim);font-family:var(--sgk);font-size:12px;font-weight:500}
.preview-rows .cv small.warnc{color:var(--warn)}
.chooser-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.chooser-actions .cta{width:auto;flex:1 1 260px;margin-top:0}
.live{display:inline-flex;align-items:center;gap:8px}
.live::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice);animation:chip-pulse 2.4s ease-in-out infinite}
.term-hist{margin-top:8px;color:var(--dim);font-size:12.5px}

/* /vote/claim ------------------------------------------------------------------------------------------------ */
.claim-body{display:flex;flex-direction:column}
.claim-body>#tiles{order:-1;margin-bottom:0}
.claim-body>#week{margin-top:22px}
.claim-box+div[role=table]{margin-top:24px}
.tiles-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.week-row{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,.8fr)) 150px;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--line);font-size:14px}
.week-row.no-act{grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,.8fr))}
.week-row.head{padding:0 0 10px;border-top:0;color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.week-row .wn{min-width:0;color:#fff;font-weight:600}
.week-row .wn small{display:block;color:var(--dim);font-size:12px;font-weight:500}
.week-row .wv{color:#fff;font-family:var(--unb);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.week-row .wv.no{color:var(--dim);font-family:inherit;font-size:13.5px;font-weight:400}
.week-row .k{display:none}
.week-row .wact{display:flex;justify-content:flex-end;gap:6px}
.week-row .wact .btn-sm{padding:0 16px;white-space:nowrap}
/* This week: the vote leads (left on desktop, first on phones); claiming to the wallet is the quieter option. */
.claim-box{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-top:20px;align-items:start}
.claim-alt{padding:18px 18px;border-radius:22px;background:rgba(10,22,52,.3);box-shadow:inset 0 0 0 1px rgba(160,200,255,.2)}
.claim-alt h3{color:var(--ice);font-size:14px;font-weight:600}
.claim-alt p{margin-top:8px;color:var(--muted);font-size:13.5px;line-height:1.55}
.claim-alt p b{color:#fff;font-weight:600}
.claim-alt .cta{margin-top:16px;min-height:50px;font-size:14px}
.claim-alt .cta-hint{margin-top:10px}
.record-line{margin-top:4px;padding:0 0 14px;color:var(--muted);font-size:14px}
.record-line b{color:#fff;font-weight:600}
.ptable-wrap{overflow:visible}
.ptable{width:100%;border-collapse:collapse;font-size:14px}
.ptable th{padding:0 12px 12px 0;color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.12em;text-align:left;text-transform:uppercase;vertical-align:bottom}
.ptable td{padding:15px 12px 15px 0;border-top:1px solid var(--line);color:var(--muted);vertical-align:middle;font-variant-numeric:tabular-nums}
.ptable td.n{color:#fff;font-family:var(--unb);font-size:13.5px;font-weight:600;white-space:nowrap}
.ptable td.pid{color:var(--ice);font-family:var(--unb);font-size:12.5px;font-weight:600}
.ptable .tip{border-bottom:1px dotted rgba(179,196,226,.6);cursor:help}
.ptable tbody tr{transition:background-color .2s ease}
.ptable tbody tr:hover{background:rgba(98,160,255,.05)}
.hist-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto;gap:8px 16px;align-items:center;padding:15px 0;border-top:1px solid var(--line);font-size:14px}
.hist-row:first-of-type{border-top:0}
.hist-row .hn{color:#fff;font-weight:600}
.hist-row .hn small{display:block;color:var(--dim);font-size:12px;font-weight:500}
.hist-row .hs{color:var(--muted)}
.hist-row .hs b{color:#fff;font-weight:600}
.app-card.disclose>summary.card-head{padding-bottom:22px}

/* /vote/trade ------------------------------------------------------------------------------------------------ */
/* DOM order: card, prices, my orders, rules (the phone order); desktop places prices and rules on the right. */
.trade-layout{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);grid-template-areas:"card book" "card notice" "orders notice";grid-template-rows:auto auto 1fr;align-items:start;gap:22px}
.trade-layout>.trade-card{grid-area:card}
.trade-layout>.book{grid-area:book}
.trade-layout>.orders{grid-area:orders}
.trade-layout>.notice{grid-area:notice}
.trade-card .card-body{display:flex;flex-direction:column}
.side-toggle{display:flex;width:100%}
.side-toggle>button{flex:1 1 0;justify-content:center;min-height:44px;font-size:14px}
/* One proposal: plain text (name + countdown); a real select only when 2+ proposals trade. */
.prop-select{display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;color:#fff}
.prop-select .ps-name{min-width:0;font-family:var(--unb);font-size:16px;font-weight:600;letter-spacing:-.02em}
.prop-select .ps-cd{flex:none;color:var(--dim);font-size:13px}
.amount-row .unit-txt{display:inline-flex;flex:none;align-items:center;padding:0 6px 0 2px;color:var(--dim);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.quote{margin-top:12px;color:var(--muted);font-size:13.5px}
.quote b{color:#fff;font-weight:600}
.recv-box{display:flex;min-height:60px;align-items:center;gap:10px;padding:12px 18px;border-radius:20px;background:var(--tile);box-shadow:var(--tile-line)}
.recv-box .rv{min-width:0;color:#fff;font-family:var(--unb);font-size:clamp(18px,2vw,24px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.recv-tok{display:inline-flex;flex:none;align-items:center;gap:7px;margin-left:auto;color:var(--muted);font-size:12.5px;font-weight:600;letter-spacing:.06em}
.cap-note .tlink{margin-left:4px}
.retry{position:relative;margin-top:22px;padding:18px 20px 18px 50px;border-radius:22px;background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(207,227,255,.45),0 0 30px -14px rgba(98,160,255,.7)}
.retry::before{content:"";position:absolute;left:20px;top:20px;width:18px;height:18px;background:var(--ice);-webkit-mask:var(--i-alert) center/contain no-repeat;mask:var(--i-alert) center/contain no-repeat}
.retry p{color:var(--warn);font-size:14.5px;line-height:1.5}
.retry p b{color:#fff}
.retry .cta{margin-top:16px}
.retry .row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.retry .row .cta{flex:1 1 260px;width:auto}
.make-form{margin-top:20px;padding:20px 20px 18px;border-radius:22px;background:var(--tile);box-shadow:var(--tile-line)}
.make-form-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.make-form-head h3{font-family:var(--unb);font-size:16px;font-weight:600;letter-spacing:-.02em}
.two-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.two-fields .amount-input{width:100%;font-size:clamp(17px,1.7vw,21px)}
.two-fields .amount-row{min-height:60px;padding:6px 6px 6px 16px;border-radius:18px}
.two-fields .amount-row .unit-txt{padding-right:10px}
.two-fields .max-btn{padding:0 14px}
/* Trade balances (27 Oct 2026) ------------------------------------------------------------------------------------ */
/* Each label row carries the wallet's balance on its right ("Balance: 2,598.55 votes", "Balance: 82,500.00 HANS") and
   wraps when it doesn't fit (1180 and 700 px, a long balance): the two boxes stay level whichever label wraps. */
.two-fields{align-items:end}
/* ------------------------------------------------------------------------------------------- end trade balances */
.hold-note{margin-top:12px;color:var(--muted);font-size:13.5px;line-height:1.55}
.hold-note b{color:#fff;font-weight:600}
.claim-to-sell{padding:18px 20px;border-radius:22px;background:var(--tile);box-shadow:var(--tile-line)}
.claim-to-sell p{color:var(--muted);font-size:14.5px;line-height:1.55}
.claim-to-sell p b{color:#fff}
.claim-to-sell .hold-note{font-size:13px}
.claim-to-sell .cta{margin-top:16px}
.trade-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-top:10px}
.book{padding:22px 24px}
.book h3{display:flex;justify-content:space-between;align-items:baseline;gap:10px;color:var(--ice);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.book h3 .dim{letter-spacing:.02em;text-transform:none;font-weight:500}
.book h3+.book-list{margin-top:10px}
.book-list+h3,.book .other{margin-top:20px}
.book-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:12px;min-height:40px;padding:6px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.book-row.head{min-height:0;padding:0 0 8px;color:var(--dim);font-size:11px;font-weight:600;letter-spacing:.08em}
.book-row .p{color:#fff;font-family:var(--unb);font-size:13.5px;font-weight:600;text-align:right}
/* Header cells: both at the label size (.book-row .q set "Votes" at 13.5 px beside an 11 px "Price"). */
.book-row.head .p,.book-row.head .q{font-family:inherit;font-size:11px}
.book-row .q{color:var(--muted);font-size:13.5px;text-align:right}
.book-row .tg{min-width:44px;text-align:right}
.book-row.mine .p,.book-row.mine .q{color:var(--ice)}
.mini-tag{display:inline-block;padding:2px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--muted);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mini-tag.yours{box-shadow:inset 0 0 0 1px rgba(207,227,255,.55);color:var(--ice-2);background:rgba(98,160,255,.12)}
.book .links-row{margin-top:14px}
.book>.disclose>summary{min-height:28px;color:var(--ice);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.book>.disclose>summary .disc-count{font-size:12.5px}
/* Both sides of the book, stacked in a fixed order (Votes for sale cheapest first, then Offers to buy highest first):
   the side the visitor trades against is lit (ice title with the live dot, the .group-title recipe), the other's title
   is muted. Each section's h3 carries its title and, at the right, its best price. */
.book-sec+.book-sec{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.book-sec .book-row:last-child{border-bottom:0}
.book-sec h3{justify-content:flex-start;color:var(--muted)}
.book-sec h3 .dim{margin-left:auto}
.book-sec.is-side h3{color:var(--ice)}
.book-sec.is-side h3::before{content:"";flex:none;align-self:center;width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live)}
.orders-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.order{display:grid;grid-template-columns:100px minmax(0,1fr) auto auto;align-items:center;gap:8px 16px;padding:15px 0;border-top:1px solid var(--line)}
.order:first-child{border-top:0}
.order .ok{color:var(--ice);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.order .ol{min-width:0;color:var(--muted);font-size:14px;line-height:1.5}
.order .ol b{color:#fff;font-weight:600}
.order .ol .warn-line{display:block;margin-top:5px;color:var(--warn);font-size:13px}
.order .ol .warn-line .tlink{color:var(--warn);text-decoration:underline;text-underline-offset:3px}
.order-empty{padding:24px 0 10px;color:var(--muted);font-size:14px;text-align:center}

/* Toast (same as the money pages; the page script fills it) */
#toast .msg b{color:#fff}

/* Coarse pointers (tablets, phones in desktop mode): every header control and every standalone control is a 44 px
   target whatever the width (UX §1.4). */
@media (pointer:coarse){
  .brand{min-width:44px;min-height:44px;justify-content:center}
  .pfbtn{width:44px;height:44px}
  .app-nav a{min-height:44px}
  .chip,.app-head .btn-solid{min-height:44px}
  .hv-head .pfbtn{width:48px;height:48px}
  .hv-head .chip,.hv-head .btn-solid{min-height:48px}
  .acct-more{width:44px;height:44px}
  #toast .x{min-width:44px;min-height:44px}
  .seg>a,.seg>button,.choice button,.side-toggle>button,.back-link{min-height:44px}
  .disclose>summary,.raw summary,.book>.disclose>summary{min-height:44px}
  /* Above 660 px too (tablets, phones in landscape; UXR1-02): the targets the phone blocks below and hans-app.css size,
     without their phone layout. */
  .tlink{min-height:44px;min-width:44px}
  .presign-toggle,.vp-who .tlink,.vp-claim .tlink{min-height:0;min-width:0;padding:14px 0;margin:-14px 0}
  /* "claim your ballots" sits in the first line of its sentence: positioned, its padded target answers over the
     sentence's next line (drawn after it, that line took the bottom 15 px of the target); its line sits 16 px under Vote
     YES / Vote NO, so the 14 px of padding stays clear of their bottom edge (12 px let it reach 2 px into them). */
  .vp-claim{margin-top:16px}
  .vp-claim .tlink{position:relative}
  .btn-sm,.weeks-num,input[type=range]{min-height:44px}
  .max-btn{min-width:48px}
  .past-row .pname{display:inline-flex;align-items:center;min-height:44px}
  .range-wrap{padding-bottom:50px}
  .ticks{height:44px}
  .tick{min-width:44px;min-height:44px}
}

/* Responsive ------------------------------------------------------------------------------------------------ */
@media(max-width:1060px){
  .side.sticky{position:static}
  .trade-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"card card" "book notice" "orders orders";grid-template-rows:auto}
  .tiles4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* One column: Your vote comes right after the title block (UX spec §17), which is the DOM order. */
  .prop-grid{grid-template-columns:minmax(0,1fr)}
  .prop-grid>*,.prop-grid>.o-vote,.prop-grid>.o-trade{grid-column:1;grid-row:auto;position:static}
  /* (the desktop :has() rule is more specific than the line above, so it is undone here too) */
  .prop-grid:has(>.o-trade[hidden])>.o-vote{grid-row:auto}
  .prop-grid>.o-vote>.vote-panel,.prop-grid>.o-trade>.app-card{position:relative;top:auto}
  .week-row{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,.8fr)) 150px}
  .week-row.no-act{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,.8fr))}
  .week-row>.c-listed{display:none}
}
@media(max-width:820px){
  .trade-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "book" "orders" "notice"}
  .claim-box{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:660px){
  #toast .x{min-width:44px;min-height:44px}
  .app-hero.compact{padding:26px 0 18px}
  .app-hero.compact h1{font-size:clamp(34px,10vw,44px)}
  .app-hero.compact .hero-sub{font-size:15px;margin-top:12px}
  .app-hero.compact .eyebrow{margin-bottom:12px}
  .rehearsal{font-size:12.5px}
  .sub-long{display:none}
  .sub-short{display:inline}
  .tool-hero .hero-sub{display:none}
  .subnav-row{flex-wrap:nowrap;gap:10px;margin-bottom:16px}
  .subnav-row.stack{flex-wrap:wrap}
  .sub-nav{display:flex;flex:1 1 auto;min-width:0}
  .subnav-row.stack .sub-nav{width:100%}
  .sub-nav>a{flex:1 1 0;min-height:44px;padding:0 6px;font-size:13px}
  .fresh{padding:6px 10px}
  .fresh .fresh-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tlink{min-height:44px;min-width:44px}
  .presign-toggle,.vp-who .tlink,.vp-claim .tlink{min-height:0;min-width:0;padding:14px 0;margin:-14px 0}
  .vp-claim{margin-top:16px}
  .vp-claim .tlink{position:relative}
  .back-link{min-height:44px}
  .links-row{gap:0 20px;margin-top:4px}
  .group-title{margin:24px 0 12px}
  /* The /vote card: countdown, key terms, the vote panel, then the bars (the DOM order). */
  .prop-body{gap:16px}
  .prop-body>*{order:0!important}
  .vote-panel{padding:18px 16px 18px;border-radius:22px}
  .vp-lead b{font-size:20px}
  /* On phones the one-sentence summary carries the amount, so the ready panel drops its duplicate lead. */
  .vote-panel.ready>.vp-lead{display:none}
  .presign-line{display:block;margin-top:8px;font-size:14px}
  .prop-card .card-head .card-icon{display:none}
  .prop-card .card-head{padding-top:18px}
  .vote-hero .hero-sub{font-size:14.5px;line-height:1.55}
  .vote-panel:not(.ps-open) .presign{display:none}
  .presign{padding:14px 14px 12px}
  .vote-btns{gap:8px}
  .vote-btns .cta{min-height:60px;padding:0 10px}
  .vp-actions{grid-template-columns:minmax(0,1fr)}
  .vp-reasons .tlink{display:flex;width:fit-content;margin:2px 0 -10px}
  .also-row{grid-template-columns:minmax(0,1fr)}
  .choice{display:flex}
  .choice button{flex:1 1 0;min-height:44px;padding:0 6px}
  .past{padding:2px 18px}
  .past-row.head{display:none}
  .past-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name chip" "meta mint";gap:2px 10px;padding:12px 0;border-top:1px solid var(--line)}
  .past-row:nth-child(2){border-top:0}
  .past-row>.pname-cell{grid-area:name}
  .past-row .pname{display:flex;align-items:flex-end;min-height:44px;white-space:normal}
  .past-row .psub{margin-top:2px}
  .past-row>.pchip{grid-area:chip;justify-self:end}
  .past-row>.pmeta{grid-area:meta;display:block;color:var(--dim);font-size:12.5px}
  .past-row>.pmint{grid-area:mint;justify-self:end}
  .past-row>.pt,.past-row>.py{display:none}
  .power .metric,#totals .metric{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px}
  .power .metric .num,#totals .metric .num{margin:0;font-size:17px;text-align:right}
  .power .metric .sub,#totals .metric .sub{display:none}
  .power .metric .label,#totals .metric .label{min-width:0}
  #totals{gap:8px}
  .side .how{order:2}
  .prop-top{padding-top:14px;padding-bottom:14px}
  .prop-title{margin-top:10px}
  .prop-title h1{font-size:clamp(28px,8.6vw,36px)}
  .status-row{margin-top:12px}
  .status-line{font-size:15px}
  .tiles4,.tiles2{grid-template-columns:minmax(0,1fr);gap:8px}
  .tiles4 .out,.tiles2 .out{flex-wrap:wrap}
  .tiles4 .out .v,.tiles2 .out .v{min-width:0;font-size:16px}
  .terms-rows>div{grid-template-columns:minmax(0,1fr);gap:3px;padding:12px 0}
  .raw summary{min-height:44px}
  .disclose ul.who-list{padding:4px 18px 18px}
  .disclose>summary{min-height:44px}
  .sec-card .card-body{padding-top:16px}
  .trade-mini,.book,.how{padding:18px}
  .ramp svg{height:88px}
  .outputs.four{grid-template-columns:minmax(0,1fr)}
  /* The renew chooser sits flat inside its position card on phones (no third nested box). */
  .chooser{margin-top:16px;padding:16px 0 0;border-radius:0;background:none;box-shadow:none;border-top:1px solid var(--line)}
  .chooser-ctl .seg{display:flex;width:100%}
  .chooser-ctl .seg>button{flex:1 1 0;justify-content:center;min-height:44px;padding:0 6px}
  .chooser-ctl .weeks-num-wrap{width:100%;justify-content:space-between}
  .chooser .lw{display:none}
  .preview-rows>div{flex-direction:column;gap:2px}
  .preview-rows .cv{text-align:left}
  .chooser-actions .cta{flex:1 1 100%}
  .chooser-actions .btn-sm{flex:1 1 100%}
  .pos-actions .btn-sm{flex:1 1 calc(50% - 5px)}
  .tiles-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .claim-body>#tiles{order:0;margin-top:16px}
  .claim-body>#week{margin-top:0}
  .claim-box{margin-top:16px}
  /* /vote on phones: the "Open now" title is read by screen readers but not shown; the card's Voting chip says it. */
  .main-col>.group-title:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tiles-row .metric{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 16px}
  .tiles-row .metric .num{margin:0;font-size:17px;text-align:right}
  .tiles-row .metric .sub{display:none}
  .week-row.head{display:none}
  .week-row,.week-row.no-act{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:15px 0}
  .week-row>.wn{grid-column:1/-1;margin-bottom:4px}
  .week-row .k{display:block;color:var(--dim);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
  .week-row>.c-listed{display:block}
  .week-row>.wact{grid-column:1/-1;margin-top:8px}
  .week-row>.wact .btn-sm{flex:1 1 0}
  /* Positions as cards: two columns, labels that wrap (the short phone labels come from data-label). */
  .ptable thead{display:none}
  .ptable,.ptable tbody{display:block;width:100%}
  .ptable tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;margin-top:12px;padding:16px;border-radius:20px;background:var(--tile);box-shadow:var(--tile-line)}
  .ptable tr:first-child{margin-top:0}
  .ptable tbody tr:hover{background:var(--tile)}
  .ptable td{display:block;padding:0;border:0;min-width:0}
  .ptable td::before{content:attr(data-label);display:block;margin-bottom:4px;color:var(--dim);font-family:var(--sgk);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere}
  .ptable td.n{font-size:13.5px;white-space:normal;overflow-wrap:anywhere}
  .ptable td.pid{order:-2;grid-column:1;align-self:center}
  .ptable td.pid::before{display:none}
  .ptable td.wide{grid-column:1/-1}
  .ptable td.empty{display:none}
  .ptable td.wk{order:-1;grid-column:2;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:0 8px;color:var(--muted);text-align:right}
  .ptable td.wk::before{display:none}
  .hist-row{grid-template-columns:minmax(0,1fr)}
  .trade-layout{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .trade-card>.card-head{display:none}
  .trade-card .card-body{padding-top:18px}
  .side-toggle>button{min-height:44px}
  .amount-row .unit-txt{display:none}
  .max-btn{min-width:48px}
  .book>.disclose>summary{min-height:44px}
  .two-fields{grid-template-columns:minmax(0,1fr)}
  .order{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .order .ok{grid-column:1}
  .order>.badge-st{grid-column:2;grid-row:1;justify-self:end}
  .order .ol{grid-column:1/-1}
  .order .oa{grid-column:1/-1}
  .order .oa .btn-sm{width:100%}
  .retry{padding:16px 16px 16px 46px}
  .retry .row .cta,.retry .row .btn-sm{flex:1 1 100%}
  .success-actions .cta{width:100%}
  .claim-alt .cta{min-height:50px}
}
/* The narrowest phones: a position's two actions stack, so "Unlock early" keeps its words on one line. */
@media(max-width:380px){.pos-actions .btn-sm{flex:1 1 100%}}
@media(max-width:359px){.fresh{display:none}}
/* Early-unlock rows carry longer values in v3 (amount + share): key over value on narrow phones. */
@media(max-width:420px){.confirm-rows>div{flex-direction:column;gap:2px}.confirm-rows .cv{white-space:normal}}
@media(prefers-reduced-motion:reduce){
  .meter-fill,.success-glyph,.success-glyph::after{animation:none}
  .badge-st.voting::before,.badge-st.open::before,.badge-st.earning::before,.live::before,.fresh.busy::before,.steps li.current::before{animation:none}
}

/* ---- My votes: Split my votes (WI-3) ---- */
/* The proposal page's Split my votes field in My votes' own wallet blocks (vote/claim/app.js walletButtons). The claim
   success panel (#claimed) centres its text: there the field sits over the inline buttons, as wide as they are, its label
   and lines left-aligned as in the panel. */
.claim-body .success-panel .vp-split{max-width:420px;margin:18px auto 0;text-align:left}
.claim-body .success-panel .vp-split+.vote-btns.inline-vote{margin-top:14px}
/* A kept block sets every line in its look-here tone at 14 px (.kept-block p): the field's help and refusal lines keep the
   panel's 13 px (the help's quiet colour: .kept-block .vp-split p.vp-note above). */
.claim-body .kept-block .vp-split p{font-size:13px;line-height:1.5}
/* The last day's warning (.vp-warn[data-wallet]) spans the whole card: under its text the field (with its help and
   refusal lines) and the vote buttons keep a kept block's 520 px column instead of running edge to edge. */
.claim-body #weekMsg .vp-warn[data-wallet] :is(.vp-split,.vote-btns){max-width:520px}
/* ---- end My votes: Split my votes (WI-3) ---- */