/* account.css — The account chip, its menu, and the auto-assigned profile mark.
   Cascade position 7 of 18. Order is load-bearing and is asserted by
   verify-fixtures.mjs; index.html links these explicitly (never @import) because Caddy's
   try_files turns a missing file into a 200 text/html SPA shell.
   Owner: section (b).

   Items 9-21 plus NEW-avatar. Three rules govern everything below:

   1. `.chip-top` (css/base.css) is CONSUMED, never redeclared. Its height, padding,
      font-size and line-height are what make the account pill and the credits pill one
      object (item 12); redeclaring any of them here re-opens the defect this file is
      here to close. The only box property this file sets on `.acct` is `gap`, because
      DESIGN-SPEC §4.3 asks for 8px between a 22px mark and its label and base ships the
      4px the credits pill wants. Height, top, bottom and baseline are untouched.
   2. The menu is a `popover="auto"` in the TOP LAYER, so its elevation, its escape from
      `.top { overflow: hidden }` and its dismissal are the platform's, not ours
      (items 14, 19). Anchor positioning puts it 8px under the chip's real bottom edge;
      js/account.js only positions it on browsers without `anchor-name`.
   3. REFERENCE-STUDY §18: a floating surface takes its hairline from stop 1 of the
      box-shadow and carries NO `border`; hover changes fill only; nothing here
      transitions longer than --sn-dur-fast (120ms). */

/* ══ The chip (items 9, 10, 11, 12, 13, 21) ═══════════════════════════════════════════
   Signed out this is a plain 32px pill with symmetric 12px padding and no mark, so the
   label's left and right insets are equal (item 10) and `line-height: 1.4` on the 12.5px
   type keeps the "g" of "Sign in" clear of the border (item 11). Signed in the mark
   appears INSIDE the same 32px box — 22px is shorter than the 30px content box, so the
   chip cannot grow (item 13). CORRECTIONS.md (5 Sep) overrides DESIGN-SPEC §4.3's
   signed-out placeholder circle: no avatar before there is an identity. */
.acct {
  gap: var(--sn-space-2);
  color: var(--sn-ink);
  transition: background-color var(--sn-dur-fast) var(--sn-ease-out),
              border-color var(--sn-dur-fast) var(--sn-ease-out),
              color var(--sn-dur-fast) var(--sn-ease-out);
  anchor-name: --sn-acct-chip;
}
.acct:hover { border-color: var(--sn-line-strong); }
/* The trigger stays visibly "on" for as long as its menu is up. Fill and border only —
   no transform, no shadow growth (REFERENCE-STUDY §18). */
.acct[aria-expanded="true"] {
  background: var(--sn-accent-tint);
  border-color: var(--sn-accent-edge);
}
.acct__name {
  max-width: 160px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The chevron says "this opens something". It exists only when it is true: signed out
   the chip opens the auth dialog and js/account.js keeps this [hidden]. */
.acct__chev { display: flex; width: 12px; height: 12px; flex: 0 0 auto; color: var(--sn-ink-mute); }
.acct__chev svg { width: 100%; height: 100%; display: block; }

/* ══ The auto-assigned profile mark (NEW-avatar) ══════════════════════════════════════
   One of eight geometric marks on one of five palette hues, chosen by a stable hash of
   the account id in js/account.js — identical on every device, with no storage, no
   upload, no request and no backend field. The hues are references to tokens that
   already exist; this file introduces no colour of its own (css-audit item 82). */
.avatar {
  --sn-avatar-hue: var(--sn-ink-dim);
  display: grid; place-items: center;
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sn-avatar-hue) 16%, var(--sn-surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sn-avatar-hue) 34%, var(--sn-surface-2));
  color: var(--sn-avatar-hue);
  overflow: hidden;
}
/* The chip's mark owns its own flush-left inset, so the inset disappears with the mark
   and the signed-out label keeps symmetric padding (item 10). */
.acct .avatar { margin-left: -6px; }
.avatar--lg { width: 28px; height: 28px; }
.avatar__mark { width: 12px; height: 12px; display: block; fill: currentColor; }
.avatar--lg .avatar__mark { width: 15px; height: 15px; }
.avatar--h0 { --sn-avatar-hue: var(--sn-accent); }
.avatar--h1 { --sn-avatar-hue: var(--sn-ok); }
.avatar--h2 { --sn-avatar-hue: var(--sn-warn); }
.avatar--h3 { --sn-avatar-hue: var(--sn-bad-title); }
.avatar--h4 { --sn-avatar-hue: var(--sn-ink-dim); }
/* The eight marks are <symbol>s in index.html. The sprite must stay in the document
   without occupying it; `hidden` would work in Chromium but is not guaranteed for
   referenced symbols, so it is taken out of flow at zero size instead. */
