/* ============================================================
   YOUR ACCOUNT — the list of sections beside their panels.

   Nothing new to learn: the fields, the grey fill and the pills are
   login.css's and setup.css's. What this adds is the panels themselves
   (the grey fill at a larger radius), the balance, the rows and the
   switches. Light or dark is the visitor's.
   ============================================================ */
.ac{padding:clamp(3.2rem, 6vh, 6.4rem) var(--shell-pad) 12rem}
.ac-top{max-width:112rem; margin:0 auto 4rem}
.ac-cols{
  display:grid; grid-template-columns:22rem minmax(0, 1fr); gap:clamp(2.4rem, 4.4vw, 6.4rem);
  align-items:start; max-width:112rem; margin:0 auto;
}
.ac[aria-busy="true"] .ac-cols{opacity:0}
.ac-cols{transition:opacity var(--speed) var(--easing)}

/* the list of sections: follows you down the page */
.ac-nav{position:sticky; top:9rem}
.ac-nav ul{list-style:none; margin:0; padding:0; display:grid; gap:.2rem}
.ac-nav a,.ac-out{
  display:flex; align-items:center; width:100%; height:4.2rem; padding:0 1.6rem; box-sizing:border-box;
  border:0; border-radius:999px; background:none; cursor:pointer; text-decoration:none; text-align:left;
  font-family:var(--face-ui); font-size:1.5rem; font-weight:500; color:var(--soft);
  transition:background var(--speed) var(--easing), color var(--speed) var(--easing);
}
.ac-nav a:hover,.ac-out:hover{color:var(--ink); background:var(--lg-fill)}
.ac-nav a.is-on{color:var(--ink); font-weight:600; background:var(--lg-fill)}
.ac-nav a:focus-visible,.ac-out:focus-visible{outline:2px solid var(--spark); outline-offset:-2px}
.ac-out{margin-top:1.6rem; padding-top:0}

/* the panels */
.ac-main{display:grid; gap:1.6rem; min-width:0}
.ac-card{
  padding:clamp(2.4rem, 3.4vw, 3.6rem); border-radius:2.8rem;
  border:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  scroll-margin-top:9rem;
}
.ac-card .su-h2{margin-bottom:2rem}
.ac-card form{max-width:48rem}
.ac-h3{
  margin:3.6rem 0 1.4rem; padding-top:2.8rem; border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  font-family:var(--face-ui); font-size:1.6rem; font-weight:600; color:var(--ink);
}
.ac-note b{color:var(--ink); font-weight:600; overflow-wrap:anywhere}
.ac-card .lg-field input{background:var(--lg-fill)}

