/*
 * Gallery: a wall of framed pictures. Every part of the sheet hangs in its
 * own double-ruled frame with flourished corners, the frames vary in size and
 * sit in an uneven masonry, and the portrait is an oval among them.
 */

.gallery-page {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4mm;
}

.gallery-core {
    grid-template-rows: 16mm 15mm 28mm auto minmax(60mm, auto) 1fr;
    grid-template-areas:
        "portrait portrait portrait portrait name name name name name name name name"
        "portrait portrait portrait portrait identity identity identity identity identity identity identity identity"
        "portrait portrait portrait portrait combat combat combat combat vitals vitals vitals vitals"
        "strength strength strength dexterity dexterity dexterity constitution constitution constitution intelligence intelligence intelligence"
        "wisdom wisdom wisdom charisma charisma charisma weapons weapons weapons weapons weapons weapons"
        "feats feats feats feats feats feats feats feats damage damage damage damage";
}

.gallery-equipment {
    grid-template-rows: auto 1fr 1fr auto;
    grid-template-areas:
        "name name name name name name name name purse purse purse purse"
        "common common common common common common common special special special special special"
        "personal personal personal personal personal companions companions companions companions companions companions companions"
        "attunement attunement attunement attunement attunement attunement attunement attunement attunement attunement attunement attunement";
}

.gallery-spells {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "name name name name name name name name casting casting casting casting"
        "slots slots slots slots slots slots slots slots slots slots slots slots"
        "spells spells spells spells spells spells spells spells spells spells spells spells";
}

