/* Accounts: the signed-in user in the shell header, and the owner's admin page (screens/admin.js).
   Same Signature rules as everywhere: neutral greys, flush panels, 1px rules, pink only on "Create codes". */

/* ---------- Shell: user button and its menu ---------- */
.shell-user-box { position: relative; flex: none; display: flex; align-items: center; }
.shell-user-box[hidden] { display: none; }
.shell-user { height: 32px; max-width: 200px; display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; border: 0; border-radius: var(--r-control); background: transparent; color: var(--c-ink); font: inherit; font-size: var(--fs-m); font-weight: 600; cursor: pointer; }
.shell-user:hover, .shell-user[aria-expanded="true"] { background: var(--c-field); }
.shell-user-face { flex: none; display: inline-flex; }
.shell-user-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; min-width: 220px; padding: 4px 0; background: var(--c-raised); border-radius: var(--r-control); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.shell-menu[hidden] { display: none; }
.shell-menu-who { margin: 0; padding: 8px 16px 10px; border-bottom: 1px solid var(--c-raised-hover); font-size: var(--fs-s); line-height: 16px; color: var(--c-muted); overflow-wrap: anywhere; }
.shell-menu .shell-menu-item { min-height: 34px; }
.shell-menu .shell-menu-item:not(:disabled):hover, .shell-menu .shell-menu-item:focus-visible { background: var(--c-raised-hover); }
.shell-menu .shell-menu-item[aria-current="page"] { font-weight: 600; }
@media (max-width: 899.98px) {
  /* Phone header: the user button sits in the top row next to the screen's actions. */
  .shell-user-box { grid-area: user; height: var(--header-h); padding-right: var(--gutter); }
  .shell-header.has-user { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "left actions user" "steps steps steps" "note note note"; }
  .shell-header.has-user .shell-actions { padding-right: 8px; }
  .shell-user { padding: 0 4px; }
  .shell-user-name { display: none; }
}

/* ---------- Admin page ---------- */
.screen-admin { background: var(--c-panel); }
.screen-admin .admin-wrap { flex: 1; display: flex; justify-content: center; padding: 48px 32px; }
.screen-admin .admin-inner { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 16px; }
.screen-admin .admin-inner > .display:focus { outline: none; }
.screen-admin .admin-tabs { max-width: 420px; }
.screen-admin .admin-status { margin: 0; font-size: var(--fs-m); color: var(--c-muted); }
.screen-admin .admin-status[hidden] { display: none; }
.screen-admin .admin-empty { margin: 0; padding: 24px 0 8px; border-top: 1px solid var(--c-field); font-size: var(--fs-m); color: var(--c-muted); }

.screen-admin .admin-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-field); }
.screen-admin .admin-row { display: grid; align-items: center; column-gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--c-field); }
.screen-admin .admin-row-wait { grid-template-columns: minmax(0, 1fr) 160px 180px; }
.screen-admin .admin-row-code { grid-template-columns: minmax(0, 1fr) 180px 96px 180px; }
.screen-admin .admin-row-user { grid-template-columns: minmax(0, 1fr) 80px 150px 64px 112px 220px; }
.screen-admin .admin-person { min-width: 0; display: flex; align-items: center; gap: 12px; }
.screen-admin .admin-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.screen-admin .admin-name, .screen-admin .admin-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; font-weight: 600; }
.screen-admin .admin-code { font-size: 15px; letter-spacing: 0.04em; }
.screen-admin .admin-row-code[data-state="used"] .admin-code, .screen-admin .admin-row-code[data-state="revoked"] .admin-code { color: var(--c-muted); font-weight: 400; }
.screen-admin .admin-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-s); line-height: 16px; color: var(--c-muted); }
.screen-admin .admin-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-m); }
.screen-admin .admin-state::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; border-radius: 50%; background: currentColor; vertical-align: middle; }
.screen-admin .admin-state[data-tone="declined"], .screen-admin .admin-state[data-tone="waitlist"] { color: var(--c-muted); }
.screen-admin .admin-state[data-tone="blocked"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.screen-admin .admin-actions { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }

.screen-admin .admin-codes { display: flex; flex-direction: column; gap: 16px; }
.screen-admin .admin-create { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.screen-admin .admin-count { width: 96px; }
.screen-admin .admin-note { flex: 1; min-width: 180px; }
.screen-admin .admin-fresh { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--r-control); background: var(--c-field); }
.screen-admin .admin-fresh-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.screen-admin .admin-fresh-codes { margin: 0; font-size: 15px; line-height: 24px; letter-spacing: 0.04em; word-spacing: 8px; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.screen-admin .admin-code.selectable { user-select: text; -webkit-user-select: text; }

@media (max-width: 899.98px) {
  .screen-admin .admin-wrap { padding: 32px var(--gutter); }
  .screen-admin .admin-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .screen-admin .admin-row .admin-cell { grid-column: 1; font-size: var(--fs-s); }
  .screen-admin .admin-row .admin-actions { grid-column: 2; grid-row: 1; }
  .screen-admin .admin-tabs { max-width: none; }
}

/* Affiliate page (screens/invites.js): same composition as the admin page. */
.screen-invites .invites-intro { margin: 0; max-width: 560px; }
.screen-invites .invites-create { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }