/* Monster Wizard — only what the shared wizard scaffolding doesn't already give us.
   The frame (.char-wizard / .wiz-steps / .wiz-layout / .wiz-body / .wiz-foot / .wiz-preview) and
   the no-scroll behaviour come from character.css; this file is the field grid, the provenance
   badge and the two compact row editors (abilities, attacks). Sizes in rem per the responsive law. */

.mw-wizard .wiz-scroll { padding: 1.125rem 1.375rem; }

/* One column of labelled fields; wide enough inputs stay readable without a second column
   fighting the preview aside for width. */
.mw-grid { display: flex; flex-direction: column; gap: 0.875rem; }

.mw-field { display: flex; flex-direction: column; gap: 0.3125rem; }
.mw-lbl {
  display: flex; align-items: center; gap: 0.375rem;
  font-size: var(--fs-base); font-weight: 600; color: var(--muted);
}
.mw-field > input[type="text"],
.mw-field textarea {
  width: 100%; padding: 0.4375rem 0.625rem;
  background: var(--panel-2, var(--panel)); color: var(--text);
  border: 0.0625rem solid var(--border); border-radius: var(--r-md);
  font: inherit;
}
.mw-field textarea { resize: vertical; min-height: 2.75rem; }

/* A corrected field is the screen's whole point — mark it, don't shout. */
.mw-corrected > .mw-lbl { color: var(--accent); }
.mw-badge {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em;
  padding: 0.0625rem 0.375rem; border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent); border: 0.0625rem solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.mw-step-count {
  margin-left: 0.375rem; font-size: var(--fs-xs); font-weight: 700;
  padding: 0 0.3125rem; border-radius: var(--r-xl);
  background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent);
}

/* Six ability boxes on one line — the stat-block reading order, not a form column. */
.mw-abils { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mw-abil {
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem;
  padding: 0.375rem 0.5rem; min-width: 4.5rem;
  background: var(--panel-2, var(--panel));
  border: 0.0625rem solid var(--border); border-radius: var(--r-md);
}
.mw-abil-k { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.mw-abil-m { font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.mw-abil .ui-num { width: 3.25rem; text-align: center; }

/* One attack per row: name · kind · ability · dice · type · remove. */
.mw-atks { display: flex; flex-direction: column; gap: 0.375rem; }
.mw-atk {
  display: grid; gap: 0.375rem; align-items: center;
  grid-template-columns: minmax(6rem, 1.4fr) minmax(7rem, 1fr) minmax(4.5rem, 0.6fr) 5rem minmax(6rem, 1fr) auto;
}
.mw-atk-name, .mw-atk-dice {
  padding: 0.375rem 0.5rem; background: var(--panel-2, var(--panel)); color: var(--text);
  border: 0.0625rem solid var(--border); border-radius: var(--r-md); font: inherit; min-width: 0;
}
.mw-traits { display: flex; flex-direction: column; gap: 0.375rem; }
.mw-trait { display: grid; grid-template-columns: 1fr auto; gap: 0.375rem; align-items: start; }
.mw-add { align-self: flex-start; margin-top: 0.375rem; }

/* Narrow viewports: the attack row stacks rather than crushing every control. */
@media (max-width: 900px) {
  .mw-atk { grid-template-columns: 1fr 1fr; }
  .mw-atk-name { grid-column: 1 / -1; }
}

.mw-roster { width: 100%; max-width: var(--content-max); margin: 0 auto; padding: var(--sp-8) var(--sp-3) 0; }

.mw-prevhead { margin: 0 0 0.5rem; }
.mw-prevhead h3 {
  display: flex; align-items: center; gap: 0.375rem; margin: 0;
  font-size: var(--fs-base); font-weight: 600; letter-spacing: 0.02em;
  color: var(--muted); text-transform: uppercase;
}

.mw-rosterhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.mw-scope {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-left: 0.625rem;
  font-family: var(--font-ui, inherit); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
  padding: 0.125rem 0.4375rem; border-radius: var(--r-xl);
  border: 0.0625rem solid var(--border); background: var(--panel-2, transparent);
  vertical-align: middle;
}

.mw-tokenrow { display: flex; align-items: center; gap: 1rem; }
.mw-tokenprev {
  width: 7rem; height: 7rem; border-radius: var(--r-round); overflow: hidden; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--panel-2, var(--panel)); border: 0.125rem solid var(--border);
}
.mw-tokenprev img { width: 100%; height: 100%; object-fit: cover; }
.mw-tokennone { font-size: var(--fs-page); font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.mw-tokenside { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
/* The create-path source pickers sit inline, two compact Selects wide — a creation has no book
   page to open, so its DM names the source here before the crop editor has anything to show. */
.mw-tokensrc { display: grid; grid-template-columns: repeat(2, minmax(11rem, 15rem)); gap: 0.5rem 0.75rem; }
.mw-tokensrc .mw-field { min-width: 0; }