/* Control Room — the wizard "New client / New campaign" (web/onboarding.js): one question per screen, large and calm. Everything hangs on .ob; the colours are the app's own tokens. */

.ob { max-width: 700px; margin: 0 auto; padding-bottom: 28px; }
.ob .large-title { margin-bottom: 8px; }

/* ------------------------------------------------------------------ the top: where you are, in which cabinet, and the way out */
.ob-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 30px; }
.ob-prog { flex: 1 1 300px; min-width: 0; }
.ob-prog > span { display: block; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.ob-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.ob-dots i { height: 6px; border-radius: 3px; background: var(--sunk); transition: background-color .25s var(--ease); }
.ob-dots i.past { background: var(--cobalt-soft); }
.ob-dots i.cur { background: var(--cobalt); }
.ob-dots i.wr.past { background: var(--moss); opacity: .55; }
.ob-cab { display: flex; align-items: center; gap: 2px; font-size: 14.5px; color: var(--ink-3); }
.ob-cab b { color: var(--ink-2); font-weight: 600; }
.ob-close { display: grid; place-items: center; width: 40px; height: 40px; margin-left: 4px; border-radius: 50%; color: var(--ink-3); }
.ob-close:hover { background: var(--sunk); color: var(--ink); }

/* ------------------------------------------------------------------ the question */
.ob-q { margin: 0 0 12px; font: 700 clamp(30px, 5vw, 42px)/1.12 var(--display); letter-spacing: -.015em; outline: none; text-wrap: balance; }
.ob-why { margin: 0 0 34px; max-width: 56ch; font-size: 18px; line-height: 1.55; color: var(--ink-2); }
.ob-body { display: flex; flex-direction: column; gap: 6px; }

/* ------------------------------------------------------------------ fields */
.ob-f { margin: 0 0 26px; }
.ob-l { display: block; margin: 0 0 8px; font-size: 16px; font-weight: 600; }
.ob-hint { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.ob-inp { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; font-size: 17px; }
textarea.ob-inp { padding: 13px 16px; line-height: 1.5; }
.ob-inp[type="number"] { max-width: 180px; }
.ob-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ob-row .ob-inp { flex: 1 1 220px; }
.ob-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
@media (max-width: 640px) { .ob-two { grid-template-columns: 1fr; } }
.ob-static { padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 17px; font-weight: 600; }
.ob-size label { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); }
.ob-size .ob-inp { max-width: 140px; }
.ob-tags { min-height: 52px; padding: 8px 10px; border-radius: 14px; }
.ob-tags .pr-tag { height: 34px; font-size: 15px; }
.ob-tags .pr-tag-in { height: 34px; font-size: 16px; }
.ob-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.ob-picks .chip { min-height: 44px; padding: 0 18px; font-size: 16px; border-radius: 22px; }
.ob-picks .chip[aria-pressed="true"] { background: var(--cobalt); color: var(--on-accent); }
.ob-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 2px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-sub > span { width: 100%; font-size: 14px; font-weight: 600; color: var(--ink-3); }
.ob-sub .ob-picks { margin: 0; }
.ob-sub .chip { min-height: 38px; font-size: 14.5px; }

/* ------------------------------------------------------------------ cards to choose one of */
.ob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.ob-card { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; text-align: left; padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); transition: box-shadow .15s, background-color .15s; }
.ob-card b { font-size: 16.5px; }
.ob-card span { font-size: 14.5px; line-height: 1.45; color: var(--ink-3); }
.ob-card:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.ob-card.on { background: var(--cobalt-soft); box-shadow: inset 0 0 0 2px var(--cobalt); }
.ob-card.on b { color: var(--cobalt-ink); }
.ob-card.off { opacity: .6; cursor: not-allowed; }
.ob-cards.c4 { grid-template-columns: repeat(4, 1fr); }
.ob-cards.c5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 640px) { .ob-cards.c4, .ob-cards.c5 { grid-template-columns: repeat(2, 1fr); } }

/* ------------------------------------------------------------------ notes */
.ob-note { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; font-size: 15.5px; line-height: 1.5; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-note.sim { background: var(--cobalt-soft); color: var(--cobalt-ink); box-shadow: none; }
.ob-note.warn { background: var(--amber-soft); color: var(--amber-ink); box-shadow: none; }
.ob-note.info { background: var(--surface-2); }
.ob-note .btn { margin-left: 8px; }
.ob-answer { margin: 38px 0 0; padding: 22px 24px; border-radius: 18px; background: var(--moss-soft); color: var(--ink); }
.ob-answer b { display: block; margin-bottom: 6px; font-size: 17px; color: var(--moss); }
.ob-answer p { margin: 0; font-size: 16px; line-height: 1.55; }
.ob-keyhint { margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: var(--amber-soft); color: var(--amber-ink); font-size: 14.5px; line-height: 1.5; }
.ob-keyhint a { text-decoration: underline; }
.ob-skel { height: 160px; border-radius: 18px; background: linear-gradient(90deg, var(--sunk), var(--surface-2), var(--sunk)); background-size: 200% 100%; animation: ob-sh 1.4s linear infinite; }
@keyframes ob-sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ob-skel { animation: none; } }

