/**
 * @file masthead.css
 * @author Jouni Miikki
 * SPDX-License-Identifier: MIT
 * @description The top of a person's page: the avatar in its frame, the name as a headline, the identity line,
 *   and the doors on the right. Drawn by components/Masthead.js. Reads only the tokens in theme.css
 *   and the shapes in poster.css; a page never styles it from outside.
 * @usage Linked from public/spa.html in the component block, whose order keeps the order these
 *   rules had when they were one sheet.
 * @version-history
 *   v1.3.1 — 2026-09-27 — The preview's own name: .pf-avatar-preview → .poster-masthead-preview (a
 *     move: the declarations are unchanged).
 *   v1.3.0 — 2026-09-26 — The head's picture as a preview beside the field that sets it
 *     (MastheadPreview: .pf-avatar-preview's size, moved unchanged from views/profile.css; page group G8).
 *   v1.2.0 — 2026-09-26 — A picture that opens something shows the pointer; the Settings overview's
 *     head is this head (Jouni's decision "Person head", a unification).
 *   v1.1.0 — 2026-09-24 — The name's letter case reads the theme's shape value (a move).
 *   v1.0.0 — 2026-09-23 — Moved unchanged from css/parts*.css (UI consolidation phase 1, a move).
 */

/* ── The masthead: the name is the headline of the page ── */
.poster-masthead {
  /* The nameplate sits centred on the avatar: the name's face changed once and its box no longer
     matched the picture's edges, so the alignment is to the middle, which no face can break. */
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  margin-bottom: 1.6rem;
}
.poster-masthead-avatar { width: 96px; height: 96px; overflow: hidden; flex: none; }
.poster-masthead-avatar svg { width: 100%; height: 100%; display: block; }
/* A picture that opens something (Masthead onAvatar): the pointer says so. */
.poster-masthead-avatar[role="button"] { cursor: pointer; }
.poster-masthead-plate { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.poster-masthead-name {
  font-family: var(--font-poster); font-weight: var(--font-poster-weight);
  font-size: 5.2rem; line-height: var(--font-poster-leading); letter-spacing: var(--font-poster-tracking); text-transform: var(--shape-case-heading);
  color: var(--text);
  max-width: 12ch;
}
.poster-masthead-identity {
  font-family: var(--font-mono); font-size: var(--text-small); color: var(--text-dim);
  margin-top: 0.9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help;
}
.poster-masthead-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
.poster-masthead-cog { flex: none; opacity: 0.8; }
/* ── The masthead on a phone: the name shrinks, the actions drop under it ── */
.poster-masthead-button { flex: none; }
@media (max-width: 560px) {
  .poster-masthead { flex-wrap: wrap; align-items: flex-start; }
  .poster-masthead-avatar { width: 64px; height: 64px; }
  .poster-masthead-name { font-size: 2.6rem; }
  .poster-masthead-actions { width: 100%; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
}

/* The head's picture as a preview beside the field that sets it (MastheadPreview: the account
   dialog). Framed as the head frames it (.poster-frame, Jouni's decision "Person head"); its size
   and the glyph's size, moved unchanged from views/profile.css. */
.poster-masthead-preview { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; flex: none; }