/* Member onboarding (/welcome/<step>) and the owner's "Add Homla for your whole team" (/team-ai).
   Built on the Plan components (homla-shell.css); this file only lays them out.
   The page uses the setup layout (#app.is-setup: no sidebar, no top bar). */

#view-welcome .mw { max-width: 760px; }
#view-welcome .hs-brand img { display: block; }
#view-welcome .h-stepper__top { flex-wrap: wrap; gap: var(--s-2); }
#view-welcome .mw-ws { margin-left: auto; }
#view-welcome .mw-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
#view-welcome .mw-sub { max-width: 56ch; font-size: var(--fs-16, 16px); }
#view-welcome .mw-foot { gap: var(--s-3); }
#view-welcome .mw-badge { font-size: var(--fs-12, 12px); vertical-align: middle; }

/* Step 1: big logo tiles, four across, two on a phone. */
.mw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
.mw-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-6) var(--s-3) var(--s-5); min-height: 168px; text-align: center; cursor: pointer;
  font: inherit; color: var(--text); background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  transition: border-color var(--dur-1, .12s) var(--ease), box-shadow var(--dur-1, .12s) var(--ease), background var(--dur-1, .12s) var(--ease);
}
.mw-tile:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.mw-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.mw-tile.is-on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.mw-tile .h-logo--xl { margin-bottom: var(--s-1); }
.mw-tile .h-logo img { width: 62%; height: 62%; object-fit: contain; }
.mw-tile__name { font-weight: 600; font-size: var(--fs-16, 16px); letter-spacing: var(--track-title); }
.mw-tile__cap { font-size: var(--fs-13, 13px); color: var(--text-2); line-height: 1.35; }
.mw-tile__check {
  position: absolute; top: var(--s-3); right: var(--s-3); width: 20px; height: 20px; display: grid; place-items: center;
  border: 1px solid var(--line-control); border-radius: var(--r-sm); background: var(--bg-surface); color: var(--on-accent);
}
.mw-tile.is-on .mw-tile__check { background: var(--accent); border-color: var(--accent); }
.mw-tile__team { margin-top: var(--s-1); }
.mw-logo-q { font-weight: 600; font-size: 22px; color: var(--text-2); }

/* Step 2: one card per pick. */
.mw-picktabs { margin-top: var(--s-6); }
.mw-card__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.mw-card__head > div { flex: 1; min-width: 0; }
.mw-card__title { margin: 0; font-size: var(--fs-18, 18px); font-weight: 600; letter-spacing: var(--track-title); flex: 1; min-width: 0; }
.mw-card__head > div .mw-card__title { flex: none; }
.mw-cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-4); }
.mw-lead { margin: 0; }
.mw-note { display: flex; gap: var(--s-2); align-items: flex-start; color: var(--text-2); margin: 0; }
.mw-note .h-i { flex: none; margin-top: 2px; }
.mw-signin { margin: var(--s-3) 0 0; color: var(--text-2); }

.mw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mw-steps li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-15, 15px); line-height: 1.45; }
.mw-steps__n {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center; margin-top: 1px;
  border-radius: 50%; background: var(--bg-sunken); color: var(--text); font-size: 12px; font-weight: 600;
}

/* Guided path: three numbered blocks. */
.mw-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.mw-guide__step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; }
.mw-guide__step + .mw-guide__step { border-top: 1px solid var(--line); }
.mw-guide__n {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font-weight: 600;
}
.mw-guide__main { display: grid; gap: var(--s-2); min-width: 0; }
.mw-guide__main > .h-btn { justify-self: start; }
.mw-guide__main p { margin: 0; }
.mw-guide__title { font-weight: 600; font-size: var(--fs-16, 16px); }
.mw-guide__split { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s-5); align-items: start; margin-top: var(--s-2); }

/* Big copy field. */
.mw-copy {
  display: flex; align-items: center; gap: var(--s-2); min-width: 0;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-sunken);
}
.mw-copy__text { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-sans); font-size: var(--fs-15, 15px); padding: var(--s-2) 0; background: none; color: var(--text); }
.mw-copy--mono .mw-copy__text { font-family: var(--font-mono); font-size: 13px; }
.mw-copy__btn { flex: none; min-width: 96px; justify-content: center; }
.mw-copy__btn.is-copied, .h-btn.is-copied { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }

