/* Home v0.5: filament note inside the golden-sample record, small-batch timeline. */

/* #owner scene 03: filament line carries the owner's confirmation and a reference link */
.os-seal li.os-fil-li { align-items: flex-start; padding: 8px 0; }
.os-fil { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.os-fil small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.os-fil a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.os-fil a:hover { color: var(--accent-hover); }
.os-fil-li .os-ck { margin-top: 3px; }

/* #batch: first -> test -> reorder -> reorder again. Stacks of small cartons show relative quantity. */
.batch-tl { position: relative; padding-top: 8px; }
.bt-rail { position: absolute; left: 0; right: 0; top: 15px; height: 2px; background: #E3E6E2; }
.bt-rail i { display: block; height: 100%; background: var(--ink); transform-origin: left center; transform: scaleX(1); transition: transform 520ms cubic-bezier(.22,.75,.15,1); }
.bt-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.bt-step { display: grid; grid-template-rows: auto auto auto auto 96px auto; align-content: start; justify-items: start; row-gap: 4px; min-width: 0; transition: opacity 360ms ease; }
.bt-dot { width: 16px; height: 16px; margin-bottom: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--ink); box-shadow: 0 0 0 4px var(--white); }
.bt-first .bt-dot { background: var(--ink); }
.bt-re .bt-dot { border-color: var(--accent); background: var(--accent); }
.bt-no { color: var(--muted); }
.bt-step b { font-size: 20px; line-height: 1.3; font-weight: 600; }
.bt-sub { font-size: 14px; color: var(--muted); }
/* Cartons pile from the bottom so every batch shares one baseline. */
.bt-stack { align-self: end; margin-top: 16px; display: flex; flex-wrap: wrap-reverse; gap: 3px; width: calc(22px * 5 + 3px * 4); max-width: 100%; padding-bottom: 6px; border-bottom: 1px solid #C9CDD0; }
.bt-stack i { position: relative; display: block; width: 22px; height: 16px; border-radius: 2px; background: #F1F2EF; border: 1px solid #8E979D; transition: opacity 260ms ease, transform 360ms cubic-bezier(.22,.75,.15,1); transition-delay: calc(var(--k) * 18ms); }
.bt-stack i::after { content: ""; position: absolute; left: 50%; top: -1px; width: 6px; height: 6px; margin-left: -3px; border-left: 1px solid #A9B0B5; border-right: 1px solid #A9B0B5; }
.bt-re .bt-stack i { background: #EDF1FD; border-color: #4C69E0; }
.bt-re .bt-stack i::after { border-color: rgba(35,70,216,.45); }
.bt-shop { align-self: end; margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px dashed #9AA2A8; border-radius: 4px; color: var(--muted); font-size: 13px; }
.bt-shop svg { width: 18px; height: 18px; }
.bt-lock { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid rgba(35,70,216,.3); border-radius: 4px; font-size: 12px; font-weight: 500; color: var(--accent); background: var(--white); max-width: 100%; }
.bt-lock svg { width: 13px; height: 13px; flex: none; }
.batch-state { margin-top: 28px; font-size: 15px; color: var(--muted); }
@media (max-width: 1023px) {
  .bt-stack { width: calc(18px * 5 + 3px * 4); }
  .bt-stack i { width: 18px; height: 14px; }
  .bt-step { grid-template-rows: auto auto auto auto 84px auto; }
  .bt-lock { font-size: 11px; padding: 3px 6px; }
}
@media (max-width: 767px) {
  /* Vertical timeline on phones */
  .bt-rail { left: 7px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; }
  .bt-rail i { transform-origin: center top; transform: scaleY(1); }
  .bt-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .bt-step { grid-template-columns: 16px 24px minmax(0, 1fr); grid-template-rows: none; column-gap: 12px; row-gap: 2px; align-items: baseline; }
  .bt-dot { grid-row: 1; margin: 0; align-self: center; }
  .bt-no { grid-row: 1; grid-column: 2; }
  .bt-step b { grid-row: 1; grid-column: 3; font-size: 18px; }
  .bt-sub, .bt-stack, .bt-shop, .bt-lock { grid-column: 3; }
  .bt-stack { margin-top: 10px; width: calc(18px * 7 + 3px * 6); }
  .bt-shop { margin-top: 10px; justify-self: start; }
  .bt-lock { margin-top: 8px; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .bt-rail i, .bt-step, .bt-stack i { transition: none; }
}