/* Account pages. Builds on styles.css (.button, .text-button, colours). */
.auth{max-width:400px;margin:0 auto;padding:90px 0 110px}
.account{max-width:720px;margin:0 auto;padding:70px 0 110px}
.auth h1,.account h1{font-size:34px;letter-spacing:-1.1px;margin:0 0 12px}
.auth h1:focus{outline:0}
.lead{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 28px}
.auth form,.account form{display:flex;flex-direction:column;gap:16px}
.auth label,.account label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:600;color:var(--c-202124)}
.auth input,.account input{font-weight:400;font-size:14px;padding:13px 14px;border:1px solid var(--c-dedee3);border-radius:10px;background:var(--c-ffffff);color:var(--c-202124);outline:0}
.auth input:focus-visible,.account input:focus-visible{border-color:var(--c-a4a4ad);box-shadow:0 0 0 3px #2021240f}
.hint{font-size:11px;color:var(--muted);margin:-8px 0 0}
.msg{font-size:12px;line-height:1.6;color:var(--c-2b6a3f);margin:0}
.msg:empty{display:none}
.msg.bad{color:var(--c-a93221)}
.auth .button{width:100%}
.alt{font-size:12px;color:var(--muted);text-align:center;margin:22px 0 0}
.alt a{color:var(--c-202124);text-decoration:underline;text-underline-offset:3px}
.alt a.button{text-decoration:none;color:var(--c-ffffff)}
.button.ghost{background:var(--c-ffffff);color:var(--c-202124);border:1px solid var(--c-dedee3)}
.button.ghost:hover{background:var(--c-f5f5f6)}
.button.danger{background:var(--c-a93221)}
.button.danger:hover{background:var(--c-86261a)}
.button.small{min-height:36px;padding:9px 14px;font-size:12px}
.button:focus-visible,.text-button:focus-visible{outline:2px solid var(--c-202124);outline-offset:3px}

.card{border:1px solid var(--line);border-radius:13px;padding:22px;margin:0 0 16px}
.card h2{font-size:18px;letter-spacing:-.3px;margin:4px 0 8px}
.card .row h2{margin:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.label{display:block;font-size:11px;color:var(--muted);margin:0 0 4px}
.detail{font-size:13px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.note{color:var(--c-7a5a12)}
.badge{display:inline-block;font-size:10px;font-weight:600;padding:3px 8px;border-radius:99px;background:var(--c-e8f3ec);color:var(--c-2b6a3f);margin-left:6px;vertical-align:2px}
.badge.warn{background:var(--c-fbf1dc);color:var(--c-7a5a12)}
.badge:empty{display:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.account > .status{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--c-f5f5f6);color:var(--c-202124)}
.confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;margin:10px 0;padding:10px 12px;border-radius:10px;background:var(--c-fbeeea)}
.danger-zone .text-button{color:var(--c-a93221)}
.danger-zone form{margin-top:12px}

.table-wrap{overflow-x:auto}
.account table{width:100%;border-collapse:collapse;font-size:12px}
.account th{text-align:left;font-weight:600;color:var(--muted);font-size:11px;padding:8px 10px 8px 0;border-bottom:1px solid var(--line)}
.account td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.account td a{text-decoration:underline;text-underline-offset:3px;word-break:break-word}

@media(max-width:600px){
  .auth{padding:56px 0 80px}
  .account{padding:44px 0 80px}
  .auth h1,.account h1{font-size:28px;max-width:none;margin:0 0 10px}
  .card{padding:18px}
  .account thead{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}
  .account tr{display:block;padding:10px 0;border-bottom:1px solid var(--line)}
  .account td{display:flex;gap:12px;border:0;padding:3px 0}
  .account td::before{content:attr(data-label);flex:0 0 58px;color:var(--muted)}
}