/* The design lab (/lab). Cards are drawn in millimetres at print size. .lab-card is the cut card; .lab-card__sheet is the printed sheet, larger by the bleed, and moves by --dx/--dy when the lab simulates a drifting cut. */
.lab-intro { max-width: 70ch; margin-block: 0.5rem 1.25rem; }
.lab-index li { margin-block: 0.4rem; }

.lab-facts { max-width: 90ch; margin-block: 0 1.25rem; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: 8px; }
.lab-facts summary { cursor: pointer; }
.lab-facts ul { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; }

.lab-controls { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: center; padding: 0.6rem 0; margin-bottom: 1rem; background: var(--background-page, #0b0b0f); border-bottom: 1px solid var(--border-subtle); }
.lab-controls label { display: inline-flex; gap: 0.4rem; align-items: center; }
.lab-controls select, .lab-button { font: inherit; padding: 0.15rem 0.5rem; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: inherit; }
.lab-button { cursor: pointer; }

.lab-variant { margin-block: 1.5rem 2.5rem; }
.lab-variant__link { color: inherit; text-decoration: none; }
.lab-variant__note { max-width: 90ch; margin-block: 0.3rem 0.9rem; }
.lab-row { display: flex; flex-wrap: wrap; gap: 5mm; zoom: var(--lab-zoom); }

/* The card and the sheet */
.lab-card { --trim-w: 70mm; --trim-h: 120mm; --bleed: 3mm; --safe: 4mm; --radius: 3mm; --dx: 0mm; --dy: 0mm; --gold: #c8a75a; --cream: #f3ecd8;
  position: relative; flex: none; width: var(--trim-w); height: var(--trim-h); overflow: hidden; border-radius: var(--radius); box-shadow: 0 0.4mm 2.5mm rgb(0 0 0 / 0.55); background: #000; }
.lab-card__sheet { position: absolute; overflow: hidden; left: calc(var(--dx) - var(--bleed)); top: calc(var(--dy) - var(--bleed)); width: calc(var(--trim-w) + 2 * var(--bleed)); height: calc(var(--trim-h) + 2 * var(--bleed)); transition: left 0.25s, top 0.25s; }
.lab--square .lab-card { --radius: 0mm; }

/* Bleed and guides: the whole sheet, the bleed dimmed, the cut in cyan, the safe area in magenta. */
.lab-card__trim, .lab-card__safe { display: none; position: absolute; pointer-events: none; z-index: 10; }
.lab--bleed .lab-card { width: calc(var(--trim-w) + 2 * var(--bleed)); height: calc(var(--trim-h) + 2 * var(--bleed)); border-radius: 0; overflow: visible; }
.lab--bleed .lab-card__sheet { left: 0; top: 0; }
.lab--bleed .lab-card__trim { display: block; inset: var(--bleed); border: 0.2mm dashed #33e0ff; border-radius: var(--radius); box-shadow: 0 0 0 10mm rgb(0 0 0 / 0.5); }
.lab--bleed .lab-card__safe { display: block; inset: calc(var(--bleed) + var(--safe)); border: 0.2mm dashed #ff4fd8; }

/* Shared parts */
.lab-art, .lab-thoth__window, .lab-plate__window { position: absolute; inset: 0; overflow: hidden; }
.lab-art__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.lab-art__missing { width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #222 0 2mm, #2a2a2a 2mm 4mm); }
.lab-name { font-family: var(--lab-display); font-size: calc(4.2mm * var(--name-scale)); line-height: 1.12; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; color: var(--cream); text-wrap: balance; }
.lab-group { font-family: "Lab DM Sans", "DM Sans", sans-serif; font-size: 1.85mm; letter-spacing: 0.22em; text-transform: uppercase; text-align: center; color: var(--gold); margin-top: 1mm; }
.lab-numeral { font-family: var(--lab-display); letter-spacing: 0.04em; line-height: 1; }
.lab-emblem { width: 100%; height: 100%; display: block; }

/* A · band */
.lab-band__medallion { position: absolute; top: calc(var(--bleed) + 3.5mm); left: 50%; transform: translateX(-50%); width: 9.5mm; height: 9.5mm; border-radius: 50%; background: rgb(8 8 12 / 0.78); border: 0.3mm solid var(--hue-2); color: var(--cream); display: grid; place-items: center; font-size: 3mm; }
.lab-band__medallion .lab-emblem { width: 5.6mm; height: 5.6mm; }
.lab-card--band .lab-numeral { font-size: 2.9mm; }
.lab-band__band { position: absolute; left: 0; right: 0; bottom: 0; min-height: calc(var(--bleed) + 17mm); padding: 3.2mm calc(var(--bleed) + var(--safe)) calc(var(--bleed) + var(--safe)); box-sizing: border-box; background: rgb(8 8 12 / 0.8); border-top: 0.35mm solid var(--hue-2); display: flex; flex-direction: column; justify-content: center; }

/* B · cartouche */
.lab-cartouche__medallion { position: absolute; top: calc(var(--bleed) + 5mm); left: 50%; transform: translateX(-50%); width: 9mm; height: 9mm; border-radius: 50%; background: var(--hue-deep); border: 0.25mm solid var(--gold); outline: 0.25mm solid var(--gold); outline-offset: 0.6mm; color: var(--gold); display: grid; place-items: center; }
.lab-cartouche__medallion .lab-emblem { width: 5.4mm; height: 5.4mm; }
.lab-card--cartouche .lab-numeral { font-size: 2.8mm; }
.lab-cartouche__plate { position: absolute; left: calc(var(--bleed) + 7mm); right: calc(var(--bleed) + 7mm); bottom: calc(var(--bleed) + 6.5mm); padding: 2.4mm 2mm 2.2mm; background: var(--hue-deep); border: 0.25mm solid var(--gold); outline: 0.25mm solid var(--gold); outline-offset: 0.6mm; border-radius: 0.8mm; }
.lab-card--cartouche .lab-name { font-size: calc(3.7mm * var(--name-scale)); }

/* C · scrim */
.lab-scrim__top { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--bleed) + 20mm); background: linear-gradient(rgb(5 5 9 / 0.75), rgb(5 5 9 / 0)); }
.lab-scrim__bottom { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bleed) + 34mm); background: linear-gradient(rgb(5 5 9 / 0), rgb(5 5 9 / 0.82) 55%, rgb(5 5 9 / 0.9)); }
.lab-scrim__mark { position: absolute; top: calc(var(--bleed) + var(--safe)); left: 0; right: 0; display: grid; justify-items: center; color: var(--cream); }
.lab-scrim__mark .lab-emblem { width: 6mm; height: 6mm; }
.lab-card--scrim .lab-numeral { font-size: 3.6mm; letter-spacing: 0.12em; }
.lab-scrim__text { position: absolute; left: calc(var(--bleed) + var(--safe)); right: calc(var(--bleed) + var(--safe)); bottom: calc(var(--bleed) + var(--safe) + var(--name-lift, 1mm)); }
.lab-card--scrim .lab-group { margin: 0 0 1.2mm; }
.lab-card--scrim .lab-name { font-size: calc(4.8mm * var(--name-scale)); }

/* D · thoth: a broad border in the group's colour, the art in a gold-ruled window */
.lab-card--thoth .lab-card__sheet { background: var(--hue-dark); }
.lab-thoth__window { inset: calc(var(--bleed) + 11mm) calc(var(--bleed) + 5mm) calc(var(--bleed) + 15mm); outline: 0.3mm solid var(--gold); outline-offset: 0.5mm; }
.lab-thoth__mark { position: absolute; top: var(--bleed); height: 11mm; left: 0; right: 0; display: grid; place-items: center; color: var(--gold); }
.lab-thoth__mark .lab-emblem { width: 6mm; height: 6mm; }
.lab-card--thoth .lab-numeral { font-size: 4mm; letter-spacing: 0.1em; }
.lab-thoth__name { position: absolute; bottom: var(--bleed); height: 15mm; left: calc(var(--bleed) + 4mm); right: calc(var(--bleed) + 4mm); display: grid; place-items: center; color: var(--gold); font-size: calc(4mm * var(--name-scale)); }

/* E · plate: paper margins, a plate label and a caption */
.lab-card--plate .lab-card__sheet { background: #ece4d2; }
.lab-plate__label { position: absolute; top: var(--bleed); height: 11mm; left: 0; right: 0; display: grid; place-items: center; font-family: var(--lab-display); font-size: 2.4mm; letter-spacing: 0.3em; text-transform: uppercase; color: #3a332a; }
.lab-plate__window { inset: calc(var(--bleed) + 11mm) calc(var(--bleed) + 6mm) calc(var(--bleed) + 17mm); border: 0.25mm solid #2a2520; }
.lab-plate__text { position: absolute; bottom: var(--bleed); height: 17mm; left: calc(var(--bleed) + 5mm); right: calc(var(--bleed) + 5mm); display: flex; flex-direction: column; justify-content: center; }
.lab-card--plate .lab-name { color: #1d1a16; font-size: calc(3.8mm * var(--name-scale)); }
.lab-plate__group { font-family: "EB Garamond", serif; font-style: italic; font-size: 2.6mm; text-align: center; color: #4a4136; margin-top: 0.8mm; }

/* F · sigil: one SVG for the whole face */
.lab-sigil { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lab-sigil__name, .lab-sigil__numeral { font-family: var(--lab-display); letter-spacing: 0.06em; }
.lab-sigil__group { font-family: "Lab DM Sans", "DM Sans", sans-serif; letter-spacing: 0.22em; }

/* C2 · scrim-footer: the mark small above the name, no top shade, no label */
.lab-scrim__footmark { display: grid; justify-items: center; color: var(--cream); opacity: 0.85; margin-bottom: 1.4mm; }
.lab-scrim__footmark .lab-emblem { width: 4.2mm; height: 4.2mm; }
.lab-card--scrim-footer .lab-numeral { font-size: 2.6mm; letter-spacing: 0.14em; }
.lab-card--scrim-footer .lab-name { font-size: calc(4.8mm * var(--name-scale)); }
.lab-card--scrim-name .lab-name { font-size: calc(var(--name-size, 4.8mm) * var(--name-scale)); letter-spacing: var(--name-track, 0.06em); }

/* C3 · scrim-name: the name alone on a shorter, lighter shade */
.lab-scrim__low { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--bleed) + var(--shade-h, 24mm)); background: linear-gradient(rgb(5 5 9 / 0), rgb(5 5 9 / calc(var(--shade-a, 0.8) * 0.875)) 60%, rgb(5 5 9 / var(--shade-a, 0.8))); }

/* ---- Backs ---- */
.lab-cell { display: grid; gap: 1.5mm; justify-items: start; }
.lab-pair { display: flex; gap: 3mm; }
.lab-pair__front { display: none; }
.lab--with-front .lab-pair__front { display: block; }
.lab-cell__caption { color: var(--text-tertiary); font-size: 2.4mm; }
.lab-cell__flag { display: none; color: #ff6b6b; font-weight: 600; }
.lab-cell--overflow .lab-cell__flag { display: inline; }
.lab-cell--overflow .lab-back { box-shadow: 0 0 0 0.6mm #ff6b6b; }
.lab-variant__count { margin-block: -0.4rem 0.8rem; color: var(--text-secondary); font-weight: 600; }

/* The text page: inside the safe area, head, body that must fit, foot. */
.lab-back__page { position: absolute; top: calc(var(--bleed) + var(--safe) + var(--back-top, 0mm)); bottom: calc(var(--bleed) + var(--safe) + var(--back-bottom, 0mm)); left: calc(var(--bleed) + var(--safe) + var(--back-side, 0mm)); right: calc(var(--bleed) + var(--safe) + var(--back-side, 0mm)); display: flex; flex-direction: column; font-family: var(--lab-body); font-size: var(--lab-body-size); line-height: var(--body-lead, 1.3); color: var(--back-ink); }
.lab-back { --back-ink: #f0e9d8; --back-soft: #b9b2a2; --back-label: var(--tune-label, var(--hue-2)); }
.lab-back__head { display: grid; justify-items: center; text-align: center; gap: var(--head-gap, 0.6mm); padding-bottom: var(--head-pad, 2mm); margin-bottom: var(--head-after, 2.2mm); border-bottom: 0.2mm solid color-mix(in srgb, var(--back-label) var(--rule-a, 60%), transparent); }
.lab-back__mark { height: 4.4mm; display: grid; place-items: center; color: var(--back-label); }
.lab-back__mark .lab-emblem { width: 4.4mm; height: 4.4mm; }
.lab-back__mark .lab-numeral { font-size: 3mm; letter-spacing: 0.12em; }
.lab-back__name { font-family: var(--lab-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: calc(var(--back-name-size, 3.3mm) * var(--name-scale)); line-height: 1.1; text-wrap: balance; }
.lab-back__group { font-family: "Lab DM Sans", sans-serif; font-size: 1.7mm; letter-spacing: 0.22em; text-transform: uppercase; color: var(--back-soft); }
.lab-back__body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lab-back .lab-back__body p { margin: 0 0 var(--field-gap, 1.5mm); hyphens: auto; }
.lab-back .lab-back__body .lab-back__question { margin-top: var(--q-before, 0mm); margin-bottom: var(--q-after, 1.5mm); }
.lab-back__question { font-style: italic; font-size: var(--q-size, 1.12em); line-height: 1.25; text-align: center; text-wrap: balance; hyphens: manual; }
.lab-back__label { font-family: "Lab DM Sans", sans-serif; font-size: 0.72em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--back-label); margin-right: 0.3em; }
.lab-back__foot { display: flex; justify-content: space-between; gap: 2mm; padding-top: var(--foot-pad, 1.6mm); margin-top: var(--foot-before, 1mm); border-top: 0.2mm solid color-mix(in srgb, var(--back-label) var(--rule-a, 60%), transparent); font-family: "Lab DM Sans", sans-serif; font-size: 1.6mm; letter-spacing: 0.12em; text-transform: uppercase; color: var(--back-soft); }

/* 3 · paper */
.lab-card--text-paper .lab-card__sheet, .lab-card--text-essentials .lab-card__sheet { background: #efe8d8; }
.lab-card--text-paper, .lab-card--text-essentials { --back-ink: #1f1b16; --back-soft: #6b6256; --back-label: var(--hue-1); }

/* 4 · dark with a band off the top edge */
.lab-card--text-dark .lab-card__sheet, .lab-card--question-only .lab-card__sheet { background: var(--hue-deep); }
.lab-back__band { position: absolute; left: 0; right: 0; top: 0; height: calc(var(--bleed) + 2.2mm); background: var(--hue-1); }
.lab-card--text-dark .lab-back__page { top: calc(var(--bleed) + var(--safe) + 0.8mm); }

/* 5 · over the card's own art */
.lab-back__veil { position: absolute; inset: 0; background: rgb(6 6 10 / var(--veil, 0.86)); }

/* 7 · the question alone */
.lab-back__body--centre { display: grid; align-content: center; }
.lab-back__big-question { font-family: var(--lab-display); font-size: 4.2mm; line-height: 1.3; text-align: center; text-wrap: balance; letter-spacing: 0.02em; }

/* ---- The card bench (/lab/card): C3 front and back 5 side by side, tuned by the controls ---- */
.lab-bench .lab-cell__caption { font-size: 2.4mm; }
.lab-tune--mirror .lab-card--text-art .lab-art__image { transform: scaleX(-1); }
.lab-tune--veil-fade .lab-card--text-art .lab-back__veil { background: linear-gradient(rgb(6 6 10 / calc(var(--veil, 0.86) - 0.22)), rgb(6 6 10 / var(--veil, 0.86)) 30%, rgb(6 6 10 / var(--veil, 0.86))); }
.lab-tune--no-group .lab-back__group { display: none; }
.lab-tune--no-position .lab-back__position { display: none; }
.lab-tune--no-mark .lab-back__mark { display: none; }
.lab-tune--name-italic-question .lab-back__question { font-style: normal; }
.lab-settings { margin-top: 1.5rem; max-width: 90ch; }
.lab-settings pre { white-space: pre-wrap; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: 8px; font-size: 0.8rem; }
.lab-controls input[type=range] { width: 7rem; }
.lab-controls output { min-width: 3.5em; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.lab-bench__layout { display: grid; grid-template-columns: 17rem 1fr; gap: 1.5rem; align-items: start; }
.lab-tune { position: sticky; top: 4rem; display: grid; gap: 0.45rem; padding: 0.75rem 1rem; border: 1px solid var(--border-subtle); border-radius: 8px; max-height: calc(100vh - 5rem); overflow: auto; }
.lab-tune h2 { margin: 0.4rem 0 0.1rem; }
.lab-tune__row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.4rem; align-items: center; }
.lab-tune__row:has(input[type=checkbox]) { display: flex; }
.lab-tune .lab-button { font: inherit; }
.lab-bench .lab-pair { gap: 2mm; }
@media (max-width: 900px) { .lab-bench__layout { grid-template-columns: 1fr; } .lab-tune { position: static; max-height: none; } }