/* ARI Showcase R7: the one explain card (play-by-play). Tokens from base.css only; no new colors. See ../CONTRACT.md "Explain card".
   Loads only when a lane lists it (tools/r7/<lane>.py CSS or files()). Lane b owns this file after step 1 (add, don't fork).

   <article class="r7-explain" data-step="2">
     <span class="r7-explain-n">2</span>
     <div class="r7-explain-b"><b class="r7-explain-t">Text with a pay link</b><p class="r7-explain-why">The customer pays from the text, so nobody chases an invoice.</p></div>
   </article>
   Modifiers: .is-now (the current step), .is-done (finished), .r7-explain--dark (on the stage background). A list of cards: <ol class="r7-explain-list">. */
.r7-explain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.r7-explain { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); font: 14px/1.4 var(--chrome-font); }
.r7-explain-n { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font: 600 13px/1 var(--chrome-font); background: var(--fill); color: var(--ink); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.r7-explain-b { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.r7-explain-t { font: 600 15px/1.25 var(--chrome-font); }
.r7-explain-why { margin: 0; color: var(--dim); font-size: 13.5px; }
.r7-explain.is-now { border-color: var(--b-primary); box-shadow: 0 0 0 1px var(--b-primary); }
.r7-explain.is-now .r7-explain-n { background: var(--b-primary); color: var(--b-primary-ink); border-color: var(--b-primary); }
.r7-explain.is-done .r7-explain-n { background: var(--fill); color: var(--dim); }
.r7-explain.is-done .r7-explain-t { color: var(--dim); }
.r7-explain--dark { background: var(--stage-2); color: var(--chrome-ink); border-color: var(--stage-line); }
.r7-explain--dark .r7-explain-n { background: var(--stage); color: var(--chrome-ink); border-color: var(--stage-line); }
.r7-explain--dark .r7-explain-why { color: var(--chrome-dim); }
.r7-explain--dark.is-now { border-color: var(--chrome-accent); box-shadow: 0 0 0 1px var(--chrome-accent); }
.r7-explain--dark.is-now .r7-explain-n { background: var(--chrome-accent); color: var(--stage); border-color: var(--chrome-accent); }
@media (max-width: 700px) { .r7-explain { padding: 10px 12px; gap: 10px; } .r7-explain-t { font-size: 14px; } .r7-explain-why { font-size: 13px; } }
[dir="rtl"] .r7-explain { text-align: right; }

/* R7 b refinement: finished look for the shared play-by-play card. Flat, ruled, one accent for the current step. */
.r7-explain { gap: 14px; padding: 14px 16px; box-shadow: none; align-items: flex-start; }
.r7-explain-n { width: 24px; height: 24px; margin-top: 1px; font-size: 12px; background: var(--paper); color: var(--dim); }
.r7-explain-b { gap: 3px; flex: 1; }
.r7-explain-t { font-size: 15px; letter-spacing: -.005em; }
.r7-explain-why { font-size: 13.5px; line-height: 1.45; max-width: 60ch; }
.r7-explain.is-now { background: var(--paper); box-shadow: inset 3px 0 0 var(--b-primary); border-color: var(--line); }
.r7-explain.is-now .r7-explain-n { background: var(--b-primary); color: var(--b-primary-ink); }
.r7-explain.is-done { background: var(--fill); }
.r7-explain.is-done .r7-explain-n { background: var(--fill); }
.r7-explain--dark.is-now { box-shadow: inset 3px 0 0 var(--chrome-accent); border-color: var(--stage-line); }
.r7-explain--dark.is-done { background: var(--stage); }
.r7-explain-list .r7-explain { transition: border-color .2s, background-color .2s; }
[dir="rtl"] .r7-explain.is-now { box-shadow: inset -3px 0 0 var(--b-primary); }
@media (prefers-reduced-motion: reduce) { .r7-explain-list .r7-explain { transition: none; } }