/* ==========================================================================
   NSR prototype - diagrams (round 4)
   Two diagrams used to be bare lines with nothing to read them by (the dashes under the approach, the three line drawings in "a project, ongoing
   help, or both"), and nobody could say what they were looking at. Both are now drawn with a key the eye can follow:
   - the approach has a 1-2-3 rail: a numbered node per step, the line behind it filling as the steps go by, dashes for what is still ahead;
   - the project-or-ongoing section has a labelled timeline per arrangement: a pill with a round "done" mark at its end is a project (it finishes),
     a dot with a ring is a one-off job, a run of small dots is monthly work (it repeats). Time runs left to right on all three, and the dots sit
     on the same monthly grid. The words in the diagrams are the section's own: Project, Once, Monthly, Build, Keep improving.
   Everything is round: pills, circles and rounded line ends, as the whole prototype now is.
   ========================================================================== */

/* ---------- A4: the 1-2-3 rail ---------------------------------------------------------------------------------------- */
.step-art { position: relative; height: 56px; margin: 0 0 22px; border: 0; --prog: 0; }
.step-art[data-step="2"] { --prog: 0.5; }
.step-art[data-step="3"] { --prog: 1; }
.sa-base, .sa-fill { position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: var(--r-pill); }
.sa-base { background: radial-gradient(circle at 2px 50%, var(--hair-strong) 1.6px, transparent 2.1px) 0 0 / 10px 100% repeat-x; height: 4px; margin-top: -2px; } /* dots: what is still ahead */
.sa-fill { background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--prog)); }                                                               /* a solid line: what is done */
.sa-node {
  position: absolute; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--fg); background: var(--zone-bg);
  transition: background-color 0.3s var(--e-ui), border-color 0.3s var(--e-ui), box-shadow 0.3s var(--e-ui);
}
.sa-node.n1 { left: 14px; }
.sa-node.n2 { left: 50%; }
.sa-node.n3 { left: calc(100% - 14px); }
.sa-node i { font: normal 12px/1 var(--f-index); color: var(--fg); transition: color 0.3s var(--e-ui); }
.sa-node.is-done { background: var(--fg); }
.sa-node.is-done i { color: var(--zone-bg); }
.sa-node.is-on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 7px rgba(255, 59, 104, 0.2); }
.sa-node.is-on i { color: var(--carbon); }

@media (min-width: 769px) {
  /* the pinned stage shows one rail, under both columns; the other two keep their place so the three steps line up */
  html.js:not(.native) .step-art { grid-column: 1 / -1; grid-row: 2; height: clamp(48px, 6.4svh, 62px); margin: 0; }
  html.js:not(.native) .step:nth-child(n+2) .step-art { visibility: hidden; }
}

/* ---------- A6: a labelled timeline for each arrangement ------------------------------------------------------------------ */
.rel-row { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.rc { --u: calc(100cqw / 12); position: relative; width: 100%; height: clamp(78px, 10.5svh, 108px); container-type: inline-size; color: var(--fg); }
.rc-track { position: absolute; left: 0; right: 10px; top: 68%; height: 2px; margin-top: -1px; border-radius: var(--r-pill); background: var(--hair-strong); transform-origin: 0 50%; }
.rc-track::after { /* a rounded chevron: time runs this way */
  content: ""; position: absolute; right: -12px; top: -5.5px; width: 13px; height: 13px; background: var(--hair-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M4 2l4.5 4.5L4 11' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M4 2l4.5 4.5L4 11' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rc-bar { position: absolute; left: 0; top: calc(68% - 9px); height: 18px; width: calc(var(--bar, 3.5) * var(--u)); border-radius: var(--r-pill); background: var(--fg); transform-origin: 0 50%; }
.rc-end { /* a project finishes: a round mark with a tick in it */
  position: absolute; left: calc(var(--bar, 3.5) * var(--u) - 4px); top: calc(68% - 15px); width: 30px; height: 30px; border-radius: 50%; background: var(--fg); transform-origin: 50% 50%;
}
.rc-end::after {
  content: ""; position: absolute; inset: 0; background: var(--zone-bg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8 7.2-8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.rc-dot { position: absolute; left: 0; top: calc(68% - 10px); width: 20px; height: 20px; border-radius: 50%; background: var(--fg); transform-origin: 50% 50%; } /* a one-off job: a dot with a ring */
.rc-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--hair-strong); }
.rc-ticks { /* monthly work repeats: one small dot a month, on the same grid in every row */
  position: absolute; left: calc(var(--from, 1) * var(--u) - 5px); width: calc(var(--n, 10.5) * var(--u)); top: calc(68% - 5px); height: 10px;
  background-image: radial-gradient(circle at 5px 5px, var(--accent) 4.6px, transparent 5.1px); background-size: var(--u) 10px; background-repeat: repeat-x;
}
.rc-label { position: absolute; top: 0; font-family: var(--f-index); font-weight: var(--w-label); font-size: 11px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--meta); white-space: nowrap; }
.rc-la { left: 0; }
.rc-lb { left: calc(var(--from, 1) * var(--u) - 5px); }
.rc--search { --from: 1; --n: 10.5; }
.rc--both { --bar: 3.5; --from: 4.5; --n: 7.5; }

@media (max-width: 768px) {
  .rel-row { grid-template-columns: 1fr; }
  .rc { height: 84px; }
  .rc-label { font-size: 11.5px; }
  .rc-lb { left: calc(var(--from, 1) * var(--u) + 12px); } /* the second label clears the first on a narrow screen */
  .step-art { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-node, .sa-node i { transition: none; }
}