/*
 * saymzes-webapp.css: the web app's own styles, over saymzes-default.css (Saymzes.CommonApp),
 * which declares every token and the pieces a server page shares (chips, sheets, list rows).
 * Here: the WebAssembly app's frame, its bars, and the lobby, the board and the reveal.
 *
 * Phone-first. No colour is written here as a hex: use the --sz-* tokens. One min-width query,
 * at the end, lays the board and the reveal out for wide screens (spec 05, One layout).
 */

/* ------------------------------------------------------------------------------------------
 * 1. Loading.
 * ------------------------------------------------------------------------------------------ */

/* The message shown while the WebAssembly client loads. */
.sz-preload {
    display: flex;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    background: var(--sz-paper);
}

.sz-preload-text {
    font-family: var(--sz-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sz-ink);
}

/* ------------------------------------------------------------------------------------------
 * 2. The frame: a full-height column — a bar, the page, and the page's action bar pinned to
 *    the foot of the viewport by position: sticky, so it never covers what scrolls above it.
 * ------------------------------------------------------------------------------------------ */

.sz-app {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.sz-app-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* A page: its content, then its action bar. The phone's 480 px column, centred. */
.sz-screen {
    box-sizing: border-box;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--sz-column);
    margin: 0 auto;
}

.sz-screen-body {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px var(--sz-gutter) 24px;
}

.sz-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: column;
}

.sz-actionbar > * {
    flex: none;
}

.sz-actionbar-row {
    display: flex;
    gap: 10px;
}

.sz-actionbar-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* A button that is busy shows a spinner beside its words. */
.sz-spinner {
    flex: none;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: sz-spin 700ms linear infinite;
}

@keyframes sz-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ------------------------------------------------------------------------------------------
 * 3. The bars.
 * ------------------------------------------------------------------------------------------ */

/* The top bar: 56 high, Paper, a hairline beneath. */
.sz-topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 3.5rem;
    padding: 0 8px;
    border-bottom: 1px solid var(--sz-line);
    background: var(--sz-paper);
}

.sz-topbar-wordmark {
    padding: 0 8px;
}

.sz-topbar-spacer {
    flex: 1 1 auto;
}

/* The current page's icon sits on a Blue-soft circle, in Blue. */
.sz-topbar-icon.is-current {
    background: var(--sz-blue-soft);
    color: var(--sz-blue);
}

/* The avatar: the player's initial on a 32 px Ink circle, inside the 44 px target. */
.sz-avatar {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sz-ink);
    color: var(--sz-card);
    font-family: var(--sz-font-body);
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    line-height: 1;
}

.sz-avatar-button:hover {
    background: transparent;
}

/* The top bar in play: no hairline, no navigation. */
.sz-playbar {
    flex: none;
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0 8px;
}

.sz-playbar-label {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--sz-ink-2);
}

.sz-playbar-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sz-playbar-end {
    flex: none;
    width: var(--sz-target);
}

/* A game's progress: three pips, 22 x 6, Ink for this board and those before, Line to come. */
.sz-pips {
    display: inline-flex;
    gap: 4px;
}

.sz-pip {
    width: 22px;
    height: 6px;
    border-radius: 3px;
    background: var(--sz-line);
}

.sz-pip.is-done {
    background: var(--sz-ink);
}

/* Hints: a quiet pill in the space M12b left, its count once any is used. */
.sz-playbar-hints {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: var(--sz-target);
    padding: 0 12px;
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-card);
    color: var(--sz-ink);
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    white-space: nowrap;
}

/* At large text the bars must still fit a phone (spec 05 § Accessibility). Their controls are
   icons, not text: they keep the 44 px target and a 22 px glyph at any text size. The wordmark's
   name is text, and gives way when the bar is narrower than twenty lines of text are tall — on a
   360 px phone that happens only past about 110%. The play bar's label may wrap. */
.sz-topbar,
.sz-playbar {
    container-type: inline-size;
}

.sz-topbar .sz-icon-button,
.sz-playbar .sz-icon-button {
    width: 44px;
    height: 44px;
    font-size: 22px;
}

.sz-topbar .sz-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
}

.sz-playbar-label {
    min-width: 0;
    flex-wrap: wrap;
}

@container (max-width: 20rem) {
    .sz-topbar .sz-wordmark-name {
        display: none;
    }
}

/* ------------------------------------------------------------------------------------------
 * 4. Entity images: the artboards' sizes, radii and 1 px Line ring. Nothing shifts as they load.
 * ------------------------------------------------------------------------------------------ */

.sz-entity-image {
    box-sizing: border-box;
    flex: none;
    display: block;
    object-fit: cover;
    background: var(--sz-card);
    box-shadow: 0 0 0 1px var(--sz-line);
}

