/* The character builder wizard.
 *
 * Deliberately thin: the dialog, fields, buttons and note banner all come from
 * modals.css / base.css / billing.css. What's here is the two things the app
 * didn't have before — a chip-style single-choice group, and a step rail.
 */

/* --- Step rail ---------------------------------------------------------- */

/* Each step is a button: the rail is how you get around the form, not just a
 * progress bar. The styling lives on the button so the whole chip is the target. */
.wiz-rail { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.wiz-rail li { flex: 1 1 auto; min-width: 0; display: flex; }
.wiz-rail button {
  flex: 1; min-width: 0; font-size: 11px; font-weight: 500; text-align: center;
  color: var(--muted); padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--panel2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wiz-rail button:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.wiz-rail li.done button { color: var(--text); border-color: color-mix(in srgb, var(--accent2) 45%, var(--border)); }
.wiz-rail li.current button {
  color: var(--text); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel2));
}

/* --- Choice chips ------------------------------------------------------- */
/* A real radio group: the input stays in the DOM (hidden) so keyboard and
 * screen-reader behaviour is native, and the label is what gets styled. */

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px; cursor: pointer; font-size: 13px;
  color: var(--text); background: var(--panel2); border: 1px solid var(--border);
}
.chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.chip:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--panel2));
}
/* Focus has to be visible on the label, since the input itself is hidden. */
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip .chip-hint { color: var(--muted); font-size: 11px; }

/* --- Questions ---------------------------------------------------------- */

.wiz-body { display: flex; flex-direction: column; gap: 16px; }
.wiz-q { display: flex; flex-direction: column; gap: 6px; }
.wiz-q > .q-label { font-size: 13px; color: var(--text); font-weight: 600; }
.wiz-q > .q-label .req { color: var(--accent); }
.wiz-q > .q-hint { font-size: 12px; color: var(--muted); }
.wiz-q .q-free { margin-top: 2px; gap: 4px; }

/* Answer boxes. The label and the character count share a line above the box,
 * so a long answer doesn't have to be measured by eye against an invisible cap. */
.q-box-head { display: flex; align-items: baseline; gap: 8px; }
.q-box-head label { flex: 1; min-width: 0; }
.q-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.q-count.near { color: var(--accent); }

.wiz-q input, .wiz-q textarea { width: 100%; }
.wiz-q textarea {
  resize: vertical; line-height: 1.5; overflow-y: auto;
  /* Set by `grow()` as you type; this is only the floor it starts from. */
  min-height: 2.8em;
}

/* --- Mode picker -------------------------------------------------------- */

.mode-card { text-align: left; }
.mode-card.locked { opacity: .65; }
.mode-card .lock { font-size: 11px; color: var(--muted); display: block; margin-top: 6px; }

/* --- Refinement --------------------------------------------------------- */

.wiz-refine {
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border); padding-top: 14px;
}
.wiz-diff { display: flex; flex-direction: column; gap: 4px; }
/* The player's own words, struck through but still readable — they're about to
 * choose between the two, so both have to be legible side by side. */
.wiz-diff .was {
  margin: 0; font-size: 12px; color: var(--muted); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent);
}
.wiz-diff .now {
  margin: 0; font-size: 13px; color: var(--text);
  border-left: 2px solid var(--accent); padding-left: 8px;
}

/* The offer, its explainer, and the saved passes. `.wiz-refine` already gives
 * the block its rule and spacing; these are the bits inside it. */

.wiz-offer .hint { font-size: 12px; }
.wiz-explain { font-size: 12px; color: var(--muted); }
.wiz-explain summary { cursor: pointer; color: var(--text); font-size: 12px; }
.wiz-explain summary:hover { color: var(--accent); }
.wiz-explain ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.wiz-explain b { color: var(--text); font-weight: 600; }

.wiz-pass {
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--panel2); padding: 8px 11px;
}
.wiz-pass + .wiz-pass { margin-top: 6px; }
.wiz-pass summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.wiz-pass[open] summary { color: var(--text); margin-bottom: 8px; }
.wiz-pass .wiz-diff + .wiz-diff { margin-top: 8px; }
.wiz-pass ul { margin: 4px 0 0; padding-left: 18px; }

/* --- Review ------------------------------------------------------------- */

.wiz-review { display: flex; flex-direction: column; gap: 12px; }
.wiz-answer { display: flex; flex-direction: column; gap: 3px; }
.wiz-answer p {
  margin: 0; font-size: 13px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.wiz-prompt {
  max-height: 200px; overflow-y: auto; white-space: pre-wrap; font-size: 12px;
  color: var(--muted); background: var(--panel2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px;
}

@media (max-width: 560px) {
  .wiz-rail li { flex: 1 1 100%; }
}