/*
 * Charter: a sealed deed. The name opens the document, the notes are its
 * text, the abilities follow as witness lines with their skills flowing along
 * the line, combat and vitals sit on the folded plica at the foot, and the
 * portrait hangs beneath it as the pendant seal.
 */

.charter-page {
    display: flex;
    flex-direction: column;
    gap: 6mm;
}

.charter-page .sheet-toggle-mark {
    width: 3mm;
    height: 3mm;
    border-width: 0.55mm;
    border-radius: 50%;
    transform: none;
}

.charter-page .sheet-input {
    border-radius: 0.4mm;
}

/* ---------- the opening line ---------- */

.charter-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    column-gap: 8mm;
}

.charter-head .banner-name .sheet-input {
    padding: 1mm 0 1.4mm;
    font-family: var(--card-subtitle-font);
    font-style: var(--card-subtitle-style);
    font-size: 24pt;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: inset 0 -0.35mm 0 var(--card-rule);
}

.charter-cells {
    display: flex;
    gap: 3mm;
}

.charter-head .charter-cells .sheet-slot { width: 22mm; }
.charter-head .charter-cells .identity-level { width: 11mm; }

.charter-cells .sheet-slot-label {
    text-align: center;
}

.charter-cells .sheet-input {
    text-align: center;
    background: transparent;
    box-shadow: inset 0 -0.3mm 0 var(--card-rule);
}

/* ---------- the text ---------- */

.charter-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8mm;
    flex: 1;
    min-height: 0;
}

.charter-page .sheet-area-title {
    font-family: var(--card-subtitle-font);
    font-style: var(--card-subtitle-style);
    font-weight: 400;
    font-size: 10pt;
    letter-spacing: 0.02em;
    text-transform: none;
}

.charter-page .sheet-textarea {
    background: transparent;
    border-radius: 0;
    box-shadow: inset 0 0 0 0.22mm var(--card-rule);
}

/* ---------- the witnesses ---------- */

.charter-witnesses {
    display: flex;
    flex-direction: column;
    gap: 2.6mm;
}

.charter-witness {
    display: grid;
    grid-template-columns: 80mm 1fr;
    column-gap: 4mm;
    align-items: start;
    padding-bottom: 2mm;
    border-bottom: 0.22mm solid var(--card-rule);
}

.charter-witness:last-child {
    border-bottom: none;
}

.charter-figures {
    display: grid;
    grid-template-columns: 31mm 9mm 11mm auto;
    column-gap: 2.4mm;
    align-items: center;
}

.charter-figures .ability-name {
    font-size: 7.2pt;
    letter-spacing: 0.04em;
}

.charter-figures .ability-score .sheet-input,
.charter-figures .ability-modifier .sheet-input {
    padding: 0.4mm 0;
    box-shadow: inset 0 -0.3mm 0 var(--card-rule);
    border-radius: 0;
}

.charter-figures .ability-modifier .sheet-input {
    font-size: 13pt;
}

.charter-figures .ability-save {
    gap: 1mm;
}

.charter-figures .ability-save-value {
    width: 8mm;
}

.charter-figures .ability-save-value .sheet-input {
    border-radius: 0;
    box-shadow: inset 0 -0.3mm 0 var(--card-rule);
}

.charter-witness .skill-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.6mm 5mm;
}

.charter-witness .skill-row {
    flex: none;
    gap: 1mm;
}

.charter-witness .skill-marks {
    gap: 0.8mm;
}

.charter-witness .skill-modifier {
    width: 7mm;
}

.charter-witness .skill-name {
    flex: none;
    font-size: 7.4pt;
}

.charter-witness .ability-aside {
    flex-direction: row;
    gap: 5mm;
}

.charter-witness .aside-slot {
    flex-direction: row;
    align-items: center;
    gap: 2mm;
}

.charter-witness .aside-slot .sheet-input {
    width: 10mm;
    padding: 0.3mm 0;
    box-shadow: inset 0 -0.3mm 0 var(--card-rule);
    border-radius: 0;
}

/* ---------- the plica and the pendant seal ---------- */

