/* Guided create wizard for /agents/ — step panels, a progress bar, and large
   goal cards layered over the SAME inputs the flat edit view uses. Ports the
   wz- stepper mechanics from welcome.css into an aw- prefix, scoped to the
   agents page so it can't leak into other pages that reuse .af-*. Remove the
   <link> in agents/index.html to fall back to a plain stacked form (every
   input still submits — the wizard is presentation only). */

/* ── Progress bar ─────────────────────────────────────────── */
body[data-page="agents"] .aw-progress { margin: 0 0 6px; }
body[data-page="agents"] .aw-bar {
  display: block;
  height: 4px;
  border-radius: 99px;
  background: var(--line-strong);
  overflow: hidden;
}
body[data-page="agents"] .aw-bar-fill {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 99px;
  /* Gradient fill + a soft glow at the leading edge (DESIGN.md §3). */
  background: linear-gradient(90deg, var(--accent-strong), var(--accent-bright));
  box-shadow: 0 0 12px var(--accent-glow);
  transition: width 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* ── Body layout: a full-width step header spanning the top, then two columns
      below it — the step's fields (left) + the live summary rail (right). The
      header must NOT share a row with the rail (it read as an odd two-column
      title), so the active step is hoisted with display:contents and its head
      spans both grid columns while its body sits in column 1 beside the rail. */
body[data-page="agents"] .aw-body {
  display: grid;
  /* Fill the full stage width (like every other section on the page) — no cap,
     so there's no dead space to the right on a wide window. The choice list
     takes the flexible column; the recap is a proportional rail clamped to a
     comfortable width so it stays a rail (~28%), never a half, yet is wide
     enough that the "Your agent" estimate note reads in a few lines. */
  grid-template-columns: minmax(0, 1fr) clamp(300px, 28%, 400px);
  gap: 20px 28px;
  align-items: start;
}
/* Transparent so the active step's head + body become direct grid items of
   .aw-body (see .aw-step.is-active below). Restored to a real capped column in
   the flat/edit view, where there is no grid. */
body[data-page="agents"] .aw-main { display: contents; min-width: 0; }

body[data-page="agents"] .aw-summary {
  /* Second column, second row — sits beside the step fields, below the header.
     Stretch to the full column height (overrides the grid's align-items:start)
     so the recap fills the space next to the tall step-1 choice list instead of
     floating as a short box; the estimate note below pins to the bottom. */
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
  position: sticky;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-radius: 16px;
  /* Layered surface + top-edge highlight (DESIGN.md §1). */
  background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.035), rgba(var(--wash-rgb), 0.012));
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 var(--edge-hi),
    0 18px 40px -30px rgba(0, 0, 0, 0.9);
}
body[data-page="agents"] .aw-summary-head {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
body[data-page="agents"] .aw-summary-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body[data-page="agents"] .aw-summary-est {
  /* Pinned to the bottom of the (now full-height) rail. */
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* Below the two-column breakpoint the rail is redundant chrome — hide it and let
   the step column go full width. The wizard still submits without the rail. */
@media (max-width: 860px) {
  body[data-page="agents"] .aw-body { grid-template-columns: 1fr; }
  body[data-page="agents"] .aw-summary { display: none; }
  body[data-page="agents"] .aw-main { max-width: none; }
}

/* ── Steps ────────────────────────────────────────────────── */
body[data-page="agents"] .aw-step { display: none; }
/* Hoisted: the step box itself disappears so its head + body land directly in
   the .aw-body grid — head across the full width (row 1), fields in column 1. */
body[data-page="agents"] .aw-step.is-active { display: contents; }
body[data-page="agents"] .aw-step.is-active .aw-step-head {
  grid-column: 1 / -1;
  grid-row: 1;
}
body[data-page="agents"] .aw-step.is-active .aw-step-body {
  grid-column: 1;
  grid-row: 2;
}
/* Animation rides on the visible parts, not the (boxless) hoisted step. */
body[data-page="agents"] .aw-step.is-active .aw-step-head,
body[data-page="agents"] .aw-step.is-active .aw-step-body {
  animation: aw-step-in 0.26s ease-out both;
}
@keyframes aw-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The fields under each header always stack; only their grid placement is
   wizard-specific (set above), so this holds in the flat edit view too. */
body[data-page="agents"] .aw-step-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* Flat/edit mode: every panel stacked at once, no progress bar or Back/Next,
   and the body collapses back to a single capped column (no grid, no rail). */
body[data-page="agents"] .aw-flat .aw-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: none;
}
body[data-page="agents"] .aw-flat .aw-main { display: block; max-width: 640px; }
body[data-page="agents"] .aw-flat .aw-step-head,
body[data-page="agents"] .aw-flat .aw-step-body { animation: none; }
body[data-page="agents"] .aw-flat .aw-progress,
body[data-page="agents"] .aw-flat .aw-nav,
body[data-page="agents"] .aw-flat .aw-eyebrow,
/* The summary rail is a wizard-only recap; in the flat edit view every field is
   already visible, so drop it and collapse the body back to one column. */
body[data-page="agents"] .aw-flat .aw-summary,
body[data-page="agents"] .aw-flat .aw-review { display: none; }
body[data-page="agents"] .aw-flat .aw-body { display: block; }
body[data-page="agents"] .aw-flat .aw-step + .aw-step {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* ── Step header ──────────────────────────────────────────── */
body[data-page="agents"] .aw-step-head { display: flex; flex-direction: column; gap: 6px; }
body[data-page="agents"] .aw-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-2);
}
body[data-page="agents"] .aw-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
body[data-page="agents"] .aw-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── Goal cards (step 1) ──────────────────────────────────── */
body[data-page="agents"] .aw-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px) {
  body[data-page="agents"] .aw-cards { grid-template-columns: 1fr; }
}
body[data-page="agents"] .aw-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  padding: 14px;
  border-radius: 12px;
  /* Layered fill + top-edge highlight so the card catches light (DESIGN.md §1). */
  background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.035), rgba(var(--wash-rgb), 0.014));
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 var(--edge-hi);
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
body[data-page="agents"] .aw-card:hover {
  border-color: rgba(var(--wash-rgb), 0.20);
  background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.055), rgba(var(--wash-rgb), 0.02));
  box-shadow: inset 0 1px 0 var(--edge-hi), 0 8px 20px -14px rgba(0, 0, 0, 0.7);
}
body[data-page="agents"] .aw-card:active { transform: translateY(0.5px); }
body[data-page="agents"] .aw-card:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}
body[data-page="agents"] .aw-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-faint);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ── Strategy picker (step 1) — full-width rows with a trailing radio ──
   Ported from the /agents/ redesign: the five goal choices read better as one
   vertical list (icon tile · title+blurb · radio) than a 2-col grid. Scoped to
   the play-cards container so the template/image pickers keep their own grids.
   The radio is a CSS ::after driven by the existing .is-selected — no markup or
   JS change — and every colour stays on our indigo tokens (not the mock's pink). */
body[data-page="agents"] .aw-cards[data-role="play-cards"] {
  grid-template-columns: 1fr;
}
body[data-page="agents"] .aw-cards[data-role="play-cards"] .aw-card {
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
}
/* centre the icon tile in the taller row and let the blurb take the width */
body[data-page="agents"] .aw-cards[data-role="play-cards"] .aw-card .agent-icon { margin-top: 0; }
body[data-page="agents"] .aw-cards[data-role="play-cards"] .aw-card-text { flex: 1; min-width: 0; }
/* trailing radio */
body[data-page="agents"] .aw-cards[data-role="play-cards"] .aw-card::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(var(--wash-rgb), 0.16);
  transition: border-color 0.16s ease, background 0.16s ease;
}
body[data-page="agents"] .aw-cards[data-role="play-cards"] .aw-card:hover::after {
  border-color: rgba(var(--wash-rgb), 0.28);
}
/* diagonal accent wash on the selected row (keeps the accent ring from above) */
body[data-page="agents"] .aw-cards[data-role="play-cards"] .aw-card.is-selected {
  background: linear-gradient(120deg, var(--accent-faint), rgba(99, 102, 241, 0.04));
}
body[data-page="agents"] .aw-cards[data-role="play-cards"] .aw-card.is-selected::after {
  border-color: var(--accent);
  background:
    radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 4.5px),
    linear-gradient(135deg, var(--accent-bright), var(--accent-strong));
}
body[data-page="agents"] .aw-card .agent-icon { flex: 0 0 auto; margin-top: 1px; }
body[data-page="agents"] .aw-card-text { display: block; min-width: 0; }
body[data-page="agents"] .aw-card-text strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
body[data-page="agents"] .aw-card-text p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
body[data-page="agents"] .aw-card-text em { font-style: normal; color: var(--lt1); }

