/* 1149 SHARED·MECARD — the you-card at the top of the profile screen — avatar,
 * name, role line.
 * ═══════════════════════════════════════════════════════════════════════════════
 * WAVE 1 SHARED SUB-ELEMENT MOVE — brief 516 (REPORT-516-appcss-wave1-1149-mecard),
 * re-sourced 2026-09-23 from web/css/app.css lines 1302–1323.
 * ALIGNED 2026-09-28 (brief 9500, the profile shared-component alignment): the
 * wave's verbatim move carried app.css alias tokens and off-grid raw px, and the
 * file had never been linked by web/index.html — the you-card has been rendering
 * UNSTYLED in the running app since the move (found by this brief's step-1 audit:
 * `.me-header` was styled only here, and no page loaded this file). The alignment:
 *
 *   · THE LINK LANDS. web/index.html now loads this file (same commit).
 *   · the `:root { --ink: … }` alias block is GONE — the rules name the real
 *     tokens directly (--text-primary), so the card is self-contained and stops
 *     writing a global custom property from a card file.
 *   · gap 12px → var(--space-12) · padding 14px 0 18px → var(--space-12) 0
 *     var(--space-16) · .me-info gap 2px → var(--space-4) — all on the 4px grid,
 *     the index-row rhythm (--space-12 vertical is the .nh-trow padding).
 *   · .n takes the index name treatment at the you-card's weight: display face,
 *     --text-subtitle (18), weight 600. .s takes the index meta treatment
 *     (label face, --text-meta, weight 600, ink-600) — the same job as 1156's
 *     .s-sub, which is what a role line is.
 *   · micro-states: the you-card is a button — :active tint and the focus ring
 *     per the D-422 floor and the index rows.
 *
 * One consumer (profile.js), one emitter (profile.js); lazy: true — the profile
 * route is lazy (app.js:411). Composes 1133 SHELL·AVATAR (emitted `avatar lg
 * blue`), the as-card type, and 1156 SHARED·ROWPIECE's trailing chevron.
 * Tapping opens the role sheet (editMyRole, profile.js:31).
 * ═══════════════════════════════════════════════════════════════════════════════ */

/* Header row — the avatar + name cluster */
.me-header {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) 0 var(--space-16);
}

/* Name + role line cluster */
.me-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* Name — the display name, in the index name face at the you-card's weight */
.me-info .n {
  font-family: var(--font-display);
  font-weight: var(--weight-600);
  font-size: var(--text-subtitle);
  color: var(--text-primary);
  line-height: var(--leading-120);
}

/* Role line — the secondary line under the name (the index meta treatment) */
.me-info .s {
  font-family: var(--font-label);
  font-size: var(--text-meta);
  font-weight: var(--weight-600);
  color: var(--ink-600);
}

/* Press feedback — the index rows' tint (D-422 floor) */
button.me-header:active {
  background: var(--surface-card-hover);
}

button.me-header:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-8);
}