/* My CastomAI (dashboard B) — only what neither castomo-dashkit nor the screens both dashboards share
   (shared/panel.css) already draw: the wizard, the people and settings pages, a notice's furniture.
   Every value is a kit token. */

/* ---------- Page furniture ---------- */
.settings-stack { max-width: 880px; }
/* A page's tabs inside a grid would otherwise be as wide as the whole tab row, which never wraps:
   at zero the row scrolls inside itself, as the kit means it to. */
.page-tabs { min-width: 0; }
.form-group { display: grid; gap: var(--s2); padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
.hint { color: var(--ink-3); font-size: var(--t-1); }
.alert-actions { margin-top: var(--s1); }
/* A notice's list of buttons stays inside the notice on a phone (§0.14). */
.list > li { flex-wrap: wrap; }
.list > li > .btn-row { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) {
  .list > li > .btn-row { flex-basis: 100%; justify-content: flex-start; padding-inline-start: 0; }
}
.disclosure summary { width: fit-content; min-height: 44px; display: flex; align-items: center; color: var(--accent-ink); font-size: var(--t-1); font-weight: 650; cursor: pointer; }
.disclosure[open] summary { margin-bottom: var(--s0); }
/* facts() says its column count as an attribute, read here above the kit's phone step (§0.35). */
@media (min-width: 560.02px) {
  .facts[data-cols="1"] { --cols: 1; }
  .facts[data-cols="3"] { --cols: 3; }
  .facts[data-cols="4"] { --cols: 4; }
}

/* ---------- The first-run card on an empty dashboard ---------- */
.first-run { display: flex; flex-direction: row; align-items: center; gap: var(--s3); }
.first-run dk-art { --art-size: 190px; flex: none; }
.first-run .stack-sm { min-width: 0; }
@media (max-width: 640px) { .first-run { flex-direction: column; align-items: flex-start; gap: var(--s1); } .first-run dk-art { --art-size: 140px; } }

/* ---------- The wizard: describe, read, name, done ---------- */
/* A dialog is only as wide as the screen: its form and everything in it may shrink, so a long example
   sentence wraps inside its chip instead of pushing the dialog wider than the phone. */
.wizard, .wizard .dialog-form, .wizard .dialog-body, .wizard .stack, .wizard .stack-sm { min-width: 0; }
.wizard textarea, .wizard .input { max-width: 100%; }
/* Same 24 px inline gutter as .dialog-head and .dialog-body, so the row lines up with the headline above it. */
.wizard-steps { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin: 0; padding-block: var(--s1) 0; padding-inline: 24px; list-style: none; color: var(--ink-3); font-size: var(--t-1); }
.wizard-steps > li { display: inline-flex; align-items: center; gap: var(--s0); }
.wizard-steps > li[data-state="current"] { color: var(--ink); font-weight: 650; }
.wizard-steps > li[data-state="done"] { color: var(--accent-ink); }
.wizard-mark { display: inline-grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; border: 2px solid currentColor; font-size: var(--t-2); font-weight: 700; }
.wizard-mark .ci { --ci-size: 14px; }
.wizard-steps > li[data-state="current"] .wizard-mark { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.wizard-card { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.wizard-card h3 { overflow-wrap: anywhere; }
.wizard-working { display: flex; flex-direction: column; align-items: center; gap: var(--s2); text-align: center; }
.wizard-working dk-art { --art-size: 200px; }
.wizard-working .job-words { width: 100%; }
.wizard .timeline ul { margin: 4px 0 0; padding-inline-start: var(--s3); color: var(--ink-2); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s0); }
.chip-row .chip { max-width: 100%; white-space: normal; text-align: start; overflow-wrap: anywhere; cursor: pointer; }
.app-mark { flex: none; }

/* Work under way with no end the page can know: a band that travels, never a percentage it would invent. */
.job-words { flex: 1; min-width: 0; }
.job-bar { position: relative; height: 6px; margin-top: var(--s1); border-radius: var(--radius-pill); background: var(--field); overflow: hidden; }
.job-bar > span { position: absolute; inset-block: 0; inset-inline-start: 0; width: 38%; border-radius: inherit; background: var(--accent); animation: cai-travel 1.6s var(--ease) infinite; }
@keyframes cai-travel { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
:root[dir="rtl"] .job-bar > span { animation-name: cai-travel-rtl; }
@keyframes cai-travel-rtl { from { transform: translateX(100%); } to { transform: translateX(-270%); } }
@media (prefers-reduced-motion: reduce) { .job-bar > span { animation: none; width: 100%; opacity: .45; } }
:root[data-motion="reduce"] .job-bar > span { animation: none; width: 100%; opacity: .45; }

/* ---------- People ---------- */
.role-list { list-style: none; display: grid; gap: var(--s1); }
.role-list li { display: grid; gap: 2px; }
.role-list span { color: var(--ink-2); }
.team-danger { margin-top: var(--s2); padding-top: var(--s2); border-top: var(--rule-w) solid var(--rule); }
.team-danger h3 { font-size: var(--t1); color: var(--bad); }
.seats-line { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--s2); color: var(--ink-2); }
.copy-row { display: flex; gap: var(--s0); align-items: center; min-width: 0; }
.copy-row .input { flex: 1; min-width: 0; }