/* Ported from reference/prototype/wishlist.html (version 7). Keep component styles scoped: see docs/06, "Bugs found and fixed". */
/* Layout: one phone-first column. The month's round sits on top as the only "action" surface; items below are plain rows ranked by share, each carrying its own vote trail. */
:root{
  --bg:#EDF2F0; --surface:#FFFFFF; --sunk:#E2EAE7; --ink:#12211F; --muted:#5C6E6A; --line:#CFDBD7;
  --accent:#0B6E6E; --accent-ink:#FFFFFF; --pip:#D99A06; --pip-off:#D5DFDB; --good:#2A7F4F; --good-bg:#DDF0E4; --warn:#A8452C;
  --display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Spline Sans Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0E1716; --surface:#162221; --sunk:#1D2C2A; --ink:#E4EEEB; --muted:#93A7A2; --line:#2A3B38;
  --accent:#4FC4BD; --accent-ink:#06201F; --pip:#F0B63A; --pip-off:#2C3D3A; --good:#6FD39A; --good-bg:#17352A; --warn:#F08A6C; color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0E1716; --surface:#162221; --sunk:#1D2C2A; --ink:#E4EEEB; --muted:#93A7A2; --line:#2A3B38;
  --accent:#4FC4BD; --accent-ink:#06201F; --pip:#F0B63A; --pip-off:#2C3D3A; --good:#6FD39A; --good-bg:#17352A; --warn:#F08A6C; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;padding-block:20px 56px;padding-inline:16px}
.wrap{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.1}
h1{font-size:26px;font-weight:700;letter-spacing:-.01em}
h2{font-size:21px;font-weight:700}
h3{font-size:17px;font-weight:500}
p{margin:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.small{font-size:13px}
.label{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
a{color:var(--accent)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.top{display:flex;flex-direction:column;gap:12px}
.tabs{display:flex;flex-wrap:wrap;gap:8px}
.tab{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 14px;cursor:pointer;font-weight:500}
.tab[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab.new{border-style:dashed;color:var(--muted)}
.tab .who{font-size:11px;opacity:.7;margin-left:6px}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 14px;cursor:pointer;font-weight:600}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.quiet{background:transparent;font-weight:500;padding:6px 10px;font-size:13px}
.btn.danger{color:var(--warn);border-color:var(--warn)}
.btn:disabled{opacity:.45;cursor:not-allowed}

.round{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:14px}
.round-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.pips{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.pip{width:13px;height:13px;border-radius:50%;background:var(--pip-off)}
.pip.on{background:var(--pip)}
.cash{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.money{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;background:var(--bg);padding-left:10px}
.money input{border:0;background:transparent;padding:9px 10px 9px 4px;width:130px;font-family:var(--mono);outline:none}
.money:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.voters{display:flex;flex-wrap:wrap;gap:8px}
.voter{display:flex;align-items:center;gap:6px;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:3px 10px 3px 3px}
.voter img{width:20px;height:20px;border-radius:50%}
.voter.done{border-color:var(--good);color:var(--good)}

.items{display:flex;flex-direction:column}
.item{padding:16px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.item:first-child{border-top:0}
.item-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.item-head>div:first-child{min-width:0}
.item-name{overflow-wrap:anywhere}
.share{text-align:right;flex:none}
.share .pct{font-family:var(--mono);font-size:22px;font-weight:500;line-height:1}
.delta{font-size:12px;font-family:var(--mono)}
.delta.up{color:var(--good)} .delta.down{color:var(--warn)}
.bar{height:10px;background:var(--sunk);border-radius:5px;overflow:hidden;display:flex}
.bar i{display:block;height:100%;background:var(--accent)}
.bar i.next{background:var(--pip)}
.item-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.trail{display:flex;gap:3px;align-items:flex-end;height:28px}
.trail span{width:14px;background:var(--sunk);border-radius:2px;display:flex;align-items:flex-end;height:100%}
.trail span i{display:block;width:100%;background:var(--pip);border-radius:2px;opacity:.55}
.trail span.cur i{opacity:1}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:18px;line-height:1}
.stepper button:disabled{opacity:.35;cursor:not-allowed}
.stepper .n{min-width:26px;text-align:center;font-family:var(--mono);font-size:17px}
.ready{background:var(--good-bg);color:var(--good);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:6px}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;border-top:1px solid var(--line);padding-top:16px}
.facts .v{font-family:var(--mono);font-size:18px}
details{border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font-weight:600}
.hist{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.hist-row{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.linklike{border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
select{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:7px 8px;max-width:100%}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;margin-bottom:18px;background:var(--surface)}
.seg button{border:0;background:transparent;border-radius:999px;padding:6px 16px;cursor:pointer;font-weight:600;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.dash{display:flex;flex-direction:column;gap:26px}
.dash section{display:flex;flex-direction:column;gap:10px}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px}
.hero-num{font-family:var(--display);font-variant-numeric:tabular-nums;font-size:clamp(40px,13vw,68px);font-weight:700;line-height:1;letter-spacing:-.02em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);border-radius:999px;padding:4px 11px;font-size:13px}
.chip.up{background:var(--good-bg);border-color:transparent;color:var(--ink)}
.bar.big{height:16px;border-radius:8px;margin-top:6px}
.ring .trk{stroke:var(--sunk)} .ring .arc{stroke:var(--accent)} .ring.ready .arc{stroke:var(--good)}
@keyframes ringfill{from{stroke-dashoffset:var(--c)}}
@keyframes grow{from{transform:scaleY(.05)}}
@keyframes widen{from{transform:scaleX(.02)}}
@media (prefers-reduced-motion: no-preference){
  .anim .ring .arc{animation:ringfill 1s cubic-bezier(.2,.8,.2,1)}
  .anim .mcol i{animation:grow .7s ease-out;transform-origin:bottom}
  .anim .bar i{animation:widen .8s ease-out;transform-origin:left}
}
.rw{position:relative;display:grid;place-items:center;flex:none}
.rw>span{position:absolute;font-size:15px;font-weight:500}
.rw>span.big{font-size:26px}
.goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 8px}
.goal,.nextup,.pot,.row{border:0;background:none;padding:0;color:inherit;cursor:pointer;font:inherit}
.goal{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.goal-name{font-weight:600;font-size:13px;overflow-wrap:anywhere;line-height:1.2}
.goal.ready .rw>span{color:var(--good);font-size:24px}
.nextup{display:flex;align-items:center;gap:18px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;width:100%}
.next-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.next-name{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.1;overflow-wrap:anywhere}
.pots{display:flex;flex-wrap:wrap;gap:10px}
.pot{display:flex;flex-direction:column;gap:2px;text-align:left;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surface)}
.pot-amt{font-size:20px}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:minmax(0,34%) 1fr auto;gap:10px;align-items:center;text-align:left}
.row-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.months{display:flex;gap:6px;align-items:flex-end;height:150px}
.mcol{flex:1;max-width:56px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;min-width:0}
.mcol i{display:block;width:100%;max-width:24px;background:var(--accent);opacity:.45;border-radius:4px 4px 0 0}
.mcol.cur i,.mcol:last-child i{opacity:1}

/* Fluid layout: sections wrap into as many columns as the width allows; sizes scale with the space they are given. */
body{font-size:clamp(15px,.35vw + 11.5px,18px);padding-inline:clamp(16px,3vw,56px)}
.wrap{max-width:1600px}
.top{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 36px}
.top>div{flex:1 1 280px;max-width:60ch;min-width:0}
h1{font-size:clamp(26px,1.2vw + 20px,36px)}
h2{font-size:clamp(21px,.5vw + 18px,27px)}

.dash{display:flex;flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:clamp(24px,2.4vw,36px) clamp(20px,3vw,48px)}
.dash>section{flex:1 1 100%;min-width:0}
.dash>.o1{flex:1 1 340px;container-type:inline-size;padding:clamp(20px,2vw,30px)}
.dash>.o3{flex:1 1 340px;container-type:inline-size}
.dash>.o5{flex:1 1 220px}
.dash>.o6{flex:2 1 380px}
.dash>.o7{flex:1 1 300px}
.hero-num{font-size:min(clamp(48px,8vw,116px),calc(100cqi / (var(--n,6) * .62)));overflow-wrap:anywhere}
.chip{font-size:clamp(13px,.3vw + 10px,15px)}
.bar.big{height:clamp(16px,1.4vw,22px);border-radius:11px}
.goals{grid-template-columns:repeat(auto-fill,minmax(clamp(104px,10vw,150px),1fr));gap:clamp(14px,1.8vw,26px) 10px}
.goal{width:100%}
.goal .ring{width:clamp(84px,8vw,122px);height:auto}
.goal .rw>span{font-size:clamp(15px,1.5vw,21px)}
.goal.ready .rw>span{font-size:clamp(24px,2.3vw,32px)}
.goal-name{font-size:clamp(13px,.25vw + 11px,15px);width:100%;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.goal>.small{max-width:100%;overflow-wrap:anywhere}
.nextup{flex:1;gap:clamp(16px,5cqi,30px);padding:clamp(16px,4cqi,26px)}
.nextup .ring{width:clamp(110px,32cqi,184px);height:auto}
.nextup .rw>span.big{font-size:clamp(24px,7cqi,38px)}
.next-name{font-size:clamp(20px,6cqi,34px)}
.next-txt{font-size:clamp(15px,3.6cqi,19px)}
@container (max-width:330px){.nextup{flex-direction:column;align-items:flex-start}}
.pot{padding:clamp(10px,1vw,15px) clamp(14px,1.3vw,20px);max-width:100%;min-width:0;overflow-wrap:anywhere}
.pot-amt{font-size:clamp(20px,1.9vw,28px)}
.row-name{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}
.months{height:clamp(150px,16vw,220px)}
.mcol i{max-width:clamp(24px,2.4vw,36px)}
.mcol span{white-space:nowrap}
.flow{display:block;width:100%;height:auto}
.flow .lk{fill:var(--accent);opacity:.24}
.flow .lk:hover{opacity:.5}
.flow .nd{fill:var(--accent)}
.flow .nd.wait{fill:var(--muted)}
.flow text{font-family:var(--body);font-size:14px;fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
.flow .fv{fill:var(--muted);font-family:var(--mono);font-size:13px}

.vside{display:contents}
.vote{display:flex;flex-direction:column;gap:20px}
.vside>.round{order:1}.vmain{order:2;min-width:0}.vside>.facts{order:3}.vside>details{order:4}.vfoot{order:5}
.items{gap:0 16px}
.item-head>.share{max-width:45%}
@media (min-width:1000px){
  .vote{display:grid;grid-template-columns:clamp(300px,28vw,430px) minmax(0,1fr);gap:clamp(28px,3vw,44px);align-items:start}
  .vside{display:flex;flex-direction:column;gap:20px;min-width:0;position:sticky;top:calc(16px + env(safe-area-inset-top,0px))}
  .items{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px;margin-top:16px;align-items:start}
  .item,.item:first-child{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px;min-width:0}
  .stepper button{width:38px;height:38px}
}

.viewbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.viewbar .seg{margin-bottom:0}
.practice{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;border:2px dashed var(--pip);border-radius:14px;background:var(--surface);padding:14px 16px;margin-bottom:16px}
.practice-txt{flex:1 1 260px;min-width:0}
.practice-txt .small{display:block;color:var(--muted)}
body.is-practice::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(7px + env(safe-area-inset-top,0px));background:repeating-linear-gradient(135deg,var(--pip) 0 12px,var(--bg) 12px 24px);z-index:40;pointer-events:none}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:50}
.empty{border:1px dashed var(--line);border-radius:14px;padding:28px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.empty p{max-width:56ch}

dialog{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:20px;width:min(440px,calc(100vw - 32px))}
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog form{display:flex;flex-direction:column;gap:14px}
dialog input[type=text],dialog input[type=url],dialog textarea{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:9px 10px;width:100%}
.choice{display:flex;flex-direction:column;gap:6px}
.choice label{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:9px 10px;cursor:pointer}
.dlg-actions{display:flex;justify-content:flex-end;gap:8px}
dialog input[type=password]{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:9px 10px;width:100%}
.keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.keys li{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.keys li>span{min-width:0;overflow-wrap:anywhere}
dialog .err{color:var(--warn)}
#toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 14px;border-radius:8px;font-size:13px;max-width:calc(100vw - 32px)}

/* Rebuild additions */
body{margin:0}
[hidden]{display:none!important}
.signin{max-width:380px;display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
.signin input{border:1px solid var(--line);border-radius:8px;background:var(--bg);padding:9px 10px;width:100%}
.signin .err{color:var(--warn)}
.signin .gbtn{text-align:center;text-decoration:none}
.signin summary{cursor:pointer}
.signin .pwbox{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.viewbar .actions{align-items:center}