/*
 * Blazon: a heraldic achievement. The name flies on a swallow-tailed ribbon,
 * the portrait is the crest between combat and vitals, the six abilities are
 * quartered on a great heater shield with their skills standing beside it as
 * supporters, and the notes form the compartment beneath.
 */

.blazon-page {
    --blazon-heater: polygon(0 0, 100% 0, 100% 52%, 96.2% 70.4%, 85.4% 86%, 69.1% 96.4%, 50% 100%, 30.9% 96.4%, 14.6% 86%, 3.8% 70.4%, 0 52%);
    --blazon-heater-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='1,1 99,1 99,52 95.3,70 84.7,85.3 68.7,95.5 50,99 31.3,95.5 15.3,85.3 4.7,70 1,52' fill='none' stroke='%23000' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    --blazon-ribbon-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14' preserveAspectRatio='none'%3E%3Cpolygon points='0.5,0.5 149.5,0.5 143,7 149.5,13.5 0.5,13.5 7,7' fill='none' stroke='%23000' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5mm;
}

.blazon-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 22'%3E%3Cpath d='M1.2 1.2H18.8V11.5C18.8 15.8 15 19.2 10 20.8 5 19.2 1.2 15.8 1.2 11.5Z' fill='none' stroke='%23000' stroke-width='2.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 22'%3E%3Cpath d='M1.2 1.2H18.8V11.5C18.8 15.8 15 19.2 10 20.8 5 19.2 1.2 15.8 1.2 11.5Z' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.blazon-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 22'%3E%3Cpath d='M1.2 1.2H18.8V11.5C18.8 15.8 15 19.2 10 20.8 5 19.2 1.2 15.8 1.2 11.5Z' 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 22'%3E%3Cpath d='M1.2 1.2H18.8V11.5C18.8 15.8 15 19.2 10 20.8 5 19.2 1.2 15.8 1.2 11.5Z' fill='%23000'/%3E%3C/svg%3E");
}

/* Every heater shape is a translucent fill with a ring masked over it. */
.blazon-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card-rule);
    -webkit-mask: var(--blazon-heater-ring) center / 100% 100% no-repeat;
    mask: var(--blazon-heater-ring) center / 100% 100% no-repeat;
    pointer-events: none;
}

/* ---------- the ribbon ---------- */

.blazon-ribbon {
    position: relative;
    width: 150mm;
}

.blazon-ribbon::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card-rule);
    -webkit-mask: var(--blazon-ribbon-ring) center / 100% 100% no-repeat;
    mask: var(--blazon-ribbon-ring) center / 100% 100% no-repeat;
    pointer-events: none;
}

.blazon-ribbon .banner-name .sheet-input {
    padding: 2mm 14mm;
    font-size: 19pt;
    text-align: center;
    border-radius: 0;
    background: var(--card-accent-soft);
    clip-path: polygon(0 0, 100% 0, calc(100% - 7mm) 50%, 100% 100%, 0 100%, 7mm 50%);
}

.blazon-identity,
.blazon-casting {
    display: flex;
    justify-content: center;
    gap: 4mm;
}

.blazon-identity .sheet-slot { width: 26mm; }
.blazon-identity .identity-level { width: 11mm; }
.blazon-casting .casting-ability { width: 34mm; }
.blazon-casting .casting-save,
.blazon-casting .casting-attack { width: 18mm; }

.blazon-identity .sheet-slot-label,
.blazon-casting .sheet-slot-label,
.blazon-cells .sheet-slot-label {
    text-align: center;
}

.blazon-identity .sheet-input,
.blazon-casting .sheet-input,
.blazon-cells .sheet-input {
    text-align: center;
}

/* ---------- the crest: combat, portrait, vitals ---------- */

.blazon-crest {
    display: grid;
    grid-template-columns: 1fr 44mm 1fr;
    column-gap: 5mm;
    align-items: start;
    width: 100%;
}

.blazon-combat,
.blazon-vitals {
    display: flex;
    flex-direction: column;
    gap: 2.4mm;
}

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

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

.blazon-cells .conditions {
    flex: 2;
}

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

.blazon-vitals .damage-log {
    height: 15mm;
}

.blazon-crest-portrait {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6mm;
}

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

/* ---------- the achievement: supporters and the shield ---------- */

.blazon-achievement {
    display: grid;
    grid-template-columns: 1fr 92mm 1fr;
    column-gap: 4mm;
    align-items: start;
    width: 100%;
}

.blazon-shield {
    position: relative;
}

.blazon-face {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 26mm);
    gap: 3mm 4mm;
    height: 124mm;
    padding: 6mm 5mm 0;
    background: var(--card-accent-soft);
    clip-path: var(--blazon-heater);
}

.blazon-quarter {
    display: flex;
    flex-direction: column;
    gap: 1.6mm;
    min-width: 0;
}

.blazon-quarter .ability-name {
    font-size: 7.4pt;
}

