Character Sheet

<Section title="Details">
  <Grid cols="2">
    <Text hideLabel field="name" />
    <Field field="species" />
    <Field field="class" />
    <Field field="subclass" />
    <Field field="background" />
    <Field field="level" />
    <Field field="experience" />
    <Field field="armorClass" />
    <Field field="shield" />
    <Field field="initiative" />
    <Field field="speed" />
    <Field field="size" />
    <Field field="proficiencyBonus" />
    <Field field="passivePerception" />
    <Field field="heroicInspiration" />
    <Field field="classFeatures" />
    <Field field="speciesTraits" />
    <Field field="feats" />
    <Field field="portrait" />
    <Field field="appearance" />
    <Field field="backstory" />
    <Field field="alignment" />
    <Field field="languages" />
    <Field field="attunement" />
  </Grid>
</Section>
<Section title="Hit Points">
  <Grid cols="2">
    <Field field="hp.current" />
    <Field field="hp.max" />
    <Field field="hp.temp" />
  </Grid>
</Section>
<Section title="Hit Dice">
  <Grid cols="2">
    <Field field="hitDice.die" />
    <Field field="hitDice.max" />
    <Field field="hitDice.spent" />
  </Grid>
</Section>
<Section title="Death Saves">
  <Grid cols="2">
    <Field field="deathSaves.successes" />
    <Field field="deathSaves.failures" />
  </Grid>
</Section>
<Section title="Abilities">
  <Section title="Strength">
    <Grid cols="2">
      <Field field="abilities.strength.score" />
      <Field field="abilities.strength.modifier" />
      <Field field="abilities.strength.save" />
      <Field field="abilities.strength.saveProficient" />
    </Grid>
  </Section>
  <Section title="Dexterity">
    <Grid cols="2">
      <Field field="abilities.dexterity.score" />
      <Field field="abilities.dexterity.modifier" />
      <Field field="abilities.dexterity.save" />
      <Field field="abilities.dexterity.saveProficient" />
    </Grid>
  </Section>
  <Section title="Constitution">
    <Grid cols="2">
      <Field field="abilities.constitution.score" />
      <Field field="abilities.constitution.modifier" />
      <Field field="abilities.constitution.save" />
      <Field field="abilities.constitution.saveProficient" />
    </Grid>
  </Section>
  <Section title="Intelligence">
    <Grid cols="2">
      <Field field="abilities.intelligence.score" />
      <Field field="abilities.intelligence.modifier" />
      <Field field="abilities.intelligence.save" />
      <Field field="abilities.intelligence.saveProficient" />
    </Grid>
  </Section>
  <Section title="Wisdom">
    <Grid cols="2">
      <Field field="abilities.wisdom.score" />
      <Field field="abilities.wisdom.modifier" />
      <Field field="abilities.wisdom.save" />
      <Field field="abilities.wisdom.saveProficient" />
    </Grid>
  </Section>
  <Section title="Charisma">
    <Grid cols="2">
      <Field field="abilities.charisma.score" />
      <Field field="abilities.charisma.modifier" />
      <Field field="abilities.charisma.save" />
      <Field field="abilities.charisma.saveProficient" />
    </Grid>
  </Section>
