/* ===========================================================================
 * FM06 Radio · FM07 Checkbox · FM08 RadioCard · FM09 SelectableTile ·
 * FM10 CheckList.
 *
 * All four selection controls say the same thing the same way: the gold border
 * goes to 100% and the surface lifts one wash level. Nothing scales, nothing
 * glows, nothing gets a shadow. Learn it once, it reads everywhere.
 *
 * The real <input> stays in the DOM and is visually hidden rather than
 * replaced: it keeps the label association, the keyboard behaviour, the
 * arrow-key roving inside a radio group, and form submission — all of which a
 * div with role="radio" would have to reimplement badly.
 * ======================================================================== */

.ui-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--text-primary);
  cursor: pointer;
}

.ui-choice__input {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ui-choice__box {
  width: var(--control-indicator);
  height: var(--control-indicator);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-width-emphasis) solid var(--border-control);
  color: var(--text-on-gold);
  transition: border-color var(--duration-fast) var(--easing-standard),
              background var(--duration-fast) var(--easing-standard);
}

.ui-choice--radio .ui-choice__box { border-radius: var(--radius-pill); }
.ui-choice--checkbox .ui-choice__box { border-radius: var(--radius-control); }

.ui-choice__dot {
  width: var(--control-indicator-dot);
  height: var(--control-indicator-dot);
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  transform: scale(0);
  transition: transform var(--duration-fast) var(--easing-standard);
}

.ui-choice__tick { opacity: 0; }

.ui-choice__label { flex: 1; }

.ui-choice:hover .ui-choice__box { border-color: var(--gold-rest); }

/* Checked. A radio keeps its ring and fills the dot; a checkbox fills the
   whole box with the gold gradient and puts a near-black tick on it — the
   same figure/ground flip the primary button makes. */
.ui-choice__input:checked ~ .ui-choice__box { border-color: var(--gold-100); }
.ui-choice__input:checked ~ .ui-choice__box .ui-choice__dot { transform: scale(1); }

.ui-choice--checkbox .ui-choice__input:checked ~ .ui-choice__box {
  background: var(--gradient-gold);
  border-color: transparent;
}
.ui-choice__input:checked ~ .ui-choice__box .ui-choice__tick { opacity: 1; }

.ui-choice__input:focus-visible ~ .ui-choice__box {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

.ui-choice__input:disabled ~ .ui-choice__box { opacity: var(--opacity-disabled); }
.ui-choice:has(.ui-choice__input:disabled) { cursor: not-allowed; color: var(--text-disabled); }

/* --- FM08 Radio option card ---------------------------------------------
 * The wizard's award-type list. A whole card is the hit target, not the 24px
 * circle inside it — 574x80 in the mock, and the radio is an indicator rather
 * than the control you aim at.
 * --------------------------------------------------------------------- */
.ui-choice-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-fast) var(--easing-standard),
              background var(--duration-fast) var(--easing-standard);
}

.ui-choice-card:hover { background: var(--surface-2); }

.ui-choice-card__body { display: flex; flex-direction: column; gap: var(--space-1); }

.ui-choice-card__title {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* "Recommended" on a decision option. Gold, because gold is the only
   chromatic colour the chrome has — the same wash and border as the warning
   pill, without the pill's icon. */
.ui-choice-card__tag {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border: var(--border-width) solid var(--gold-rest);
  border-radius: var(--radius-pill);
  background: var(--gold-wash-selected);
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
  vertical-align: middle;
}

.ui-choice-card__description {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-tertiary);
}

/* A short value at the right edge — a tier's credits. Pushed right by the
   body taking the free width, so it lines up down a list of cards. */
.ui-choice-card__body { flex: 1 1 auto; min-width: 0; }

.ui-choice-card__aside {
  flex: 0 0 auto;
  align-self: center;
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  white-space: nowrap;
}

.ui-choice-card:has(.ui-choice__input:checked) .ui-choice-card__aside { color: var(--text-gold); }

.ui-choice-card:has(.ui-choice__input:checked) {
  border-color: var(--gold-100);
  background: var(--surface-2);
}

.ui-choice-card:has(.ui-choice__input:focus-visible),
.ui-choice-card.is-focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

/* The ONLY state that changes opacity (D28). */
.ui-choice-card:has(.ui-choice__input:disabled) {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.ui-choice-card:has(.ui-choice__input:disabled):hover { background: var(--surface-1); }

/* --- FM09 Selectable tile ----------------------------------------------
 * The design picker. Icon over label, centred, in a row of equal tiles. Its
 * selected wash is a GOLD wash rather than a white one — the tile is small
 * enough that a white lift alone does not register.
 * --------------------------------------------------------------------- */
.ui-tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--easing-standard),
              background var(--duration-fast) var(--easing-standard);
}

