/* Home setup checklist (2.1), first-run setup steps (P1.2, P1.3), Cmd+K Recent/Docs (P2).
   Components come from homla-shell.css (.h-checklist, .h-stepper, .h-cmdk); this file only
   places them on the real markup. */

/* 2.1: checklist, then "Pick your AI" one section down. */
#home-setup-host:not(:empty) + .hh-pick { margin-top: var(--s-6); }
#home-setup-host .h-section { margin-top: 0; }
#home-setup .h-checklist__head .h-anchor { display: inline-flex; }
#home-setup .h-menu--float { min-width: 200px; z-index: var(--z-menu, 40); }
#home-setup .h-checklist__item .h-btn { flex: none; }
.h-empty#home-setup .h-empty__actions { flex-wrap: wrap; }

/* P1.2, P1.3: a page of its own. No sidebar, no top bar, one narrow left column. */
#app.is-setup { grid-template-columns: minmax(0, 1fr); }
#app.is-setup > .h-side,
#app.is-setup .h-top { display: none; }
#view-setup .hs-setup { max-width: 704px; }
#view-setup .h-code pre { word-break: normal; overflow-wrap: anywhere; }
#view-setup .hs-brand img { display: block; }
#view-setup .h-stepper__top { flex-wrap: wrap; }
#view-setup .h-list { margin: 0; padding: 0; list-style: none; }
#view-setup .h-list__item { gap: var(--s-3); }
#view-setup .h-list__item .h-cap { min-width: 52px; }
#view-setup .h-btn--primary .h-logo--sm { background: #fff; }
@media (max-width: 820px) {
  #app.is-setup .h-main { padding-top: 0; }
}

/* P1.1 "About you": role + team size side by side, the first job as option rows. */
#view-setup .hs-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
#view-setup .hs-fieldset legend { padding: 0; margin-bottom: var(--s-2); }
#view-setup .hs-about-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
#view-setup .hs-foot { gap: var(--s-3); }
#view-setup .h-banner .h-spinner { margin-left: auto; align-self: center; }
#view-setup .h-list--pad .h-list__item { display: flex; align-items: center; gap: var(--s-3); }
#view-setup .h-list--pad .h-list__main { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  #view-setup .hs-about-row { grid-template-columns: minmax(0, 1fr); }
  #view-setup .hs-foot .h-btn { flex: 1; justify-content: center; }
}

/* Self-serve sign-up: the terms line sits like a field, links underlined. */
#signup-card .h-check { font-size: var(--fs-13); color: var(--text-2); }
#signup-card .h-check a { color: inherit; }
/* "Name your workspace": the sign-in card's column, alone on the page. */
#app .ws-new { min-height: 100vh; display: grid; }
#app .ws-new .h-center { min-height: 100vh; }
/* The legacy global `label` rule (index.html) would give each option row a mono caption's margins. */
#view-setup .h-opt { margin: 0; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--text); }
#view-setup .hs-about-row { align-items: start; }
/* The steps carry their own two-step sign-in prompt (invite step); no page banner on top. */
#app.is-setup #mfa-banner { display: none; }