.acct-marks { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ══ The menu (items 14, 17, 18, 19, 20) ══════════════════════════════════════════════
   `popover="auto"` gives the top layer, light dismiss and Escape. The UA stylesheet for
   [popover] sets `position: fixed; inset: 0; margin: auto; border: solid; padding: .25em`
   — every one of those has to be undone here or the card centres itself on the screen
   inside a default border. */
.acct__menu {
  position: fixed;
  inset: auto;
  margin: 0;
  width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 20px));
  padding: var(--sn-space-1);
  border: 0;
  border-radius: var(--sn-radius-md);
  background: var(--sn-surface-3);
  color: var(--sn-ink);
  text-align: left;
  overflow: visible;
  /* Elevation is ONE property: the hairline is stop 1, so the card can never carry both
     a border and a ring (REFERENCE-STUDY §18, GitHub's --shadow-floating-small). */
  box-shadow: 0 0 0 1px var(--sn-line-raised), var(--sn-shadow-raised);
}
/* Anchor positioning: 8px below the chip's MEASURED bottom edge and right-aligned to it,
   at every viewport and every chip width (item 14). js/account.js only steps in when
   `anchor-name` is unsupported. */
@supports (anchor-name: --x) {
  .acct__menu {
    position-anchor: --sn-acct-chip;
    top: anchor(--sn-acct-chip bottom);
    right: anchor(--sn-acct-chip right);
    margin-top: var(--sn-space-2);
    position-try-fallbacks: flip-block;
  }
}
/* 120ms, opacity + a 4px lift, one easing. `allow-discrete` is what lets the popover's
   own `display` participate, so there is no JS animation bookkeeping. */
.acct__menu {
  opacity: 1; translate: 0 0;
  transition: opacity var(--sn-dur-fast) var(--sn-ease-out),
              translate var(--sn-dur-fast) var(--sn-ease-out),
              overlay var(--sn-dur-fast) allow-discrete,
              display var(--sn-dur-fast) allow-discrete;
}
.acct__menu:not(:popover-open) { opacity: 0; translate: 0 -4px; }
@starting-style { .acct__menu:popover-open { opacity: 0; translate: 0 -4px; } }

/* Every row in the card shares ONE left inset, header row included (item 17). */
.acct__identity {
  display: flex; align-items: center; gap: var(--sn-space-2);
  padding: var(--sn-space-2) var(--sn-space-3);
}
.acct__identity-text { display: grid; min-width: 0; }
.acct__identity b {
  font-size: var(--sn-text-sm); font-weight: 600; color: var(--sn-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct__identity span { font-size: var(--sn-text-xs); color: var(--sn-ink-mute); overflow-wrap: anywhere; }
/* item 16: the balance follows the credits pill. js/account.js reveals this row exactly
   when the pill is not on screen, so the number is reachable at every viewport. */
.acct__balance { color: var(--sn-ink-dim); }
/* REFERENCE-STUDY §18 rule 8: the separator is FULL-BLEED and the items are inset, so the
   rule reaches the card's own edge while the rows stop 4px short of it. The negative
   horizontal margin cancels the card's padding — DESIGN-SPEC §4.4's "full bleed, margin
   4px 0" cannot be both, and §2.3's measured shadcn target (`margin: 4px -4px`) is the
   one that is actually full-bleed. */
.acct__sep {
  height: 1px;
  margin: var(--sn-space-1) calc(-1 * var(--sn-space-1));
  background: var(--sn-line);
}
.acct__row {
  display: flex; align-items: center; gap: var(--sn-space-2);
  width: 100%; height: 36px;
  padding: 0 var(--sn-space-3);
  border: 0; border-radius: var(--sn-radius-sm);
  background: transparent; color: var(--sn-ink);
  font: inherit; font-size: var(--sn-text-sm); text-align: left;
  white-space: nowrap;
  transition: background-color var(--sn-dur-fast) var(--sn-ease-out),
              color var(--sn-dur-fast) var(--sn-ease-out);
}
.acct__row:hover:not(:disabled), .acct__row:focus-visible {
  background: rgb(var(--sn-white-rgb) / .07);
}
/* The ring is drawn inside the row so it never straddles the card's own hairline. */
.acct__row:focus-visible { outline-offset: -2px; }
.acct__row-icon { width: 14px; height: 14px; flex: 0 0 auto; color: var(--sn-ink-mute); }
/* item 18: the session-ending action is distinguishable without reading the label. */
.acct__row--destructive { color: var(--sn-bad); }
.acct__row--destructive .acct__row-icon { color: var(--sn-bad); }
.acct__row--destructive:hover:not(:disabled), .acct__row--destructive:focus-visible {
  background: var(--sn-bad-tint);
}
/* item 20: both rows were disabled by JS for the whole sign-out round trip with nothing
   on screen saying so. Disabled is a colour AND a cursor, never a fade; the busy row
   swaps its 14px icon for the shared 14px spinner from css/base.css, so the row's box
   does not move (REFERENCE-STUDY §18: nothing reflows on a state change). */
.acct__row:disabled { color: var(--sn-ink-mute); cursor: not-allowed; }
.acct__row:disabled .acct__row-icon { color: var(--sn-ink-mute); }
.acct__row[data-busy="true"] { cursor: progress; }
.acct__row[data-busy="true"] .acct__row-icon { display: none; }

@media (max-width: 430px) {
  .acct { max-width: min(142px, 44vw); min-width: 0; }
  .acct__name { max-width: 82px; }
  /* Full-bleed on a phone: the card keeps its 8px anchor to the chip and takes the
     width of the screen instead of the trigger. */
  .acct__menu { min-width: 0; max-width: none; width: auto; left: 10px; right: 10px; }
}