.ui-tile .icon { color: var(--text-gold); }

.ui-tile__label {
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

.ui-tile:hover { background: var(--surface-2); }

.ui-tile:has(.ui-choice__input:checked) {
  border-color: var(--gold-100);
  background: var(--gold-wash-selected);
}

.ui-tile:has(.ui-choice__input:checked) .ui-tile__label { font-weight: var(--font-weight-semibold); }
.ui-tile:has(.ui-choice__input:checked) .icon { color: var(--gold-100); }

.ui-tile:has(.ui-choice__input:focus-visible) { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); outline-color: var(--focus-colour-neutral); }

/* --- FM10 Check list — the recipient multi-select. A bordered box at input
       radius with its own scroll, about seven rows deep. ----------------- */
.ui-checklist {
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  max-height: var(--checklist-height);
  overflow-y: auto;
  padding: var(--space-1);
}

.ui-checklist__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
  color: var(--text-primary);
}

.ui-checklist__row:hover { background: var(--surface-hover-item); }
.ui-checklist__row:has(.ui-choice__input:focus-visible) { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); outline-color: var(--focus-colour-neutral); }

/* The thin light rounded thumb is the one scrollbar the mocks actually draw
   (component-list §1) — inside this box and nowhere else. */
.ui-checklist { scrollbar-width: thin; scrollbar-color: var(--border-raised) transparent; }
.ui-checklist::-webkit-scrollbar { width: var(--space-2); }
.ui-checklist::-webkit-scrollbar-thumb {
  background: var(--border-raised);
  border-radius: var(--radius-pill);
}

/* --- FM13 Chip multi-select -------------------------------------------------
 * A club's categories. Real checkboxes, visually hidden; the chip beside each
 * one carries the state through `:checked +`, so it needs neither JavaScript
 * nor `:has()`. The selected chip is the F07 chip's `--current` look — gold
 * wash and a gold border — because it is the same idea: this one is on.
 * ------------------------------------------------------------------------- */
/* A <fieldset>: its browser border, padding and margin are removed so it lays
   out like any other field's control, and its <legend> is the field label. */
.ui-chipselect {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.ui-chipselect__legend { padding: 0; margin-bottom: var(--space-2); }

.ui-chipselect__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ui-chipselect__option {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.ui-chipselect__input {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ui-chipselect__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-secondary);
  transition: background var(--duration-fast) var(--easing-standard),
              border-color var(--duration-fast) var(--easing-standard);
}

/* The player shell's controls are a touch target taller (D31): carried in CSS
   by the shell class, never by a Ruby branch. */
.shell--player .ui-chipselect__chip { min-height: var(--control-height-mobile); }

/* The tick is there only when the chip is on, so "on" is not carried by
   colour alone. */
.ui-chipselect__tick { display: none; color: var(--gold-100); }
.ui-chipselect__input:checked + .ui-chipselect__chip .ui-chipselect__tick { display: inline-flex; }

/* D28: hover and active change the FILL, never the opacity. */
.ui-chipselect__option:hover .ui-chipselect__chip,
.ui-chipselect__chip.is-hover {
  background: var(--gold-wash-hover);
  color: var(--text-primary);
}

.ui-chipselect__option:active .ui-chipselect__chip,
.ui-chipselect__chip.is-active {
  background: var(--gold-wash-active);
  color: var(--text-primary);
}

.ui-chipselect__input:checked + .ui-chipselect__chip {
  background: var(--gold-wash-selected);
  border-color: var(--gold-rest);
  color: var(--text-primary);
}

/* Selected must not dim under the cursor — the same ordering F07 keeps. */
.ui-chipselect__option:hover .ui-chipselect__input:checked + .ui-chipselect__chip {
  background: var(--gold-wash-active);
}

/* D30: gold on a neutral surface, drawn with outline. */
.ui-chipselect__input:focus-visible + .ui-chipselect__chip,
.ui-chipselect__chip.is-focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

/* Brick, never a conventional red (D27). On the unselected chips only: the
   ones that are on are not what is wrong. */
.ui-chipselect--invalid .ui-chipselect__input:not(:checked) + .ui-chipselect__chip {
  border-color: var(--danger-border);
  background: var(--danger-field-wash);
}

/* The ONLY state that changes opacity (D28). */
.ui-chipselect__input:disabled + .ui-chipselect__chip {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}