/* Me -- authenticated landing page.

   Narrow centered identity-led surface (slice #281): avatar + display
   name + email at the top, Account section, full-width sign-out as
   the close, legal microtype row last. Sign-out IS the close per
   principle 1.5 (the page ends with intention) -- the prior layout's
   Plan / Meal-planning / Pilot Pro Preview cards trained the eye to
   skim past identity; the redesign re-earns attention by removing
   them and centering identity instead.

   Used in: /me page template.

   Note: /me/delete uses its own `.account-delete__*` block in
   account-delete.css; the two pages share no selectors. See slice
   #281 D8.

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it, and utility classes always do. */

@layer components {

/* The .me content column takes the --content-form tier (spacing-foundation
   D2). 512px keeps it aligned with /signin's column width. */
.me {
  max-width: var(--content-form);
  margin: var(--space-section) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Centered identity block at the top of the column. Avatar above the
   name (centered as a block), name as h1, email as muted plain sans
   below. The Edit button (when a name is set) sits below the h1 on
   desktop and stays centered on mobile via the column-flex stack. */
.me__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.me__avatar {
  /* inline-flex collapses to the avatar's intrinsic 64px square so the
     wrapper doesn't stretch across the column. */
  display: inline-flex;
}

.me__name {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-tight);
  margin: 0;
}

/* When DisplayName is NULL, the h1 wraps the "Add your name" button.
   Visual hierarchy preserves the h1 semantic; the visual shrinks to
   the button's small ghost-button style. */
.me__name--empty {
  font-weight: 500;
}

.me__email {
  color: var(--md-on-surface-variant);
  font-size: var(--text-base);
  margin: 0;
}

/* Account section -- small label-caps heading + two stacked links. The
   narrow column itself is the container; no card chrome around the
   links per principle 1.1 (default to omission). */
.me__account {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.me__link {
  display: inline-grid;
  place-items: center;
  min-height: var(--control-h);
  padding: 0 var(--space-4);
  border: 1px solid var(--md-border);
  border-radius: var(--radius-md);
  color: var(--md-on-surface);
  font-weight: 600;
  text-decoration: none;
}

.me__link--danger {
  border-color: color-mix(in srgb, var(--md-error) 48%, var(--md-border));
  color: var(--md-error);
}

.me__signout-btn {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-5);
  background: transparent;
  border: 1px solid var(--md-border);
  border-radius: var(--radius-md);
  color: var(--md-on-surface);
  font-weight: 500;
  transition:
    border-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
    color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
}

.me__signout-btn:hover {
  border-color: var(--md-primary);
  color: var(--md-primary-text);
}

.me__signout-btn:focus-visible {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: var(--focus-ring);
}

/* Legal links absorbed from the global footer when it was dropped
   from authed app surfaces -- see site-footer.css for the rationale.
   Microtype row, no card chrome: the four links are reference
   material, not a primary action. */
.me__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--md-on-surface-variant);
}

.me__legal a {
  color: var(--md-on-surface-variant);
  text-decoration: none;
  transition: color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
}

.me__legal a:hover {
  color: var(--md-on-surface);
  text-decoration: underline;
}

.me__legal a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ==============================================
   NAME field -- inline edit affordance (#273 PR2)
   ============================================== */

/* "Saved." flash after a POST /me/name redirect. Scrubbed from the
   URL via me-name.js so a refresh doesn't re-fire it. Centered chip
   inside the identity block, below the email. */
.me__flash {
  padding: var(--space-2) var(--space-3);
  background: var(--md-primary-container);
  color: var(--md-on-surface);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin: 0;
}

/* "Edit" and "Add your name" share the small ghost-button visual. The
   Edit variant is muted; Add is the same shape but anchors the empty
   state's primary action. */
.me__name-edit-btn,
.me__name-add-btn {
  height: var(--control-h);
  padding: 0 var(--space-4);
  background: transparent;
  border: 1px solid var(--md-border);
  border-radius: var(--radius-md);
  color: var(--md-on-surface);
  font-weight: 500;
  font-size: var(--text-sm);
}

.me__name-edit-btn:hover,
.me__name-add-btn:hover {
  border-color: var(--md-primary);
  color: var(--md-primary-text);
}

.me__name-edit-btn:focus-visible,
.me__name-add-btn:focus-visible {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: var(--focus-ring);
}

/* The inline form: simple stacked column matching .signin__form
   rhythm so the editor feels consistent with the signin name field.
   The class rule's `display: flex` would override the `[hidden]`
   attribute's user-agent default `display: none` (UA specificity is
   0, class specificity is 10), so we need the [hidden] attr selector
   to re-assert. Pre-existing #273 bug surfaced by slice #281's visual
   demo; fixed here as just-do-it. */
.me__name-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-border-muted);
  border-radius: var(--radius-md);
}

.me__name-form[hidden] {
  display: none;
}

.me__name-label {
  font-size: var(--text-sm);
  font-weight: 500;
}

.me__name-input {
  height: var(--control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--md-border);
  border-radius: var(--radius-md);
  background: var(--md-surface);
  font-size: var(--text-base);
}

.me__name-input:focus-visible {
  outline: none;
  border-color: var(--md-primary);
  box-shadow: var(--focus-ring);
}

.me__name-actions {
  display: flex;
  gap: var(--space-2);
}

.me__name-save-btn {
  height: var(--control-h);
  padding: 0 var(--space-5);
  background: var(--md-primary);
  color: var(--md-on-primary);
  border-radius: var(--radius-md);
  font-weight: 500;
}

.me__name-cancel-btn {
  height: var(--control-h);
  padding: 0 var(--space-4);
  background: transparent;
  border: 1px solid var(--md-border);
  border-radius: var(--radius-md);
  color: var(--md-on-surface);
  font-weight: 500;
}

.me__name-save-btn:focus-visible,
.me__name-cancel-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

@media (max-width: 640px) {
  /* Identity stays centered (the .me__identity column-flex stack
     already centers everything); tighten the legal row gap so the
     wrapped microtype reads as a single quiet block rather than four
     widely-spaced items. */
  .me__legal {
    gap: var(--space-3);
  }
}

}