/* Lane E — slow stock and the promo check (web/app/v11/slow-stock.js, promo.js).
   Every class here starts with `in-` (contract §8); shared classes (.segctl, .arrive, .mark)
   are reused as they are and only ever touched under an `in-` parent. Tokens only. */

.in-slow, .in-promo { width: 100%; max-width: 640px; color: var(--ink); }

/* the heading: the one figure or question, in the serif */
.in-title { font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.in-title-sm { font-size: 22px; line-height: 1.3; }
.in-sub { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; }
.in-line { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; }
.in-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; display: inline-block; min-height: 44px; line-height: 44px; }
.in-slow .in-days { margin: 16px 0 6px; }
.in-slow .in-days button { min-height: 44px; }

/* ranked bars by value at cost: name and figure on one line, the bar under them, full width
   (the shared .bar-row hides its bar on a phone; this one never does) */
.in-rank { list-style: none; margin: 8px 0 0; padding: 0; }
.in-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: baseline; padding: 10px 0; }
.in-row + .in-row { border-top: 1px solid var(--rule-soft); }
.in-row-t { min-width: 0; }
.in-name { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.in-meta { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-mid); }
.in-amt { text-align: right; font-size: 14.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; }
.in-track { grid-column: 1 / -1; display: block; height: 10px; background: var(--paper-3); border-radius: 1px; overflow: hidden; }
.in-fill { display: block; height: 100%; background: var(--data); }
.in-skip { margin: 14px 0 0; padding-top: 12px; border-top: 2px solid var(--rule); font-size: 14.5px; font-weight: 500; line-height: 1.5; }

/* the promo: the owner's words in plum, then paired bars before / during */
.in-own { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--plum); }
.in-count { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-mid); }
.in-pairs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 8px; }
.in-pair-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.in-pair-t { font-size: 14.5px; font-weight: 500; }
.in-delta { font-size: 15px; font-weight: 600; }
.in-none { font-size: 13px; color: var(--ink-mid); }
.in-bar { display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px; gap: 10px; align-items: center; padding: 3px 0; }
.in-bar-l { font-size: 12.5px; color: var(--ink-mid); }
.in-bar .in-track { grid-column: auto; height: 12px; }
.in-bar .in-amt { font-size: 13.5px; }
.in-fill-before { opacity: .45; }
.in-fill-bad { background: var(--red); }
.in-neg { color: var(--red); }
.in-verdict { font-family: var(--serif); font-size: 21px; line-height: 1.4; margin: 20px 0 0; }
.in-unlock { margin-top: 14px; }
.in-again { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.in-again-t { margin: 0 0 4px; font-size: 13px; font-weight: 600; line-height: 1.5; }
.in-again p { margin: 0; font-size: 14.5px; line-height: 1.6; }

/* working: the Star Walk on the mark (shell.css's keyframe and order, scoped here) */
.in-working { padding: 18px 0; }
.in-working .mark { display: inline-block; width: 28px; height: 28px; color: var(--plum); }
.in-working .mark svg { width: 100%; height: 100%; display: block; }
.in-working .mark .petal { opacity: .55; animation: starwalk 2s ease-in-out infinite; }
.in-working .mark .petal[data-i="0"] { animation-delay: 0s; }
.in-working .mark .petal[data-i="1"] { animation-delay: 1.2s; }
.in-working .mark .petal[data-i="2"] { animation-delay: .4s; }
.in-working .mark .petal[data-i="3"] { animation-delay: 1.6s; }
.in-working .mark .petal[data-i="4"] { animation-delay: .8s; }
@media (prefers-reduced-motion: reduce) {
  .in-working .mark { color: var(--plum-soft); }
  .in-working .mark .petal { animation: none; opacity: 1; }
}
html.motion-light .in-working .mark .petal { animation: none; opacity: 1; }