/*
 * Spine step 5 — the create wizard and the trophy it issues.
 *
 * Layout only. Every colour, size, radius and duration is a token; this file
 * introduces no new visual language and authors no component.
 *
 * The geometry is the frames': a fixed left rail carrying the back link and the
 * vertical five-step tracker, and a panel beside it holding the current step.
 * --panel-width already exists in tokens.css for exactly this panel.
 */

.wizard {
  display: grid;
  grid-template-columns: var(--wizard-rail-width) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.wizard__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: sticky;
  top: var(--sticky-offset);
}

/* Start again: a text button at its own width, on the rail's left edge
   (D170). The text variant carries its own inline padding, pulled back here so
   its label lines up with the stepper beneath it. */
.wizard__restart {
  display: flex;
  margin-inline-start: calc(var(--space-3) * -1);
}

.wizard__panel { min-width: 0; }

.wizard__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.wizard__choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* The four-card design grid (§7). auto-fit rather than a fixed four, so the
   grid survives a founder adding a fifth design without a layout change. */
.wizard__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--wizard-tile-min), 1fr));
  gap: var(--space-4);
}

.wizard__fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The team filter is its own GET form above the step's form — an HTML form
   cannot nest, and the filter is not an answer. */
.wizard__filter {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.wizard__filter .wizard__fields { flex: 1 1 auto; }

.wizard__lede {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  margin-bottom: var(--space-4);
}

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

.wizard__meta {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  margin-left: var(--space-2);
}

/* Step 5: the plaque fields beside their preview. The preview column is
   narrower — it is a card standing in for a trophy, not a second form. */
.wizard__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--wizard-preview-width);
  gap: var(--space-6);
  align-items: start;
}

.wizard__preview-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--wizard-preview-art-height);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  margin-bottom: var(--space-4);
}

/* A single recipient's name and team, side by side under the award. */
.wizard__plaque-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* The plate, line for line in the order the prompt engraves it, centred the
   way the prompt asks the model to set it. */
.wizard__plaque-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}

.wizard__plaque-line {
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  overflow-wrap: anywhere;
}

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

/* A batch's rows run the full width of the panel, below the split. */
.wizard__plaque-rows { margin-top: var(--space-6); }

.wizard__preview-note {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  margin-top: var(--space-3);
}

/* --- The prototype's five steps (D163) ---------------------------------- */

/* A panel hidden by choice_reveal or a roster row hidden by the search. The
   components' own `display` would otherwise beat the attribute. */
.wizard [hidden] { display: none; }

/* An achievement's own fields, a new recipient's team and email, the plate's
   name and team: two to a row. */
.wizard__detail-grid,
.wizard__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

/* Step 2: the search sits on the roster it filters. */
.wizard__roster {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.wizard__roster-name { color: var(--text-primary); }

/* Step 3: the balance, and what the chosen level leaves. */
.wizard__forecast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.wizard__forecast-balance {
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.wizard__forecast-balance strong {
  color: var(--text-gold);
  font-size: var(--type-h3-size);
  font-weight: var(--font-weight-semibold);
}

.wizard__forecast-line {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

/* NOT ENOUGH CREDITS, said early (D184): above the wizard when no level is
   affordable, and on the tier step when the chosen level no longer is. Gold,
   because warning has no colour of its own (D27); the arrival banner's wash. */
.wizard__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--gold-rest);
  border-radius: var(--radius-md);
  background: var(--gold-wash-selected);
  color: var(--text-primary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.wizard__fields > .wizard__notice { margin-bottom: 0; }

.wizard__notice .icon { flex: none; }

/* A level the club cannot pay for: the card carries the disabled opacity
   (D28); the line beneath it does not, so the way to Billing stays legible. */
.wizard__tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.wizard__tier-shortfall {
  padding-inline: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}

/* Step 4: nine families, two to a row — a single column ran three screens. */
.wizard__families {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.wizard__families .ui-choice-card { height: 100%; }

/* Step 5: four tiles, two by two, each a way back to its step. */
.wizard__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.wizard__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  text-decoration: none;
}

.wizard__tile-label {
  color: var(--text-gold);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  letter-spacing: 0.08em;   /* the eyebrow tracking already used across the app */
  text-transform: uppercase;
}

.wizard__tile-value {
  color: var(--text-primary);
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

.wizard__tile-meta {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  overflow-wrap: anywhere;
}

.wizard__tile-meta--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.wizard__section-title {
  color: var(--text-primary);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-4);
}

/* A perpetual trophy's name heads its plate (D154). */
.wizard__plaque-line--named {
  color: var(--text-gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wizard__note {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--divider);
}

/* Back on the left, the forward action on the right — the frames' order, and
   the one the modal footer already uses. */
.wizard__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.wizard__aside {
  color: var(--text-tertiary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  margin-top: var(--space-4);
  text-align: center;
}

/* --- The issued trophy ------------------------------------------------- */

.trophy-created {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.trophy-created__status {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.trophy-created__note {
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.trophy-created__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* No designed reflow exists below the drawn 960 (§10). The rail stacking above
   the panel is the smallest honest thing: the tracker still reads as progress,
   and nothing invents a layout nobody drew. */
@media (max-width: 767px) {
  .wizard { grid-template-columns: minmax(0, 1fr); }
  .wizard__rail { position: static; }
  .wizard__split { grid-template-columns: minmax(0, 1fr); }
  .wizard__plaque-pair { grid-template-columns: minmax(0, 1fr); }
  .wizard__detail-grid,
  .wizard__pair,
  .wizard__families,
  .wizard__summary { grid-template-columns: minmax(0, 1fr); }
  .wizard__filter { flex-direction: column; align-items: stretch; }
}

/* One frame per trophy in a batch. A single confirm can issue several, and each
   renders separately — showing only the first would hide trophies the club paid
   for.

   The batch minimum is smaller than a single trophy's cap: at 420px only one
   fits across the 920px surface and a three-recipient batch became a column
   three screens tall. The GRID TRACK is what narrows a batch — the single
   trophy's 420px cap stays on the element and simply never binds at a 282px
   track. (This block once dropped that cap outright; see below for what that
   cost.) */
.trophy-created__batch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--artwork-batch-min), 1fr));
  gap: var(--space-4);
}

.trophy-created__item { margin: 0; }

/* THE SINGLE-TROPHY CAP STAYS. It was dropped here on the theory that it "would
   fight the grid track", and a max-width does not fight a track — it caps the
   element inside one. Dropping it made every admin render of the artwork
   uncapped, because `.trophy-created__batch` is the only place the admin shell
   renders it at all, so `.shell--admin .trophy-artwork`'s cap was dead code
   that never applied anywhere.

   What that cost: a single troph-e drew an 878px square, which is precisely the
   failure the cap's own comment in trophy.css describes — "it made an 878px
   black square that filled the screen and pushed everything the admin needs
   below the fold". Nobody saw it because the frame was empty for the whole
   render (D105); the square was black on black.

   With the cap restored the grid still decides the TRACK — three recipients get
   three columns of about 295px and the cap never binds — while a single trophy
   is capped and centred by the `margin-inline: auto` beside it. */

.trophy-created__caption {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
}