/* The avatar, the account menu hanging from it and the profile dialog: the same on the desk and in the editor.
   Brand tokens are set on the pieces themselves, so they look the same whatever page they sit on. Inter throughout. */
.account,.account-menu,.profile-dialog{--paper:#f4f2ec;--paper-2:#faf9f6;--ink:#272c24;--dark:#252d24;--muted:#676f60;--line:#d7dbce;--red:#cc402b;--red-deep:#ac3320;
  --red-wash:rgba(204,64,43,.07);--red-soft:rgba(204,64,43,.16);--ink-wash:rgba(39,44,36,.045);--ink-line:rgba(39,44,36,.16);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.account .ic,.profile-dialog .ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;--ic-accent:var(--red)}
.account .ic .a,.profile-dialog .ic .a{stroke:var(--ic-accent)}
.profile-dialog .primary .ic{--ic-accent:#fff}

/* ── the avatar: a photo in a circle, or a soft red silhouette until there is one ── */
.account{position:relative}
/* The name sits on the face's left, both inside one button; no ring around the face, a quiet wash on hover. */
.account-button{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:10px;height:44px;padding:4px 4px 4px 14px;border-radius:999px;cursor:pointer;background:transparent;transition:background-color .15s}
.account-button:hover,.account.open .account-button{background:var(--ink-wash)}
.account-button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.account-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;line-height:1.2;color:var(--ink)}
/* When the bar runs out of room the name steps aside and the face stands alone (fitBar in account-menu.mjs). */
.bar-fit-name .account-name{display:none}
.bar-fit-name .account-button{padding:4px}
.avatar{position:relative;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#f6e4df;flex:none}
.avatar-md{width:36px;height:36px}.avatar-lg{width:64px;height:64px}.avatar-xl{width:112px;height:112px}
.avatar svg.silhouette{position:absolute;inset:0;width:100%;height:100%}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar .avatar-initials{display:none}

/* ── account menu: a title block hanging from the avatar ─────────────────── */
.account-menu{position:absolute;right:0;top:calc(100% + 12px);width:340px;max-height:calc(100dvh - 90px);overflow:auto;background:var(--paper-2);border:1px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 rgba(39,44,36,.1),0 20px 44px rgba(39,44,36,.2);z-index:40}
.account-menu::before{content:"";position:absolute;right:21px;top:-13px;width:1px;height:12px;background:var(--red)}
.account-menu-head{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:18px;background:var(--dark);color:var(--paper);
  background-image:linear-gradient(rgba(244,242,236,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,236,.06) 1px,transparent 1px);background-size:12px 12px}
.account-menu-head .avatar{box-shadow:0 0 0 2px var(--dark),0 0 0 3px rgba(244,242,236,.4)}
.account-menu-photo{all:unset;position:relative;cursor:pointer;border-radius:50%}
.account-menu-photo:focus-visible{outline:2px solid #fff;outline-offset:3px}
.account-menu-photo .cam{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;border:2px solid var(--dark)}
.account-menu-photo .cam .ic{width:13px;height:13px;--ic-accent:#fff}
.account-menu-who{display:grid;gap:3px;min-width:0}
.account-menu-who small{font-size:10px;font-weight:700;letter-spacing:.14em;color:rgba(244,242,236,.62)}
.account-menu-who strong{font-size:16px;line-height:1.2;overflow-wrap:anywhere}
.account-menu-who span{font-size:12px;color:rgba(244,242,236,.72);overflow-wrap:anywhere}
.plan-chip{justify-self:start;margin-top:4px;padding:3px 8px;border-radius:3px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.plan-chip.plan-trial{background:var(--red);color:#fff}
.plan-chip.plan-pro,.plan-chip.plan-plus{background:var(--paper);color:var(--dark)}
.plan-chip.plan-free{background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1px rgba(244,242,236,.5)}
.account-menu-days{grid-column:1/-1;display:grid;gap:6px;font-size:11px;color:rgba(244,242,236,.72)}
.account-menu-days i{display:block;height:4px;background:rgba(244,242,236,.2);border-radius:2px;overflow:hidden}
.account-menu-days b{display:block;height:100%;background:var(--red)}
.account-menu-item{all:unset;box-sizing:border-box;display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;width:100%;padding:11px 18px;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;border-top:1px solid var(--line)}
.account-menu-item:hover,.account-menu-item:focus{background:var(--red-wash);outline:none}
.account-menu-item:focus-visible{box-shadow:inset 3px 0 0 var(--red)}
.account-menu-icon{display:grid;place-items:center;color:var(--ink)}
.account-menu-hint{font-size:12px;font-weight:500;color:var(--muted)}
.account-menu-item.danger{color:var(--red-deep)}
.account-menu-sep{height:6px;background:var(--paper);border-top:1px solid var(--line)}
.account-menu-foot{padding:9px 18px;border-top:1px solid var(--ink);font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
/* The editor's dark theme: the menu is one of the editor's night menus (the same table at night), its rows on the
   dark card under rules in the line colour. The head stays as it is by day. The desk has no dark theme. */
:root[data-theme=dark] .account-menu{--ink:#f4f2ec;--line:#3a4438;--muted:#b9bdaf;--red-deep:#ef6a55;--red-wash:rgba(239,106,85,.1);background:#252d24;border-color:#3a4438;box-shadow:6px 6px 0 rgba(0,0,0,.22),0 14px 30px rgba(0,0,0,.34)}
:root[data-theme=dark] .account-menu-sep{background:#20261f}
:root[data-theme=dark] .account-menu-foot{border-top-color:#3a4438}

/* ── profile dialog ─────────────────────────────────────────────────────── */
.profile-dialog{border:1px solid var(--ink);border-radius:4px;padding:0;width:min(440px,calc(100vw - 32px));background:var(--paper-2);color:var(--ink);box-shadow:8px 8px 0 rgba(39,44,36,.12)}
.profile-dialog::backdrop{background:rgba(37,45,36,.45)}
.profile-dialog form{display:grid;gap:16px;padding:24px}
.profile-dialog h2{margin:0;font-size:20px}
.profile-photo{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.profile-photo .buttons{display:grid;gap:8px;justify-items:start}
.profile-dialog label{display:grid;gap:6px;font-size:13px;font-weight:600}
.profile-dialog input[type=text]{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:4px;font:inherit;background:#fff}
.profile-dialog .actions{display:flex;gap:10px;justify-content:flex-end}
.profile-dialog .error{margin:0;color:var(--red-deep);font-size:13px}
.profile-dialog button{width:auto;margin:0}
.profile-dialog .button,.profile-dialog .primary,.profile-dialog .quiet{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 16px;border-radius:4px;font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer;border:1px solid var(--ink-line);background:var(--paper-2);color:var(--ink)}
.profile-dialog .button:hover,.profile-dialog .quiet:hover{border-color:var(--ink);background:var(--paper-2)}
.profile-dialog button.primary{background:var(--red);border-color:var(--red);color:#fff}
.profile-dialog button.primary:hover{background:var(--red-deep);border-color:var(--red-deep)}

/* Page-wide button rules (a lift, a grey fill, a fixed height) stay off the avatar and its menu. */
.account button.account-button,.account button.account-menu-item,.account button.account-menu-photo{min-height:0;margin:0;box-shadow:none}
.account button:not(:disabled):hover,.account button:not(:disabled):active,.profile-dialog button:not(:disabled):hover,.profile-dialog button:not(:disabled):active{transform:none}
.account button.account-button:hover{background:var(--ink-wash)}
.account button.account-menu-photo:hover{background:transparent}
.account button.account-menu-item:hover,.account button.account-menu-item:focus{background:var(--red-wash)}
@media (max-width:760px){.account-name{display:none}.account-button{padding:4px}.account-menu{position:fixed;left:12px;right:12px;top:66px;width:auto;max-height:calc(100dvh - 80px)}.account-menu::before{display:none}}
@media (prefers-reduced-motion:reduce){.account-button{transition:none}}