/* Getting-started checklist on the overview.
   Owned by the first-run workstream. Every colour is a custom property from
   app.css, so light and dark both hold and nothing here is hard-coded. All
   class names are prefixed `ob-` so they cannot collide with the shared
   design system or another workstream's stylesheet. */

/* The mount sits between the page head and the stat row. It carries no box of
   its own: the panel inside it is a `.block` like everything else on the page,
   so the checklist reads as part of the overview rather than as an
   interruption pinned over it. */
.ob-mount { display: block; }

/* ---------- panel ---------- */

/* One accent edge is the whole difference from a plain block. A new workspace
   should be able to find this without it shouting. */
.ob-panel {
  border-left: 3px solid var(--accent);
  display: grid;
  gap: 4px;
}

.ob-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}
.ob-head-text { display: grid; gap: 3px; }
.ob-head-text h2 { font-size: 16px; }
.ob-head-text h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ob-head-text p { max-width: 62ch; }

.ob-head-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* ---------- progress ---------- */

.ob-progress { display: grid; gap: 5px; justify-items: end; }
.ob-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* One segment per step, filled by a class rather than a width, so the page
   needs no inline style under a Content-Security-Policy that forbids one. */
.ob-track { display: flex; gap: 3px; }
.ob-seg {
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--line-strong);
}
.ob-seg-on { background: var(--accent); }

.ob-hide { font-size: 15px; line-height: 1; }
.ob-hide:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- steps ---------- */

/* Doubled class so the reset beats `.steps` whatever order the feature
   stylesheets happen to be linked in. */
.ob-steps.steps { list-style: none; padding: 0; margin: 14px 0 0; }
.ob-step { align-items: start; }

/* `.step b` in app.css is already the numbered circle; only the finished and
   waiting states differ here. */
.ob-mark { font-weight: 700; }
.ob-step-done .ob-mark {
  background: var(--ok-soft);
  color: var(--ok);
}

/* Steps beyond the one in hand stay legible but quiet, so the eye lands on
   the next thing to do rather than on the whole list at once. */
.ob-step:not(.ob-step-current):not(.ob-step-done) .ob-mark {
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
}
.ob-step-done .ob-step-body strong { color: var(--ink-2); }

.ob-step-body { display: grid; gap: 2px; }
.ob-step-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px; }

/* ---------- collapsed bar ---------- */

.ob-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
}
.ob-bar-text { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }

/* ---------- finished ---------- */

.ob-finished { border-left-color: var(--ok); }
.ob-finished h2 { font-size: 16px; }
.ob-finished p { max-width: 62ch; }

/* ---------- assistive text ---------- */

/* "Done:" and "To do:" belong in the accessible name of every step - the tick
   glyph is decoration and is hidden from the accessibility tree. */
.ob-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  .ob-head { flex-direction: column; }
  .ob-head-side { align-self: stretch; justify-content: space-between; }
  .ob-progress { justify-items: start; }
}