/* =====================================================================
   LINTAS — warehouse.html only. Shared components live in site.css;
   this file holds page-unique pieces (calculator details, data-flow diagram).
   ===================================================================== */

/* Space calculator details (shell = .calc in site.css) */
.sc-qty { display: grid; grid-template-columns: 1fr 92px; gap: 16px; align-items: center; }
.sc-out { justify-self: end; min-width: 92px; padding: 9px 10px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper); font-size: 1.05rem; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.calc-rows .sc-total { border-bottom: 0; padding-top: 16px; }
.calc-rows .sc-total dt { color: var(--on-navy); font-weight: 600; }
.calc-rows .sc-total dd { font-size: 18px; color: var(--signal-hi); }
[data-cartons][hidden] { display: none; }

/* Data-flow diagram: lines draw once when revealed (explanation, no loop) */
.flow svg { width: 100%; height: auto; overflow: visible; }
.flow rect { fill: var(--navy-2); stroke: var(--navy-line); stroke-width: 1.5; }
.flow text { font: 600 13px var(--mono); letter-spacing: .04em; fill: var(--on-navy); }
.flow .flow-sub { font-weight: 500; font-size: 10.5px; fill: var(--on-navy-2); }
.flow .flow-hub { fill: var(--signal); stroke: var(--signal); }
.flow .flow-wms { fill: var(--on-navy); stroke: var(--on-navy); }
.flow .flow-wms + .flow-hub-t { fill: var(--navy); }
.flow .flow-hub-t { font-weight: 700; font-size: 14px; fill: #fff; }
.flow .dr { fill: none; stroke: var(--on-navy-2); stroke-width: 1.6; }
.flow .dr.hl { stroke: var(--signal-hi); stroke-width: 2.4; }
.js .flow .dr { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--ease-io) .2s; }
.js .flow .dr.hl { transition-delay: .75s; transition-duration: .4s; }
.js .flow .dr:last-of-type { transition-delay: 1s; }
.js .flow.is-in .dr { stroke-dashoffset: 0; }
.js .flow .flow-out { opacity: 0; transition: opacity .4s ease 1.5s; }
.js .flow.is-in .flow-out { opacity: 1; }
@media (max-width: 899.98px) { .flow { margin-bottom: 12px; } }
@media (prefers-reduced-motion: reduce) {
  .js .flow .dr { stroke-dashoffset: 0; transition: none; }
  .js .flow .flow-out { opacity: 1; transition: none; }
}