/* PulsarERP — getting started: the steps on a line, each lit as it enters the screen, with what is needed
   from the customer beside them. Drawn screens use the paper tokens; every figure in them is fictional. */

.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem); gap: var(--space-8); align-items: start; }

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

.timeline { list-style: none; padding: 0; position: relative; display: grid; gap: var(--space-8); }
.timeline::before {
  content: ""; position: absolute; top: 1.25rem; bottom: 1.25rem; inset-inline-start: calc(1.25rem - 0.5px);
  border-inline-start: 1px dashed var(--line-strong);
}
.step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-5); }
.step-dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg);
  font-family: var(--font-mono); font-size: var(--fs-small); color: var(--muted);
  transition: background-color 600ms var(--ease-out) 200ms, color 600ms var(--ease-out) 200ms, border-color 600ms var(--ease-out) 200ms;
}
.step.is-in .step-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.step-body { display: grid; gap: var(--space-3); padding-block-start: 0.35rem; }
.step-who { display: inline-flex; align-items: center; gap: var(--space-2); justify-self: start; padding: 1px var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: var(--fs-small); color: var(--muted); }
.step-title { font-family: var(--font-display); font-size: var(--fs-answer); font-weight: 600; line-height: var(--lh-snug); letter-spacing: 0; }
.step-body > p { max-width: 36rem; color: var(--ink-2); text-wrap: pretty; }
.step-body .mock { justify-self: start; width: min(100%, 30rem); margin-block-start: var(--space-3); }
.step-final .step-title { font-size: var(--fs-h2); }

.mock { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.mock .num { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--paper-muted); }

/* -- reading the structure -- */
.scan-head { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.scan-spin { width: 0.85rem; height: 0.85rem; border-radius: 50%; border: 2px solid var(--paper-track); border-top-color: var(--paper-accent); animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.scan-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.scan-list li { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px var(--space-3); border-radius: var(--radius-pill); background: var(--paper-chip); color: var(--paper-muted); font-size: var(--fs-label); }
.scan-list li.done { background: color-mix(in srgb, var(--ok) 12%, var(--paper)); color: var(--ok); }
.scan-list li.now { box-shadow: inset 0 0 0 1px var(--paper-accent); color: var(--paper-accent); }
.scan-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-label); color: var(--paper-muted); }

/* -- one question of the interview -- */
.iv-tag { font-size: var(--fs-label); color: var(--paper-muted); }
.iv-q { font-family: var(--font-display); font-size: var(--fs-lead); font-weight: 500; line-height: var(--lh-snug); }
.iv-options { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
.iv-options li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--paper-muted); }
.iv-options li.is-on { background: var(--paper-2); color: var(--paper-ink); }
.box { display: grid; place-items: center; width: 1rem; height: 1rem; border: 1px solid var(--paper-line); border-radius: 4px; font-size: 0.75rem; color: transparent; }
.is-on .box { background: var(--paper-accent); border-color: var(--paper-accent); color: var(--paper); }
.iv-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block-start: var(--space-3); border-block-start: 1px solid var(--paper-line); font-size: var(--fs-label); color: var(--paper-muted); }
.iv-btn { padding: 2px var(--space-4); border-radius: var(--radius-pill); background: var(--paper-accent); color: var(--paper); font-weight: 600; }

/* -- fields of one role -- */
.fields-head { font-size: var(--fs-small); font-weight: 600; }
.fields-head span { font-weight: 400; color: var(--paper-muted); }
.fields-list { list-style: none; padding: 0; display: grid; }
.fields-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-2); border-block-start: 1px solid var(--paper-line); font-size: var(--fs-small); }
.toggle { position: relative; width: 2rem; height: 1.1rem; border-radius: var(--radius-pill); background: var(--paper-track); }
.toggle::after { content: ""; position: absolute; top: 2px; inset-inline-end: 2px; width: calc(1.1rem - 4px); height: calc(1.1rem - 4px); border-radius: 50%; background: var(--paper); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
.toggle.is-on { background: var(--ok); }
.toggle.is-on::after { inset-inline-end: auto; inset-inline-start: 2px; }
.fields-list .is-hidden { color: var(--paper-warn); }

/* ---- Beside the steps: what we need from you ---- */

.need-card {
  position: sticky; top: 6rem;
  padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface);
}
.need-card h2 { font-size: var(--fs-answer); margin-block-end: var(--space-5); }
.need-list { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.need-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }
.need-list svg { margin-block-start: 0.3em; color: var(--accent); }
.need-list strong { display: block; color: var(--ink); font-weight: 600; }
.need-not { margin-block-start: var(--space-5); padding-block-start: var(--space-5); border-block-start: 1px solid var(--line); color: var(--muted); }
.need-not strong { color: var(--ink); font-weight: 600; }
.need-card .button { margin-block-start: var(--space-5); width: 100%; justify-content: center; }

/* ---- Narrow screens ---- */

@media (max-width: 64rem) {
  .start-grid { grid-template-columns: 1fr; }
  .need-card { position: static; }
}
@media (max-width: 40rem) {
  .timeline { gap: var(--space-7); }
  .step { grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-4); }
  .step-dot { width: 2.25rem; height: 2.25rem; }
  .timeline::before { inset-inline-start: calc(1.125rem - 0.5px); }
  .need-card { padding: var(--space-5); }
}