/* /account/ and /checkout/: one column of plain sections with rules between them, like a statement */
.ac-head .lede{max-width:62ch}
.ac-who{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; margin-top:1.1rem; font:500 .98rem/1.3 var(--f-ui)}
.ac{display:flex; flex-direction:column; gap:clamp(2rem,4vw,2.8rem)}
.ac > *{width:100%; max-width:52rem}
.ac > .ac-out{max-width:62rem}
.ac-loading{font:italic 400 1rem/1.5 var(--f-serif); color:var(--ink-3)}
.ac-lead{font:400 1.04rem/1.6 var(--f-serif); color:var(--ink-2); max-width:62ch}
.ac-err{font:500 .92rem/1.45 var(--f-ui); color:var(--bad)}
.ac-err[hidden]{display:none}

/* signed out */
.ac-out{display:grid; grid-template-columns:minmax(0,24rem) minmax(0,1fr); gap:clamp(1.6rem,5vw,3.4rem); align-items:start}
.ac-card .panel-body{display:flex; flex-direction:column; gap:.9rem}
.ac-card .btn{align-self:flex-start}
.ac-sent{font:400 1rem/1.55 var(--f-serif); color:var(--ink-2)}
.ac-sent b{color:var(--ink); font-weight:600; word-break:break-all}
.ac-codein{font:500 1.5rem/1 var(--f-mono); letter-spacing:.18em; max-width:11rem; font-variant-numeric:tabular-nums}
.ac-again{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; font:500 .9rem/1.4 var(--f-ui)}
.ac-again .linkbtn:disabled{color:var(--ink-3); text-decoration:none; cursor:default}
.ac-link p{font:400 1.05rem/1.5 var(--f-serif)}
.ac-gives{padding-top:.3rem}
.ac-gives .h3{margin-bottom:.6rem}
.ac-list{list-style:disc; margin:.2rem 0 .9rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.45rem; font:400 1rem/1.55 var(--f-serif); color:var(--ink-2); max-width:60ch}
.ac-list li::marker{color:var(--ink-3)}

/* signed in */
.ac-in{display:flex; flex-direction:column; gap:clamp(2.2rem,4.5vw,3rem)}
.ac-nav{display:flex; flex-wrap:wrap; gap:.3rem 1.3rem; padding-bottom:.7rem; border-bottom:1px solid var(--line); font:500 .9rem/1.4 var(--f-ui)}
.ac-nav a{color:var(--ink-2); text-decoration:none}
.ac-nav a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:.2em}
.ac-sec{display:flex; flex-direction:column; gap:.85rem; scroll-margin-top:5rem}
#planBody,#syncBody,#reqBody,#ownerBody{display:flex; flex-direction:column; gap:.85rem; align-items:flex-start}
#planBody > *,#syncBody > *,#reqBody > *,#ownerBody > *{max-width:100%}
.ac-req,.ac-owner-form,.ac-inbox,.ac-reqs,.ac-ledger{align-self:stretch}
.ac-sec-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.6rem 1rem}
.ac-h{font:420 clamp(1.35rem,2.4vw,1.7rem)/1.2 var(--f-head); letter-spacing:-.01em}
.ac-sec .btns{display:flex; flex-wrap:wrap; gap:.5rem}
.ac-buy{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem; margin-top:.2rem}
.ac-wait{max-width:28rem}
.ac-switch{font:500 1rem/1.3 var(--f-ui); color:var(--ink)}
.ac-status{font:400 1rem/1.5 var(--f-serif); color:var(--ink-2)}
.ac-status.bad{color:var(--bad)}
.ac-check{align-items:flex-start; font:400 1rem/1.5 var(--f-serif); color:var(--ink-2); max-width:60ch}
.ac-check input{margin-top:.1rem}

.ac-req{max-width:40rem}
.ac-req .panel-body{display:flex; flex-direction:column; gap:.85rem}
.ac-req .btn{align-self:flex-start}
.ac-reqs{list-style:none; margin:.6rem 0 0; padding:0; border-top:1px solid var(--line)}
.ac-reqi{padding:.9rem 0; border-bottom:1px solid var(--line-2); display:flex; flex-direction:column; gap:.6rem}
.ac-reqh{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .7rem; font:500 1rem/1.4 var(--f-ui)}
.ac-reqh time{font:400 .85rem/1.3 var(--f-ui); color:var(--ink-3)}
.ac-reply{font:400 .88rem/1.55 var(--f-mono); white-space:pre-wrap; background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px; padding:.9rem 1rem; max-height:22rem; overflow:auto; margin:0}

.ac-devices{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.ac-devices li{display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"name btn" "time btn"; column-gap:1rem; row-gap:.15rem; padding:.75rem 0; border-bottom:1px solid var(--line-2); align-items:center}
.ac-dev{grid-area:name; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font:500 .98rem/1.3 var(--f-ui)}
.ac-devt{grid-area:time; font:400 .86rem/1.4 var(--f-ui); color:var(--ink-3)}
.ac-devices li > :last-child{grid-area:btn}

.ac-data .btns{margin-top:.2rem}
.btn.ghost.danger{color:var(--bad)}

/* owner */
.ac-owner{border-top:2px solid var(--ink); padding-top:1.2rem}
.ac-ledger{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); margin:0}
.ac-ledger div{padding:.8rem 1rem .9rem 0; border-bottom:1px solid var(--line-2)}
.ac-ledger dt{font:500 .8rem/1.3 var(--f-ui); color:var(--ink-3)}
.ac-ledger dd{margin:.25rem 0 0; font:380 1.9rem/1.05 var(--f-head); font-variant-numeric:tabular-nums}
.ac-owner-form .panel-body{display:flex; flex-direction:column; gap:.85rem}
.ac-owner-form .btn{align-self:flex-start}
.ac-owner-form .seg{align-self:flex-start}
.ac-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem}
.ac-three{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr); gap:.8rem}
.ac-plain{list-style:disc; margin:0; padding-left:1.2rem; font:400 .92rem/1.6 var(--f-ui); color:var(--ink-2)}
.ac-inbox{display:flex; flex-direction:column; gap:.6rem}
.ac-q{border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem; background:var(--panel)}
.ac-q summary{cursor:pointer; font:400 .92rem/1.4 var(--f-ui); color:var(--ink-3)}
.ac-q summary b{color:var(--ink); font-weight:600}
.ac-q[open] summary{margin-bottom:.6rem}
.ac-qd{font:400 .95rem/1.55 var(--f-serif); white-space:pre-wrap; margin:0 0 .6rem}
.ac-q .btns{margin-top:.6rem; align-items:center}
.ac-q .select{width:auto}

.co .btns{display:flex; flex-wrap:wrap; gap:.5rem}
.co .btns[hidden]{display:none}

@media (max-width:48rem){
  .ac-out{grid-template-columns:minmax(0,1fr)}
  .ac-ledger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-two,.ac-three{grid-template-columns:minmax(0,1fr)}
}

/* until Pro opens: the waitlist first, sign-in for invited people underneath */
.ac-out{grid-template-columns:minmax(0,34rem) minmax(0,22rem); justify-content:start}
.ac-out .ac-wait{margin-top:.4rem}
.ac-invite summary{cursor:pointer; font:500 .95rem/1.4 var(--f-ui); color:var(--ink-2); padding:.3rem 0 .8rem}
.ac-invite summary:hover{color:var(--ink)}
.ac-invite[open] summary{color:var(--ink)}
@media (max-width:48rem){ .ac-out{grid-template-columns:minmax(0,1fr)} }