/*
 * Pearl Facial account menu (staff pages + public home).
 * Self-contained: works with or without desk.css.
 */
.acct { position: relative; display: inline-flex; margin-left: .35rem; }
.acct .acct-btn {
  display: inline-flex; align-items: center; gap: .5rem; max-width: 15rem;
  padding: .25rem .7rem .25rem .25rem; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); background: transparent; color: #f4f7f6;
  font: inherit; font-size: .85rem; font-weight: 500;
}
.acct .acct-btn:hover, .acct .acct-btn[aria-expanded="true"] { background: rgba(255,255,255,.1); }
.acct .acct-btn:focus-visible { outline: 2px solid #9fd6cd; outline-offset: 2px; }
.acct-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { width: .7rem; height: .7rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.acct-avatar {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; flex-shrink: 0; display: inline-grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff 0, #f3f0eb 40%, #d9e0df 78%, #aebdbe 100%);
  color: #16323a; font-weight: 600; font-size: .8rem; line-height: 1;
}
.acct .acct-login {
  display: inline-flex; align-items: center; padding: .42rem 1rem; border-radius: 999px; text-decoration: none;
  border: 1px solid currentColor; font-size: .9rem; font-weight: 600;
}

.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 15.5rem;
  padding: .35rem; border-radius: 14px; background: var(--panel, #fff); color: var(--ink, #16323a);
  border: 1px solid var(--line, #dbe5e2); box-shadow: 0 18px 40px -12px rgba(12,24,27,.35);
  text-align: left;
}
.acct-menu[hidden] { display: none; }
.acct-head { display: flex; gap: .65rem; align-items: center; padding: .6rem .65rem .7rem; }
.acct-head .acct-avatar { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
.acct-head-text { min-width: 0; line-height: 1.3; }
.acct-head-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-head-email { font-size: .8rem; color: var(--muted, #557079); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role {
  display: inline-block; margin-top: .25rem; padding: .05rem .5rem; border-radius: 999px;
  font-size: .68rem; font-weight: 600; letter-spacing: .06em; background: var(--surface, #eef3f1); color: var(--accent, #2c7a72);
}
.acct-menu hr { border: 0; border-top: 1px solid var(--line, #dbe5e2); margin: .3rem .2rem; }
.acct .acct-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .65rem; border-radius: 9px;
  border: 0; background: none; color: inherit; font: inherit; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer;
}
.acct .acct-item svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted, #557079); }
.acct .acct-item:hover, .acct .acct-item:focus-visible { background: var(--surface, #eef3f1); outline: none; }
.acct .acct-item[aria-current="page"] { font-weight: 600; }
.acct .acct-item[aria-current="page"]::after { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent, #2c7a72); margin-left: auto; }
.acct .acct-item.danger { color: var(--danger, #a33); }
.acct .acct-item.danger svg { color: currentColor; }

@media (max-width: 640px) {
  .acct .acct-btn { padding-right: .45rem; }
  .acct .acct-btn .acct-name { max-width: 6.5rem; }
  .acct-menu { min-width: 0; width: min(16rem, calc(100vw - 1.5rem)); }
}

/* Public site header (light background) */
.acct.on-light .acct-btn { color: var(--ink, #16323a); border-color: var(--line, #c9d8d5); }
.acct.on-light .acct-btn:hover, .acct.on-light .acct-btn[aria-expanded="true"] { background: var(--surface, #e8efed); }
.acct.on-light .acct-login { color: var(--accent, #2c7a72); }
.acct.on-light .acct-login:hover { background: var(--accent, #2c7a72); color: var(--accent-ink, #fff); border-color: var(--accent, #2c7a72); }
.acct.on-light .acct-menu { background: var(--panel, var(--bg, #fff)); }

/* ---- Front desk shortcut beside the account button ---- */
.acct { align-items: center; gap: .35rem; }
.acct .acct-desk {
  display: none; align-items: center; gap: .4rem; padding: .42rem .85rem; border-radius: 999px;
  color: rgba(244,247,246,.85); text-decoration: none; font-size: .85rem; font-weight: 600; white-space: nowrap;
}
.acct .acct-desk svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.acct .acct-desk:hover, .acct .acct-desk[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); }
.acct.on-light .acct-desk { color: var(--ink, #16323a); }
.acct.on-light .acct-desk:hover { background: var(--surface, #e8efed); color: var(--ink, #16323a); }

/* ---- Phone: hamburger; page links / language / theme move into the menu ---- */
.acct .acct-burger { display: none; width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.acct .acct-m { display: none; }
@media (max-width: 640px) {
  body.acct-staff header .tools > :not(.acct) { display: none !important; }
  body.acct-staff header .bar { flex-wrap: nowrap; }
  .acct .acct-btn { padding: .3rem .55rem .3rem .3rem; gap: .45rem; }
  .acct .acct-name, .acct .acct-caret { display: none; }
  body.acct-staff .acct .acct-burger { display: block; }
  body.acct-staff .acct .acct-m { display: flex; }
  body.acct-staff .acct hr.acct-m { display: block; }
  /* 前台 shortcut: phones only, and only away from the front desk */
  .acct .acct-desk:not([aria-current="page"]) { display: inline-flex; }
  /* Public home on phones: only the 前台 shortcut when signed in (footer has 職員登入) */
  .acct.on-light .acct-btn, .acct.on-light .acct-login, .acct.on-light .acct-menu { display: none !important; }
  .acct.on-light .acct-desk { padding: .55rem; border: 1px solid var(--line, #c9d8d5); }
  .acct.on-light .acct-desk span { display: none !important; }
  .acct.on-light .acct-desk svg { width: 1.1rem; height: 1.1rem; }
}