/* Your account page. Builds on style.css and site.css. */
.col [hidden]{display:none !important}
.quiet{color:var(--muted-foreground)}
.wait{padding:2rem 1rem;font-family:var(--font-mono);font-size:var(--text-meta)}
.gate .welcome p,.acct .welcome p{font-size:var(--text-input)}
.gate-entry .rail,.a-entry .rail{min-height:5rem}
.gate-entry .rail .tail,.a-entry .rail .tail{top:calc(2rem - 1px);bottom:0}
.gate-entry .rail .end,.a-entry .rail .end{display:none}
.gate-entry:last-child .rail .tail,.a-entry.last .rail .tail{display:none}
.gate-entry .body,.a-entry .body{padding-bottom:1.25rem}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.625rem}
.quiet-btn{background:var(--muted);color:var(--foreground)}
.quiet-btn:hover{background:var(--accent)}
#a-avatar{font-family:var(--font-mono);font-size:var(--text-ui);font-weight:600;color:var(--foreground)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:.375rem 1rem;margin:.5rem 0 0;font-size:var(--text-ui)}
.facts > div{display:contents}
.facts dt{font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground);padding-top:.1rem}
.facts dd{margin:0;overflow-wrap:anywhere}
.facts dt svg{display:block;width:1.125rem;height:1.125rem}
.facts + .text{margin-top:.75rem;font-size:var(--text-small)}
.faces{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.375rem}
.faces li{display:flex;align-items:center;gap:.625rem;font-size:var(--text-ui)}
.faces small{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--primary)}
.faces small.guard{color:var(--muted-foreground)}
.face-av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-round);background:var(--muted);font-family:var(--font-mono);font-size:var(--text-micro);font-weight:600}
.providers{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem;margin-top:.5rem;max-width:24rem}
.providers .btn-sm{justify-content:center}
.faces:empty::after{content:"Only you, so far.";font-size:var(--text-small);color:var(--muted-foreground)}
/* folding sections: large circle open, small circle folded (2026-10-26) */
.a-entry .head{cursor:pointer;user-select:none}
.a-entry .rail .node-in{transition:width .2s,height .2s}
.a-entry .rail .node-ring{transition:padding .2s}
.a-entry.folded .rail{min-height:3.75rem}
.a-entry.folded .rail .node-in{width:.875rem;height:.875rem;background:var(--lane)}
.a-entry.folded .rail .node-in > *{display:none}
.a-entry.folded .rail .node-ring{padding:.1875rem}
.a-entry.folded .body > :not(.head){display:none !important}
.a-entry.folded .body{padding-bottom:.75rem}
.a-entry.folded .title{color:var(--muted-foreground)}
.a-entry.folded .rail .node{top:1.45rem}
.a-entry.folded .rail .tail{top:1.45rem}

/* the pencil next to the name, and the box that replaces the name while editing (2026-10-26) */
.acct .welcome h1{display:inline}
.pencil{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-left:.375rem;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--muted-foreground);cursor:pointer;vertical-align:.35rem}
.pencil:hover{background:var(--accent);color:var(--foreground)}
.pencil svg{width:18px;height:18px}
.rename{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.rename input{flex:1 1 10rem;min-width:0;height:2.5rem;padding:.4rem .6rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:var(--text-title);font-weight:600;color:var(--foreground);background:var(--card)}
.rename input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring-field)}
/* Delete my account (2026-10-26) */
.danger-btn{color:var(--danger) !important}
.danger-btn.solid{background:var(--danger) !important;color:#fff !important;border-color:var(--danger) !important}
.del{margin-left:auto;display:inline-flex;gap:.375rem}
#a-del-confirm:not([hidden]){display:inline-flex;gap:.375rem}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid transparent;border-radius:var(--radius);background:var(--muted);color:var(--foreground);cursor:pointer}
.icon-btn:hover{background:var(--accent)}
.icon-btn svg{width:18px;height:18px}
/* Edit display name (2026-10-26) */
.rename-hint{flex:1 1 100%;font-size:var(--text-small)}
#a-rename-row{margin-top:.5rem}
.rename[hidden],#a-rename-row[hidden]{display:none}
/* the display name's pencil, next to the name (his footer note, 2026-10-26) */
.name-line{display:flex;align-items:center;gap:.375rem}
.name-line[hidden]{display:none}
.name-line h1{min-width:0;overflow-wrap:anywhere}
.pencil{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-round);background:none;color:var(--muted-foreground);cursor:pointer;transition:background-color .15s,color .15s}
.pencil:hover{background:var(--muted);color:var(--foreground)}
.pencil:focus-visible{outline:none;box-shadow:var(--ring)}
.pencil[hidden]{display:none}
/* GitHub and Google on an account you already have (2026-10-29) */
.facts .link-x{border:0;background:none;padding:0;margin-left:.5rem;font:inherit;font-size:var(--text-meta);color:var(--muted-foreground);text-decoration:underline;cursor:pointer}
/* Sign-ins card (his ask, 2026-10-30: "need a way to link, unlink, &c") */
.ways{list-style:none;margin:.625rem 0 0;padding:0;display:grid;gap:.5rem}
.ways li{display:flex;align-items:center;gap:.625rem;font-size:var(--text-ui);min-height:2rem}
.ways .way-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-round);background:var(--muted);flex:0 0 auto}
.ways .way-ic svg{width:1rem;height:1rem;display:block}
.ways .way-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ways .way-t small{display:block;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground)}
.ways .btn-sm{flex:0 0 auto}
.ways .btn-sm[disabled]{opacity:.5;cursor:not-allowed}

/* Level and XP card (1 Nov 2026): the style guide pieces, spaced inside the entry */
#a-level{margin-top:.6rem}
#a-xpsplit{margin-top:.75rem}