/* Royal Hummer: piles as rows (top at left), the group in hand, the code bits. */

/* `hidden` must win over the display rules of .btn, .verdict and the zones */
.stage [hidden] { display: none !important; }
/* Local override: the shared curtain rule paints the primary button's background
   in the page colour, which hides its (page-coloured) label. */
.curtain .btn.btn-primary { background: var(--text); color: var(--page); }
.curtain .btn.btn-primary:disabled { background: var(--page); color: var(--text); }

#try-stage { --card-w: clamp(40px, 5.2vw, 64px); }
#why-stage { --card-w: clamp(40px, 5vw, 62px); }
#challenge-stage { --card-w: clamp(46px, 6vw, 64px); }

.rh-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rh-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.rh-zones { display: grid; gap: 22px; margin-top: 12px; }
.rh-pair-zones { display: grid; gap: 22px; }
@media (min-width: 900px) { .rh-pair-zones { grid-template-columns: 1fr 1fr; } }
.rh-zone { display: grid; gap: 8px; align-content: start; }
.rh-zone-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.rh-zone-note { font-size: 0.88rem; color: var(--secondary-on-stage); }
.rh-zone-note.is-invariant { color: var(--invariant); }
.rh-row { display: flex; flex-wrap: wrap; gap: 8px; min-height: calc(var(--card-w) * var(--card-ratio)); align-items: flex-end; }
.rh-row.has-tags { padding-top: 18px; row-gap: 26px; }
.rh-row.has-bits { padding-bottom: 18px; row-gap: 40px; }
.rh-row:empty::before { content: "empty"; color: var(--structure); font-size: 0.85rem; align-self: center; }
.rh-controls { margin-top: 22px; }
.rh-side { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 900px) { .rh-side { grid-template-columns: 1fr 1fr; align-items: start; } }

/* The group in the spectator's hands */
.card.is-lifted .card-tilt { transform: translateY(calc(var(--w) * -0.16)); }

/* Code bits under each card */
.card-tag.below.bit { font-family: var(--font-math); font-size: 0.95rem; font-weight: 400; letter-spacing: 0; }

.readouts { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-start; margin-top: 20px; }
.readout-value.is-small { font-size: 1.2rem; }
.case-table { margin-top: 8px; }
.case-table td, .case-table th { white-space: nowrap; }

/* Challenge: the routine lab */
.lab-fields { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.lab-fields .field select { max-width: 100%; }
.lab-moves { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 0.98rem; color: var(--paper); }
.lab-moves legend { font-size: 0.85rem; color: var(--secondary-on-stage); margin-bottom: 4px; padding: 0; }
.lab-moves label { display: flex; gap: 10px; align-items: center; min-height: 32px; cursor: pointer; }
.lab-moves input { width: 20px; height: 20px; accent-color: var(--active); }
.lab-rows { display: grid; gap: 18px; margin-top: 18px; }
@media (min-width: 760px) { .lab-rows { grid-template-columns: auto auto; justify-content: start; gap: 18px 48px; } }
.lab-quiz { display: grid; gap: 8px; margin-top: 8px; }
.lab-quiz .btn { justify-content: flex-start; white-space: normal; text-align: left; line-height: 1.3; padding: 10px 14px; height: auto; }
.lab-status { display: flex; flex-wrap: wrap; gap: 8px; }
.field select { max-width: 100%; }
@media (max-width: 560px) { .lab-fields .field, .lab-fields .field select { width: 100%; } }

/* ⊕ (U+2295) is missing from the latin font subsets; without this the browser may pick an
   oversized fallback. Prefer a symbol font that draws it at text size. */
@font-face { font-family: "XorGlyph"; src: local("Cambria Math"), local("Apple Symbols"), local("Segoe UI Symbol"), local("DejaVu Sans"), local("Arial Unicode MS"); unicode-range: U+2295; }
#main { font-family: "XorGlyph", var(--font-ui); }
#main .math, #main .math-up, #main var, #main .readout-value { font-family: "XorGlyph", var(--font-math); }

.stage .pile-label { text-align: left; }
.lab-status:not(:empty) { margin-top: 12px; }
#try-stage .rh-row { padding-top: 12px; }
#try-stage .ledger { max-height: none; } /* at most ten choices: show them all */