/* owner: admin-v2 B5 · contract: server/ADMIN-V2.md sec. 5.7, 5.10, 4.5 (business.css: settings/business and settings/whatsapp)
   The business overview (facts by topic, places, the prompt preview, the private profile), the onboarding editor (the step
   links, the step card, the week, list editors, the site crawl and its review) and the WhatsApp section (the captured code,
   the threads). Composed from base.css classes; every rule sits under .set-business or .set-whatsapp (div.set is
   display: contents, so the cards are the settings grid's own items). */

/* ---------- business: the overview ---------- */
.set-business .facts { display: grid; margin-top: 12px; }
.set-business .facts li { display: flex; align-items: flex-start; gap: 10px; padding-block: 12px; border-top: 1px solid var(--line); }
.set-business .facts li:first-child { padding-top: 0; border-top: 0; }
.set-business .facts li > .icon { margin-top: 2px; }
.set-business .facts li > div { display: grid; justify-items: start; min-width: 0; }
.set-business .facts .fact { margin-top: 0; overflow-wrap: anywhere; }
.set-business .kv .facts { margin-top: 0; }
.set-business .kv .facts li { padding-block: 2px; border-top: 0; }
.set-business .kv dd { white-space: pre-line; }
.set-business .kv bdi { white-space: normal; overflow-wrap: anywhere; }
.set-business .kv .fact-src { margin-top: 0; }
.set-business .card.dark .kv :is(dt, dd) { border-bottom-color: var(--fgSoft); }
.set-business details > summary { padding-block: 12px; font-size: 13px; color: var(--fgMuted); }
.set-business blockquote {
  padding-inline-start: 14px; border-inline-start: 3px solid var(--stone); color: var(--fgMuted);
  font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;
}
.set-business details.card > summary { margin-block: -12px; font-size: 14px; }
.set-business details.card > summary .kicker { display: inline; }
.set-business details.card[open] > summary { margin-bottom: 4px; }
.set-business pre {
  max-height: 420px; margin-top: 10px; padding: 16px 20px; overflow: auto; border-radius: 20px; background-color: var(--ground);
  font: 13px/1.6 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext;
}
.set-business form { margin-top: 18px; }
.set-business .grid2 { align-items: start; }
.set-business .input[type="number"] { max-width: 220px; }

/* ---------- business: the editor ---------- */
.set-business .sechead { margin-bottom: 0; }
.set-business .sechead .acts { align-items: center; margin-top: 0; }
.set-business .sechead .note { margin-top: 0; }