.sz-entity-image-tile {
    width: 48px;
    height: 32px;
    border-radius: 4px;
}

.sz-entity-image-target {
    width: 72px;
    height: 48px;
    border-radius: 6px;
    box-shadow: 0 0 0 2px var(--sz-card);
}

.sz-entity-image-slot {
    width: 24px;
    height: 16px;
    border-radius: 2px;
}

.sz-entity-image-marker {
    width: 28px;
    height: 20px;
    border-radius: 3px;
}

.sz-entity-image-target-marker {
    width: 34px;
    height: 24px;
    border-radius: 4px;
}

/* A marker with no image: the name's first letters on Card. */
.sz-entity-letters {
    display: grid;
    place-items: center;
    color: var(--sz-ink);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* ------------------------------------------------------------------------------------------
 * 5. The lobby: Home and How to play.
 * ------------------------------------------------------------------------------------------ */

/* Home: the daily card, then New game and Quick board two-up, then Continue. */
.sz-lobby {
    gap: 14px;
}

/* The daily card: Blue, radius 22, the mark large and ghosted top-right. The whole card is the
   button; its date, title and line are read from its accessible name. */
.sz-daily {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 13rem;
    padding: 22px 20px 20px;
    overflow: hidden;
    border: 0;
    border-radius: var(--sz-radius-daily);
    background: var(--sz-blue);
    color: var(--sz-white);
    text-align: left;
}

.sz-daily:disabled {
    cursor: progress;
}

.sz-daily > * {
    position: relative;
}

.sz-daily > .sz-daily-mark {
    position: absolute;
    top: -14px;
    right: -24px;
    width: 170px;
    height: 110px;
    fill: none;
    stroke: var(--sz-white);
    stroke-opacity: 0.22;
    stroke-width: 3;
}

.sz-daily-mark-picked {
    fill: var(--sz-marigold);
    fill-opacity: 0.9;
    stroke: none;
}

.sz-daily-eyebrow {
    font-size: var(--sz-text-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sz-blue-mist);
}

.sz-daily-title {
    font-family: var(--sz-font-display);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.sz-daily-sub {
    max-width: 24ch;
    font-size: var(--sz-text-body);
    color: var(--sz-blue-soft);
}

.sz-daily-pill {
    margin-top: 10px;
    font-size: var(--sz-text-body);
    text-align: left;
}

/* On Blue the Blue focus ring is lost: the card takes a Card ring. */
.sz-daily:focus-visible {
    outline-color: var(--sz-card);
    outline-offset: 3px;
}

/* A shell while Home loads: the card's shape, on Card, with nothing in it. */
.sz-shell {
    min-height: 13rem;
    border: 1px dashed var(--sz-line);
    border-radius: var(--sz-radius-daily);
    background: var(--sz-card);
    box-shadow: none;
}

.sz-lobby-two-up .sz-shell {
    min-height: 8.5rem;
    border-radius: var(--sz-radius-card);
}

.sz-lobby-two-up {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* A lobby card: Card, radius 18, the idle border and pressed-paper shadow. The whole card is
   the button. */
.sz-lobby-card {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 16px;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-card);
    background: var(--sz-card);
    box-shadow: 0 2px 0 var(--sz-line);
    color: var(--sz-ink);
    text-align: left;
}

.sz-lobby-card:disabled {
    cursor: progress;
}

.sz-lobby-squares {
    display: flex;
    gap: 4px;
}

/* A quick board's one Marigold square; a game's three, in the first three bucket colours. */
.sz-lobby-square {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--sz-marigold);
}

.sz-lobby-square.is-bucket-0 {
    background: var(--sz-bucket-0);
}

.sz-lobby-square.is-bucket-1 {
    background: var(--sz-bucket-1);
}

.sz-lobby-square.is-bucket-2 {
    background: var(--sz-bucket-2);
}

.sz-lobby-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sz-font-display);
    font-size: 1.3125rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.sz-lobby-head .sz-spinner {
    font-size: var(--sz-text-body);
}

.sz-lobby-sub {
    font-size: var(--sz-text-secondary);
    color: var(--sz-ink-2);
}

.sz-lobby-line {
    margin: -4px 0 0;
    padding: 0 4px;
    font-size: var(--sz-text-secondary);
}

.sz-lobby-continue {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sz-lobby-continue .sz-eyebrow {
    margin: 4px 4px 0;
}

/* A card row: the canvas's Challenges row — Card, the idle border and shadow, radius 18, an icon
   ground, a head in display type and one line. Continue and History are lists of them. */
.sz-card-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 4.5rem;
    padding: 12px 14px 12px 16px;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-card);
    background: var(--sz-card);
    box-shadow: 0 2px 0 var(--sz-line);
    color: var(--sz-ink);
    text-decoration: none;
}