/* ------------------------------------------------------------------ folds, lists, tables */
.ob-fold { margin: 6px 0 22px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-fold > summary { display: flex; align-items: center; min-height: 54px; padding: 0 20px; cursor: pointer; font-weight: 600; font-size: 16px; list-style: none; }
.ob-fold > summary::-webkit-details-marker { display: none; }
.ob-fold > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.ob-fold[open] > summary::after { transform: rotate(-135deg); }
.ob-fold > :not(summary) { margin-left: 20px; margin-right: 20px; }
.ob-fold > :last-child { margin-bottom: 18px; }
.ob-fold h3 { margin: 4px 0 6px; font-size: 15px; color: var(--ink-3); text-transform: none; }
.ob-fold ul { margin: 0 0 8px; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.ob-fold li { margin: 4px 0; }
.ob-src { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.ob-src li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.45; }
.ob-src li > span:last-child { min-width: 0; }
.ob-src li b { display: block; font-size: 15.5px; }
.ob-src li.off { opacity: .75; }
.ob-pill { flex: none; min-width: 42px; text-align: center; margin-top: 1px; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--moss-soft); color: var(--moss); }
.ob-src li.off .ob-pill { background: var(--sunk); color: var(--ink-3); }
.ob-est h3 { margin: 22px 0 10px; font-size: 18px; }
.ob-est h3:first-child { margin-top: 4px; }
.ob-lines { margin: 0; padding-left: 20px; font-size: 16px; line-height: 1.55; }
.ob-lines li { margin: 5px 0; }
.ob-check { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.ob-check input { flex: none; width: 22px; height: 22px; margin-top: 2px; accent-color: var(--cobalt); }
.ob-check b { display: block; font-size: 16px; }
.ob-check small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.ob-checks { display: grid; gap: 10px; }
.ob-checks .ob-check { margin: 0; }
.ob-tbl { width: calc(100% - 40px); border-collapse: collapse; font-size: 14.5px; }
.ob-tbl th { text-align: left; font-weight: 600; color: var(--ink-3); padding: 6px 8px; }
.ob-tbl td { padding: 6px 8px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------------------ step 1, 2: the site box, the proposal of Claude */
.ob-site, .ob-prop { margin: 0 0 22px; padding: 16px 18px; border-radius: 16px; background: var(--cobalt-soft); color: var(--ink); }
.ob-site b, .ob-prop b { display: block; margin-bottom: 6px; color: var(--cobalt-ink); }
.ob-site p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.5; }
.ob-site small, .ob-prop small { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.ob-prop-r { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; }
.ob-prop-r:first-of-type { border-top: 0; }
.ob-prop-r .btn { flex: none; }
.ob-helpbox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 4px 0 20px; }
.ob-helpbox small { flex: 1 1 260px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.ob-example { margin: 0 0 24px; }
.ob-example .btn { white-space: normal; height: auto; min-height: 50px; padding: 10px 20px; text-align: left; line-height: 1.35; }

/* ------------------------------------------------------------------ step 3: the job titles */
.ob-role { margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-role-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; }
.ob-role-h b { flex: 1 1 160px; font-size: 17px; }
.ob-role-h .sel { min-height: 40px; }
.ob-role .ob-tags { min-height: 46px; }

/* ------------------------------------------------------------------ step 5: the run, the companies */
.ob-run { margin: 6px 0 18px; align-items: center; }
.ob-job { margin: 0 0 18px; padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-job.running { box-shadow: inset 0 0 0 2px var(--cobalt); }
.ob-job-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 10px; }
.ob-nums { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; color: var(--ink-3); }
.ob-nums b { color: var(--ink); font-size: 18px; }
.ob-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ob-steps li { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px; color: var(--ink-3); }
.ob-steps li.running { background: var(--cobalt-soft); color: var(--cobalt-ink); font-weight: 600; }
.ob-steps li.done { color: var(--moss); }
.ob-steps small { font-size: 12.5px; min-height: 16px; }
.ob-sum { margin: 0 0 16px; font-size: 16px; line-height: 1.5; }
.ob-list-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 12px; }
.ob-cos { display: grid; gap: 10px; }
.ob-co { padding: 16px 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-co.go { box-shadow: inset 0 0 0 2px var(--moss); }
.ob-co.nogo { opacity: .7; }
.ob-co-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ob-co-h b { font-size: 17px; }
.ob-meta { flex: 1 1 200px; min-width: 0; font-size: 14.5px; color: var(--ink-3); }
.ob-why2 { margin: 8px 0 4px; font-size: 15.5px; line-height: 1.5; }
.ob-why2 i { color: var(--amber-ink); font-style: normal; font-weight: 600; }
.ob-src2 { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-3); }
.ob-src2 a { color: var(--cobalt-ink); text-decoration: underline; }
.ob-co-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-co-a .sel { min-height: 42px; }
.btn.good { background: var(--moss); color: #fff; }

/* ------------------------------------------------------------------ step 6: the people */
.ob-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 6px 0 20px; }
.ob-stats > div { padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-stats b { display: block; font-size: 26px; font-family: var(--display); }
.ob-stats span { font-size: 13.5px; color: var(--ink-3); }
.ob-grp { margin: 0 0 22px; }
.ob-grp > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; font-size: 19px; }
.ob-grp > h3 small { font-size: 14px; font-weight: 400; color: var(--ink-3); }
.ob-pe { margin: 0 0 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-pe-h { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; }
.ob-pe-h b { font-size: 17px; }
.ob-pe-h span { font-size: 15px; color: var(--ink-2); }
.ob-pe-m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 4px; }
.ob-pe-m small { flex: 1 1 100%; font-size: 13.5px; color: var(--ink-3); }
.ob-addr { font-size: 15px; font-weight: 600; word-break: break-all; }
.ob-pe-a { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ob-emailbox { margin: 12px 0 0; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.ob-emailbox textarea { width: 100%; }
.ob-found { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.ob-found li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; word-break: break-all; }
.ob-found small { display: block; font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------------ the bar at the bottom: back, saved, next */
.ob-err { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--brick-soft); color: var(--brick); font-size: 15px; line-height: 1.45; }
.ob-err[data-kind="info"] { background: var(--surface-2); color: var(--ink-2); }
.ob-foot { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 30px -16px 0; padding: 14px 16px calc(14px + var(--safe-b)); background: linear-gradient(to top, var(--bg) 70%, transparent); }
.ob-foot .btn { min-height: 52px; padding: 0 26px; font-size: 17px; }
.ob-foot .btn.primary { margin-left: auto; }
.ob-saved { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }
@media (max-width: 899px) { .ob-foot { bottom: calc(var(--tab-h) + var(--safe-b)); padding-bottom: 12px; } .ob-saved { display: none; } .ob-foot .btn.primary { flex: 1; } }

/* ------------------------------------------------------------------ the start screen and the end */
.ob-cardlist { display: grid; gap: 14px; margin: 6px 0 8px; }
.ob-start-card { display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); text-align: left; transition: box-shadow .15s, transform .12s; }
.ob-start-card:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--cobalt); }
.ob-start-card:active:not(:disabled) { transform: scale(.995); }
.ob-start-card:disabled { opacity: .6; cursor: not-allowed; }
.ob-start-card .av { width: 52px; height: 52px; flex: none; }
.ob-sc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ob-sc-b b { font-size: 19px; }
.ob-sc-b span { font-size: 15.5px; line-height: 1.5; color: var(--ink-3); }
.ob-sc-b em { font-size: 14px; color: var(--amber-ink); font-style: normal; }
.ob-sc-go { display: flex; align-items: center; gap: 4px; flex: none; font-weight: 600; color: var(--cobalt-ink); }
@media (max-width: 640px) { .ob-start-card { flex-wrap: wrap; padding: 18px; } .ob-sc-go { width: 100%; justify-content: flex-end; } }
.ob-drafts { margin-top: 32px; }
.ob-next { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 12px; }
.ob-next li { padding: 16px 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 16.5px; line-height: 1.5; }
.ob-next li b { display: inline; }
.ob-next a { color: var(--cobalt-ink); text-decoration: underline; }
.ob-where { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 18px; }
.ob-where .btn { min-height: 52px; padding: 0 28px; }

/* ------------------------------------------------------------------ the doors on Today and in Search */
.ob-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 22px 0 6px; padding: 18px 20px; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ob-entry.empty { background: var(--cobalt-soft); box-shadow: none; padding: 24px; }
.ob-entry .av { width: 48px; height: 48px; flex: none; }
.ob-entry-b { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ob-entry-b b { font-size: 17.5px; }
.ob-entry-b span { font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.ob-entry.empty .ob-entry-b span { color: var(--ink-2); }
.ob-entry-a { display: flex; flex-wrap: wrap; gap: 10px; }

.ob-link { display: inline-block; margin: 8px 0 0; padding: 0; font-size: 14px; font-weight: 600; color: var(--cobalt-ink); text-decoration: underline; text-underline-offset: 3px; }
.ob-cost { margin: 0 0 10px; }
.ob-answer { margin: 0 0 20px; }
.ob-start .ob-answer { margin-top: 38px; }
.btn.plain.danger { color: var(--brick); }

.ob-recap { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 8px; }
.ob-recap li { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.45; }
.ob-recap li b { display: block; font-size: 16px; }
.ob-recap li a { flex: none; color: var(--cobalt-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ob-done .sec-h { margin: 8px 2px 12px; }

.ob-foot .ob-err { flex: 0 0 100%; order: -1; }

/* the standalone app has no list of all clients (its server refuses it); the switcher shows once the wizard has made a second client, and goes back and forth between them */
body.standalone .sb-clients { display: none; }

/* a door from Start (#/onboarding/<draft>/offer/docs) points at the box for the client's documents */
.ob-docbox.ob-spot { outline: 3px solid var(--accent, #88241E); outline-offset: 6px; border-radius: 12px; transition: outline-color .4s; }