/* Spring reveals for the journal and fee pages. public/motion.js arms them (class "arm") and starts them
   (class "in") when they scroll into view; without the script, or with reduced motion, they simply sit at rest. */
.qbar { display: flex; gap: 3px; width: 128px; margin-top: 6px; }
.qbar i { flex: 1; height: 8px; border-radius: 3px; background: #e2e8f0; position: relative; overflow: hidden; }
.qbar i.on::after { content: ''; position: absolute; inset: 0; background: #0e7490; transform-origin: left; transition: transform .8s cubic-bezier(.22, 1.2, .36, 1) .1s; }
.qbar.arm:not(.in) i.on::after { transform: scaleX(0); }

.feescale { margin: 6px 6px 0; }
.feescale-h { font-size: .74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #64748b; }
.fs-track { position: relative; height: 4px; border-radius: 2px; background: #cbd5e1; margin: 36px 28px 6px; }
.fs-mk { position: absolute; top: 50%; left: var(--p); width: 0; transition: left .95s cubic-bezier(.34, 1.4, .64, 1) .1s; }
.fs-mk b { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: #0e7490; box-shadow: 0 0 0 3px #fff; }
.fs-mk em { position: absolute; left: 0; bottom: 14px; transform: translateX(-50%); font-style: normal; font-size: .78rem; font-weight: 700; white-space: nowrap; padding: 2px 9px; border-radius: 999px; background: #ecfeff; color: #0e7490; }
.feescale.arm:not(.in) .fs-mk { left: 0; }
.fs-ticks { position: relative; height: 16px; margin: 4px 28px 0; font-size: .7rem; color: #94a3b8; }
.fs-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .qbar i.on::after, .fs-mk { transition: none; }
}