.sz-card-row:hover {
    color: var(--sz-ink);
    border-color: var(--sz-ink);
}

.sz-card-row-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--sz-radius-control);
    background: var(--sz-marigold-soft);
    font-size: 1.125rem;
}

.sz-card-row-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-wrap: anywhere;
}

.sz-card-row-head {
    font-family: var(--sz-font-display);
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.sz-card-row-sub {
    font-size: var(--sz-text-secondary);
    color: var(--sz-ink-2);
}

.sz-card-row-end {
    flex: none;
    color: var(--sz-ink-2);
}

/* A page's eyebrow and title, as the leaderboard heads its page. */
.sz-page-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-wrap: anywhere;
}

.sz-page-head h1 {
    margin: 0;
    font-family: var(--sz-font-display);
    font-size: 2.125rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

/* The game summary: one Card table, a row per board in the leaderboard's row style. */
.sz-summary-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-card);
    background: var(--sz-card);
    overflow: hidden;
}

.sz-summary-table thead th {
    padding: 10px 14px 8px;
    font-size: var(--sz-text-grid);
    font-weight: 700;
    text-align: left;
    color: var(--sz-ink-2);
}

.sz-summary-table tbody th,
.sz-summary-table tbody td {
    padding: 10px 14px;
    border-top: 1px solid var(--sz-line);
    vertical-align: middle;
}

.sz-summary-table tbody th {
    font-weight: 400;
    text-align: left;
}

.sz-summary-table .sz-summary-score {
    width: 5rem;
    text-align: right;
}

.sz-summary-table td.sz-summary-score {
    font-family: var(--sz-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sz-summary-link {
    display: flex;
    align-items: center;
    min-height: var(--sz-target);
    color: var(--sz-ink);
    text-decoration: underline;
    text-decoration-color: var(--sz-line-strong);
    text-underline-offset: 0.2em;
}

.sz-summary-name {
    font-size: 1.0625rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sz-summary-sub {
    display: block;
    font-size: var(--sz-text-grid);
    color: var(--sz-ink-2);
    font-variant-numeric: tabular-nums;
}

.sz-summary-hints {
    white-space: nowrap;
}

.sz-summary-table tr.is-waiting th {
    height: 3.5rem;
    color: var(--sz-ink-2);
}

.sz-summary-table tr.is-waiting .sz-summary-name {
    font-weight: 400;
}

/* History: card rows with the score in display type at the end. */
.sz-history-score {
    flex: none;
    font-family: var(--sz-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.sz-history-older {
    align-self: center;
    width: auto;
    padding: 0 24px;
}

.sz-lobby-line.sz-muted,
.sz-history .sz-muted {
    margin: 0;
}

/* A link-looking button inside a status message: Try again. */
.sz-link-button {
    padding: 0 0 0 6px;
    border: 0;
    background: transparent;
    color: var(--sz-blue);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.sz-status-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* How to play. */
.sz-howto h1 {
    font-size: 2.125rem;
}

.sz-steps > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.sz-step-number {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--sz-ink);
    color: var(--sz-card);
    font-size: var(--sz-text-secondary);
    font-weight: 700;
}

.sz-howto-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* The closeness scale, as a row of chips each with its name beneath. */
.sz-scale {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-scale-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.sz-scale-step .sz-chip {
    min-width: 2.25rem;
    font-size: var(--sz-text-secondary);
}

.sz-scale-name {
    font-size: var(--sz-text-grid);
    font-weight: 700;
    line-height: 1.2;
    color: var(--sz-ink-2);
}

/* ------------------------------------------------------------------------------------------
 * 6. The board (docs/design/canvas/Board.dc.html): nothing on the screen but the game.
 * ------------------------------------------------------------------------------------------ */

.sz-board-body {
    gap: 14px;
    padding-top: 4px;
    padding-bottom: 16px;
}

.sz-board-rail {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The target card: Ink, radius 18. */
.sz-target-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: var(--sz-radius-card);
    background: var(--sz-ink);
    color: var(--sz-card);
}

.sz-target-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sz-target-eyebrow {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sz-marigold);
}

.sz-target-name {
    color: var(--sz-card);
    font-size: var(--sz-text-target);
    overflow-wrap: anywhere;
}

/* The aspect chips. */
.sz-aspects {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sz-aspects-lead {
    font-size: var(--sz-text-secondary);
    color: var(--sz-ink-2);
}

.sz-aspect-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-aspect-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-left: 14px;
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-card);
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    line-height: 1.2;
}

/* The info button is 40 high inside the 40 px pill; its hit area reaches 44 all round. */
.sz-aspect-chip-info {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--sz-ink-2);
    font-size: 1.125rem;
}

.sz-aspect-chip-info::before {
    content: "";
    position: absolute;
    inset: -2px;
}

/* The tiles: three across on a phone, in the board's order. */
.sz-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-tiles > li {
    display: flex;
}

.sz-tile {
    box-sizing: border-box;
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-height: 5.5rem;
    padding: 12px 6px 8px;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-control);
    background: var(--sz-card);
    box-shadow: 0 2px 0 var(--sz-line);
    color: var(--sz-ink);
    text-align: center;
    overflow-wrap: anywhere;
}

.sz-tile-name {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.15;
}

.sz-tile.is-picked {
    border: 2.5px solid var(--sz-ink);
    background: var(--sz-marigold-soft);
    box-shadow: 0 3px 0 var(--sz-ink);
}

/* The pick's number: an Ink badge top-right, the number in Marigold. */
.sz-tile-badge {
    position: absolute;
    top: -7px;
    right: -5px;
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--sz-ink);
    color: var(--sz-marigold);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
}

/* The closest hint (M13): a border and a ground, not an outline — the outline is focus. */
.sz-tile.is-closest {
    border: 2.5px solid var(--sz-blue);
    background: var(--sz-blue-soft);
    box-shadow: 0 3px 0 var(--sz-blue);
}

.sz-tile.is-closest.is-picked {
    background: var(--sz-marigold-soft);
}

.sz-tile-label {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sz-blue);
}

