/* Client onboarding (D66): /start and the client's own page. Everything is scoped to .cl so the site's own
   styles (cards, chips) are untouched; the questions come from team-form.js, shared with the team pages. */
.cl { display: grid; gap: 14px; }
.cl h1 { font-family: var(--wide); font-stretch: var(--title-stretch, 115%); font-weight: var(--display-weight, 850); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); line-height: 1.1; color: var(--heading, var(--ink)); }
.cl h2 { font-size: var(--s-21); font-weight: 800; color: var(--heading, var(--ink)); }
.cl .lede { font-size: var(--s-18); line-height: 1.5; color: var(--ink); }
.cl .muted, .cl .help, .cl small { color: var(--bluestone); font-size: var(--s-14); line-height: 1.45; font-weight: 400; }
.cl-panel { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-card, 18px); padding: 18px 20px; display: grid; gap: 12px; }
.cl-panel.go { border: 2px solid var(--accent, #1c4d30); }
.cl-panel > h3, .cl-label { font-size: var(--s-14); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label, var(--bluestone)); }
.cl-choices { display: grid; gap: 10px; }
@media (min-width: 640px) { .cl-choices { grid-template-columns: 1fr 1fr; } }
.cl-choice { display: grid; gap: 4px; text-align: left; padding: 16px 18px; border-radius: 16px; border: 2px solid var(--rule); background: #fff; color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; }
.cl-choice:hover, .cl-choice:focus-visible { border-color: var(--accent, #1c4d30); }
.cl-choice b { font-size: var(--s-18); }
.cl-choice span { color: var(--bluestone); font-size: var(--s-16); }
.cl-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cl-b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 18px; border-radius: var(--radius-btn, 12px); border: 2px solid var(--accent, #1c4d30); background: #fff; color: var(--heading, var(--ink)); font: inherit; font-weight: 750; cursor: pointer; text-decoration: none; }
.cl-b.p { background: var(--btn-bg, #ffd23c); border-color: var(--btn-bg, #ffd23c); color: var(--btn-ink, #0f2a1b); }
.cl-b.q { border-color: var(--rule); color: var(--bluestone); font-weight: 650; }
.cl-b.sm { min-height: 38px; padding: 6px 12px; font-size: var(--s-14); }
.cl-b:disabled { opacity: 0.55; cursor: default; }
.cl-link { color: var(--accent, #1c4d30); font-weight: 650; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.cl .f { display: grid; gap: 12px; }
.cl .f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .cl .f2 { grid-template-columns: 1fr; } }
.cl .f label, .cl .fl { display: grid; gap: 4px; font-weight: 650; font-size: var(--s-16); color: var(--ink); }
.cl input, .cl textarea, .cl select { width: 100%; min-height: 48px; padding: 9px 11px; border: 2px solid var(--rule); border-radius: 10px; font: inherit; font-weight: 400; background: #fff; color: var(--ink); }
.cl textarea { min-height: 76px; }
.cl input:focus, .cl textarea:focus, .cl select:focus { border-color: var(--accent, #1c4d30); outline: none; }
.cl .bad input, .cl .bad select, .cl .bad textarea { border-color: #c0392b; }
.cl .err { color: #8a2a1f; font-size: var(--s-14); font-weight: 650; }
.cl .cbs { display: flex; flex-wrap: wrap; gap: 8px; }
.cl .cbs label, .cl .cl-check { display: flex; gap: 10px; align-items: center; font-weight: 600; min-height: 44px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 10px; }
.cl .cbs input, .cl .cl-check input { width: 22px; height: 22px; min-height: 0; flex: none; accent-color: var(--accent, #1c4d30); }
.cl .cl-check { align-items: flex-start; font-weight: 500; line-height: 1.45; }
.cl .cl-check input { margin-top: 2px; }
.cl .done-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cl fieldset.tier { border: 0; padding: 0; margin: 6px 0 0; display: grid; gap: 12px; }
.cl fieldset.tier legend { font-size: var(--s-14); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0; margin-bottom: 4px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; color: var(--heading, var(--ink)); }
.cl fieldset.tier legend small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.cl fieldset.t-recommended legend, .cl fieldset.t-optional legend { color: var(--bluestone); }
.cl details > summary { cursor: pointer; font-weight: 700; color: var(--accent, #1c4d30); min-height: 40px; display: flex; align-items: center; }
.cl-msg { padding: 12px 14px; border-radius: 12px; background: var(--tint); line-height: 1.5; }
.cl-msg.bad { background: #fdf0ee; color: #8a2a1f; }
.cl-msg:empty { display: none; }
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: var(--s-14); font-weight: 700; background: var(--tint); color: var(--ink); }
.cl-chip.warn { background: #fff4cc; color: #6b5200; }
.cl-chip.ok { background: #e2f0d6; color: #1c4d30; }
.cl-kv { display: grid; gap: 6px; margin: 0; }
.cl-kv div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px; font-size: var(--s-16); }
.cl-kv dt { color: var(--bluestone); }
.cl-kv dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cl-place { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.cl-place-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.cl-place-head b { font-size: var(--s-18); }
.cl-steps { display: flex; gap: 6px; flex-wrap: wrap; font-size: var(--s-14); color: var(--bluestone); }
.cl-steps span { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--rule); }
.cl-steps span.on { background: var(--accent, #1c4d30); border-color: var(--accent, #1c4d30); color: #fff; font-weight: 700; }
.cl-link-box { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--tint); font-weight: 650; overflow-wrap: anywhere; }
.cl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cl a { color: var(--accent, #1c4d30); }
.card .msg:empty, [data-qrspot]:empty { display: none; }

/* Follow-ups (D67) */
.fu-text { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tint, #eef4ee); font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tile { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--rule, #ddd); border-radius: 12px; }
.tile b { font-size: 1.5rem; line-height: 1.1; }
.tile span { font-size: 0.85rem; color: var(--bluestone, #555); line-height: 1.35; }
details.card > summary { cursor: pointer; }
html[data-dark] .fu-text { background: #1d2a22; }