</Section>
<Section title="Skills">
  <Section title="Athletics">
    <Grid cols="2">
      <Field field="skills.athletics.bonus" />
      <Field field="skills.athletics.training" />
    </Grid>
  </Section>
  <Section title="Acrobatics">
    <Grid cols="2">
      <Field field="skills.acrobatics.bonus" />
      <Field field="skills.acrobatics.training" />
    </Grid>
  </Section>
  <Section title="Sleight of Hand">
    <Grid cols="2">
      <Field field="skills.sleightOfHand.bonus" />
      <Field field="skills.sleightOfHand.training" />
    </Grid>
  </Section>
  <Section title="Stealth">
    <Grid cols="2">
      <Field field="skills.stealth.bonus" />
      <Field field="skills.stealth.training" />
    </Grid>
  </Section>
  <Section title="Arcana">
    <Grid cols="2">
      <Field field="skills.arcana.bonus" />
      <Field field="skills.arcana.training" />
    </Grid>
  </Section>
  <Section title="History">
    <Grid cols="2">
      <Field field="skills.history.bonus" />
      <Field field="skills.history.training" />
    </Grid>
  </Section>
  <Section title="Investigation">
    <Grid cols="2">
      <Field field="skills.investigation.bonus" />
      <Field field="skills.investigation.training" />
    </Grid>
  </Section>
  <Section title="Nature">
    <Grid cols="2">
      <Field field="skills.nature.bonus" />
      <Field field="skills.nature.training" />
    </Grid>
  </Section>
  <Section title="Religion">
    <Grid cols="2">
      <Field field="skills.religion.bonus" />
      <Field field="skills.religion.training" />
    </Grid>
  </Section>
  <Section title="Animal Handling">
    <Grid cols="2">
      <Field field="skills.animalHandling.bonus" />
      <Field field="skills.animalHandling.training" />
    </Grid>
  </Section>
  <Section title="Insight">
    <Grid cols="2">
      <Field field="skills.insight.bonus" />
      <Field field="skills.insight.training" />
    </Grid>
  </Section>
  <Section title="Medicine">
    <Grid cols="2">
      <Field field="skills.medicine.bonus" />
      <Field field="skills.medicine.training" />
    </Grid>
  </Section>
  <Section title="Perception">
    <Grid cols="2">
      <Field field="skills.perception.bonus" />
      <Field field="skills.perception.training" />
    </Grid>
  </Section>
  <Section title="Survival">
    <Grid cols="2">
      <Field field="skills.survival.bonus" />
      <Field field="skills.survival.training" />
    </Grid>
  </Section>
  <Section title="Deception">
    <Grid cols="2">
      <Field field="skills.deception.bonus" />
      <Field field="skills.deception.training" />
    </Grid>
  </Section>
  <Section title="Intimidation">
    <Grid cols="2">
      <Field field="skills.intimidation.bonus" />
      <Field field="skills.intimidation.training" />
    </Grid>
  </Section>
  <Section title="Performance">
    <Grid cols="2">
      <Field field="skills.performance.bonus" />
      <Field field="skills.performance.training" />
    </Grid>
  </Section>
  <Section title="Persuasion">
    <Grid cols="2">
      <Field field="skills.persuasion.bonus" />
      <Field field="skills.persuasion.training" />
    </Grid>
  </Section>
</Section>
<Section title="Weapons &amp; Damage Cantrips">
  <Table field="weapons">
    <Column field="name" />
    <Column field="attack" />
    <Column field="damage" />
    <Column field="notes" />
  </Table>
</Section>
<Section title="Equipment Training &amp; Proficiencies">
  <Grid cols="2">
    <Field field="training.lightArmor" />
    <Field field="training.mediumArmor" />
    <Field field="training.heavyArmor" />
    <Field field="training.shields" />
    <Field field="training.weapons" />
    <Field field="training.tools" />
  </Grid>
</Section>
<Section title="Spellcasting">
  <Grid cols="2">
    <Field field="spellcasting.ability" />
    <Field field="spellcasting.modifier" />
    <Field field="spellcasting.saveDC" />
    <Field field="spellcasting.attackBonus" />
  </Grid>
