/* public/dealership-account-menu.css — the account dropdown (Profile / My NFTs / Sign out),
   shared by index.html's .market__account and dealership.html's .dl-head-nav. Markup drawn by
   dealership-account-menu.js at <div id="acctMenu">. Named "dealership-*" so server.mjs's asset
   versioning (VERSIONED wildcard, lib/asset-version.mjs) covers it without a server.mjs edit —
   see dealership-account-menu.js's own header for the measured failure this fixed.

   ⚠️ LAYERS RULE (scripts/check-layers.mjs, Senzu S648): the panel overlays content, so it is
   100% OPAQUE — deliberately NOT var(--surface)/var(--tab-surface). dealership-tablet.css (line
   ~39/75) redefines --surface to var(--tab-surface) = rgba(16, 20, 17, .82) whenever this page is
   the museum's embedded tablet skin (html[data-embed="museum"]), and museum.css defines the same
   --tab-surface at the same alpha for index.html's own tablet chrome. Every background below is a
   literal, opaque colour instead — #101411 is that same rgba(16,20,17,…) colour with alpha forced
   to 1, so it reads as "the same panel, just solid" rather than a new colour.
   VERIFIED STATICALLY: grep -n "rgba(\|backdrop-filter" dealership-account-menu.css — every rgba() match
   below is a box-shadow (alpha only darkens a shadow, never the panel's own paint), and there is
   no backdrop-filter anywhere in this file.
   No top-padding is added under any sticky header here — .acct-panel is position:absolute and
   never changes an ancestor's padding/layout; #acctMenu's own containing header (.market__bar in
   museum.css, .dl-head in dealership.css) is not sticky/fixed in either file (grepped: no
   `position: sticky|fixed` rule targets either selector). */

#acctMenu { position: relative; display: inline-flex; align-items: center; }

.acct-btn,
.acct-connect { display: inline-flex; align-items: center; gap: 8px; }

.acct-avatar {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; line-height: 1; color: #101411;
}

/* The trigger is a bare circle avatar (Senzu: "a circle pfp") — no button chrome, just the disc,
   with a focus/hover ring so it reads as clickable. Both signed-in and signed-out use it. */
.acct-btn--avatar {
  padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0;
  border-radius: 50%;
}
.acct-btn--avatar .acct-avatar { width: 30px; height: 30px; font-size: 12px; }
.acct-btn--avatar:hover .acct-avatar,
.acct-btn--avatar:focus-visible .acct-avatar {
  box-shadow: 0 0 0 2px rgba(60, 223, 123, 0.65); outline: none;
}