/* Struck by the worst-three hint (M13). */
.sz-tile.is-struck {
    background: var(--sz-bucket-4);
    box-shadow: none;
    cursor: not-allowed;
}

.sz-tile.is-struck .sz-tile-name {
    color: var(--sz-ink-2);
    text-decoration: line-through;
}

.sz-tile.is-struck .sz-entity-image {
    opacity: 0.45;
}

.sz-tile-note {
    font-size: 0.6875rem;
    color: var(--sz-ink-2);
}

/* An aspect, and under it the target's figure once a hint has shown it. */
.sz-aspect-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.sz-aspect-target {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--sz-radius-pill);
    background: var(--sz-blue-soft);
    color: var(--sz-ink);
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.sz-aspect-target > span[aria-hidden] {
    color: var(--sz-blue);
}

/* The hints sheet (docs/design/canvas/Hints.dc.html): whole-button rows, 1.5 px Ink, radius 16,
   a Blue-soft icon ground, a title and one line, and a Marigold cost pill. */
.sz-hint-lead {
    margin: 0 4px;
    font-size: 0.9375rem;
    color: var(--sz-ink-2);
}

.sz-hint-lead:focus {
    outline: none;
}

.sz-hint-lead:focus-visible {
    outline: 3px solid var(--sz-blue);
}

.sz-hint-confirm {
    font-family: var(--sz-font-display);
    font-size: var(--sz-text-head);
    font-weight: 800;
    line-height: 1.15;
    color: var(--sz-ink);
}

.sz-hint-choice {
    margin: 0 4px;
    font-size: var(--sz-text-body);
    font-weight: 700;
}

.sz-hint-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-hint-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 4.75rem;
    padding: 12px 14px;
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-row);
    background: var(--sz-card);
    box-shadow: 0 2px 0 var(--sz-ink);
    color: var(--sz-ink);
    text-align: left;
}

.sz-hint-row-aspect {
    min-height: var(--sz-control-height);
}

.sz-hint-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--sz-target);
    height: var(--sz-target);
    border-radius: var(--sz-radius-slot);
    background: var(--sz-blue-soft);
    color: var(--sz-blue);
    font-size: 1.25rem;
}

.sz-hint-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sz-hint-title {
    font-size: var(--sz-text-body);
    font-weight: 700;
}

.sz-hint-line {
    font-size: var(--sz-text-secondary);
    color: var(--sz-ink-2);
}

.sz-hint-cost {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--sz-radius-pill);
    background: var(--sz-marigold);
    font-size: var(--sz-text-secondary);
    font-weight: 800;
}

/* Bought: it costs nothing again. A quieter row, the pill replaced by the word. */
.sz-hint-row.is-used {
    border-color: var(--sz-line);
    box-shadow: 0 2px 0 var(--sz-line);
}

.sz-hint-used {
    flex: none;
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    color: var(--sz-ink-2);
}

.sz-hint-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    min-height: var(--sz-target);
    padding: 0 4px;
}

.sz-hint-actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.sz-hint-actions > * {
    flex: 1 1 0;
    min-width: 0;
}

/* The tray, above Commit. */
.sz-tray {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sz-tray-status {
    font-size: var(--sz-text-secondary);
    font-weight: 700;
    line-height: 1.3;
}

.sz-tray-status:empty {
    display: none;
}

.sz-slots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-slots > li {
    display: flex;
    min-width: 0;
}

.sz-slot {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--sz-target);
    border-radius: var(--sz-radius-slot);
}