/* Setup v2: company-type tiles, email cards, multi-select tool tiles, source rows. */
#view-setup .hs-types { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
#view-setup .h-stepper__seg.hs-seg--opt:not(.is-done):not(.is-current) { background: color-mix(in srgb, var(--line) 55%, transparent); }
#view-setup .hs-mails { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--s-3); }
#view-setup .hs-mail.is-on { border-color: var(--line-strong); }
#view-setup .hs-mail .h-btn--block { justify-content: center; }
#view-setup .hs-caps .h-list__item { display: flex; align-items: center; padding: 4px 0; }
#view-setup .hs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: var(--s-2); }
#view-setup .hs-tile { position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 8px 12px; margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-surface); cursor: pointer; font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: var(--fs-14); color: var(--text); transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
#view-setup .hs-tile:hover { background: var(--bg-hover); }
#view-setup .hs-tile input { appearance: none; -webkit-appearance: none; flex: none; order: 3; width: 16px; height: 16px; margin: 0 0 0 auto; padding: 0; min-height: 0; border: 1px solid var(--line-control); border-radius: var(--r-sm); background: var(--bg-surface); display: grid; place-items: center; box-shadow: none; }
#view-setup .hs-tile input:checked { background: var(--accent); border-color: var(--accent); }
#view-setup .hs-tile input:checked::after { content: ""; width: 9px; height: 5px; border-left: 1.75px solid var(--on-accent); border-bottom: 1.75px solid var(--on-accent); transform: translateY(-1px) rotate(-45deg); }
#view-setup .hs-tile input:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
#view-setup .hs-tile:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
#view-setup .hs-tile__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
#view-setup .hs-tile__name { font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
#view-setup .hs-tile__note { font-size: var(--fs-12, 12px); color: var(--text-2); }
#view-setup .hs-truth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3) var(--s-4); }
#view-setup .hs-memnote { display: flex; align-items: center; gap: 6px; }
#view-setup .hs-rows .h-list__item { align-items: flex-start; }
#view-setup .hs-rows .h-list__item > .h-logo, #view-setup .hs-rows .h-list__item > .h-btn, #view-setup .hs-rows .h-list__item > .h-pill { margin-top: 1px; }
#view-setup .hs-row--off .h-list__main { display: flex; flex-direction: column; gap: 2px; }
#view-setup .hs-row__acts { gap: var(--s-3); margin-top: 4px; align-items: center; }
#view-setup .hs-idea .h-list__main { display: flex; flex-direction: column; gap: var(--s-2); }
#view-setup .h-pill { flex: none; white-space: nowrap; }
@media (max-width: 640px) {
  #view-setup .hs-truth { grid-template-columns: minmax(0, 1fr); }
  #view-setup .hs-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #view-setup .hs-tile { padding: 8px 10px; gap: var(--s-2); }
  #view-setup .hs-row--off .h-pill { display: none; }
}
#view-setup .hs-caps { margin-top: var(--s-6); }
#view-setup .hs-truth .h-field { margin: 0; }
#view-setup .hs-truth .h-label { display: block; margin: 0 0 6px; }

/* "Your brand": URL row, progress, brand book preview, swatches. */
#view-setup .hs-brand-url { gap: var(--s-2); }
#view-setup .hs-brand-url .h-btn { flex: none; }
#view-setup .hs-progress { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
#view-setup .hs-progress li { display: flex; align-items: center; gap: var(--s-3); color: var(--text-2); font-size: var(--fs-14); }
#view-setup .hs-progress li.is-current { color: var(--text); font-weight: 500; }
#view-setup .hs-progress li.is-done { color: var(--text); }
#view-setup .hs-progress li .h-i, #view-setup .hs-progress li .h-spinner { width: 16px; height: 16px; flex: none; }
#view-setup .hs-progress__dot { width: 16px; height: 16px; flex: none; border: 1px solid var(--line-strong); border-radius: 50%; }
#view-setup .hs-brand-logo { flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--logo-tile); overflow: hidden; }
#view-setup .hs-brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
#view-setup .hs-brand-book .h-label { display: block; margin-bottom: 6px; }
#view-setup .hs-tone { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
#view-setup .hs-tone li { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-14); }
#view-setup .hs-tone__do, #view-setup .hs-tone__dont { display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-13); color: var(--text-2); }
#view-setup .hs-tone__do .h-i { color: var(--ok); flex: none; width: 12px; height: 12px; }
#view-setup .hs-tone__dont .h-i { color: var(--danger); flex: none; width: 12px; height: 12px; }
#view-setup .hs-brand-list { margin: 0; padding-left: 18px; font-size: var(--fs-14); }
#view-setup .hs-swatches { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
#view-setup .hs-swatches:empty { display: none; }
#view-setup .hs-swatch { width: 28px; height: 28px; border-radius: var(--r-md); border: 1px solid var(--line); }
@media (max-width: 640px) {
  #view-setup .hs-brand-url { flex-wrap: wrap; }
  #view-setup .hs-brand-url .h-btn { width: 100%; justify-content: center; }
}
#view-setup .hs-swatch-codes { align-self: center; margin-left: 6px; }