/* ── Writing-template cards (text only) ───────────────────── */
body[data-page="agents"] .aw-cards--tpl { margin-top: 2px; }
body[data-page="agents"] .aw-card--tpl .aw-card-text p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Image-style cards (reference photo + description overlay) ── */
body[data-page="agents"] .aw-imgcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
@media (max-width: 640px) {
  body[data-page="agents"] .aw-imgcards { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
body[data-page="agents"] .aw-imgcard {
  position: relative;
  display: block;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #14141a;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
body[data-page="agents"] .aw-imgcard:hover { transform: translateY(-1px); border-color: rgba(var(--wash-rgb), 0.22); }
body[data-page="agents"] .aw-imgcard:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-faint);
}
body[data-page="agents"] .aw-imgcard.is-selected {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
}
body[data-page="agents"] .aw-imgcard-media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
body[data-page="agents"] .aw-imgcard.is-noimg .aw-imgcard-media {
  background: linear-gradient(135deg, #2b2d3c 0%, #17181f 100%);
}
/* Checkbox affordance, top-left — empty circle, filled tick when selected. */
body[data-page="agents"] .aw-imgcard::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: background 0.15s ease, border-color 0.15s ease;
}
body[data-page="agents"] .aw-imgcard.is-selected::before {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
body[data-page="agents"] .aw-imgcard-badge {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 8px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 600;
  background: rgba(var(--dk2-rgb), 0.82);
  color: #fff;
  border: 1px solid rgba(var(--wash-rgb), 0.16);
}
body[data-page="agents"] .aw-imgcard-overlay {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 12px 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}
body[data-page="agents"] .aw-imgcard-overlay strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
body[data-page="agents"] .aw-imgcard-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(var(--wash-rgb), 0.75);
}

/* ── Custom radios + checkbox (DESIGN.md §4 — no raw browser controls) ── */
/* Step 3 cadence radios. Each row is a <label> wrapping the input, so the whole
   row is already clickable. */
body[data-page="agents"] .af-radio { color: var(--muted); transition: color 0.15s ease; }
body[data-page="agents"] .af-radio:has(input:checked) { color: var(--text); }
body[data-page="agents"] .af-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-3);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body[data-page="agents"] .af-radio input[type="radio"]::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-bright);
  transform: scale(0);
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}
body[data-page="agents"] .af-radio input[type="radio"]:hover { border-color: rgba(var(--wash-rgb), 0.24); }
body[data-page="agents"] .af-radio input[type="radio"]:checked { border-color: var(--accent); }
body[data-page="agents"] .af-radio input[type="radio"]:checked::before { transform: scale(1); }
body[data-page="agents"] .af-radio input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-faint);
}

