/* Onboarding redesign — component styles, layered on styles.css the same way
   css/tasks.css is. The control bar (.ts-bar / .ts-seg / .ts-search), the group
   scaffolding (.ts-groups / .ts-group-head / .ts-rows) and the count line
   (.ts-count) are reused from css/tasks.css rather than duplicated: an
   onboarding row is meant to read as the same kind of object as a task row.
   Only what those don't cover lives here — the summary sentence, the ten-step
   dot strip, the schedule cell and slip pill, and the severity row tint. */

.onb-wrap { display: block; }

/* the group stack sits a touch further apart than the Tasks list: an onboarding
   group carries a note beside its label, so it needs the extra breathing room */
.onb-groups { gap: 20px; }
.onb-wrap .ts-group-head { gap: 9px; }

/* ---------- the summary sentence (replaces the three stat tiles) ----------
   A count, the two numbers that mean something — both of which are also the
   filters — and a live-computed reassurance clause. */
.onb-summary {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 14.5px; margin-bottom: 14px;
}
.onb-sum-n { font-weight: 650; color: var(--ink); }
.onb-sum-bad, .onb-sum-ok {
  font-weight: 750; text-decoration: underline; text-underline-offset: 4px;
}
.onb-sum-bad { color: var(--red); text-decoration-color: var(--red-line); }
.onb-sum-ok { color: var(--green); text-decoration-color: var(--green-line); }
.onb-sum-bad:hover { text-decoration-color: var(--red); }
.onb-sum-ok:hover { text-decoration-color: var(--green); }
.onb-sum-sep { color: var(--faint); }
.onb-sum-note { font-size: 13px; color: var(--faint); }

