/* Sizes come from the DailyFlo Typography Standard v1 (src/typography-standard.css):
   captions use <small>, labels use a *-label class. No font-size here on purpose. */
/* Kat customer setup (Onboarding screen).
   Reuses the Brain Control Center surface, label and state-pill language;
   adds only layout, the progress bar and the per-channel status lights. */

.kob { margin: 16px 24px 18px; flex-shrink: 0; }
.kob-head { align-items: flex-start; flex-wrap: wrap; }
.kob-head small { display: block; margin-top: 4px; max-width: 62ch; }
.kob-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.kob-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 16px; }
.kob-tiles > div { border: 1px solid #1d4a66; border-radius: 12px; background: rgba(4, 18, 30, .55); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.kob-tiles b { font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1.1; color: var(--text, #e8f4ff); font-variant-numeric: tabular-nums; }
.kob-tile-label { font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: #8fa9ba; }
.kob-tiles .is-hot { border-color: #80652b; }
.kob-tiles .is-hot b { color: #ffd88b; }
.kob-tiles .is-go { border-color: #207d6e; }
.kob-tiles .is-go b { color: #79f4cf; }

.kob-layout { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr); gap: 14px; align-items: start; }
.kob-clients { display: flex; flex-direction: column; gap: 10px; }

.kob-client { display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; cursor: pointer; border: 1px solid #1d4a66; border-radius: 14px; background: rgba(4, 18, 30, .55); color: inherit; padding: 12px; font: inherit; transition: border-color .15s, box-shadow .15s; }
.kob-client:hover { border-color: #299dda; }
.kob-client.is-selected { border-color: #42d8ff; box-shadow: 0 0 0 1px #42d8ff inset, 0 0 16px rgba(66, 216, 255, .12); }
.kob-client:focus-visible, .kob-step-head:focus-visible { outline: 2px solid #42d8ff; outline-offset: 2px; }
.kob-client-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kob-client-top b { }
.kob-tag { font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: .06em; padding: 4px 7px; border-radius: 99px; color: #c9b8ff; border: 1px solid #5b4a99; background: #221a3d; }
.kob-client-meta { color: #8fa9ba; }
.kob-client-meta strong { color: var(--text, #e8f4ff); font-variant-numeric: tabular-nums; }
.kob-client-meta em { color: #ffd88b; font-style: normal; }
.kob-next { display: flex; flex-direction: column; gap: 2px; color: #c5d6e3; }
.kob-next-label { font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; color: #42d8ff; }

.kob-progress { display: block; height: 7px; border-radius: 99px; background: #0b2536; border: 1px solid #1d4a66; overflow: hidden; }
.kob-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #169cff, #43eaa2); }

.kob-lights { display: flex; gap: 10px; flex-wrap: wrap; }
.kob-light { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; line-height: 1; color: #8fa9ba; }
.kob-light i { width: 8px; height: 8px; border-radius: 50%; background: #2a4556; box-shadow: inset 0 0 0 1px #3a5a6e; }
.kob-light.is-on { color: #79f4cf; }
.kob-light.is-on i { background: #43eaa2; box-shadow: 0 0 8px rgba(67, 234, 162, .6); }
.kob-light.is-work i { background: #e8a030; box-shadow: 0 0 6px rgba(232, 160, 48, .5); }
.kob-light.is-bad { color: #ff9b9b; }
.kob-light.is-bad i { background: #e05555; box-shadow: 0 0 6px rgba(224, 85, 85, .5); }
.kob-light.is-off { color: #5d7686; text-decoration: line-through; }
.kob-light.is-off i { background: transparent; }

.kob-detail { border: 1px solid #1d4a66; border-radius: 14px; background: rgba(4, 18, 30, .55); padding: 14px; min-width: 0; }
.kob-detail-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.kob-detail-label { font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; color: #42d8ff; }
.kob-detail-head h3 { margin: 4px 0 2px; }
.kob-bought { margin: 0; color: #8fa9ba; }
.kob-detail-progress { text-align: right; flex: none; }
.kob-detail-progress b { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.kob-detail-progress small { color: #8fa9ba; }

.kob-phase { margin-top: 12px; }
.kob-phase-label { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; color: #42d8ff; }
.kob-phase-label span + span { color: #8fa9ba; font-variant-numeric: tabular-nums; }
.kob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.kob-step { border: 1px solid #173d55; border-radius: 10px; background: rgba(7, 25, 39, .7); }
.kob-step.is-complete { border-color: #1a5d53; }
.kob-step.is-blocked { border-color: #87333e; }
.kob-step.is-open { border-color: #299dda; }
.kob-step-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.kob-step-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1; color: #8fa9ba; border: 1px solid #2b5778; font-variant-numeric: tabular-nums; }
.kob-step.is-complete .kob-step-num { color: #06231d; background: #43eaa2; border-color: #43eaa2; }
.kob-step-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kob-step-title b { }
.kob-step-title small { color: #8fa9ba; }
.kob-step-head .brain-state { flex: none; }

.kob-step-body { padding: 0 12px 12px 44px; display: flex; flex-direction: column; gap: 10px; }
.kob-why { margin: 0; color: #c5d6e3; }
.kob-how-label, .kob-evidence-label, .kob-proof-label { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; color: #42d8ff; margin-bottom: 4px; }
.kob-how ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; max-width: 75ch; }
.kob-gap { margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid #87333e; background: #2a1216; color: #ffc7c7; line-height: 1.45; }
.kob-blocker { margin: 0; color: #ff9b9b; }
.kob-evidence p { margin: 0 0 3px; color: #c5d6e3; }
.kob-evidence small { color: #8fa9ba; }
.kob-proof textarea, .kob-new input:not([type="checkbox"]) { width: 100%; box-sizing: border-box; border: 1px solid #2b5778; border-radius: 8px; background: #06182a; color: var(--text, #e8f4ff); padding: 8px 10px; font: inherit; }
.kob-proof textarea:focus, .kob-new input:focus { outline: 2px solid #42d8ff; outline-offset: 1px; }
.kob-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kob-locked { margin: 0; color: #ffd88b; }
.kob-error { margin: 0; color: #ff9b9b; }
.kob-empty { padding: 18px; }
.kob-empty p { margin: 4px 0 0; }

.kob-new { border: 1px solid #299dda; border-radius: 14px; background: rgba(4, 18, 30, .7); padding: 14px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 12px; }
.kob-new-head h3 { margin: 0 0 4px; }
.kob-new-head p { margin: 0; color: #8fa9ba; max-width: 70ch; }
.kob-new-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kob-new-grid label > span { display: block; color: #8fa9ba; margin-bottom: 4px; }
.kob-new-grid .kob-wide { grid-column: 1 / -1; }
.kob-check { grid-column: 1 / -1; }
.kob-services { border: 1px solid #1d4a66; border-radius: 10px; padding: 8px 10px 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px; margin: 0; }
.kob-services legend { font-family: "IBM Plex Mono", monospace; font-weight: 700; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; color: #42d8ff; padding: 0 4px; }

@media (max-width: 900px) {
  .kob-layout { grid-template-columns: 1fr; }
  .kob-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kob { margin: 12px 12px 16px; padding: 14px; }
  .kob-website-title { margin: 6px 12px 10px; }
  .kob-detail { padding: 10px; }
  .kob-step-head { flex-wrap: wrap; row-gap: 6px; }
  .kob-step-title { flex-basis: calc(100% - 40px); }
  .kob-step-head .brain-state { margin-left: 34px; }
  .kob-new-grid { grid-template-columns: 1fr; }
  .kob-step-body { padding-left: 12px; }
  .kob-detail-head { flex-direction: column; }
  .kob-detail-progress { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .kob-client { transition: none; }
}

.kob-website-title { margin: 6px 24px 10px; }