/*
    THE FIRST-RUN CHECKLIST'S OWN STYLESHEET.

    Everything Components/Shared/GettingStarted.razor needs and nothing else, both variants: the
    full block a new team's workspace opens with, and the compact one the dashboard carries.

    IT IS REMOVED FROM THE PAGE ONCE THE LAST STEP IS DONE, never collapsed. A checklist that stays
    after the last tick becomes chrome somebody looks past every day, which is the same failure as
    guidance that has to be scrolled past - and the compact variant exists because four steps with a
    paragraph each, above the KPI row and the project table, is exactly that.

    WHAT IT DOES NOT OWN. .sv-card, .sv-btn and .sv-badge are utilities and stay in utilities.css.
*/

/* The first-run checklist. Removed from the page entirely once all three steps
   are done, rather than collapsed - a checklist that stays after the last tick
   becomes chrome somebody looks past every day. */
.sv-onboarding {
  margin-bottom: var(--sv-space-6);
}

.sv-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sv-space-5);
}

.sv-checklist li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sv-space-4);
  align-items: start;
}

/* The step number, or a tick once it is done. A shape, so it takes the FILL
   token rather than the text one - the accent measures about 2:1 on paper and
   is unreadable as small text on the light surface. */
.sv-checklist__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sv-radius-pill);
  border: 1px solid var(--sv-border);
  font: 500 12px/1 var(--sv-font-mono);
  color: var(--sv-text-secondary);
  background: var(--sv-bg-sunken);
}

.sv-checklist li.is-done .sv-checklist__mark {
  border-color: var(--sv-accent-fill);
  background: var(--sv-accent-fill);

  /* The surface knocking through, like the logo's scoring lines - not white,
     which would be wrong in dark mode. */
  color: var(--sv-bg-raised);
}

.sv-checklist li strong {
  font: 500 14px/1.4 var(--sv-font-sans);
  color: var(--sv-text);
}

/* A completed step keeps its text at full contrast and only loses emphasis.
   Greying it out would make the list harder to read precisely as it fills up. */
.sv-checklist li.is-done strong {
  color: var(--sv-text-secondary);
  font-weight: 400;
}

.sv-checklist li p {
  margin: var(--sv-space-2) 0 var(--sv-space-3);
  font: 400 13px/1.6 var(--sv-font-sans);
  color: var(--sv-text-secondary);
  max-width: 68ch;
}

/* Every step is a link, because a checklist that names a page without going to
   it makes the reader navigate twice. Styled as the step title rather than as a
   link: four underlined blue-ish rows would read as a nav block, not a list of
   things to do. The affordance is the hover. */
.sv-checklist__link {
  font: 500 14px/1.4 var(--sv-font-sans);
  color: var(--sv-text);
  text-decoration: none;
}

.sv-checklist__link:hover,
.sv-checklist__link:focus-visible {
  color: var(--sv-accent);
  text-decoration: underline;
}

.sv-checklist li.is-done .sv-checklist__link {
  color: var(--sv-text-secondary);
  font-weight: 400;
}

/* ── The compact checklist ────────────────────────────────────────────────────
   The dashboard variant. It was reported as swallowing the page - four steps,
   each with a paragraph, above the KPI row and the project table - and the
   complaint is right: guidance that has to be scrolled past every day stops
   being guidance. Rows tighten, and the razor renders the explanation only on
   the step that is actually next, so the block is one readable instruction and
   three one-line reminders rather than four essays. */
.sv-checklist--compact {
  gap: var(--sv-space-2);
}

.sv-checklist--compact li {
  align-items: center;
  padding: var(--sv-space-2) 0;
  grid-template-columns: 22px minmax(0, 1fr);
}

.sv-checklist--compact .sv-checklist__mark {
  width: 22px;
  height: 22px;
  font-size: 11px;
}

/* The next step keeps its explanation, so it is the only row that is not a
   single line. Aligning it to the top stops the mark drifting to the middle of
   a two-line block. */
.sv-checklist--compact li.is-next {
  align-items: start;
}

.sv-checklist--compact li p {
  margin: var(--sv-space-1) 0 0;
}