.charter-plica {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 2.4mm;
    padding: 3mm 5mm 3.4mm;
    background-color: var(--card-accent-soft);
    background-image: linear-gradient(var(--card-accent-soft), var(--card-accent-soft));
    background-size: 100% 1.2mm;
    background-repeat: no-repeat;
}

.charter-plica .charter-cells .sheet-slot {
    flex: 1;
}

.charter-plica .charter-cells .conditions {
    flex: 1.7;
}

.charter-plica .armor-class .sheet-input,
.charter-plica .hit-points .sheet-input {
    font-family: var(--card-title-font);
    font-weight: var(--card-title-weight);
    font-size: 13pt;
    color: var(--card-accent);
}

.charter-foot {
    display: grid;
    grid-template-columns: 44mm 1fr;
    column-gap: 10mm;
    align-items: start;
}

.charter-seal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6mm;
    padding-top: 1mm;
}

.charter-seal::before,
.charter-page .attunement-slot::before,
.charter-casting .sheet-slot::before {
    content: "";
    position: absolute;
    top: -6mm;
    left: 50%;
    width: 0.45mm;
    height: 7mm;
    margin-left: -0.22mm;
    background: var(--card-rule);
}

.charter-page .sheet-portrait-frame {
    width: 40mm;
    height: 40mm;
    border-radius: 50%;
    border-width: 0.6mm;
    box-shadow: inset 0 0 0 1.4mm var(--card-accent-soft);
}

.charter-foot .damage-log {
    height: 38mm;
}

/* ---------- page two ---------- */

.charter-stores {
    grid-template-columns: 1fr 1fr;
}

.charter-store-stack {
    display: flex;
    flex-direction: column;
    gap: 5mm;
    min-height: 0;
}

.charter-store-stack .sheet-area {
    flex: 1;
}

.charter-plica .charter-cells .coin {
    flex: none;
    width: 34mm;
}

.charter-plica > .charter-cells:only-child {
    justify-content: center;
    gap: 8mm;
}

.charter-seals .attunement-slots {
    justify-content: center;
    gap: 14mm;
}

.charter-page .attunement-slot {
    position: relative;
    flex: none;
    flex-direction: column;
    gap: 1.6mm;
    width: 40mm;
    padding-top: 1mm;
}

.charter-page .attunement-slot .sheet-toggle,
.charter-page .attunement-slot .sheet-toggle-mark {
    width: 12mm;
    height: 12mm;
}

.charter-page .attunement-slot .sheet-toggle-mark {
    border-width: 1.2mm;
    box-shadow: inset 0 0 0 1.4mm var(--card-accent-soft);
}

.charter-page .attunement-name {
    width: 100%;
    flex: none;
}

.charter-page .attunement-name .sheet-input {
    text-align: center;
}

/* ---------- page three ---------- */

.charter-page .spell-table {
    row-gap: 1mm;
}

.charter-page .spell-table-head,
.charter-page .spell-row {
    grid-template-columns: 10mm 50mm 1fr;
}

.charter-page .spell-cell .sheet-input {
    background: transparent;
    border-radius: 0;
    box-shadow: inset 0 -0.25mm 0 var(--card-rule);
}

.charter-slots {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    column-gap: 3mm;
}

.charter-slots .spell-slot {
    flex-direction: column;
    gap: 1.2mm;
}

.charter-slots .spell-slot-level {
    width: auto;
}

.charter-slots .spell-slot-total,
.charter-slots .spell-slot-expended {
    width: 100%;
    flex: none;
}

.charter-slots .sheet-input {
    text-align: center;
}

.charter-casting {
    display: flex;
    justify-content: center;
    gap: 16mm;
}

.charter-casting .sheet-slot {
    position: relative;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.4mm;
    width: 30mm;
    padding-top: 1mm;
}

.charter-casting .sheet-input {
    width: 22mm;
    height: 22mm;
    padding: 0;
    font-size: 11pt;
    line-height: 22mm;
    text-align: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.6mm var(--card-rule), inset 0 0 0 2mm var(--card-accent-soft);
}

.charter-casting .casting-ability .sheet-input {
    width: 30mm;
    height: 30mm;
    font-size: 9.4pt;
    line-height: 30mm;
}