.blazon-figures {
    display: grid;
    grid-template-columns: 12mm 9mm 1fr;
    grid-template-rows: auto auto;
    column-gap: 2mm;
    row-gap: 1.2mm;
    align-items: center;
}

.blazon-figures .ability-modifier {
    grid-row: 1 / span 2;
}

.blazon-figures .ability-modifier .sheet-input {
    padding: 1.2mm 0;
    font-size: 16pt;
    background: var(--card-surface);
    box-shadow: inset 0 0 0 0.3mm var(--card-rule);
    border-radius: 0.6mm;
}

.blazon-figures .ability-score {
    grid-column: 2;
    grid-row: 1;
}

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

.blazon-figures .ability-save {
    grid-column: 2 / span 2;
    grid-row: 2;
    gap: 1mm;
}

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

.blazon-supporter {
    display: grid;
    grid-template-rows: repeat(3, 26mm);
    row-gap: 3mm;
    padding-top: 6mm;
    min-width: 0;
}

.blazon-supporter-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.blazon-supporter .skill-list {
    gap: 1mm;
}

.blazon-supporter .skill-row {
    gap: 1mm;
}

.blazon-supporter .skill-marks {
    gap: 0.8mm;
}

.blazon-supporter .sheet-toggle,
.blazon-supporter .sheet-toggle-mark {
    width: 3mm;
    height: 3mm;
}

.blazon-supporter .skill-modifier {
    width: 7mm;
}

.blazon-supporter .skill-name {
    font-size: 7.2pt;
}

.blazon-supporter-dexter .skill-row {
    flex-direction: row-reverse;
}

.blazon-supporter-dexter .skill-name {
    text-align: right;
}

.blazon-supporter .ability-aside {
    gap: 2mm;
}

.blazon-supporter .aside-slot .sheet-input {
    width: 14mm;
}

.blazon-supporter-sinister .aside-slot .sheet-input {
    align-self: flex-start;
}

.blazon-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6mm;
    width: 100%;
    flex: 1;
    min-height: 0;
}

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

/* ---------- page two: the stores on a great shield ---------- */

.blazon-purse {
    display: flex;
    justify-content: center;
    gap: 10mm;
}

.blazon-purse .coin {
    position: relative;
    flex-direction: column-reverse;
    align-items: center;
    gap: 1.2mm;
}

.blazon-purse .coin::after {
    top: 0;
    bottom: auto;
    left: 50%;
    width: 18mm;
    height: 20mm;
    margin-left: -9mm;
}

.blazon-purse .coin .sheet-input {
    width: 18mm;
    height: 20mm;
    padding: 0 0 2mm;
    font-size: 10.5pt;
    line-height: 18mm;
    text-align: center;
    border-radius: 0;
    background: var(--card-accent-soft);
    clip-path: var(--blazon-heater);
}

.blazon-shield-stores {
    width: 100%;
    height: 222mm;
    flex: none;
}

.blazon-shield-stores .blazon-face {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 70mm;
    gap: 4mm 6mm;
    height: 100%;
    padding: 8mm 8mm 0;
}

.blazon-shield-stores .sheet-area {
    min-height: 0;
}

.blazon-tip {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4mm;
    padding-top: 2mm;
}

.blazon-tip .attunement-slots {
    flex-direction: column;
    align-items: center;
    gap: 2.4mm;
    width: 100%;
}

.blazon-tip .attunement-slot {
    flex: none;
    width: 110mm;
}

.blazon-tip .attunement-slot:nth-child(2) { width: 88mm; }
.blazon-tip .attunement-slot:nth-child(3) { width: 66mm; }

.blazon-tip .sheet-input {
    background: var(--card-surface);
    box-shadow: inset 0 0 0 0.25mm var(--card-rule);
}

/* ---------- page three: escutcheons for the slots ---------- */

.blazon-slots {
    display: flex;
    flex-direction: column;
    gap: 3mm;
    width: 100%;
}

.blazon-slot-row {
    display: flex;
    justify-content: center;
    gap: 4mm;
}

.blazon-slot-row .spell-slot {
    position: relative;
    display: grid;
    grid-template-columns: 12mm 1fr;
    grid-template-rows: auto auto;
    column-gap: 2mm;
    row-gap: 1.2mm;
    width: 33mm;
}

.blazon-slot-row .spell-slot::after {
    left: 0;
    top: 0;
    width: 12mm;
    height: 14mm;
}

.blazon-slot-row .spell-slot-level {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 12mm;
    height: 14mm;
    padding-bottom: 1.5mm;
    font-size: 12pt;
    background: var(--card-accent-soft);
    clip-path: var(--blazon-heater);
}

.blazon-slot-row .spell-slot-total {
    width: auto;
}

.blazon-slot-row .spell-slot-total .sheet-input {
    padding: 0.5mm 1mm;
}

.blazon-slot-row .spell-slot-expended .sheet-input {
    padding: 0.5mm 1mm;
}

.blazon-page .spell-table {
    width: 100%;
}

.blazon-page .spell-table-head span:first-child,
.blazon-page .spell-cell-level .sheet-input {
    text-align: center;
}