.view-character {
    --sheet-scale: 1;
}

.character-controls {
    top: 4.6rem;
}

.character-viewport {
    overflow: hidden;
}

.character-pages {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    transform: scale(var(--preview-scale, 1));
    transform-origin: top left;
}

.character-sheet {
    width: 210mm;
    height: 297mm;
    padding: 12mm 13mm;
    display: grid;
    grid-template-rows: auto auto auto 1fr;
    gap: 5mm;
    overflow: hidden;
    font-family: var(--card-body-font);
    font-size: 9.4pt;
    line-height: 1.3;
    color: var(--card-ink);
    background-color: var(--card-surface);
    background-image: var(--card-surface-image);
    background-blend-mode: var(--card-surface-blend);
    box-shadow: var(--shadow-sheet);
    transform: scale(var(--sheet-scale));
    transform-origin: top left;
}

/* ---------- shared field furniture ---------- */

.sheet-slot {
    display: flex;
    flex-direction: column;
    gap: 0.6mm;
    min-width: 0;
}

.sheet-slot-label {
    font-family: var(--card-label-font);
    font-size: 5.6pt;
    letter-spacing: var(--card-label-spacing);
    text-transform: var(--card-label-transform);
    color: var(--card-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sheet-input {
    width: 100%;
    min-width: 0;
    padding: 0.8mm 1.4mm;
    font-family: inherit;
    font-size: 9.4pt;
    color: var(--card-ink);
    background: var(--card-accent-soft);
    border: none;
    border-radius: 0.8mm;
    outline: none;
}

.sheet-input:focus {
    box-shadow: inset 0 0 0 0.3mm var(--card-accent);
}

.sheet-textarea {
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 1.4mm 1.8mm;
    font-family: inherit;
    font-size: 8.8pt;
    line-height: 1.4;
    color: var(--card-ink);
    background: var(--card-accent-soft);
    border: none;
    border-radius: 1mm;
    outline: none;
    resize: none;
}

.sheet-textarea:focus {
    box-shadow: inset 0 0 0 0.3mm var(--card-accent);
}

.sheet-toggle {
    display: inline-flex;
    flex: none;
    width: 3.2mm;
    height: 3.2mm;
    cursor: pointer;
}

.sheet-toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.sheet-toggle-mark {
    width: 3.2mm;
    height: 3.2mm;
    border: 0.28mm solid var(--card-accent);
    transform: rotate(45deg);
}

.sheet-toggle-input:checked + .sheet-toggle-mark {
    background: var(--card-accent);
}

.sheet-area {
    display: flex;
    flex-direction: column;
    gap: 1.2mm;
    min-height: 0;
}

.sheet-area-title {
    margin: 0;
    font-family: var(--card-title-font);
    font-weight: var(--card-title-weight);
    font-size: 8.4pt;
    letter-spacing: var(--card-label-spacing);
    text-transform: uppercase;
    color: var(--card-accent);
}

/* ---------- banner ---------- */

.sheet-banner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 6mm;
}

.banner-name .sheet-input {
    padding: 1.6mm 2.6mm;
    font-family: var(--card-title-font);
    font-weight: var(--card-title-weight);
    font-size: 21pt;
    letter-spacing: var(--card-title-spacing);
    text-transform: var(--card-title-transform);
    color: var(--card-accent);
    background: var(--card-accent-soft);
    border-radius: 1.6mm;
}

.banner-name {
    flex: 1 1 auto;
    min-width: 0;
}

.banner-identity,
.banner-purse,
.banner-casting {
    display: flex;
    flex: none;
    gap: 3mm;
}

.banner-identity .sheet-slot { width: 20mm; }
.banner-identity .sheet-slot:nth-child(1) { width: 11mm; }
.banner-purse .sheet-slot { width: 17mm; }
.banner-casting .sheet-slot { width: 20mm; }

/* ---------- page one: top band ---------- */

.sheet-top {
    display: grid;
    grid-template-columns: 40mm 1fr 1fr;
    gap: 5mm;
    align-items: start;
}

.portrait-column {
    display: flex;
    flex-direction: column;
    gap: 2mm;
}

.sheet-portrait {
    margin: 0;
}

.sheet-portrait-frame {
    display: grid;
    place-items: center;
    width: 40mm;
    height: 40mm;
    overflow: hidden;
    background: var(--card-accent-soft);
    border: 0.3mm solid var(--card-rule);
    border-radius: 1mm;
    cursor: pointer;
}

.sheet-portrait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inspiration {
    display: flex;
    align-items: center;
    gap: 1.6mm;
}

.inspiration-label {
    font-family: var(--card-label-font);
    font-size: 6pt;
    letter-spacing: var(--card-label-spacing);
    text-transform: var(--card-label-transform);
    color: var(--card-ink-faint);
}

.combat-column,
.vitals-column {
    display: flex;
    flex-direction: column;
    gap: 2.6mm;
    min-width: 0;
}

.combat-primary,
.vitals-row {
    display: flex;
    gap: 3mm;
}

.combat-speeds {
    display: flex;
    gap: 3mm;
}

.combat-speeds .sheet-slot,
.vitals-row .sheet-slot {
    flex: 1;
}

.combat-big .sheet-input {
    padding: 1.4mm;
    font-family: var(--card-title-font);
    font-size: 17pt;
    font-weight: var(--card-title-weight);
    text-align: center;
    color: var(--card-accent);
}

.combat-big {
    flex: 1;
}

.damage-log {
    display: flex;
    flex: 1;
    min-height: 14mm;
}

/* ---------- page one: abilities and their skills ---------- */

.ability-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    align-items: start;
    gap: 4.5mm 5mm;
    min-height: 0;
}