.sz-slot.is-filled {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1.5px solid var(--sz-ink);
    background: var(--sz-marigold-soft);
    color: var(--sz-ink);
    text-align: left;
    overflow: hidden;
}

.sz-slot-name {
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.sz-slot.is-empty {
    display: grid;
    place-items: center;
    border: 1.5px dashed var(--sz-line-strong);
    font-size: 0.8125rem;
    color: var(--sz-ink-2);
}

/* The nudge: one short shake when a fourth pick is refused. Two names, so each refusal
   restarts it; none under reduced motion (saymzes-default.css, section 3). */
.sz-slots.is-nudged-a {
    animation: sz-nudge-a 300ms ease-in-out;
}

.sz-slots.is-nudged-b {
    animation: sz-nudge-b 300ms ease-in-out;
}

@keyframes sz-nudge-a {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes sz-nudge-b {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .sz-slots.is-nudged-a,
    .sz-slots.is-nudged-b {
        animation: none;
    }
}

/* The commit sheet's picks. */
.sz-commit-picks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-commit-pick {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-slot);
    background: var(--sz-marigold-soft);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.sz-sheet-lead {
    font-size: var(--sz-text-body);
}

/* A board that is not the player's, or not there. */
.sz-not-here h1 {
    font-size: 2rem;
}

/* ------------------------------------------------------------------------------------------
 * 7. The reveal (docs/design/canvas/Reveal.dc.html): why the score is what it is.
 * ------------------------------------------------------------------------------------------ */

.sz-reveal-body {
    gap: 18px;
    padding-top: 4px;
}

.sz-reveal-top,
.sz-reveal-graphs,
.sz-reveal-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.sz-reveal-grid {
    gap: 10px;
}

/* The feedback panel (the artboard's last section): a dashed panel, never a gate. Before a face
   is chosen, the faces and Skip are all of it; then a comment field and Send; sent, one line. */
.sz-feedback {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1.5px dashed var(--sz-line-strong);
    border-radius: var(--sz-radius-card);
}

.sz-feedback-title {
    margin: 0;
    font-family: var(--sz-font-display);
    font-size: 1.1875rem;
    font-weight: 800;
}

/* The faces: three across, each 72 high; at large text sizes they wrap to fewer across. */
.sz-faces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: 8px;
}

.sz-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 72px;
    padding: 8px 4px;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-control);
    background: var(--sz-card);
    color: var(--sz-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

/* Pressed: the picked tile's state (docs/design § States). */
.sz-face[aria-pressed="true"] {
    border: 2.5px solid var(--sz-ink);
    background: var(--sz-marigold-soft);
    box-shadow: 0 3px 0 var(--sz-ink);
}

.sz-face:disabled {
    cursor: default;
}

.sz-face-icon {
    font-size: 1.875rem;
    line-height: 1;
}

.sz-feedback-comment {
    min-height: 5rem;
    padding: 10px 14px;
    resize: vertical;
}

.sz-feedback-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

/* Skip: underlined and centred, 44 high, as drawn. */
.sz-feedback-skip {
    align-self: center;
    min-height: var(--sz-target);
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--sz-ink);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.sz-feedback-thanks {
    margin: 0;
    font-weight: 700;
}

/* The feedback sheet: the reveal's faces and a comment field, always shown. */
.sz-feedback-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sz-feedback-sheet-lead {
    margin: 0;
}

/* The score pair. */
.sz-score {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sz-score-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.sz-score-card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 8px 14px;
    border-radius: var(--sz-radius-score);
}

.sz-score-mine {
    background: var(--sz-ink);
    color: var(--sz-card);
}

.sz-score-best {
    border: 1.5px dashed var(--sz-line-strong);
    color: var(--sz-ink-2);
}

.sz-score-figure {
    font-family: var(--sz-font-display);
    font-size: var(--sz-text-score);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.sz-score-label {
    font-size: var(--sz-text-secondary);
}

.sz-score-mine .sz-score-label {
    color: var(--sz-line);
}

/* Correction 1: Marigold as text is Marigold-dark. */
.sz-score-star {
    color: var(--sz-marigold-dark);
}

.sz-score-note {
    text-align: center;
    font-size: var(--sz-text-secondary);
    color: var(--sz-ink-2);
}

.sz-score-note strong {
    color: var(--sz-ink);
}

/* The explainer: Marigold-soft, dismissible, the five chips as its legend. */
.sz-explainer {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 48px 14px 16px;
    border-radius: var(--sz-radius-row);
    background: var(--sz-marigold-soft);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.sz-explainer-legend {
    display: flex;
    gap: 4px;
}

.sz-explainer-dismiss {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 1.125rem;
}

/* A bucket graph. Its inner width on a 360 px phone (360, less 2 x 16 gutter, less this
   section's 1 px border and 12 px padding each side) is BucketGraphLayout.ReferenceWidth,
   302. Change one, change the other. Its markers' z-order stays inside it (isolation), so no
   marker paints over the action bar. */
.sz-graph {
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 12px 12px;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-card);
    background: var(--sz-card);
}

.sz-graph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-left: 4px;
}

.sz-graph-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sz-graph-title h3 {
    font-size: 1.1875rem;
    letter-spacing: -0.01em;
}

.sz-graph-target {
    font-size: 0.8125rem;
    color: var(--sz-ink-2);
}

.sz-graph-info {
    color: var(--sz-ink-2);
    font-size: 1.125rem;
}

/* The boundary labels: three staggered rows, each label beside its line on the side its value
   belongs to. Label i is on row i mod 3, so labels sharing a row are three bands apart: with
   two rows, labels facing each other two bands apart (7.03M and 14.1M) met at 360 px. Every
   rule runs down to the bands. Heights are in em, so at 200% the rows grow rather than collide. */
.sz-graph-labels {
    position: relative;
    height: 3.7em;
    margin-bottom: -6px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--sz-ink-2);
    font-variant-numeric: tabular-nums;
}

