/* Short animated explanations, where one truly helps (owner, 30 Sept 2026:
 * "do it smart"). Five of them live on this site: the two API boxes and the
 * morning gate on /setup, and on the front page what R is, why the stop goes
 * back to your rule, and why four fills are one row. Each is one <figure> with
 * a drawing (aria-hidden), the same story as a numbered list that stays in the
 * page for a screen reader and for a reader who asked for no motion, and a
 * caption that says it is an illustration. site/explainers.js plays it once
 * when half of it first enters the viewport, pauses it off screen, and rests on
 * its last frame; reduced motion gets that frame and never the play.
 *
 * Built from the kit's tokens, light like every picture of the app. Money and
 * prices are in ink and never coloured; kept is the kit's green. Nothing here
 * is a colour of its own, and nothing is placed by an inline style: the script
 * sets positions through the CSSOM, which the CSP allows. */

.dx { margin: 28px 0; padding: 20px; background: var(--fill-page); border: 1px solid var(--line-hairline);
  border-radius: var(--r-popover); color: var(--ink-primary); font: 400 15px/1.5 var(--ui); container-type: inline-size; }
.dx *, .dx *::before, .dx *::after { box-sizing: border-box; }
.dx-title { margin: 0 0 14px; font: 600 17px/1.3 var(--ui); color: var(--ink-primary); }
.dx-grid { display: grid; gap: 20px; }
@container (min-width: 640px) { .dx-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 28px; } }
/* Without script the drawing is not drawn: the list and the caption say it all. */
.dx:not([data-js]) .dx-stage { display: none; }
.dx:not([data-js]) .dx-grid { grid-template-columns: 1fr; }
.dx-stage { position: relative; min-width: 0; }
.dx-win { background: var(--fill-raised); border-radius: var(--r-popover); border: 1px solid var(--line-hairline); box-shadow: var(--shadow-card); }

/* The drawing's parts appear when their second arrives. */
.dx[data-js] [data-at] { opacity: 0; transition: opacity var(--t-fold), transform var(--t-fold); }
.dx[data-js] [data-at][data-on] { opacity: 1; }
/* The list is the text equivalent: it is always there, and only its colour tells which beat is on. */
.dx[data-js] .dx-beats > li[data-at] { opacity: 1; }
.dx[data-js] [data-keys] { transition: top 0.45s ease, left 0.45s ease; }

/* A bar that grows from its left edge rather than fading in. */
.dx-grow { transform-origin: left; }
.dx[data-js] .dx-grow[data-at] { opacity: 1; transform: scaleX(0); transition: transform 0.8s ease; }
.dx[data-js] .dx-grow[data-at][data-on] { transform: none; }

/* The beats: the same story in words. */
.dx-beats { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: dx; }
.dx-beats > li { position: relative; padding-left: 34px; counter-increment: dx; color: var(--ink-secondary);
  transition: color var(--t-fold); }
.dx-beats > li::before { content: counter(dx); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--ink-secondary); font: 600 13px/1 var(--ui); color: var(--ink-secondary); }
.dx-beats > li[data-now], .dx-beats > li[data-seen] { color: var(--ink-primary); }
.dx-beats > li[data-now]::before { background: var(--ink-primary); border-color: var(--ink-primary); color: var(--fill-raised); }
.dx-beats small { display: block; color: var(--ink-secondary); font: 400 13px/1.45 var(--ui); }
.dx-beats b { font-weight: 600; }
.dx-warn { color: var(--attention); font-weight: 600; }
.dx-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0; color: var(--ink-secondary); font: 400 13px/1.45 var(--ui); }
.dx-cap > span { flex: 1 1 220px; }
.dx-cap > strong { flex-basis: 100%; color: var(--ink-primary); font: 600 15px/1.4 var(--ui); }
.dx-btn { min-height: 36px; padding: 0 16px; font: 600 13px/1 var(--ui); color: var(--ink-primary); background: var(--fill-raised);
  border: 1px solid var(--line-chrome); border-radius: var(--r-pill); cursor: pointer; }