/* details */
.ac-dl{margin:0; display:grid}
.ac-dl > div{
  display:grid; grid-template-columns:14rem minmax(0, 1fr); gap:1.2rem; align-items:baseline;
  padding:1.4rem 0; border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.ac-dl > div:first-child{border-top:0; padding-top:0}
.ac-dl dt{font-family:var(--face-ui); font-size:1.45rem; font-weight:500; color:var(--soft)}
.ac-dl dd{margin:0; display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1.6rem;
  font-family:var(--face-ui); font-size:1.6rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.ac-link{
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--face-ui); font-size:1.45rem; font-weight:500; color:var(--soft);
  text-decoration:underline; text-underline-offset:.28em; text-decoration-color:color-mix(in srgb, var(--ink) 25%, transparent);
  transition:color var(--speed) var(--easing), text-decoration-color var(--speed) var(--easing);
}
.ac-link:hover,.ac-link:focus-visible{color:var(--ink); text-decoration-color:var(--ink); outline:none}
.ac-fold{margin-top:2.4rem; padding-top:2.4rem; border-top:1px solid color-mix(in srgb, var(--ink) 10%, transparent)}
.ac-fold[hidden]{display:none}
.ac-fold .cf-demo{margin:0 0 2rem}

.ac-btns{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.4rem}
.ac-ink{background:var(--ink); color:var(--ground)}
.ac-ink:hover,.ac-ink:focus-visible{background:#5E6160; color:#fff}
.ac-a{display:inline-flex; align-items:center; text-decoration:none}
.ac-danger{background:none; color:var(--lg-err); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--lg-err) 45%, transparent)}
.ac-danger:hover,.ac-danger:focus-visible{background:color-mix(in srgb, var(--lg-err) 10%, transparent)}
.ac-danger--full{background:var(--lg-err); color:#fff; box-shadow:none}
.ac-danger--full:hover,.ac-danger--full:focus-visible{background:color-mix(in srgb, var(--lg-err) 85%, #000)}

/* the balance */
.ac-bal{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem}
.ac-bal_k{display:block; margin-bottom:.8rem; font-family:var(--face-ui); font-size:1.45rem; font-weight:500; color:var(--soft)}
.ac-bal_v{
  display:block; font-family:var(--face-ui); font-weight:600; font-size:clamp(4.8rem, 7vw, 7.2rem);
  line-height:.95; letter-spacing:-0.02em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.ac-go{width:auto; min-width:18rem; margin:0; padding:0 3.2rem}
.ac-go:disabled{opacity:1; cursor:not-allowed; background:var(--lg-fill); color:var(--soft)}
.ac-go:disabled:hover{background:var(--lg-fill); color:var(--soft)}
.ac-why{margin:1.6rem 0 0; font-family:var(--face-ui); font-size:1.45rem; font-weight:500; line-height:1.45; color:var(--soft)}
.ac-why b{color:var(--ink); font-weight:600}
.ac-sum{margin:2.8rem 0 0; padding:0; list-style:none; display:grid}
.ac-sum li{
  display:flex; justify-content:space-between; gap:1.6rem; padding:1.1rem 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  font-family:var(--face-ui); font-size:1.5rem; font-weight:500; color:var(--soft);
}
.ac-sum li span:last-child{color:var(--ink); font-variant-numeric:tabular-nums}
.ac-sum li.is-total{font-weight:600; color:var(--ink); border-top-color:color-mix(in srgb, var(--ink) 22%, transparent)}
.ac-test{
  display:inline-flex; align-items:center; height:2.4rem; padding:0 1rem; margin-left:.4rem; border-radius:999px;
  background:var(--lg-fill); vertical-align:.2em;
  font-family:var(--face-ui); font-size:1.2rem; font-weight:600; letter-spacing:0; color:var(--soft);
}

.ac-bank{
  display:flex; align-items:center; gap:1.2rem; margin:0 0 2rem; padding:1.4rem 0;
  font-family:var(--face-ui); font-size:1.5rem; font-weight:500; color:var(--ink);
}
.ac-bank[hidden]{display:none}
.ac-bank svg{flex:none; width:2rem; height:2rem; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round}
.ac-bank span{flex:1; min-width:0; overflow-wrap:anywhere}
.ac-bank .ac-link{flex:none}
#acpayform[hidden]{display:none}
.ac-bank small{display:block; font-size:1.35rem; color:var(--soft)}

/* lists: withdrawals, pledges, follows */
.ac-list{list-style:none; margin:0; padding:0}
.ac-list li{
  display:flex; align-items:center; justify-content:space-between; gap:1.6rem; padding:1.3rem 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  font-family:var(--face-ui); font-size:1.5rem; font-weight:500; color:var(--ink);
}
.ac-list li:first-child{border-top:0}
.ac-list li > span:first-child{min-width:0}
.ac-list small{display:block; margin-top:.2rem; font-size:1.35rem; color:var(--soft)}
.ac-list a{color:inherit; text-decoration:none}
.ac-list a:hover{text-decoration:underline; text-underline-offset:.24em}
.ac-list .ac-amt{flex:none; font-weight:600; font-variant-numeric:tabular-nums}
.ac-list .ac-empty{display:block; padding:0; color:var(--soft)}
.ac-list .ac-empty a{color:var(--ink); text-decoration:underline; text-underline-offset:.24em}

/* the campaign */
.ac-camp{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.6rem}
.ac-camp b{display:block; font-family:var(--face-ui); font-size:1.8rem; font-weight:600; color:var(--ink); overflow-wrap:anywhere}
.ac-pill{
  display:inline-flex; align-items:center; gap:.6rem; height:2.8rem; padding:0 1.2rem; margin-bottom:.8rem; border-radius:999px;
  background:var(--lg-fill); font-family:var(--face-ui); font-size:1.3rem; font-weight:600; color:var(--ink);
}
.ac-pill i{width:.8rem; height:.8rem; border-radius:50%; background:currentColor}
.ac-pill.is-live i{background:#1FA45B}
.ac-camp_btns{display:flex; flex-wrap:wrap; gap:.8rem}
.ac-bar{height:.6rem; margin:2.4rem 0 1rem; border-radius:999px; background:var(--lg-fill); overflow:hidden}
.ac-bar i{display:block; height:100%; border-radius:inherit; background:var(--ink)}
.ac-meta{display:flex; flex-wrap:wrap; gap:.4rem 2.4rem; font-family:var(--face-ui); font-size:1.45rem; font-weight:500; color:var(--soft)}
.ac-meta b{color:var(--ink); font-weight:600}
.ac-confirm{margin-top:2.4rem; padding:2rem 0}
.ac-confirm p{margin:0; font-family:var(--face-ui); font-size:1.5rem; font-weight:500; line-height:1.45; color:var(--ink)}
.ac-confirm .ac-btns{margin-top:1.6rem}
.ac-confirm .su-btn:not(.ac-danger--full){background:var(--ground)}

/* the switches */
.ac-toggles{display:grid}
.ac-tog{
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.4rem 0; cursor:pointer;
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.ac-tog:first-child{border-top:0; padding-top:0}
.ac-tog span{font-family:var(--face-ui); font-size:1.4rem; font-weight:500; line-height:1.4; color:var(--soft)}
.ac-tog b{display:block; font-size:1.6rem; font-weight:600; color:var(--ink)}
.ac-tog input{position:absolute; opacity:0; width:1px; height:1px}
.ac-tog i{
  flex:none; position:relative; width:4.8rem; height:2.8rem; border-radius:999px; background:var(--lg-fill-hi);
  transition:background var(--speed) var(--easing);
}
.ac-tog i::after{
  content:""; position:absolute; left:.3rem; top:.3rem; width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--ground); box-shadow:0 1px 3px rgba(0, 0, 0, .18);
  transition:transform var(--speed) var(--power3-out);
}
.ac-tog input:checked + i{background:var(--ink)}
.ac-tog input:checked + i::after{transform:translateX(2rem)}
.ac-tog input:focus-visible + i{outline:2px solid var(--spark); outline-offset:2px}
.ac-saved{min-height:2rem; margin:.8rem 0 0; font-family:var(--face-ui); font-size:1.35rem; font-weight:500; color:var(--soft)}

/* privacy rows */
.ac-row{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.6rem 0;
  border-top:1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.ac-row:first-of-type{border-top:0; padding-top:0}
.ac-row div{min-width:0; font-family:var(--face-ui); font-size:1.4rem; font-weight:500; line-height:1.4; color:var(--soft)}
.ac-row b{display:block; font-size:1.6rem; font-weight:600; color:var(--ink)}
.ac-row .su-btn{flex:none}

/* the note that something worked */
.ac-toast{
  position:fixed; left:50%; bottom:calc(2.4rem + env(safe-area-inset-bottom, 0px)); z-index:60;
  translate:-50% 1.2rem; opacity:0; pointer-events:none;
  padding:1.2rem 2rem; border-radius:999px; background:var(--ink); color:var(--ground);
  font-family:var(--face-ui); font-size:1.5rem; font-weight:600; white-space:nowrap;
  transition:opacity var(--speed) var(--easing), translate var(--speed) var(--power3-out);
}
.ac-toast.is-on{opacity:1; translate:-50% 0}

@media (max-width:860px){
  .ac-cols{grid-template-columns:minmax(0, 1fr)}
  .ac-nav{position:static; margin:0 calc(var(--shell-pad) * -1); padding:0 var(--shell-pad);
    overflow-x:auto; scrollbar-width:none}
  .ac-nav::-webkit-scrollbar{display:none}
  .ac-nav ul{display:flex; gap:.4rem; width:max-content}
  .ac-nav a{height:3.6rem; white-space:nowrap}
  .ac-nav .ac-out{display:none}
  .ac-dl > div{grid-template-columns:minmax(0, 1fr); gap:.4rem}
  .ac-row{flex-wrap:wrap}
  .ac-go{width:100%}
}
@media (max-width:480px){
  .ac-card{border-radius:2.2rem}
}
@media (prefers-reduced-motion:reduce){
  .ac-tog i,.ac-tog i::after,.ac-toast,.ac-cols{transition:none}
}

/* the phone is off for now (27 September 2026) */
#phone[hidden]{display:none}