</Section>
<Section title="Spell Slots">
  <Section title="Level 1">
    <Grid cols="2">
      <Field field="spellSlots.level1.total" />
      <Field field="spellSlots.level1.expended" />
    </Grid>
  </Section>
  <Section title="Level 2">
    <Grid cols="2">
      <Field field="spellSlots.level2.total" />
      <Field field="spellSlots.level2.expended" />
    </Grid>
  </Section>
  <Section title="Level 3">
    <Grid cols="2">
      <Field field="spellSlots.level3.total" />
      <Field field="spellSlots.level3.expended" />
    </Grid>
  </Section>
  <Section title="Level 4">
    <Grid cols="2">
      <Field field="spellSlots.level4.total" />
      <Field field="spellSlots.level4.expended" />
    </Grid>
  </Section>
  <Section title="Level 5">
    <Grid cols="2">
      <Field field="spellSlots.level5.total" />
      <Field field="spellSlots.level5.expended" />
    </Grid>
  </Section>
  <Section title="Level 6">
    <Grid cols="2">
      <Field field="spellSlots.level6.total" />
      <Field field="spellSlots.level6.expended" />
    </Grid>
  </Section>
  <Section title="Level 7">
    <Grid cols="2">
      <Field field="spellSlots.level7.total" />
      <Field field="spellSlots.level7.expended" />
    </Grid>
  </Section>
  <Section title="Level 8">
    <Grid cols="2">
      <Field field="spellSlots.level8.total" />
      <Field field="spellSlots.level8.expended" />
    </Grid>
  </Section>
  <Section title="Level 9">
    <Grid cols="2">
      <Field field="spellSlots.level9.total" />
      <Field field="spellSlots.level9.expended" />
    </Grid>
  </Section>
</Section>
<Section title="Cantrips &amp; Prepared Spells">
  <Table field="spells">
    <Column field="level" />
    <Column field="name" />
    <Column field="castingTime" />
    <Column field="range" />
    <Column field="concentration" />
    <Column field="ritual" />
    <Column field="material" />
    <Column field="notes" />
  </Table>
</Section>
<Section title="Equipment">
  <Table field="equipment">
    <Column field="name" />
    <Column field="quantity" />
    <Column field="weight" />
    <Column field="notes" />
  </Table>
</Section>
<Section title="Coins">
  <Grid cols="2">
    <Field field="coins.cp" />
    <Field field="coins.sp" />
    <Field field="coins.ep" />
    <Field field="coins.gp" />
    <Field field="coins.pp" />
  </Grid>
</Section>

/* D&D 2024 character sheet. Colors use Nuxt UI tokens so light and dark mode both work. */

:root {
  --sheet-accent: var(--ui-primary);
  --sheet-rule: var(--ui-border-accented);
  font-family: "Crimson Pro", ui-serif, serif;
}

.sheet-text input {
  color: blue;
}

/* Titles in Cinzel, like the printed sheet. */
.sheet-section h3,
.sheet-heading,
.sheet-divider {
  font-family: Cinzel, serif;
  letter-spacing: 0.04em;
}

.sheet-section h3 {
  text-transform: uppercase;
  font-size: 0.9rem;
  color: var(--sheet-accent);
}

/* Header strip: name, class, level. */
.header {
  border-top: 3px solid var(--sheet-accent);
}

/* AC, initiative, speed, and other headline numbers as framed boxes. */
.vitals > * {
  border: 1px solid var(--sheet-rule);
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: var(--ui-bg-elevated);
}

.vitals .sheet-number {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Ability cards: a colored top edge and the score as the focus. */
.ability {
  border-top: 3px solid var(--sheet-accent);
}

.ability .sheet-number .text-3xl {
  font-family: Cinzel, serif;
}

.save {
  align-items: end;
  padding-bottom: 0.25rem;
  border-bottom: 1px dashed var(--sheet-rule);
}

/* Skills: bonus and training side by side, training label hidden (the column is obvious). */
.skill {
  align-items: end;
  gap: 0.5rem;
}

.skill-training > div:first-child {
  display: none;
}

/* Spell slots: compact cells. */
.slot-level {
  border: 1px solid var(--sheet-rule);
  border-radius: 0.5rem;
  padding: 0.5rem;
  gap: 0.25rem;
}

.slot-level .sheet-heading {
  font-size: 0.85rem;
  color: var(--sheet-accent);
}

/* Coins in a tight row. */
.coins {
  gap: 0.5rem;
}