.dx-btn:hover { background: var(--fill-stripe); }
/* A finger's target on a phone: Play measured 61 x 36 at 390 (2 Oct 2026). */
@media (max-width: 720px) { .dx-btn { min-height: var(--tap); } }
.dx-btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .dx-btn { display: none; } .dx[data-js] [data-at], /* The list is the text equivalent: it is always there, and only its colour tells which beat is on. */
.dx[data-js] .dx-beats > li[data-at] { opacity: 1; }
.dx[data-js] [data-keys] { transition: none; } }

/* ---- 1. The API boxes ------------------------------------------------------- */
.dx-path { display: flex; flex-wrap: wrap; gap: 0 6px; margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line-hairline);
  font: 400 14px/1.4 var(--ui); }
.dx-path b { font-weight: 400; color: var(--ink-primary); }
.dx-bd { padding: 6px 14px 14px; }
.dx-r { display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 8px; border-radius: var(--r-row); font: 400 14px/1.35 var(--ui); }
.dx-r > span { flex: 1; }
.dx-box { position: relative; flex: none; width: 17px; height: 17px; border: 1.5px solid var(--ink-secondary); border-radius: var(--r-tick); }
.dx-box i { position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid var(--ink-primary); border-width: 0 2px 2px 0;
  transform: rotate(40deg); }
.dx-tg { font: 400 13px/1.2 var(--ui); color: var(--ink-secondary); }
.dx-r-ro .dx-tg { color: var(--attention); font-weight: 600; }
.dx-note { margin: 0 0 4px 27px; padding: 2px 0 2px 10px; border-left: 2px solid var(--attention); color: var(--attention); font: 400 13px/1.45 var(--ui); }
.dx-ok { display: block; width: max-content; margin: 8px 0 0 auto; padding: 4px 22px; border: 1px solid var(--line-chrome); border-radius: var(--r-row);
  font: 500 14px/1.3 var(--ui); background: var(--fill-raised); }
.dx-ok[data-on] { background: var(--fill-hover); }
.dx-dlg { width: min(280px, 86%); margin: 12px 8px 0 auto; padding: 12px 14px; background: var(--fill-raised); border: 1px solid var(--line-hairline);
  border-radius: var(--r-popover); box-shadow: var(--shadow-floating); }
.dx-dlg p { margin: 0 0 10px; font: 600 14px/1.3 var(--ui); }
.dx-dlg div { display: flex; justify-content: flex-end; gap: 8px; }
.dx-dlg u { text-decoration: none; padding: 3px 13px; border: 1px solid var(--line-hairline); border-radius: var(--r-row); font: 400 14px/1.3 var(--ui); }
.dx-dlg u.dx-accept { background: var(--ink-primary); border-color: var(--ink-primary); color: var(--fill-raised); }
.dx-hint { margin: 8px 8px 0; text-align: right; font: 600 13px/1.4 var(--ui); }

/* ---- 2. The morning gate ---------------------------------------------------- */
.dx-day { position: relative; }
.dx-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--ink-secondary); font: 400 13px/1.3 var(--ui); }
.dx-sit { padding: 3px 10px; border-radius: var(--r-pill); background: var(--ok-tint); color: var(--ink-primary); font: 600 13px/1.3 var(--ui); }
.dx-bar { position: relative; height: 40px; overflow: hidden; border-radius: var(--r-group); background: var(--fill-track); }
.dx-bar-loss { outline: 1.5px dashed var(--ink-secondary); outline-offset: 2px; }
.dx-shut, .dx-open { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 10px; white-space: nowrap;
  font: 600 14px/1 var(--ui); }
