/* account-menu.css — the face on the bar and the card it opens (25a, 25c).
 *
 * Scoped to .top-right-panel like every other control in this header, so no
 * page can catch these rules by accident and no page skin can re-cut them.
 * The card is the course menu's card with a taller head: two popovers in one
 * header that looked different would read as two products.
 *
 * The ring states are the whole of the face's vocabulary (25a): accent for
 * synced, ink for changes waiting, dashed for a browser-only learner. They
 * differ in colour AND in border style, because DESIGN.md requires a state to
 * survive without hue.
 */
/* NOT .acct: dialog.css:30 already owns that name for the sign-in panel and
   gives it padding:30px 28px 24px. A header wrapper wearing it inherited the
   28px sides, which showed up as a gap between the chip and the face. Generic
   class names in this repo are taken — see decision 0013. */
.top-right-panel .acct-host{position:relative;flex:none}

/* The face replaces the button's chunky padding with the node itself; the
   40px box keeps the touch target the text button had (#138). */
.top-right-panel .acct-btn{
  padding:0;border:0;background:none;box-shadow:none;
  width:40px;height:40px;position:relative;
  display:inline-flex;align-items:center;justify-content:center;
}
.top-right-panel .acct-btn:hover{transform:translateY(-1px);box-shadow:none}
.top-right-panel .acct-btn:active{transform:translateY(1px);box-shadow:none}
.top-right-panel .acct-btn .p-node{
  width:38px;height:38px;border-width:3px;pointer-events:none;
  transition:box-shadow .12s ease;
}
.top-right-panel .acct-btn.is-synced .p-node{border-color:var(--play-accent)}
.top-right-panel .acct-btn.is-waiting .p-node{border-color:var(--play-ink)}
/* Browser-only. The dash this started as read as a dotted scribble at 38px,
   and --play-soft was 2.13:1 on the light card — under the 3:1 a control's
   own outline owes. Solid, one weight thinner, in the caption ink: the ring
   differs from the signed-in states by width AND lightness, so it survives
   greyscale, and the button's own label says the state in words. */
.top-right-panel .acct-btn.is-guest .p-node{border-width:2px;border-color:var(--play-mute)}
/* Open: a gap ring in the page colour inside the accent one, so the face
   lifts off the bar (25c). 25g keeps the page colour at night, which is why
   this is --play-bg and not a paper white. */
.top-right-panel .acct-btn[aria-expanded="true"] .p-node{
  box-shadow:0 0 0 3px var(--play-bg),0 0 0 5px var(--play-accent);
}
.top-right-panel .acct-btn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:999px}

/* Unread: one thing waiting, at five o'clock. */
.top-right-panel .acct-dot{
  position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;
  border:2px solid var(--play-bg);background:var(--play-ink);pointer-events:none;
}

.top-right-panel .acct-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;
  width:min(92vw,280px);padding:0;overflow:hidden;
  border:2px solid var(--play-ink);border-radius:14px;
  background:var(--play-card);color:var(--play-ink);box-shadow:4px 4px 0 var(--play-edge);
  font-family:var(--play-display);text-align:left;
}
.top-right-panel .acct-menu[hidden]{display:none}

/* Who you are, first and big — the row that answers "which account is this?"
   A grid with a spanned row (face: row 1/3) reserved space for a second
   line whether or not one existed: a signed-in learner has no sub-line, so
   the name sat in row 1 alone, pinned to the row's TOP rather than centred
   against the 44px avatar beside it — dead air below the name, above the
   rule (found from the user's own screenshot, then measured: name and face
   both started at the same 10px offset from the row's top, on a row whose
   height the 44px face alone determines). Flex fixes it structurally: name
   (and sub, when there is one) live in one column, and align-items:center
   on the row centres that column against the face as a group, whatever its
   line count. */
.top-right-panel .acct-id{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-bottom:2px solid var(--play-ink);
}
.top-right-panel .acct-id .acct-id-face{flex:none;display:inline-flex}
.top-right-panel .acct-id .p-node{width:44px;height:44px}
.top-right-panel .acct-id .acct-id-main{
  flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;
}
.top-right-panel .acct-id .acct-id-main b{font-size:.95rem;line-height:1.2;overflow-wrap:anywhere}
.top-right-panel .acct-id .acct-id-sub{text-transform:none;letter-spacing:0}
.top-right-panel .acct-id .acct-edit{
  flex:none;color:var(--play-mute);text-decoration:none;
  padding:6px;margin:-6px;border-radius:8px;line-height:1;
}
.top-right-panel .acct-id .acct-edit:hover{color:var(--play-ink)}
.top-right-panel .acct-id .acct-edit:focus-visible{outline:3px solid var(--play-link);outline-offset:2px}

/* The numbers the trainer already knows, so the menu is useful on its own.
   Each cell caps at 50% rather than growing to fill the row: a page with no
   CourseCore (the landing) computes only "due", and flex:1 on one child
   stretched it across the whole strip — a visibly different panel shape
   from a page that computes two. Capped, a lone stat sits the same width a
   paired one would and the row centres it (found by measuring: the cell was
   276px wide alone, 137px paired). Three cells (due + streak + week) still
   share the row exactly as before — the cap is above what three ever need,
   so flex-shrink alone brings them back to an even split. */
.top-right-panel .acct-stats{display:flex;justify-content:center;border-bottom:2px solid var(--play-track)}
.top-right-panel .acct-stat{
  flex:0 1 50%;max-width:50%;min-width:0;display:flex;flex-direction:column;align-items:center;
  gap:1px;padding:7px 4px;text-align:center;
}
.top-right-panel .acct-stat + .acct-stat{border-left:2px solid var(--play-track)}
.top-right-panel .acct-stat b{font-size:1rem;line-height:1.1}
.top-right-panel .acct-stat .p-tag{font-size:.6rem;letter-spacing:.04em}
/* .p-tag uppercases at kit level and has no Hindi cancel of its own, so every
   surface that borrows it adds one: Devanagari has no capitals, and forcing
   the transform mangles the matras (#60 family). */
:root[lang="hi"] .top-right-panel .acct-stat .p-tag{text-transform:none;letter-spacing:0}

.top-right-panel .acct-links{display:flex;flex-direction:column;padding:4px 0}
.top-right-panel .acct-row{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:8px 12px;border:0;background:none;color:var(--play-ink);
  font:inherit;font-size:.85rem;text-align:left;text-decoration:none;cursor:pointer;
}
.top-right-panel .acct-row:hover{background:var(--play-paper)}
.top-right-panel .acct-row:focus-visible{outline:3px solid var(--play-link);outline-offset:-3px}
.top-right-panel .acct-row .acct-row-label{flex:1;min-width:0}
.top-right-panel .acct-row .acct-row-go{color:var(--play-mute)}

.top-right-panel .acct-foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;border-top:2px solid var(--play-track);
}
.top-right-panel .acct-foot .acct-mail{
  flex:1;min-width:0;text-transform:none;letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top-right-panel .acct-foot .p-gbtn,
.top-right-panel .acct-foot .p-btn{font-size:.78rem;padding:4px 12px}
.top-right-panel .acct-foot .acct-signin{flex:1}

@media (prefers-reduced-motion: reduce){
  .top-right-panel .acct-btn .p-node{transition:none}
}