/* The setup (journal 010; specs/local_play.md): the cards, the summary, the settings' sections, the steppers, the small board and the bonuses' toggles, as design/setup.html and design/setup_details.html draw them. Structure only: every colour, font and radius is a token. */

/* Start and Done: the footer's one wide button; a refusal under it */
.page__start { width: 100%; height: 52px; font-size: var(--font-size-m); }
.setup__refused { margin: 10px 0 0; text-align: center; color: var(--color-danger); font-size: var(--font-size-s); font-weight: 600; }

/* A section of settings, its title and its reset link */
.setup { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius-control); background: var(--color-surface); }
.setup__head { display: flex; justify-content: space-between; align-items: center; }
.setup__title { margin: 0; font-size: var(--font-size-s); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.setup__reset { color: var(--color-blue); font-size: var(--font-size-s); font-weight: 600; }

/* The cards a setup chooses between, one on */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-control); background: var(--color-surface-raised); text-align: left; }
.choice--on { box-shadow: inset 0 0 0 2px var(--color-blue); }
.choice__title { font-weight: 700; }
.choice__hint { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* The board's field: the label and the steppers stacked, the board beside them */
.field--board { flex-direction: row; align-items: center; gap: 16px; }
.field__stack { flex: 1; display: flex; flex-direction: column; gap: 6px; }

/* A stepper: its name, − and +, the value between */
.stepper { display: flex; align-items: center; gap: 8px; height: 36px; }
.stepper__name { flex: 1; font-size: var(--font-size-s); }
.stepper__step { width: 34px; height: 34px; border-radius: var(--radius-control); background: var(--color-bg); font-size: var(--font-size-l); }
.stepper__step:disabled { color: var(--color-disabled-text); cursor: default; }
.stepper__value { min-width: 20px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* The board, small: a cell per cell, the home rows in their colours */
.board-preview { display: grid; grid-template-columns: repeat(5, 12px); gap: 2px; padding: 4px; flex: none; align-self: center; border-radius: var(--radius-tile); background: var(--color-board-bed); }
.board-preview[data-columns="6"] { grid-template-columns: repeat(6, 12px); }
.board-preview[data-columns="7"] { grid-template-columns: repeat(7, 12px); }
.board-preview[data-columns="8"] { grid-template-columns: repeat(8, 12px); }
.board-preview[data-columns="9"] { grid-template-columns: repeat(9, 12px); }
.board-preview__cell { width: 12px; height: 12px; border-radius: var(--radius-tile); background: var(--color-tile-grey); }
.board-preview__cell--green { background: var(--color-tile-green); }
.board-preview__cell--blue { background: var(--color-tile-blue); }

/* The bonuses' toggles, each on or off */
.toggles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.toggle { height: 38px; border-radius: var(--radius-control); background: var(--color-bg); color: var(--color-text-muted); font-size: var(--font-size-s); font-weight: 600; }
.toggle--on { background: var(--color-surface-raised); color: var(--color-text); box-shadow: inset 0 0 0 2px var(--color-blue); }
.toggle__icon { margin-right: 4px; }

/* The summary: the small board and the setup's facts; a tap opens the settings */
.proposal { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 16px; border-radius: var(--radius-control); background: var(--color-surface); text-align: left; }
.proposal__head { display: flex; justify-content: space-between; align-items: center; }
.proposal__title { color: var(--color-text-muted); font-size: var(--font-size-s); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.proposal__change { color: var(--color-blue); font-size: var(--font-size-s); font-weight: 600; }
.proposal__main { display: flex; gap: 18px; align-items: center; }
.proposal__facts { flex: 1; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: baseline; }
.proposal__key { color: var(--color-text-muted); font-size: var(--font-size-s); }
.proposal__fact { font-size: var(--font-size-s); font-weight: 600; }