/* header.css — top identity row of the sheet. Two columns:
 *   left: COSMERE branding + player name
 *   right: character name + level + paths + ancestry
 * Single-column on narrow viewports, two-column above 40rem. */

.header-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-md);
  padding: var(--sp-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

@container sheet (min-width: 40rem) {
  .header-row {
    grid-template-columns: 2fr 3fr;
  }
}

.header-row__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.header-row__cosmere-title {
  font-size: var(--fs-heading);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.header-row__player-name-label {
  font-size: var(--fs-caption);
  color: var(--color-fg-muted);
  text-transform: uppercase;
}

.header-row__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-sm);
}

.header-row__field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xxs);
}

.header-row__field-label {
  font-size: var(--fs-caption);
  color: var(--color-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@container sheet (min-width: 40rem) {
  .header-row__fields {
    grid-template-columns: 3fr 1fr;
  }
  .header-row__field--character-name { grid-column: 1; grid-row: 1; }
  .header-row__field--level          { grid-column: 2; grid-row: 1; }
  .header-row__field--paths          { grid-column: 1; grid-row: 2; }
  .header-row__field--ancestry       { grid-column: 2; grid-row: 2; }
}

/* Hide the inner label emitted by createTextField (a `.field-label`
 * span inside `.field-row`). In the header, the outer label —
 * `.header-row__field-label` (or `.header-row__player-name-label` for
 * PLAYER) — is the visible, screen-reader-accessible label. Without
 * this rule the label text renders twice and is read twice by screen
 * readers. We use the sr-only clip pattern rather than `display: none`
 * so the inner label stays in the accessibility tree if ever needed
 * (cheap insurance; the outer label is the canonical one).
 *
 * The PLAYER field is wrapped the same way as the right-column fields
 * (`.header-row__field > .field-row`), so one selector covers both.
 * `createNumberField` and `createTagInput` don't emit `.field-label`,
 * so this rule is a no-op for Level and Ancestry. */
.header-row__field > .field-row > .field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}