/* character-sheet.css — Fase 6.6.5 typography migration + 2026-05-19 color migration
 *
 * BEM-prefix: cs- (character-sheet)
 *
 * Scope: typography + color tokens for character-sheet.js inline-rendered
 * slide-out panel + print-view. Reuses .hd-btn--* / .hd-badge--* / .hd-text--*
 * / .hd-voice--* utilities from utilities.css. The cs- classes below are
 * component-scoped helpers consumed by the IIFE template renderers in
 * character-sheet.js.
 *
 * 2026-05-19: All hardcoded hex migrated to var(--hd-*) tokens (user-approved
 * aesthetic shift from cool gray to warm parchment palette). Activity colors
 * (heal/damage/check/attack/utility/cast/order/summon/enchant) bind to design-
 * tokens.css for automatic dark+light theme support.
 *
 * Render-context: index.php (player display) — Safari 16.6 iPadOS 16 compat.
 * -webkit-* vendor prefixes on backdrop-filter + overflow-scrolling preserved
 * inline (FAB button + panel scroll-region) since they are non-typography
 * properties; the gate does not flag them.
 */

@layer components {

  /* ============================================================
   * Loading + status text
   * ============================================================ */
  .cs-loading {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
  }

  /* ============================================================
   * Header (name, race, class, level, background, conversion meta)
   * ============================================================ */
  .cs-name {
    margin: 0 0 2px;
    color: var(--hd-text-primary);
    font-size: var(--hd-text-h6);
  }

  .cs-subline {
    font-size: var(--hd-text-caption);
    color: var(--hd-text-tertiary);
  }

  .cs-bg-line {
    font-size: var(--hd-text-ui-small);
    color: var(--hd-text-tertiary);
  }

  .cs-conversion-tag {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-conversion-meta {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    margin-top: 2px;
  }

  /* ============================================================
   * Header icon buttons (print + close) — touch-safe 44x44 even on
   * desktop because they are part of the iPad player-display flow.
   * ============================================================ */
  .cs-icon-btn {
    background: none;
    border: none;
    color: var(--hd-text-tertiary);
    cursor: pointer;
    padding: 4px;
    font-size: var(--hd-text-ui);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .cs-icon-btn--lg {
    font-size: var(--hd-text-h6);
    padding: 4px 8px;
  }

  /* ============================================================
   * Stats row (proficiency bonus + inspiration)
   * ============================================================ */
  .cs-stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
    font-size: var(--hd-text-caption);
  }

  .cs-inspiration {
    color: var(--hd-text-disabled);
  }

  .cs-inspiration.is-inspired {
    color: var(--hd-accent-warning);
  }

  /* ============================================================
   * Ability score cells
   * ============================================================ */
  .cs-ability__label {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-ability__score {
    font-size: var(--hd-text-ui);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
  }

  .cs-ability__mod {
    font-size: var(--hd-text-caption);
  }

  .cs-ability__save {
    color: var(--hd-text-disabled);
    font-size: var(--hd-text-micro);
    margin-top: 2px;
  }

  .cs-ability__save.is-proficient {
    color: var(--hd-activity-check);
  }

  /* ============================================================
   * Combat stats
   * ============================================================ */
  .cs-combat__value {
    font-size: var(--hd-text-h6);
    font-weight: var(--hd-weight-bold);
  }

  .cs-combat__value-hpmax {
    font-size: var(--hd-text-caption);
    color: var(--hd-text-tertiary);
  }

  .cs-combat__label {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-combat__temp {
    font-size: var(--hd-text-micro);
  }

  .cs-combat-meta {
    margin-top: 6px;
    display: flex;
    gap: 12px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-hitdice {
    margin-top: 4px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  /* ============================================================
   * Resistances / immunities (4 lines, static font-size:11px)
   * ============================================================ */
  .cs-res-line {
    margin-bottom: 3px;
    font-size: var(--hd-text-caption);
  }

  .cs-res-line--last {
    font-size: var(--hd-text-caption);
  }

  .cs-res-source {
    font-size: var(--hd-text-micro);
  }

  /* ============================================================
   * Skills
   * ============================================================ */
  /* Empty-state messages — color migrated 2026-05-19 (was inline #555). */
  .cs-no-data {
    font-size: var(--hd-text-caption);
    color: var(--hd-text-disabled);
  }

  .cs-skill-row {
    display: flex;
    justify-content: space-between;
    padding: 2px 4px;
    font-size: var(--hd-text-caption);
  }

  .cs-skill-prof-icon {
    color: var(--hd-text-disabled);
    font-size: var(--hd-text-micro);
  }

  .cs-skill-prof-icon.is-proficient {
    color: var(--hd-activity-check);
  }

  .cs-skill-prof-icon.is-half-proficient {
    color: var(--hd-activity-attack);
  }

  .cs-skill-mod {
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-bold);
  }

  /* ============================================================
   * Spellcasting
   * ============================================================ */
  .cs-spell-class-name {
    font-size: var(--hd-text-caption);
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-secondary);
  }

  .cs-spell-meta {
    display: flex;
    gap: 10px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    margin-top: 2px;
  }

  .cs-spell-counts {
    display: flex;
    gap: 10px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
    margin-top: 2px;
  }

  .cs-prepared-count {
    color: var(--hd-activity-order);
  }

  .cs-prepared-count.is-full {
    color: var(--hd-activity-check);
  }

  .cs-spell-section {
    margin-top: 6px;
    font-size: var(--hd-text-micro);
  }

  .cs-spell-section--top {
    margin-top: 8px;
    font-size: var(--hd-text-micro);
  }

  .cs-spell-section--inner {
    margin-top: 4px;
    font-size: var(--hd-text-micro);
  }

  /* ============================================================
   * Prep button (used in Spellcasting section for Cleric/Druid/
   * Paladin/Artificer + Wizard spellbook). Touch-target NOT 44x44
   * because it's a compact inline ribbon control in an admin-style
   * dense list. Still ≥ 32x but pinned to .cs-prep-btn via size.
   * ============================================================ */
  .cs-prep-btn {
    background: var(--hd-surface-3);
    border: 1px solid var(--hd-border-medium);
    color: var(--hd-activity-heal);
    padding: 2px 8px;
    font-size: var(--hd-text-micro);
    cursor: pointer;
    border-radius: 3px;
  }

  /* ============================================================
   * Lazy expand pattern (spell / item / feat <details>)
   * ============================================================ */
  .cs-lazy-summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--hd-text-caption);
  }

  .cs-lazy-chevron {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-micro);
  }

  .cs-lazy-content {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-micro);
    padding: 4px 0 4px 16px;
  }

  .cs-lazy-link {
    color: var(--hd-activity-check);
    font-size: var(--hd-text-micro);
  }

  .cs-spell-name {
    color: var(--hd-text-primary);
  }

  .cs-spell-name--gold {
    color: var(--hd-accent-warning);
  }

  .cs-spell-name--arcane {
    color: var(--hd-activity-utility);
  }

  /* ============================================================
   * Class resources (numeric + dots variants)
   * ============================================================ */
  .cs-res-numeric {
    color: var(--hd-activity-check);
    font-weight: var(--hd-weight-bold);
  }

  .cs-res-recharge {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-res-details {
    padding: 3px 0;
    border-bottom: 1px solid var(--hd-border-subtle);
    font-size: var(--hd-text-caption);
  }

  .cs-res-name {
    color: var(--hd-text-secondary);
    font-weight: var(--hd-weight-bold);
  }

  .cs-res-desc {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-micro);
    padding: 4px 0 4px 16px;
  }

  .cs-res-row {
    padding: 3px 0;
    border-bottom: 1px solid var(--hd-border-subtle);
    font-size: var(--hd-text-caption);
  }

  /* ============================================================
   * Spell slot usage rows (font-size:11px on dot rows)
   * ============================================================ */
  .cs-slot-row {
    padding: 2px 0;
    font-size: var(--hd-text-caption);
  }

  /* ============================================================
   * Weapons + equipment
   * ============================================================ */
  /* 2026-05-19: weapon-name color migrated from inline #ddd → --hd-text-primary. */
  .cs-weapon-name {
    text-decoration: none;
    font-weight: var(--hd-weight-bold);
    color: var(--hd-text-primary);
  }

  .cs-weapon-row {
    padding: 3px 0;
    border-bottom: 1px solid var(--hd-border-subtle);
    font-size: var(--hd-text-caption);
  }

  .cs-weapon-meta {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-currency-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--hd-border-subtle);
    font-size: var(--hd-text-caption);
  }

  .cs-currency-amount--pp {
    color: var(--hd-text-primary);
  }

  .cs-currency-amount--gp {
    color: var(--hd-accent-warning);
  }

  .cs-currency-amount--ep {
    color: var(--hd-text-secondary);
  }

  .cs-currency-amount--sp {
    color: var(--hd-text-tertiary);
  }

  .cs-currency-amount--cp {
    color: var(--hd-activity-order);
  }

  .cs-armor-name,
  .cs-armor-row {
    color: var(--hd-text-tertiary);
  }

  .cs-armor-name.is-selected,
  .cs-armor-row.is-selected {
    color: var(--hd-activity-check);
  }

  /* ============================================================
   * Item charges + rarity badges
   * ============================================================ */
  .cs-charges {
    color: var(--hd-activity-order);
    font-size: var(--hd-text-micro);
    margin-left: 4px;
  }

  .cs-rarity {
    color: var(--hd-accent-warning);
    font-size: var(--hd-text-micro);
    margin-left: 4px;
  }

  .cs-item-row {
    padding: 2px 0;
    font-size: var(--hd-text-caption);
    border-bottom: 1px solid var(--hd-border-subtle);
  }

  .cs-item-meta {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-micro);
    margin-left: 4px;
  }

  /* ============================================================
   * Features & traits
   * ============================================================ */
  .cs-feature-origin {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-feature-level {
    color: var(--hd-text-disabled);
    font-size: var(--hd-text-micro);
    margin-left: 4px;
  }

  .cs-feature-name {
    font-size: var(--hd-text-caption);
    font-weight: var(--hd-weight-bold);
  }

  .cs-feature-name--feat {
    color: var(--hd-accent-warning);
  }

  .cs-feature-name--optional {
    color: var(--hd-activity-utility);
  }

  .cs-feature-name--class {
    color: var(--hd-text-primary);
  }

  .cs-feature-name--race {
    color: var(--hd-activity-summon);
  }

  .cs-feature-link {
    display: block;
    color: var(--hd-activity-check);
    font-size: var(--hd-text-micro);
    text-decoration: none;
    margin-top: 4px;
    padding-left: 16px;
  }

  /* ============================================================
   * Features section labels (Feats / Optional features / Class /
   * Race headers)
   * ============================================================ */
  .cs-feature-section-label {
    margin-bottom: 4px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-feature-section-label--top {
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  /* ============================================================
   * Proficiencies + languages + senses
   * ============================================================ */
  .cs-prof-row {
    margin-bottom: 4px;
    font-size: var(--hd-text-caption);
  }

  .cs-senses-row {
    font-size: var(--hd-text-caption);
  }

  /* ============================================================
   * Activities (heal/damage/check/attack/utility groups)
   * ============================================================ */
  .cs-activity-group-label {
    font-size: var(--hd-text-micro);
    font-weight: var(--hd-weight-bold);
    margin: 4px 0 2px;
  }

  .cs-activity-group-label--heal {
    color: var(--hd-activity-heal);
  }

  .cs-activity-group-label--damage {
    color: var(--hd-activity-damage);
  }

  .cs-activity-group-label--check {
    color: var(--hd-activity-check);
  }

  .cs-activity-group-label--attack {
    color: var(--hd-activity-attack);
  }

  .cs-activity-group-label--utility {
    color: var(--hd-activity-utility);
  }

  .cs-activity-group-label--neutral {
    color: var(--hd-text-tertiary);
  }

  .cs-activity-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 1px 0;
    font-size: var(--hd-text-ui-small);
    border-bottom: 1px solid var(--hd-border-subtle);
    min-width: 0;
  }

  .cs-activity-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cs-activity-source {
    color: var(--hd-text-primary);
    font-weight: var(--hd-weight-bold);
  }

  .cs-activity-meta {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-ui-small);
  }

  .cs-activity-formula {
    color: var(--hd-activity-heal);
    font-family: var(--hd-font-mono);
    margin-left: auto;
  }

  .cs-activity-registry {
    --cs-activity-registry-size: var(--hd-text-ui-small);
    color: var(--hd-text-tertiary);
    flex-basis: 100%;
    font-size: var(--cs-activity-registry-size);
  }

  /* ============================================================
   * Section headers (collapse/expand)
   * ============================================================ */
  .cs-section-title {
    font-size: var(--hd-text-ui-small);
    font-weight: var(--hd-weight-bold);
  }

  .cs-section-chevron {
    color: var(--hd-text-tertiary);
    font-size: var(--hd-text-micro);
  }

  /* ============================================================
   * Print view — meta lines + footer button
   * ============================================================ */
  .cs-print-meta {
    margin-bottom: 4px;
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-print-meta--no-margin {
    font-size: var(--hd-text-micro);
    color: var(--hd-text-tertiary);
  }

  .cs-print-btn {
    padding: 8px 24px;
    font-size: var(--hd-text-ui);
    cursor: pointer;
  }
}