.ability-block {
    display: grid;
    grid-template-columns: 17mm 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 3mm;
    row-gap: 1.4mm;
    padding: 2.6mm 3mm 3mm;
    min-width: 0;
    background: var(--card-accent-soft);
    border-radius: 2.4mm;
}

.ability-name {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--card-title-font);
    font-weight: var(--card-title-weight);
    font-size: 8.6pt;
    letter-spacing: var(--card-label-spacing);
    text-transform: uppercase;
    color: var(--card-accent);
}

.ability-core {
    grid-column: 1;
    grid-row: 2 / span 2;
    display: flex;
    flex-direction: column;
    gap: 1mm;
    align-self: start;
}

.ability-modifier .sheet-input {
    padding: 1.6mm 0;
    font-family: var(--card-title-font);
    font-weight: var(--card-title-weight);
    font-size: 19pt;
    text-align: center;
    color: var(--card-accent);
    background: transparent;
    box-shadow: inset 0 0 0 0.3mm var(--card-rule);
    border-radius: 1.2mm;
}

.ability-score .sheet-input {
    padding: 0.6mm 0;
    font-size: 9pt;
    text-align: center;
    background: transparent;
}

.ability-save {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 1.4mm;
}

.ability-save-label {
    font-family: var(--card-label-font);
    font-size: 6pt;
    letter-spacing: var(--card-label-spacing);
    text-transform: var(--card-label-transform);
    color: var(--card-ink-faint);
}

.ability-save-value {
    width: 9mm;
    flex: none;
}

.ability-save-value .sheet-input {
    padding: 0.5mm 1mm;
    font-size: 8.6pt;
    text-align: center;
    background: transparent;
    box-shadow: inset 0 0 0 0.22mm var(--card-rule);
}

.skill-list {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 1.1mm;
    margin: 0;
    padding: 0;
    list-style: none;
    align-self: start;
}

.skill-row {
    display: flex;
    align-items: center;
    gap: 1.2mm;
    min-width: 0;
}

.skill-modifier {
    width: 7.5mm;
    flex: none;
}

.skill-modifier .sheet-input {
    padding: 0.3mm 0.6mm;
    font-size: 8pt;
    text-align: center;
    background: transparent;
    box-shadow: inset 0 0 0 0.2mm var(--card-rule);
}

.skill-name {
    flex: 1;
    min-width: 0;
    font-size: 7.6pt;
    line-height: 1.15;
    color: var(--card-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ability-aside {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    gap: 2mm;
    align-self: start;
}

.aside-slot .sheet-input {
    padding: 0.8mm 1mm;
    font-size: 10pt;
    text-align: center;
    background: transparent;
    box-shadow: inset 0 0 0 0.25mm var(--card-rule);
}

/* ---------- page one: free text ---------- */

.sheet-free-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5mm;
    min-height: 0;
}

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

.attunement {
    display: flex;
    flex-direction: column;
    gap: 1.6mm;
}

.attunement-slots {
    display: flex;
    gap: 4mm;
    margin: 0;
    padding: 0;
    list-style: none;
}

.attunement-slot {
    display: flex;
    align-items: center;
    gap: 1.6mm;
    flex: 1;
    min-width: 0;
}

.attunement-name {
    flex: 1;
    min-width: 0;
}

.equipment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5mm;
    min-height: 0;
}

.area-tall {
    min-height: 0;
}

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

.spell-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4mm 5mm;
}

.spell-slot {
    display: flex;
    align-items: center;
    gap: 2mm;
    min-width: 0;
}

.spell-slot-level {
    flex: none;
    width: 5mm;
    font-family: var(--card-title-font);
    font-weight: var(--card-title-weight);
    font-size: 11pt;
    text-align: center;
    color: var(--card-accent);
}

.spell-slot-total {
    width: 8mm;
    flex: none;
}

.spell-slot-total .sheet-input {
    text-align: center;
    background: transparent;
    box-shadow: inset 0 0 0 0.25mm var(--card-rule);
}

.spell-slot-expended {
    flex: 1;
    min-width: 0;
}

.spell-table {
    display: flex;
    flex-direction: column;
    gap: 1.1mm;
    min-height: 0;
}

.spell-table-head,
.spell-row {
    display: grid;
    grid-template-columns: 11mm 46mm 1fr;
    gap: 2.4mm;
    align-items: center;
}

.spell-table-head span {
    font-family: var(--card-label-font);
    font-size: 6pt;
    letter-spacing: var(--card-label-spacing);
    text-transform: var(--card-label-transform);
    color: var(--card-ink-faint);
}

.spell-cell .sheet-input {
    padding: 0.7mm 1.2mm;
    font-size: 8.4pt;
}

.spell-cell-level .sheet-input {
    text-align: center;
}

/* ---------- print ---------- */

@media print {
    .character-controls,
    .print-hint {
        display: none !important;
    }

    .character-viewport {
        height: auto !important;
        overflow: visible;
    }

    .character-pages {
        gap: 0;
        transform: none;
    }

    .character-sheet {
        box-shadow: none;
        break-after: page;
        page-break-after: always;
    }

    .character-sheet:last-child {
        break-after: auto;
        page-break-after: auto;
    }

    .sheet-input,
    .sheet-textarea {
        background: transparent;
        box-shadow: inset 0 0 0 0.2mm var(--card-rule);
    }

    .banner-name .sheet-input {
        box-shadow: none;
    }
}