.dx-shut { background: var(--ink-secondary); color: var(--fill-raised); }
.dx-shut small { margin-left: 6px; font: 400 13px/1 var(--ui); }
.dx-open { background: var(--ok-tint); color: var(--ok-ink); border: 1px solid var(--ok); }
.dx-pos { position: relative; height: 22px; margin-top: 6px; }
.dx-pos i { position: absolute; top: 5px; height: 8px; border-radius: var(--r-pill); background: var(--ink-primary); }
.dx-pos span { position: absolute; font: 400 13px/18px var(--ui); color: var(--ink-secondary); white-space: nowrap; }
.dx-axis { position: relative; height: 20px; font: 400 13px/20px var(--figures); color: var(--ink-secondary); }
.dx-axis i { position: absolute; font-style: normal; transform: translateX(-50%); white-space: nowrap; }
.dx-axis i:first-child { transform: none; }
.dx-axis i:last-child { transform: translateX(-100%); }
.dx-axis .dx-k { color: var(--ink-primary); font-weight: 700; }
.dx-cut { position: absolute; top: 24px; bottom: 22px; border-left: 1.5px dashed var(--ink-primary); }
.dx-loss { margin-top: 18px; }
.dx-flag { margin: 8px 0 0; padding: 2px 0 2px 10px; border-left: 2px solid var(--ink-primary); color: var(--ink-secondary); font: 400 13px/1.45 var(--ui); }
.dx-flag b { color: var(--ink-primary); }
.dx-foot { display: grid; gap: 4px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-hairline); list-style: none;
  color: var(--ink-secondary); font: 400 13px/1.45 var(--ui); }

/* ---- 3. Your rule, not your last move ---------------------------------------- */
.dx-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 12px; }
.dx-chip { padding: 3px 10px; border-radius: var(--r-pill); background: var(--fill-neutralChip); color: var(--ink-secondary); font: 600 13px/1.3 var(--ui); }
.dx-axis3 { position: relative; height: 230px; margin: 0 4px; }
.dx-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line-hairline); }
.dx-line span { position: absolute; left: 0; top: -22px; font: 400 13px/1.3 var(--ui); color: var(--ink-secondary); background: var(--fill-page); padding-right: 6px; }
.dx-line b { font: 500 13px/1 var(--figures); color: var(--ink-primary); }
.dx-line-rule { border-top: 1.5px dashed var(--ink-secondary); }
.dx-stop { position: absolute; left: 34%; right: 0; height: 0; border-top: 2px solid var(--ink-primary); }
.dx-stop-tag { position: absolute; left: 34%; transform: translateY(-50%); padding: 3px 9px; border: 1.2px solid var(--ink-primary); border-radius: var(--r-pill);
  background: var(--fill-raised); font: 500 13px/1 var(--figures); color: var(--ink-primary); white-space: nowrap; }
.dx-stop-note { position: absolute; right: 0; margin-top: -30px; font: 600 13px/1.3 var(--ui); color: var(--ink-secondary); text-align: right; }
.dx-tiers { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dx-tiers li { color: var(--ink-secondary); font: 400 13px/1.45 var(--ui); }
.dx-tiers strong { color: var(--ink-primary); }


/* ---- 6. One position, many pieces ---------------------------------------------- */
.dx-q { margin: 0 0 14px; font: 600 17px/1.3 var(--ui); }
.dx-fills { display: grid; gap: 6px; }
.dx-fills p { margin: 0; display: flex; gap: 8px; align-items: baseline; padding: 8px 12px; background: var(--fill-raised); border: 1px solid var(--line-hairline);
  border-radius: var(--r-row); font: 400 14px/1.3 var(--ui); }
.dx-fills i { font: 500 14px/1.3 var(--figures); font-style: normal; }
.dx-merge { margin-top: 10px; padding: 12px 14px; background: var(--fill-raised); border: 1px solid var(--line-hairline); border-radius: var(--r-group);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 15px/1.3 var(--ui); }
.dx-merge .dx-mo { margin-left: auto; font: 500 14px/1.3 var(--figures); color: var(--ink-primary); }
.dx-sum { margin: 10px 0 0; color: var(--ink-secondary); font: 400 13px/1.45 var(--figures); }
.dx-sum span { display: block; font: 400 13px/1.45 var(--ui); }