/*
 * Lancet: a pointed window is cut into the top of the card, the emblem is
 * its rose with the kind beneath, the title is the inscription on its sill,
 * the figures stand under it as a row of small arched lights with the label
 * on each plinth, and the text fills the wall below. On a wide card the
 * window stands tall at the left holding the rose, the kind and the lights,
 * while the title and the text fill the wall beside it.
 */

/* The wall is the grid that places the window, the apex, the title, the
   lights and the text; it is what turns on a wide card, since a card cannot
   query its own size. */
.lancet-wall {
    --lancet-arch-height: 12cqh;
    --lancet-window-width: 30cqw;
    --lancet-stone: color-mix(in srgb, var(--card-accent-second) 62%, transparent);
    --lancet-glass: color-mix(in srgb, var(--card-accent-second) 11%, var(--card-surface));
    --lancet-lead: color-mix(in srgb, var(--card-accent-second) 13%, transparent);
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--lancet-arch-height) auto auto minmax(0, 1fr) auto;
}

/* The arch is the meeting of two ellipses, one from each foot, high enough
   that they cross at a point; the wall beneath is a plain rectangle. */
.lancet-window,
.lancet-glass {
    mask-image:
        linear-gradient(#000, #000),
        radial-gradient(ellipse 100% 115.5% at 0% 100%, #000 99.4%, transparent 100%),
        radial-gradient(ellipse 100% 115.5% at 100% 100%, #000 99.4%, transparent 100%);
    mask-size:
        100% calc(100% - var(--lancet-arch-height) + 0.3mm),
        100% var(--lancet-arch-height),
        100% var(--lancet-arch-height);
    mask-position: left bottom, left top, left top;
    mask-repeat: no-repeat;
    mask-composite: add, intersect, add;
}

.lancet-window {
    grid-column: 1;
    grid-row: 1 / 3;
    background: var(--lancet-stone);
}

/* The glass is the same arch inset by the width of the stone, leaded in a
   faint diamond lattice. */
.lancet-glass {
    display: block;
    height: calc(100% - 0.8mm);
    margin: 0.4mm;
    background:
        repeating-linear-gradient(45deg, transparent 0 3.1mm, var(--lancet-lead) 3.1mm 3.25mm),
        repeating-linear-gradient(-45deg, transparent 0 3.1mm, var(--lancet-lead) 3.1mm 3.25mm),
        var(--lancet-glass);
}

.lancet-apex {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5mm;
    height: var(--lancet-arch-height);
    min-height: 0;
    padding-bottom: 0.7mm;
    color: var(--card-accent-second);
}

.lancet-rose {
    flex: none;
    display: grid;
    place-items: center;
    width: 4.6mm;
    height: 4.6mm;
    padding: 0.8mm;
    border: 0.25mm solid var(--card-accent-second);
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-accent-second) 16%, transparent);
}

.lancet-rose .glyph {
    display: block;
    stroke-width: 1.6;
}

.lancet-kind {
    max-width: 70%;
    font-family: var(--card-label-font);
    font-size: 0.62em;
    line-height: 1.15;
    letter-spacing: var(--card-label-spacing);
    text-transform: var(--card-label-transform);
    text-align: center;
    overflow-wrap: break-word;
    hyphens: auto;
}

.lancet-card .print-card-header {
    grid-column: 1;
    grid-row: 2;
    padding: 0.6mm 2.4mm 1mm;
    text-align: center;
}

.lancet-card .print-card-subline {
    justify-content: center;
}

.lancet-card .print-card-figures {
    grid-column: 1;
    grid-row: 3;
    align-items: center;
}

.lancet-tracery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em;
    width: 100%;
    margin: 0;
}

.lancet-light {
    flex: 1 1 7em;
    max-width: 50%;
    min-width: 0;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    border: 0.22mm solid color-mix(in srgb, var(--card-accent-second) 60%, transparent);
    border-radius: 1.2em 1.2em 0.2mm 0.2mm / 1.6em 1.6em 0.2mm 0.2mm;
    background: color-mix(in srgb, var(--card-accent-second) 8%, transparent);
}

.lancet-light.lancet-light-wide {
    flex: 2 1 14em;
    max-width: 100%;
}

.lancet-light-value {
    margin: 0;
    padding: 0.55em 0.55em 0.25em;
    font-size: 0.84em;
    line-height: 1.2;
    overflow-wrap: break-word;
    hyphens: auto;
    color: var(--card-ink);
}

.lancet-light-label {
    padding: 0.12em 0.4em 0.18em;
    font-family: var(--card-label-font);
    font-size: 0.58em;
    line-height: 1.15;
    letter-spacing: var(--card-label-spacing);
    text-transform: var(--card-label-transform);
    overflow-wrap: break-word;
    hyphens: auto;
    color: var(--card-surface);
    background: var(--card-accent-second);
}

.lancet-card .print-card-body {
    grid-column: 1;
    grid-row: 4;
}

.lancet-card .print-card-source {
    grid-column: 1;
    grid-row: 5;
    text-align: center;
}

@container card (orientation: landscape) {
    .lancet-wall {
        --lancet-arch-height: 26cqh;
        grid-template-columns: var(--lancet-window-width) minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        column-gap: 2.8mm;
    }

    .lancet-window {
        grid-row: 1 / -1;
    }

    .lancet-apex {
        grid-row: 1 / 3;
    }

    .lancet-card .print-card-header {
        grid-column: 2;
        grid-row: 1;
        padding: 0 0 1mm;
        text-align: left;
    }

    .lancet-card .print-card-subline {
        justify-content: space-between;
    }

    .lancet-card .print-card-figures {
        grid-column: 1;
        grid-row: 3 / 5;
        height: auto;
        margin: 0.6mm 1mm 1mm;
        justify-content: flex-start;
        align-items: stretch;
    }

    .lancet-tracery {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.45em;
    }

    .lancet-light,
    .lancet-light.lancet-light-wide {
        flex: none;
        max-width: 100%;
    }

    .lancet-card .print-card-body {
        grid-column: 2;
        grid-row: 2 / 4;
        margin-top: 1.4mm;
    }

    .lancet-card .print-card-source {
        grid-column: 2;
        grid-row: 4;
        text-align: right;
    }
}