/* The track (owner 2026-10-03): Start + ten checks in eleven even columns, bars above circles.
   The wave runs only between the last done position and the next check. Used by the member app
   (components/mb/Ledger.tsx) and the landing page (the same markup). Tokens only, so it works on
   Night and on Paper. */
.mb-track{--bar-h:64px;--circle:48px;position:relative;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:var(--bar-h) auto;row-gap:var(--space-3);container-type:inline-size}

/* bars */
.mb-track__bar{grid-row:1;position:relative;display:block;height:100%}
.mb-track__bar::before{content:"";position:absolute;left:50%;bottom:0;width:2px;height:28%;transform:translateX(-50%);border-radius:2px;background:var(--line-strong)}
.mb-track__bar.is-start::before{height:100%;background:var(--ink)}
.mb-track__bar.is-start::after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--ink);transform:translateX(-50%)}
.mb-track__bar.is-clean::before{height:100%;width:6px;border-radius:3px;background:var(--clean-fill)}
.mb-track__bar.is-notclean::before{height:100%;width:6px;border-radius:3px;background:transparent;border:2px solid var(--ink-muted)}
.mb-track__bar.is-missed::before{height:100%;background:var(--line-strong)}
.mb-track__bar.is-sent::before{height:100%;background:var(--ink)}
.mb-track__bar.is-due::before{height:100%;width:4px;background:var(--accent-ink)}
.mb-track__bar.is-unknown::before{background:repeating-linear-gradient(to top,var(--line-strong) 0 3px,transparent 3px 6px);border-radius:0}
.mb-track__bar.is-void::before{height:8%;opacity:.5}

/* circles: one per check, in the column of its bar */
.mb-track .mb-check{grid-row:2;justify-self:center;width:min(var(--circle),calc(100% - 4px));max-width:none}
.mb-track__start{grid-row:2;grid-column:1;align-self:center;justify-self:center;white-space:nowrap;font-size:11px;letter-spacing:.06em;color:var(--ink)}

/* the wave: what is done, from the Start bar to the last completed check (task 494). One segment per
   done check, the same number of ticks in each, so the density never changes along the wave. */
.mb-track__wave{position:absolute;top:0;height:var(--bar-h);display:flex;align-items:stretch;pointer-events:none}
.mb-track__wave::before{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--accent-ink)}
.mb-track__seg{flex:1 1 0;display:flex;align-items:flex-end;justify-content:space-evenly}
.mb-track__wave i{display:block;width:3px;height:44%;border-radius:2px;background:var(--accent-ink)}
.mb-track[data-wave="run"] .mb-track__wave i{animation:mb-wave 3.2s ease-in-out infinite both;animation-delay:calc(var(--k)*60ms)}
@keyframes mb-wave{0%{height:20%;opacity:.5}12%{height:78%;opacity:1}26%,100%{height:20%;opacity:.5}}

/* sizes */
.mb-track--sm{--bar-h:28px;--circle:28px;row-gap:var(--space-2);max-width:460px}
.mb-track--sm .mb-track__bar.is-clean::before,.mb-track--sm .mb-track__bar.is-notclean::before{width:4px}
.mb-track--sm .mb-track__bar.is-start::after{width:8px;height:8px;top:-4px}
.mb-track--sm .mb-check svg{stroke-width:4}
.mb-phone .mb-track{--bar-h:56px;--circle:40px}
.mb-phone .app-ledger .mb-track{--bar-h:88px}
.app-desk .app-ledger .mb-track{--bar-h:132px;--circle:56px}
.app-motif .mb-track{--bar-h:40px;--circle:32px}

/* A narrow track has no room for the word under the Start bar: it moves below the row, left. */
@container (max-width:759px){
  .mb-track__start{grid-row:3;grid-column:1/-1;justify-self:start;margin-top:calc(var(--space-1)*-1)}
}
@container (max-width:420px){
  .mb-track__bar.is-clean::before,.mb-track__bar.is-notclean::before{width:4px}
}

@media (prefers-reduced-motion:reduce){
  .mb-track .mb-track__wave i{animation:none!important}
}

/* A done check's circle never depends on an animation to be visible (owner report 2026-10-03: the
   clean circle of check 1 was missing while check 2 was requested). The design's pop-in started at
   opacity 0 and held it until it ran; on the track the circles are simply drawn. */
.mb-track .mb-check.is-clean,.mb-track .mb-check.is-clean svg{animation:none}

/* Per-check results (owner 2026-10-04, task 521). Negative is the orange check (.is-clean). The others
   are neutral marks from the tokens, told apart by shape, never by red/green:
   positive = ring with a bar, invalid = ring with "?", failed = solid ring with a cross. */
.mb-check.is-invalid{border:2px solid var(--ink-muted)}
.mb-check.is-invalid::before{content:"?";font:700 15px/1 var(--font-sans,"Familjen Grotesk",system-ui,sans-serif);color:var(--ink-muted)}
.mb-check.is-failed{border:2px solid var(--ink)}
.mb-check.is-failed::before,.mb-check.is-failed::after{content:"";position:absolute;width:44%;height:3px;border-radius:2px;background:var(--ink);transform:rotate(45deg)}
.mb-check.is-failed::after{transform:rotate(-45deg)}
.mb-track__bar.is-invalid::before{height:100%;width:6px;border-radius:3px;background:transparent;border:2px dashed var(--ink-muted)}
.mb-track__bar.is-failed::before{height:100%;width:6px;border-radius:3px;background:var(--ink)}
.mb-track--sm .mb-track__bar.is-invalid::before,.mb-track--sm .mb-track__bar.is-failed::before{width:4px}
.mb-check--one.is-invalid::before{font-size:12px}