.sz-graph-label {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    white-space: nowrap;
}

.sz-graph-label.is-row-1 {
    top: 1.2em;
}

.sz-graph-label.is-row-2 {
    top: 2.4em;
}

.sz-graph-label.is-left {
    padding-left: 3px;
    border-left: 1px solid var(--sz-graph-rule);
}

.sz-graph-label.is-right {
    transform: translateX(-100%);
    padding-right: 3px;
    border-right: 1px solid var(--sz-graph-rule);
    text-align: right;
}

/* The plot: nine bands and the markers over them. Only the bands clip, so a ring or a star at
   the edge is never cut off. */
.sz-graph-plot {
    position: relative;
}

.sz-graph-bands {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    border-radius: 8px;
    overflow: hidden;
}

.sz-graph-band {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 3px;
    font-size: 0.625rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sz-graph-band + .sz-graph-band {
    border-left: 1px solid var(--sz-band-rule);
}

.sz-marker {
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    display: block;
    width: 28px;
    height: 20px;
    margin-left: -14px;
    padding: 0;
    border: 1px solid var(--sz-ink-2);
    border-radius: 3px;
    background: var(--sz-card);
}

.sz-marker .sz-entity-image {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    box-shadow: none;
}

.sz-marker.is-target {
    z-index: 3;
    width: 34px;
    height: 24px;
    margin-left: -17px;
    border: 2px solid var(--sz-ink);
}

/* A pick: a ring that takes no space. */
.sz-marker.is-pick {
    z-index: 2;
    box-shadow: 0 0 0 2px var(--sz-card), 0 0 0 4px var(--sz-marigold), 0 0 0 5px var(--sz-ink);
}

.sz-marker.is-on {
    z-index: 4;
    outline: 3px solid var(--sz-blue);
    outline-offset: 3px;
}

/* A member of the best three: a Marigold star at the corner, outlined in Ink. */
.sz-marker-star {
    position: absolute;
    top: -10px;
    right: -9px;
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--sz-marigold);
    -webkit-text-stroke: 1px var(--sz-ink);
    paint-order: stroke fill;
}

.sz-graph-ends {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    font-size: var(--sz-text-graph);
    color: var(--sz-ink-2);
}

.sz-graph-caption {
    min-height: 1.4em;
    font-size: var(--sz-text-secondary);
    color: var(--sz-ink-2);
}

.sz-graph-caption.is-on {
    font-weight: 700;
    color: var(--sz-ink);
}

/* The grid: one Card table (correction 2). */
.sz-grid-card {
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-card);
    background: var(--sz-card);
    overflow-x: auto;
}

/* The table's least width is in em: at 100% it fits a 360 px phone; at 200% text it grows
   past the card, which scrolls sideways, rather than clip the totals or split every name. */
.sz-grid {
    width: 100%;
    min-width: 26em;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: var(--sz-text-grid);
    font-variant-numeric: tabular-nums;
}

/* The artboard's 1.45fr, 1fr, 1fr, 1fr, 0.6fr. */
.sz-grid-col-name {
    width: 29%;
}

.sz-grid-col-aspect {
    width: 20%;
}

.sz-grid-col-total {
    width: 11%;
}

.sz-grid thead th {
    padding: 10px 2px 6px;
    vertical-align: bottom;
    font-size: var(--sz-text-graph);
    font-weight: 700;
    line-height: 1.15;
    color: var(--sz-ink-2);
    text-align: center;
    overflow-wrap: anywhere;
}

