/* Lore Weave — shared character-sheet content styles.
 *
 * SINGLE source of truth for the visual language of a character sheet's
 * BODY (sections, identity grid, trait cards, resource cards, portrait
 * row, field labels). Loaded on BOTH the map view (where the in-map
 * <CharacterSheet> drawer mounts in MapView.js) AND the My Characters
 * view at /app/?view=characters (where the PHP-rendered template
 * create/edit dialog mounts). Either surface must use these classes
 * exactly as defined here — never re-declare a `.sheet-*` rule.
 *
 * What lives in this file:
 *   .form-label                     — small Cinzel cap above any field
 *   .sheet-section + -title         — bordered card per group, gold header
 *   .sheet-portrait-*               — portrait frame + meta column (Identity)
 *   .sheet-grid + .sheet-grid-identity/-combat   — 4-col grids w/ mobile fallback
 *   .sheet-field + .sheet-field-wide/-narrow     — column span helpers
 *   .sheet-traits-row + .sheet-trait-card + .sheet-trait-label
 *   .sheet-resources-grid + .sheet-resource-card/-label/-values
 *      /-current/-max/-sep
 *
 * What stays in map.css (drawer-only chrome + behavior):
 *   .sheet-backdrop, .character-sheet-drawer, .sheet-header, .sheet-close,
 *   .sheet-body, .sheet-create-body (and its scoped input rules),
 *   .sheet-hint, .sheet-footer, .sheet-trait-roll (click-to-roll),
 *   .sheet-readonly-pill
 *
 * Color tokens (--accent, --border, --bg, --bg-card, --text, --text-dim,
 * --muted) are defined inline on /app/index.php :root, which renders both
 * surfaces — so this file can rely on them being present everywhere it
 * loads.
 */

/* Small caps label above any form field. Pairs with .sheet-field (its
   own input style block) or with any bare control inside a labeled
   container. Originally lived next to the Add-token modal scope in
   map.css; promoted to a shared utility because it's the canonical
   "field caption" treatment app-wide. */
.form-label {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 0.2rem;
}

/* Each group of related fields lives in a bordered card with a gold
   uppercase header. The drawer renders Identity / Traits / Resources
   / Combat as four of these; the template form renders Identity /
   Traits / Combat / Capacities / Notes. Same visual language. */
.sheet-section {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.85rem;
}
.sheet-section-title {
  margin: 0 0 0.6rem;
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* W4: character sheet portrait. Sits at the top of the Identity
   section; the frame is the click target (label wraps a hidden file
   input). Matches the token-marker portrait visual language (rounded
   frame + soft-gold border) so a player recognizes "this is what
   appears on the map." */
.sheet-portrait-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.65rem;
}
.sheet-portrait-frame {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* read-only by default; .editable cues the click target */
  cursor: default;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.sheet-portrait-frame.editable { cursor: pointer; }
.sheet-portrait-frame.editable:hover { border-color: var(--accent); }
.sheet-portrait-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sheet-portrait-frame input[type="file"] {
  /* Visually hidden but still clickable -- the label wraps it. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.sheet-portrait-frame input[type="file"]:disabled { cursor: wait; }
.sheet-portrait-placeholder {
  font-size: 2.4rem;
  color: var(--text-dim);
  opacity: 0.55;
}
.sheet-portrait-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sheet-portrait-hint {
  font-size: 0.7rem;
  color: var(--text-dim);
  font-style: italic;
}
.sheet-portrait-status {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.sheet-portrait-error {
  font-size: 0.72rem;
  color: #e89090;
}
.sheet-portrait-clear {
  align-self: flex-start;
  padding: 0.3rem 0.55rem;
  font-size: 0.66rem;
}

.sheet-grid {
  display: grid;
  gap: 0.5rem 0.75rem;
}
.sheet-grid-identity {
  /* Name wide; Pronouns + Ancestry / Class + Subclass / Level narrow. */
  grid-template-columns: repeat(4, 1fr);
}
.sheet-grid-combat {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 599px) {
  .sheet-grid-identity,
  .sheet-grid-combat {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sheet-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.sheet-field-wide   { grid-column: span 4; }
.sheet-field-narrow { grid-column: span 1; }
@media (max-width: 599px) {
  .sheet-field-wide   { grid-column: span 2; }
  .sheet-field-narrow { grid-column: span 1; }
}
.sheet-field input,
.sheet-field textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4rem 0.55rem;
  color: var(--text);
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.sheet-field textarea {
  resize: vertical;
  min-height: 70px;
}
.sheet-field input:focus,
.sheet-field textarea:focus {
  outline: 1px solid var(--accent);
  background: var(--bg-card);
}
.sheet-field input[readonly],
.sheet-field textarea[readonly] {
  opacity: 0.7;
  cursor: default;
}

/* W4 polish: trait cards arranged as 2 rows of 3 so the full
   trait names (Agility / Strength / Finesse / Instinct / Presence
   / Knowledge) fit comfortably. The 6-across layout would cramp
   longer names like "Knowledge" at desktop sidebar widths. Mobile
   inherits the same 3-col layout. */
.sheet-traits-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.sheet-trait-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.4rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.sheet-trait-label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.sheet-trait-card input {
  width: 100%;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 700;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 0.25rem;
  color: var(--accent);
}
.sheet-trait-card input:focus {
  background: var(--bg-card);
  border-color: var(--accent);
  outline: none;
}

/* W4 polish: resource cards. Each HP / Stress / Hope / Armor is
   a bordered box (matches the trait-card treatment): label on
   top, current/max inputs centered beneath. Container is a grid
   that flips between 1 col (narrow) and 2 cols (>= 600px) so
   the four cards become a 2x2 grid at desktop drawer widths. */
.sheet-resources-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
}
@media (min-width: 600px) {
  .sheet-resources-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
}
.sheet-resource-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.sheet-resource-label {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.sheet-resource-values {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
}
.sheet-resource-current,
.sheet-resource-max {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 0 0 70px;
}
.sheet-resource-current input,
.sheet-resource-max input {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.4rem;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  width: 100%;
  box-sizing: border-box;
}
.sheet-resource-sep {
  color: var(--muted);
  font-size: 1.1rem;
  align-self: end;
  padding-bottom: 0.3rem;
}