/* User identity — user card, user panel, system-shell language row, theme control.
   Composes DS tokens only (tokens/ must include theme.dark.css for dark mode).
   Class names are UNIQUE to this component family: .usercard / .userpanel /
   .syslang / .themeseg — do not reuse for anything else (guard-test rule).
   All layout uses logical properties: works in LTR and RTL with no mirrored rules. */

/* ---- The user card (sidebar footer) ------------------------------------- */
/* Wrapper replacing .sidebar__footer's identity block. position:relative anchors
   the panel. In rail mode (≤1023px) the card collapses to avatar-only; in
   bottom-bar mode (≤767px) it rides as the last item of the bar. */
.usercard-slot { position: relative; margin-block-start: auto;
  padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-inverse); }
.usercard { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%;
  min-block-size: var(--control-h-md); padding: var(--space-1) var(--space-2);
  border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: start; }
.usercard:hover, .usercard[aria-expanded="true"] { background: color-mix(in srgb, var(--white) 8%, transparent); }
.usercard__avatar { inline-size: 32px; block-size: 32px; flex: 0 0 auto; border-radius: var(--radius-pill);
  display: grid; place-items: center; background: var(--surface-brand-soft);
  color: light-dark(var(--amber-800), var(--amber-300)); /* initials must theme: amber-800 is invisible on the dark 16% tint */
  font: var(--type-label); letter-spacing: .02em; }
/* On the dark sidebar the initials lift to amber-300 for contrast on the tint */
.sidebar .usercard__avatar, .usercard-slot .usercard__avatar { color: var(--amber-300); }
/* Nameless account: person glyph, never a phone number in the disc */
.usercard__avatar--anon { background: color-mix(in srgb, var(--white) 10%, transparent); color: var(--ink-300); }
.userpanel__head .usercard__avatar--anon { background: var(--surface-active); color: var(--text-muted); }
.usercard__id { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }
.usercard__name { font: var(--type-small); font-weight: var(--weight-medium); color: var(--ink-100);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Phone: always LTR, mono, isolated — never reorders inside RTL text */
.usercard__phone { font: var(--type-caption); font-family: var(--font-mono); color: var(--ink-400);
  direction: ltr; unicode-bidi: isolate; }
.usercard__chev { color: var(--ink-500); transform: rotate(180deg); /* chevron-down glyph points up = panel opens upward */ }
.usercard[aria-expanded="true"] .usercard__chev { transform: none; }

/* Rail (≤1023px): avatar only — the same element, CSS-collapsed. Matches the
   ladder in tokens/responsive.css; no component-invented breakpoints. */
@media (max-width: 1023px) {
  .usercard-slot { display: flex; justify-content: center; padding-block-start: var(--space-2); }
  .usercard { inline-size: auto; padding: var(--space-1); }
  .usercard__id, .usercard__chev { display: none; }
}
/* Bottom bar (≤767px): last item in the bar; the panel becomes a sheet. */
@media (max-width: 767px) {
  .usercard-slot { margin: 0; padding: 0; border: 0; block-size: var(--bottombar-h);
    display: flex; align-items: center; justify-content: center; }
}

/* ---- The user panel ------------------------------------------------------ */
.userpanel { position: absolute; inset-inline: 0; inset-block-end: calc(100% + var(--space-2));
  min-inline-size: 272px; z-index: 70; background: var(--surface-raised);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; }
/* Rail: opens beside the rail, bottom-anchored */
@media (max-width: 1023px) {
  .userpanel { inset-inline: auto; inset-inline-start: calc(100% + var(--space-2));
    inset-block-end: 0; inline-size: 296px; }
}
/* Phone: bottom sheet above the bar, under a scrim */
@media (max-width: 767px) {
  .userpanel { position: fixed; inset-inline: 0; inset-block-end: 0; inline-size: auto; z-index: 90;
    border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
    padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .userpanel-scrim { position: fixed; inset: 0; z-index: 89; background: var(--scrim-bottom); }
}
.userpanel__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.userpanel__head .usercard__avatar { inline-size: 40px; block-size: 40px;
  color: light-dark(var(--amber-800), var(--amber-300)); }
.userpanel__name { font: var(--type-body-strong); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.userpanel__phone { font: var(--type-caption); font-family: var(--font-mono); color: var(--text-muted);
  direction: ltr; unicode-bidi: isolate; }
.userpanel__hr { block-size: 1px; background: var(--border-subtle); margin-block: var(--space-1); }
.userpanel__label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-muted); padding: var(--space-2) var(--space-2) var(--space-1); }
.userpanel__row { display: flex; align-items: center; gap: var(--space-2); inline-size: 100%;
  min-block-size: var(--control-h-md); padding: var(--space-1) var(--space-2); border: 0; cursor: pointer;
  border-radius: var(--radius-sm); text-align: start; font: var(--type-small); font-weight: var(--weight-medium);
  color: var(--text-primary); background: transparent; }
.userpanel__row:hover { background: var(--surface-hover); }
.userpanel__row--active { background: var(--surface-selected); }
.userpanel__row--danger { color: var(--text-danger); }
/* Language labels: each in its OWN script and direction (endonyms — shipped rule).
   The lang value + code chip stays LTR mono. */
.userpanel__lang { flex: 1; unicode-bidi: isolate; }
.userpanel__code { font: var(--type-label); font-family: var(--font-mono); color: var(--text-muted);
  text-transform: uppercase; direction: ltr; unicode-bidi: isolate; }

/* ---- Theme segmented control (inside the panel) -------------------------- */
.themeseg { display: flex; gap: 4px; padding-inline: var(--space-2); }
.themeseg__btn { flex: 1; min-block-size: var(--control-h-md); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px; cursor: pointer; border-radius: var(--radius-sm);
  padding: var(--space-1); border: 1px solid var(--border-default); background: transparent;
  color: var(--text-secondary); font: var(--type-caption); }
.themeseg__btn:hover { background: var(--surface-hover); }
.themeseg__btn--active { border-color: var(--border-brand); background: var(--surface-selected); color: var(--text-primary); }

/* ---- System-shell language row (the fire exit, §3) ------------------------ */
/* Sits directly under the system shell's footer caption line. Quiet by design. */
.syslang { display: flex; align-items: center; gap: var(--space-1); }
.syslang__globe { color: var(--text-muted); margin-inline-end: 2px; }
.syslang__btn { border: 0; background: transparent; cursor: pointer; min-block-size: var(--control-h-md);
  padding: 0 var(--space-1); font: var(--type-caption); color: var(--text-muted); unicode-bidi: isolate;
  text-decoration: underline dotted; text-underline-offset: 3px; }
.syslang__btn--active { color: var(--text-primary); font-weight: var(--weight-medium); text-decoration: none; }
.syslang__sep { color: var(--text-disabled); font: var(--type-caption); }