.sz-grid tbody th {
    padding: 4px 4px 4px 10px;
    font-weight: 700;
    line-height: 1.15;
    text-align: left;
    overflow-wrap: anywhere;
}

.sz-grid tbody tr {
    border-top: 1px solid var(--sz-line);
}

.sz-grid td {
    padding: 2px;
    text-align: center;
}

.sz-grid tr.is-mine {
    background: var(--sz-marigold-soft);
}

.sz-grid-target {
    background: var(--sz-ink);
    color: var(--sz-card);
}

.sz-grid-marks {
    display: block;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--sz-marigold-dark);
}

.sz-grid-target .sz-grid-marks {
    color: var(--sz-marigold);
}

.sz-grid-cell {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: var(--sz-target);
    padding: 2px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: var(--sz-text-grid);
}

.sz-grid-target .sz-grid-cell {
    font-weight: 700;
}

.sz-grid-figure {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

.sz-grid-total {
    font-family: var(--sz-font-display);
    font-size: 1rem;
    font-weight: 800;
}

.sz-grid-key {
    font-size: 0.8125rem;
    color: var(--sz-ink-2);
}

/* On Ink the Blue focus ring is low-contrast: anything focusable on Ink takes a Card ring. */
.sz-grid-target :focus-visible,
.sz-target-card :focus-visible {
    outline-color: var(--sz-card);
}

/* The source sheet. */
.sz-source-figure {
    font-family: var(--sz-font-display);
    font-size: var(--sz-text-sheet);
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.sz-source-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sz-source-quote {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--sz-radius-slot);
    background: var(--sz-marigold-soft);
    overflow-wrap: anywhere;
}

.sz-source-link {
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------------------------------
 * 7b. Challenges (M14): the top bar's badge and Home's card (drawn: Main), the leaderboard
 *     (drawn: Leaderboard), and — derived — the list, the invitation and the send sheet.
 * ------------------------------------------------------------------------------------------ */

/* An inner page's bar holds the chevron and four 44 px icons: on a narrow phone that leaves no
   room for the name, so the wordmark shows its mark alone. The name stays, for a screen reader. */
@media (max-width: 399px) {
    .sz-topbar-has-back .sz-wordmark-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .sz-topbar-has-back .sz-topbar-wordmark {
        padding: 0 4px;
    }
}

/* The badge sits top-right of the 44 px icon button; the button keeps its size. */
.sz-topbar-challenges {
    position: relative;
}

.sz-topbar-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    pointer-events: none;
}

/* The Challenges card's badge: 28 high. */
.sz-badge-large {
    flex: none;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 8px;
    font-size: var(--sz-text-secondary);
}

/* A badge that holds words: the list's "waiting for you". */
.sz-badge-label {
    flex: none;
    height: auto;
    min-height: 1.5rem;
    padding: 2px 10px;
    font-size: var(--sz-text-eyebrow);
    white-space: nowrap;
}

.sz-challenges-card-head {
    font-size: 1.3125rem;
}

.sz-challenges,
.sz-challenges-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sz-challenges {
    gap: 18px;
}

/* At large text sizes the row's end drops below its text rather than squeezing it to a letter a line. */
.sz-challenge-row {
    flex-wrap: wrap;
}

.sz-challenge-row .sz-card-row-text {
    flex-basis: 8rem;
}

.sz-challenge-row-state {
    flex: none;
    font-size: var(--sz-text-eyebrow);
    color: var(--sz-ink-2);
}

.sz-challenge-row-rank {
    flex: none;
    font-family: var(--sz-font-display);
    font-size: var(--sz-text-head);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The invitation: one Card, what to expect, and how many have finished. */
.sz-invitation {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-card);
    background: var(--sz-card);
}

.sz-invitation-lead {
    font-size: var(--sz-text-button);
    font-weight: 700;
}

/* The leaderboard: the summary's Card table, with a rank column and the score over its parts. */
.sz-leaderboard .sz-lb-rank-head,
.sz-leaderboard .sz-lb-rank {
    width: 3.25rem;
    padding-right: 0;
}

.sz-leaderboard tbody td,
.sz-leaderboard tbody th {
    height: 4rem;
}

.sz-lb-rank-circle {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1.5px solid var(--sz-line);
    border-radius: 50%;
    font-family: var(--sz-font-display);
    font-size: var(--sz-text-button);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sz-lb-rank-circle.is-first {
    background: var(--sz-marigold);
    border: 2px solid var(--sz-ink);
}

.sz-lb-name {
    overflow-wrap: anywhere;
}

.sz-lb-player {
    font-size: var(--sz-text-button);
    font-weight: 700;
}

.sz-lb-you {
    margin-left: 6px;
    font-size: var(--sz-text-eyebrow);
    color: var(--sz-ink-2);
}

.sz-lb-hints {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 6px;
    font-size: var(--sz-text-grid);
    color: var(--sz-ink-2);
    white-space: nowrap;
}

.sz-leaderboard td.sz-lb-score {
    width: 6rem;
}

.sz-lb-total {
    display: block;
    font-family: var(--sz-font-display);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.sz-lb-parts {
    display: block;
    margin-top: 2px;
    font-family: var(--sz-font-body);
    font-size: var(--sz-text-grid);
    font-weight: 400;
    color: var(--sz-ink-2);
    white-space: nowrap;
}

.sz-lb-unfinished {
    font-family: var(--sz-font-body);
    font-size: var(--sz-text-eyebrow);
    font-weight: 400;
    color: var(--sz-ink-2);
}

.sz-leaderboard tr.is-me th,
.sz-leaderboard tr.is-me td {
    background: var(--sz-marigold-soft);
}

.sz-leaderboard tr.is-unfinished th,
.sz-leaderboard tr.is-unfinished td {
    color: var(--sz-ink-2);
}

.sz-leaderboard tr.is-unfinished .sz-lb-player {
    font-weight: 400;
}

.sz-lb-foot {
    font-size: var(--sz-text-secondary);
    font-variant-numeric: tabular-nums;
}

.sz-lb-foot b {
    color: var(--sz-ink);
}

/* The send sheet: the field, the chips, the cap, and Send. */
.sz-send {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sz-send-field {
    min-height: 5rem;
    resize: vertical;
    font: inherit;
}

.sz-send-before {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* An address chip: not the bucket chip. A toggle, wrapping rather than truncating — the
   address is the whole point. Chosen, it takes the closest tile's Blue-soft ground. */
.sz-recipient-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sz-recipient-chip {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: var(--sz-target);
    padding: 8px 14px;
    border: 1.5px solid var(--sz-ink);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-card);
    color: var(--sz-ink);
    font-size: 0.9375rem;
    text-align: left;
}

.sz-recipient-chip-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sz-recipient-chip.is-selected {
    border-color: var(--sz-blue);
    background: var(--sz-blue-soft);
}

.sz-recipient-chip.is-forgetting {
    border-style: dashed;
}

.sz-send-cap {
    font-size: var(--sz-text-secondary);
    font-weight: 700;
}

.sz-send-line {
    font-size: var(--sz-text-secondary);
}

/* ------------------------------------------------------------------------------------------
 * 8. Wide screens: the one query (spec 05, One layout, and one enhancement). The same markup
 *    in the same order; only the board and the reveal use the width. Home, How to play, the
 *    sheets and every action bar keep the phone's 480 px column, centred.
 * ------------------------------------------------------------------------------------------ */

@media (min-width: 900px) {
    .sz-screen.sz-board,
    .sz-screen.sz-reveal {
        max-width: 1080px;
    }

    /* The bar spans the page; what is in it stays the phone's width, centred. */
    .sz-board .sz-actionbar,
    .sz-reveal .sz-actionbar {
        padding-left: max(var(--sz-gutter), calc((100% - var(--sz-column)) / 2 + var(--sz-gutter)));
        padding-right: max(var(--sz-gutter), calc((100% - var(--sz-column)) / 2 + var(--sz-gutter)));
        padding-bottom: 20px;
    }

    /* The board: a rail (the target, then the aspects one per line) beside four across. */
    .sz-board-body {
        display: grid;
        grid-template-columns: 320px minmax(0, 1fr);
        align-items: start;
        gap: 24px;
        padding-top: 12px;
    }

    .sz-board-rail .sz-aspect-chips {
        flex-direction: column;
        align-items: flex-start;
    }

    .sz-board .sz-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    /* The reveal: the score and the explainer centred above; graphs left, the grid right. Both
       columns scroll with the page. The graphs are wider than BucketGraphLayout's reference
       width here, so the rows it chose are roomier than needed, never wrong. */
    .sz-reveal-body {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 18px 24px;
        padding-top: 12px;
    }

    /* The feedback panel stays under the grid's column: the graphs span its row too, so it
       follows the grid rather than whichever column is taller. */
    .sz-reveal-body:has(> .sz-feedback) {
        grid-template-rows: auto auto 1fr;
    }

    .sz-reveal-body:has(> .sz-feedback) .sz-reveal-graphs {
        grid-row: span 2;
    }

    .sz-feedback {
        grid-column: 2;
    }

    .sz-reveal-top {
        grid-column: 1 / -1;
        width: 100%;
        max-width: calc(var(--sz-column) - (2 * var(--sz-gutter)));
        justify-self: center;
    }
}