/* The account control: the wallet trigger in the header and the menu it opens.
   Shared by the landing page and the Genesis signup so both surfaces behave the same.
   Design tokens are namespaced so they never collide with a page's own variables. */
:root{
 --ac-bg:#090D18;--ac-panel:#111725;--ac-elevated:#171F30;--ac-border:#2C3446;
 --ac-text:#F4F1E8;--ac-muted:#9AA3B6;--ac-gold:#F0C36B;--ac-gold-edge:#B78A39;
 --ac-radius:12px;--ac-panel-radius:18px;--ac-gap:8px;--ac-control:50px;
}

/* --- the trigger ------------------------------------------------------- */
.account-trigger{
 display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 14px;
 background:var(--ac-elevated);color:var(--ac-text);border:1px solid var(--ac-border);
 border-radius:var(--ac-radius);font:600 14px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;
}
.account-trigger:hover{border-color:#3C465C}
.account-trigger .ac-sigil{width:28px;height:28px;border-radius:8px;border:1px solid var(--ac-border);background:var(--ac-panel);display:grid;place-items:center;flex:none;overflow:hidden}
.account-trigger .ac-sigil img{width:100%;height:100%;object-fit:cover}
.account-trigger .ac-addr{font-family:'DM Mono',monospace;letter-spacing:.3px}
/* A down chevron means "this opens a menu"; a right arrow means "this navigates". */
.account-trigger .ac-chevron{width:11px;height:11px;flex:none;transition:transform .18s ease}
.account-trigger[aria-expanded=true] .ac-chevron{transform:rotate(180deg)}

/* --- the menu ---------------------------------------------------------- */
.ac-menu{
 position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:min(330px,calc(100vw - 32px));
 background:var(--ac-panel);border:1px solid var(--ac-border);border-radius:var(--ac-panel-radius);
 padding:18px;display:grid;gap:var(--ac-gap);box-shadow:0 26px 60px #00000099;
 color:var(--ac-text);text-align:left;
}
.ac-menu[hidden]{display:none}
.ac-menu .ac-label{font:500 10px/1 'DM Mono',monospace;letter-spacing:2.4px;color:var(--ac-muted);margin-bottom:2px}
/* Name, address, copy and connection status read as one identity block. */
.ac-identity{display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--ac-elevated);border:1px solid var(--ac-border);border-radius:var(--ac-radius)}
.ac-identity .ac-sigil{width:46px;height:46px;border-radius:10px;border:1px solid var(--ac-border);background:var(--ac-panel);display:grid;place-items:center;flex:none;overflow:hidden}
.ac-identity .ac-sigil img{width:100%;height:100%;object-fit:cover}
.ac-identity-body{min-width:0;display:grid;gap:3px}
.ac-name{font:700 19px/1.15 'DM Sans',system-ui,sans-serif;overflow-wrap:anywhere}
.ac-addr-row{display:flex;align-items:center;gap:6px}
.ac-addr-row code{font:500 13px/1 'DM Mono',monospace;color:var(--ac-muted)}
.ac-copy{width:26px;height:26px;display:grid;place-items:center;border:0;background:none;color:var(--ac-muted);border-radius:7px;cursor:pointer;flex:none}
.ac-copy:hover{color:var(--ac-text);background:#ffffff12}
.ac-copy svg{width:14px;height:14px}
.ac-status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ac-muted)}
.ac-status i{width:7px;height:7px;border-radius:50%;background:#54d98c;flex:none}

/* One gold action per surface. */
.ac-primary{
 display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--ac-control);
 background:var(--ac-gold);color:#1A1407;border:1px solid var(--ac-gold-edge);border-bottom-width:3px;
 border-radius:var(--ac-radius);font:700 15px/1 'DM Sans',system-ui,sans-serif;text-decoration:none;cursor:pointer;
}
.ac-primary:hover{filter:brightness(1.05)}
.ac-row{
 display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--ac-control);
 padding:0 14px;background:var(--ac-elevated);color:var(--ac-text);border:1px solid var(--ac-border);
 border-radius:var(--ac-radius);font:600 14px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;text-decoration:none;
}
.ac-row:hover{border-color:#3C465C}
.ac-row span{display:flex;align-items:center;gap:10px}
/* Signing out is deliberately quiet. */
.ac-quiet{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;background:none;border:0;color:var(--ac-muted);font:600 14px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;border-radius:var(--ac-radius)}
.ac-quiet:hover{color:var(--ac-text);background:#ffffff0d}
.ac-quiet svg{width:15px;height:15px}

.ac-menu :focus-visible,.account-trigger:focus-visible,.ac-dismiss:focus-visible{outline:2px solid var(--ac-gold);outline-offset:2px}

/* On a small screen the menu becomes a centred panel with a top-right dismiss. */
.ac-dismiss{position:absolute;top:12px;right:12px;width:36px;height:36px;display:none;place-items:center;background:var(--ac-elevated);border:1px solid var(--ac-border);border-radius:10px;color:var(--ac-text);cursor:pointer}
.ac-dismiss svg{width:13px;height:13px}
@media(max-width:560px){
 .ac-backdrop{position:fixed;inset:0;z-index:59;background:#05060Ccc}
 .ac-menu{position:fixed;top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 28px));padding:22px}
 .ac-menu .ac-label{padding-right:40px}
 .ac-dismiss{display:grid}
}