.set-business .steps ol { display: flex; flex-wrap: wrap; gap: 8px; }
.set-business .steps a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding-block: 6px; padding-inline: 8px 18px;
  border-radius: var(--r); background-color: var(--card); color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none;
}
.set-business .steps a:hover { background-color: var(--parch); }
.set-business .steps b {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background-color: var(--ground); font-size: 14px; font-variant-numeric: tabular-nums;
}
.set-business .steps a[data-state="done"] b { background-color: var(--okSoft); }
.set-business .steps a[data-state="error"] b { background-color: var(--bad); color: #fff; }
.set-business .steps a[aria-current="step"] { background-color: var(--solid); color: var(--onSolid); }
.set-business .steps a[aria-current="step"] b { background-color: rgba(255, 255, 255, .16); color: var(--onSolid); }

.set-business .flow { display: grid; gap: 22px; align-content: start; }
.set-business .flow > * { margin-top: 0; }
.set-business .flow .field { margin-top: 0; }
.set-business .flow h3.h3 { margin-top: 0; }
.set-business .sprog { display: none; }
.set-business .sprog p { font-size: 14px; }
.set-business .sprog b { color: var(--fg); }
.set-business .step-nav { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.set-business .step-nav .fill { margin-inline-start: auto; }
.set-business h4 { font-size: 18px; line-height: 1.3; }
.set-business h5.kicker { margin-top: 6px; }
.set-business .flow .acts { margin-top: 12px; }
.set-business legend { margin-bottom: 6px; }

/* the week: a switch per day, then the hours */
.set-business .wk {
  display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 6px 20px; align-items: center;
  padding-block: 8px; border-top: 1px solid var(--line);
}
.set-business .wk:first-child { border-top: 0; }
.set-business .wk .toggle { margin-top: 0; }
.set-business .wk > div:not(.ferr) { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 48px; }
.set-business .wk .input { width: 140px; }
.set-business .wk .ferr { grid-column: 1 / -1; }

/* list editors: a row of controls and a remove button, then the add button */
.set-business .listed { display: grid; gap: 8px; }
.set-business .listed > div { display: flex; align-items: center; gap: 8px; }
.set-business .listed .input { flex: 1; min-width: 0; }
.set-business .listed .select { flex: none; width: auto; min-width: 140px; }
.set-business .listed > .btn { justify-self: start; }

/* the site crawl: address, buttons, three progress steps, the log line, the result */
.set-business .crawl { display: grid; gap: 14px; }
.set-business .crawl > *, .set-business .crawl .notice { margin-top: 0; }
.set-business .crawl ol { display: grid; gap: 10px; padding: 16px 20px; border-radius: 20px; background-color: var(--ground); }
.set-business .pstep { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); }
.set-business .pstep > i {
  display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid var(--stone); border-radius: 50%;
  color: transparent;
}
.set-business .pstep > i .icon { width: 14px; height: 14px; stroke-width: 2.5; }
.set-business .pstep[data-state="active"] { color: var(--ink); font-weight: 500; }
.set-business .pstep[data-state="active"] > i { border-color: var(--cta); border-top-color: transparent; animation: spin .9s linear infinite; }
.set-business .pstep[data-state="done"] { color: var(--ink); }
.set-business .pstep[data-state="done"] > i { border-color: var(--ok); background-color: var(--ok); color: var(--ink); }

/* the review: a fact per row, its include box in a 44 px target */
.set-business .rfact {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 8px; padding-block: 14px; border-top: 1px solid var(--line);
}
.set-business .rfact > label { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.set-business .rfact input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--solid); cursor: pointer; }
.set-business .rfact > :not(label) { grid-column: 2; }
.set-business .rfact > p { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.set-business .rfact .fact-src { margin-top: 0; }
.set-business .rfact .textarea { min-height: 72px; }
.set-business .rfact[data-off="true"] .textarea { opacity: .55; }

/* ---------- whatsapp ---------- */
.set-whatsapp ul { display: grid; gap: 8px; margin-top: 10px; font-size: 15px; }
.set-whatsapp ul li { display: grid; justify-items: start; gap: 2px; }
.set-whatsapp ul bdi { font-size: 13px; }
.set-whatsapp :is(.note, ul) bdi { white-space: normal; overflow-wrap: anywhere; }
.set-whatsapp details:not(.wa-thread) > summary { padding-block: 12px; font-size: 14px; color: var(--fgMuted); }
.set-whatsapp details:not(.wa-thread) p { margin-top: 6px; overflow-wrap: anywhere; }
.set-whatsapp .wa-code {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 16px; padding: 16px 22px;
  border-radius: var(--r); background-color: var(--spark); color: var(--onSpark); font-weight: 500;
}
.set-whatsapp .wa-code bdi { font-size: 34px; line-height: 1; letter-spacing: .06em; }
.set-whatsapp .wa-thread { border-top: 1px solid var(--line); }
.set-whatsapp .wa-thread:first-child { border-top: 0; }
.set-whatsapp .wa-thread > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 52px; padding-block: 8px; list-style: none;
}
.set-whatsapp .wa-thread > summary::-webkit-details-marker { display: none; }
.set-whatsapp .wa-thread > summary > .icon { margin-inline-start: auto; transition: transform .2s; }
.set-whatsapp .wa-thread[open] > summary > .icon { transform: rotate(-90deg); }
.set-whatsapp .wa-thread ol { display: grid; gap: 8px; padding-block: 4px 18px; }
.set-whatsapp .wa-thread li {
  display: grid; gap: 2px; justify-self: end; max-width: 86%; padding: 10px 16px; border-radius: 20px;
  background-color: var(--ground); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere;
}
.set-whatsapp .wa-thread li[data-dir="out"] { justify-self: start; background-color: var(--deep); color: #fff; }
.set-whatsapp .wa-thread li :is(b, .muted) { font-size: 12px; }
.set-whatsapp .wa-thread li[data-dir="out"] .muted { color: var(--onDeep); }

@media (max-width: 760px) {
  .set-business .steps { display: none; }
  .set-business .sprog { display: grid; gap: 8px; }
  .set-business .wk { grid-template-columns: minmax(0, 1fr); }
  .set-business .wk .input { flex: 1 1 120px; width: auto; }
  .set-business .listed > div { flex-wrap: wrap; }
  .set-business .listed .select { flex: 1 1 100%; }
  .set-business .kv { grid-template-columns: minmax(0, 1fr); }
  .set-business .kv dt { padding-bottom: 0; border-bottom: 0; font-size: 13px; }
  .set-business .kv dd { padding-top: 2px; }
  .set-whatsapp .wa-code bdi { font-size: 28px; }
}