/* Step 2 featured-image checkbox. */
body[data-page="agents"] .af-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface-3);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
body[data-page="agents"] .af-toggle input[type="checkbox"]:hover { border-color: rgba(var(--wash-rgb), 0.24); }
body[data-page="agents"] .af-toggle input[type="checkbox"]:checked {
  border-color: var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
body[data-page="agents"] .af-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-faint);
}

/* Featured-image container gets the same catches-light depth as the cards. */
body[data-page="agents"] .af-image {
  background: linear-gradient(180deg, rgba(var(--wash-rgb), 0.03), rgba(var(--wash-rgb), 0.01));
  box-shadow: inset 0 1px 0 var(--edge-hi);
}

/* ── Advanced disclosure ──────────────────────────────────── */
body[data-page="agents"] .aw-advanced {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
body[data-page="agents"] .aw-advanced > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  user-select: none;
}
body[data-page="agents"] .aw-advanced > summary::-webkit-details-marker { display: none; }
body[data-page="agents"] .aw-advanced > summary::before {
  content: "▸";
  font-size: 10px;
  transition: transform 0.15s ease;
}
body[data-page="agents"] .aw-advanced[open] > summary::before { transform: rotate(90deg); }
body[data-page="agents"] .aw-advanced-body { margin-top: 12px; }

/* ── Nav row ──────────────────────────────────────────────── */
body[data-page="agents"] .aw-nav { display: flex; gap: 10px; }
body[data-page="agents"] .aw-nav .aw-next { margin-left: auto; }
body[data-page="agents"] .aw-nav .btn { min-width: 96px; }

/* ── Per-step validation message ──────────────────────────── */
body[data-page="agents"] .aw-step-err {
  margin: 0;
  font-size: 12.5px;
  color: var(--danger);
}
body[data-page="agents"] .aw-step-err[hidden] { display: none; }

/* ── Recap rows (rendered into the summary rail by renderReview) ──── */
body[data-page="agents"] .aw-review-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
}
body[data-page="agents"] .aw-review-row span { color: var(--muted); }
body[data-page="agents"] .aw-review-row strong {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="agents"] .aw-step.is-active .aw-step-head,
  body[data-page="agents"] .aw-step.is-active .aw-step-body { animation: none; }
  body[data-page="agents"] .aw-bar-fill { transition: none; }
  body[data-page="agents"] .aw-card,
  body[data-page="agents"] .af-radio input[type="radio"]::before { transition: none; }
}