/* "Where to paste": a small drawn window, the link field pulsing. */
.mw-where { margin: 0; }
.mw-where__win { border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--bg-surface); box-shadow: var(--shadow-2); overflow: hidden; font-size: 12px; }
.mw-where__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--bg-sunken); color: var(--text-2); }
.mw-where__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.mw-where__bar span { margin-left: 6px; font-weight: 600; color: var(--text); }
.mw-where__body { display: grid; gap: 4px; padding: 10px 12px 12px; }
.mw-where__label { color: var(--text-2); font-size: 11px; margin-top: 4px; }
.mw-where__field { position: relative; height: 26px; display: flex; align-items: center; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-surface); }
.mw-where__field--hot { border-color: var(--brand); box-shadow: 0 0 0 3px var(--tint); animation: mw-pulse 2.4s var(--ease) infinite; }
.mw-where__typed { font-family: var(--font-mono); color: var(--text); opacity: 0; animation: mw-typed 4.8s steps(1) infinite; }
.mw-where__hint { position: absolute; left: 8px; color: var(--brand); font-weight: 600; animation: mw-hint 4.8s steps(1) infinite; }
.mw-where__cursor { position: absolute; right: 10px; top: 5px; width: 10px; height: 14px; border-left: 2px solid var(--text); animation: mw-blink 1s steps(1) infinite; }
.mw-where__foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.mw-where__btn { padding: 4px 10px; border-radius: var(--r-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; }
@keyframes mw-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--tint); } 50% { box-shadow: 0 0 0 6px var(--tint); } }
@keyframes mw-typed { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes mw-hint { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes mw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mw-where__field--hot, .mw-where__cursor { animation: none; }
  .mw-where__typed { animation: none; opacity: 0; }
  .mw-where__hint { animation: none; opacity: 1; }
}

/* "Not sure": two big choices. */
.mw-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.mw-choose__btn {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); font: inherit; font-weight: 600; color: var(--text);
  background: var(--bg-surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; text-align: left;
}
.mw-choose__btn:hover { background: var(--bg-hover); border-color: var(--line-strong); }
.mw-choose__btn > span:not(.h-logo) { flex: 1; }

/* Did it work? */
.mw-check__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.mw-check .h-banner .h-spinner { margin-left: auto; align-self: center; }

/* Step 3. */
.mw-why { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0; font-weight: 500; }
.mw-why .h-i { flex: none; margin-top: 3px; color: var(--brand); }
.mw-does { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); }
.mw-does li { display: flex; gap: var(--s-2); align-items: center; font-size: var(--fs-14, 14px); }
.mw-does .h-i { flex: none; color: var(--text-2); }
.mw-show > summary { font-weight: 600; }

/* Step 4: three prompts. */
.mw-prompts { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.mw-prompt .h-card__body { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; }
.mw-prompt__n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--on-tint); font-weight: 600; }
.mw-prompt__text { margin: 0; font-size: var(--fs-16, 16px); font-weight: 500; }
.mw-prompt__actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }

/* Owner page. */
#view-teamai .mw-team { max-width: 1040px; }
.mw-team__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.mw-team__card.is-on { border-color: var(--ok); }
.mw-team__member { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--bg-sunken); display: grid; gap: var(--s-2); }
.mw-team__switch { align-self: flex-start; }

@media (max-width: 820px) {
  .mw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .mw-tile { min-height: 150px; padding: var(--s-5) var(--s-2) var(--s-4); }
  .mw-guide__split { grid-template-columns: minmax(0, 1fr); }
  .mw-team__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  #view-welcome .mw-foot .h-btn { flex: 1; justify-content: center; }
  .mw-check__row { grid-template-columns: minmax(0, 1fr); }
  .mw-check__row > .h-btn { justify-self: start; }
  .mw-choose { grid-template-columns: minmax(0, 1fr); }
  .mw-does { grid-template-columns: minmax(0, 1fr); }
  .mw-prompt .h-card__body { grid-template-columns: 32px minmax(0, 1fr); }
  .mw-prompt__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .mw-copy { flex-wrap: wrap; padding: var(--s-2); }
  .mw-copy__btn { width: 100%; }
  .mw-guide__step { grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); }
  .mw-guide__n { width: 28px; height: 28px; }
}