/* ---------- control bar extras ---------- */
.onb-csm {
  flex: none; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; cursor: pointer;
}
.onb-csm:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-bg); }
.onb-add {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  background: var(--ink); color: #fff; border-radius: 10px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  transition: background .12s;
}
.onb-add:hover { background: #223145; color: #fff; }

/* the definition note: the only place the new model is spelled out, so it sits
   above the list rather than under it */
.onb-note {
  font-size: 11.5px; color: var(--faint); line-height: 1.55; margin: 0 0 16px;
}
.onb-note a { color: var(--muted); font-weight: 650; }
.onb-note a:hover { text-decoration: underline; }

/* ---------- group headers ---------- */
.onb-gdot { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; }
.onb-ghead.bad .onb-gdot { background: var(--red); }
.onb-ghead.ok .onb-gdot { background: var(--green); }
.onb-ghead.none .onb-gdot { background: var(--faint); }
.onb-glabel { font-size: 13.5px; font-weight: 750; letter-spacing: -.1px; color: var(--ink); }
.onb-gn { font-size: 12px; font-weight: 700; color: var(--faint); font-variant-numeric: tabular-nums; }
.onb-gnote { font-size: 11.5px; color: var(--faint); }

/* ---------- the row ---------- */
.onb-row {
  border-radius: 10px; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.onb-row:hover { border-color: #c8d2de; box-shadow: var(--shadow); }
/* two or more steps behind tints the whole row — the one state worth seeing
   before you've read a word of it */
.onb-row.sev { background: #fffbfb; border-color: #f3cccc; }
.onb-row.sev:hover { border-color: #e7b4b4; }

.onb-main { display: flex; align-items: center; gap: 13px; padding: 12px 15px; min-width: 0; }

/* client avatar, carrying her health status as a ring (the one thing the
   redesign doesn't otherwise repeat on the row) */
.onb-av {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--grey-bg); color: var(--muted);
  font-size: 11.5px; font-weight: 750;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 2px var(--line);
}
.onb-av[data-st="On Track"] { box-shadow: inset 0 0 0 2px var(--green-line); }
.onb-av[data-st="Watch"]    { box-shadow: inset 0 0 0 2px var(--amber-line); }
.onb-av[data-st="At Risk"]  { box-shadow: inset 0 0 0 2px var(--red-line); }

.onb-title { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.onb-t1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onb-t2 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.onb-name { font-size: 13.5px; font-weight: 650; color: var(--ink); }
.onb-name:hover { text-decoration: underline; }
.onb-prog {
  flex: none; font-size: 10.5px; font-weight: 700; color: var(--muted);
  background: var(--grey-bg); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
}
.onb-lc { flex: none; font-size: 11.5px; color: var(--faint); }
.onb-steps {
  font-size: 11.5px; color: var(--muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- the ten-step dot strip ----------
   One button per step: the vertical padding is the hit target, the visible bar
   is only 6px tall. No animation on the toggle — instant feedback is the point. */
.onb-dots { display: inline-flex; gap: 3px; flex: none; }
.onb-dot {
  border: 0; background: none; padding: 4px 0; margin: 0; cursor: pointer;
  display: inline-flex; align-items: center; border-radius: 3px;
}
.onb-bar { display: block; width: 14px; height: 6px; border-radius: 2px; }
.onb-dot.on   .onb-bar { background: var(--green); }
.onb-dot.late .onb-bar { background: var(--red-line); box-shadow: inset 0 0 0 1px #e6a9a9; }
.onb-dot.todo .onb-bar { background: var(--line); }
/* the strip is discoverable on hover, and every dot keeps a real focus ring */
.onb-dot:hover .onb-bar { outline: 1px solid var(--muted); outline-offset: 1px; }
.onb-dot:focus { outline: none; }
.onb-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* ---------- schedule cell ---------- */
.onb-sched {
  flex: none; width: 104px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 3px;
}
.onb-day { font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* past the window there's no denominator left to show — the day stands alone,
   in the same red the slip pill is already carrying */
.onb-day.over { color: var(--red); }
.onb-pill {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  border-radius: 6px; padding: 1px 7px; border: 1px solid;
}
.onb-pill.ok   { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.onb-pill.bad  { color: var(--red);   background: var(--red-bg);   border-color: var(--red-line); }
.onb-pill.warn { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.onb-pill.none { color: var(--faint); background: var(--bg);       border-color: var(--line); }

/* the same hairline and 60px owner cell the task row uses, so the two views' rows align */
.onb-div { width: 1px; height: 30px; background: var(--line); flex: none; }
.onb-owner { flex: none; width: 60px; display: flex; align-items: center; justify-content: center; }

/* ---------- action cell: exactly one button ---------- */
.onb-act { flex: none; width: 196px; display: flex; justify-content: flex-end; }
.onb-grad, .onb-next {
  font: inherit; cursor: pointer; border-radius: 8px; padding: 7px 13px;
  white-space: nowrap; transition: background .12s, border-color .12s;
}
.onb-grad {
  font-size: 12px; font-weight: 700;
  background: var(--green-bg); border: 1px solid var(--green-line); color: var(--green);
}
.onb-grad:hover { background: #d6efe0; }
.onb-next {
  font-size: 12px; font-weight: 650; max-width: 196px;
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis;
}
.onb-next:hover { background: var(--bg); border-color: #c8d2de; color: var(--ink); }

.onb-chev { flex: none; display: inline-flex; color: #cdd5df; transition: color .12s, transform .12s; }
.onb-chev svg { stroke: currentColor; }
.onb-row:hover .onb-chev { color: var(--faint); transform: translateX(2px); }

/* ---------- narrow screens ----------
   Shed the fixed-width trimmings in order — chevron, owner cell, divider, then
   "last contact" and the program chip — and let the title cluster and dot strip
   keep the width. The strip is the last thing to go; below ~520px the
   "N of 10 steps" text carries it alone. */
@media (max-width: 900px) {
  .onb-chev, .onb-owner, .onb-div { display: none; }
  .onb-act { width: auto; }
}
@media (max-width: 700px) {
  .onb-lc, .onb-prog { display: none; }
  .onb-sched { width: auto; }
}
@media (max-width: 520px) {
  .onb-dots { display: none; }
  .onb-main { flex-wrap: wrap; }
  .onb-act { width: 100%; justify-content: flex-start; }
}