/* Signed-out: a neutral disc with a "?" — light glyph on a muted circle (opaque, LAYERS RULE). */
.acct-avatar--anon { background: #2a2f2b; color: #eafbea; font-size: 15px; font-weight: 700; }

.acct-name {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acct-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  width: max-content; min-width: 220px; max-width: min(280px, calc(100vw - 24px));
  border-radius: 12px; padding: 6px; margin: 0;
  background: #ffffff; color: #141414;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.24), 0 12px 32px rgba(0, 0, 0, 0.32);
}
.acct-panel[hidden] { display: none; }

.acct-panel-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.acct-panel-head .acct-avatar { width: 32px; height: 32px; font-size: 13px; }
.acct-panel-headtext { min-width: 0; }
.acct-panel-name {
  font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-panel-handle {
  font-size: 11px; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acct-menu { display: flex; flex-direction: column; }
.acct-menu-item {
  display: block; width: 100%; padding: 9px 10px; margin: 0; border: 0; border-radius: 8px;
  background: transparent; font: inherit; font-size: 13px; font-weight: 600; text-align: left;
  text-decoration: none; color: inherit; cursor: pointer;
}
.acct-menu-item:hover,
.acct-menu-item:focus-visible { background: rgba(0, 0, 0, 0.06); outline: none; }
.acct-signout { color: #b3251f; }

/* THE MUSEUM/TABLET CONTEXT — index.html's own tablet chrome (#market) and any page embedded on
   it (html[data-embed="museum"], dealership-tablet.css's own scoping selector). Opaque #101411,
   never the translucent --tab-surface token — see the header note. */
#market .acct-panel,
html[data-embed="museum"] .acct-panel {
  background: #101411; color: #eafbea;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
}
#market .acct-panel-head,
html[data-embed="museum"] .acct-panel-head { border-bottom-color: rgba(234, 251, 234, 0.16); }
#market .acct-menu-item:hover,
#market .acct-menu-item:focus-visible,
html[data-embed="museum"] .acct-menu-item:hover,
html[data-embed="museum"] .acct-menu-item:focus-visible { background: rgba(234, 251, 234, 0.12); }
#market .acct-signout,
html[data-embed="museum"] .acct-signout { color: #ff8a80; }

/* INTEGRATION (wave 2): the connect flow's one-line failure note (no provider / could not sign
   in) — position:absolute, same as .acct-panel, so it never shifts the header row's own layout.
   Opaque, same LAYERS RULE as the panel above: a literal colour, never a translucent token. */
.acct-connect-note {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 50;
  max-width: min(240px, calc(100vw - 24px));
  padding: 6px 10px; border-radius: 8px; font-size: 11px; line-height: 1.35;
  background: #2a1414; color: #ffb3ab;
}
#market .acct-connect-note,
html[data-embed="museum"] .acct-connect-note { background: #101411; color: #ffb3ab; }

/* ── THE AVATAR IN THE MARKETPLACE TOOLBAR (Senzu, relayed 2026-09-23: on mobile a circle pfp
   "in the top right next to the filters"). #acctMenu was moved into .dl-toolbar because the header
   nav that used to hold it is display:none on the museum's embedded tablet (dealership-tablet.css).
   Only the toolbar avatar grows to 48px (a ≥44px touch target, and the width 46 measured the row
   against); index.html's museum-bar avatar stays 30px — a move keeps the look identical elsewhere. */
.dl-toolbar #acctMenu { flex: none; }
.dl-toolbar .acct-btn--avatar .acct-avatar { width: 48px; height: 48px; font-size: 18px; }
.dl-toolbar .acct-avatar--anon { font-size: 24px; }

/* ── NOTIFICATIONS SUB-VIEW — the feed shown in place of the account menu when "Notifications" is
   tapped (Senzu: "notifications to open + set up alerts"). menu/head/notif swap via the [hidden]
   attribute, and .acct-menu / .acct-panel-head set display:flex, which BEATS the UA [hidden]
   display:none — so these explicit rules are what actually hide them. */
.acct-menu[hidden],
.acct-panel-head[hidden],
.acct-notif[hidden] { display: none; }

.acct-notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 4px 8px; margin-bottom: 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.acct-notif-back {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; margin: 0;
  border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13px;
  font-weight: 700; color: inherit; cursor: pointer;
}
.acct-notif-back:hover,
.acct-notif-back:focus-visible { background: rgba(0, 0, 0, 0.06); outline: none; }
.acct-notif-back-chev { font-size: 17px; line-height: 1; }
.acct-notif-alerts {
  flex: none; padding: 5px 8px; border-radius: 8px; font-size: 12px; font-weight: 700;
  text-decoration: none; color: #146c43; background: rgba(60, 223, 123, 0.14);
}
.acct-notif-alerts:hover,
.acct-notif-alerts:focus-visible { background: rgba(60, 223, 123, 0.24); outline: none; }
.acct-notif-list { max-height: 320px; overflow-y: auto; }

/* Museum/tablet skin: match the panel's opaque dark surface (LAYERS RULE, same as above). */
#market .acct-notif-head,
html[data-embed="museum"] .acct-notif-head { border-bottom-color: rgba(234, 251, 234, 0.16); }
#market .acct-notif-back:hover,
#market .acct-notif-back:focus-visible,
html[data-embed="museum"] .acct-notif-back:hover,
html[data-embed="museum"] .acct-notif-back:focus-visible { background: rgba(234, 251, 234, 0.12); }
#market .acct-notif-alerts,
html[data-embed="museum"] .acct-notif-alerts { color: #7cf3a8; background: rgba(60, 223, 123, 0.16); }