.gallery-page .sheet-toggle-mark {
    border: none;
    transform: none;
    background: var(--card-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5L12.4 7.6 18.5 10 12.4 12.4 10 18.5 7.6 12.4 1.5 10 7.6 7.6Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5L12.4 7.6 18.5 10 12.4 12.4 10 18.5 7.6 12.4 1.5 10 7.6 7.6Z' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.gallery-page .sheet-toggle-input:checked + .sheet-toggle-mark {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5L12.4 7.6 18.5 10 12.4 12.4 10 18.5 7.6 12.4 1.5 10 7.6 7.6Z' fill='%23000'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.5L12.4 7.6 18.5 10 12.4 12.4 10 18.5 7.6 12.4 1.5 10 7.6 7.6Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- the frame ---------- */

.gallery-frame {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2mm;
    min-width: 0;
    min-height: 0;
    padding: 3.2mm 3mm;
    border: 0.3mm solid var(--card-rule);
    outline: 0.22mm solid var(--card-rule);
    outline-offset: -1.5mm;
}

.gallery-frame .corner-flourish {
    width: 4.2mm;
    height: 4.2mm;
    color: var(--card-accent);
    opacity: 0.75;
}

.gallery-frame .corner-flourish-top-left { top: 0.4mm; left: 0.4mm; }
.gallery-frame .corner-flourish-top-right { top: 0.4mm; right: 0.4mm; }
.gallery-frame .corner-flourish-bottom-left { bottom: 0.4mm; left: 0.4mm; }
.gallery-frame .corner-flourish-bottom-right { bottom: 0.4mm; right: 0.4mm; }

.gallery-frame > .sheet-area {
    flex: 1;
}

.gallery-area-portrait { grid-area: portrait; }
.gallery-area-name { grid-area: name; }
.gallery-area-identity { grid-area: identity; }
.gallery-area-combat { grid-area: combat; }
.gallery-area-vitals { grid-area: vitals; }
.gallery-area-strength { grid-area: strength; }
.gallery-area-dexterity { grid-area: dexterity; }
.gallery-area-constitution { grid-area: constitution; }
.gallery-area-intelligence { grid-area: intelligence; }
.gallery-area-wisdom { grid-area: wisdom; }
.gallery-area-charisma { grid-area: charisma; }
.gallery-area-feats { grid-area: feats; }
.gallery-area-weapons { grid-area: weapons; }
.gallery-area-damage { grid-area: damage; }
.gallery-area-purse { grid-area: purse; }
.gallery-area-common { grid-area: common; }
.gallery-area-special { grid-area: special; }
.gallery-area-personal { grid-area: personal; }
.gallery-area-companions { grid-area: companions; }
.gallery-area-attunement { grid-area: attunement; }
.gallery-area-casting { grid-area: casting; }
.gallery-area-slots { grid-area: slots; }
.gallery-area-spells { grid-area: spells; }

/* ---------- the pictures ---------- */

.gallery-area-portrait {
    align-items: center;
    justify-content: center;
    gap: 2.4mm;
}

.gallery-page .sheet-portrait-frame {
    width: 40mm;
    height: 48mm;
    border-radius: 50%;
    box-shadow: 0 0 0 1mm var(--card-surface), 0 0 0 1.3mm var(--card-rule);
}

.gallery-area-name {
    justify-content: center;
}

.gallery-area-name .banner-name .sheet-input {
    font-size: 18pt;
    text-align: center;
}

.gallery-cells {
    display: flex;
    gap: 2.4mm;
}

.gallery-cells .sheet-slot {
    flex: 1;
}

.gallery-cells .identity-level {
    flex: 0 0 11mm;
}

.gallery-cells .hit-die {
    flex: 0.8;
}

.gallery-cells .hit-dice-count {
    flex: 1.1;
}

.gallery-cells .conditions {
    flex: 1.5;
}

.gallery-cells .sheet-slot-label,
.gallery-cells .sheet-input {
    text-align: center;
}

.gallery-area-combat,
.gallery-area-vitals {
    justify-content: center;
    gap: 2.2mm;
}

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

.gallery-frame .ability-block {
    display: flex;
    flex-direction: column;
    gap: 1.6mm;
    min-width: 0;
}

.gallery-frame .ability-name {
    font-size: 7.6pt;
    text-align: center;
}

.gallery-figures {
    display: grid;
    grid-template-columns: 11mm auto;
    grid-template-rows: auto auto;
    column-gap: 2mm;
    row-gap: 1mm;
    align-items: center;
    justify-content: center;
}

.gallery-figures .ability-modifier {
    grid-row: 1 / span 2;
    width: 11mm;
}

.gallery-figures .ability-modifier .sheet-input {
    padding: 0.8mm 0;
    font-size: 14pt;
    border-radius: 50%;
}

.gallery-figures .ability-score {
    grid-column: 2;
    width: 7.5mm;
}

.gallery-figures .ability-score .sheet-input {
    box-shadow: inset 0 0 0 0.22mm var(--card-rule);
}

.gallery-figures .ability-save {
    grid-column: 2;
    gap: 1mm;
}

.gallery-figures .ability-save-value {
    width: 7.5mm;
}

.gallery-frame .skill-list {
    gap: 1mm;
}

.gallery-frame .skill-row {
    gap: 1mm;
}

.gallery-frame .skill-marks {
    gap: 0.8mm;
}

.gallery-frame .sheet-toggle,
.gallery-frame .sheet-toggle-mark {
    width: 3mm;
    height: 3mm;
}

.gallery-frame .skill-modifier {
    width: 7mm;
}

.gallery-frame .skill-name {
    font-size: 7pt;
}

.gallery-frame .ability-aside {
    gap: 1.6mm;
}

.gallery-frame .aside-slot .sheet-slot-label {
    text-align: center;
    white-space: normal;
    line-height: 1.2;
}

.gallery-area-damage .damage-log {
    flex: 1;
}

.gallery-page .sheet-area-title {
    text-align: center;
}

/* ---------- pages two and three ---------- */

.gallery-area-purse .gallery-cells {
    flex-wrap: wrap;
}

.gallery-area-purse .gallery-cells .sheet-slot {
    flex: 1 1 40%;
}

.gallery-area-attunement .attunement {
    align-items: center;
}

.gallery-area-attunement .attunement-slots {
    width: 100%;
    gap: 6mm;
}

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

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

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

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

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

.gallery-area-spells .spell-table {
    flex: 1;
}