/* ============================================================
   WarehouseOS product page. Everything is scoped under #wos, so the short
   class names are safe. Loaded after product-page.css, which holds what the
   product pages share (base, chips, stamp, node, rail, hero frame, question
   stack and meter, turning point, FAQ, final CTA). The 02 steps, 06
   capabilities, 07 before/after, 08 tabs and 09 timeline follow
   terminalos.css (itself after fleetos.css).

   Colour meaning is fixed: grey with "?" = stock the business thinks it has
   but can't place, cyan/blue = WarehouseOS working (scan beams, zoom frames,
   location breadcrumbs), red = a problem, amber = a warning, green =
   confirmed; gold = what your team does. Gold is never used for anything
   WarehouseOS does.

   Motion: markup renders in its finished state. The page script "arms" a
   section before animating it, and arming only ever changes opacity,
   visibility or transform, so nothing shifts. Logical properties throughout
   (RTL); the drawings (map, floor plans, racks) are the same in both
   languages, and the location chains read in the page's direction.
   ============================================================ */

@keyframes wo-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0.15;
  }
}

@keyframes wo-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.35;
  }
}

@keyframes wo-roll3 {
  0%,
  25% {
    margin-block-start: 0;
  }

  40%,
  60% {
    margin-block-start: -1.3em;
  }

  75%,
  100% {
    margin-block-start: -2.6em;
  }
}

@keyframes wo-scan {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

/* ---------- base ---------- */

/* The -ink colours are the ones dark enough to read as small text on their
   own tint (AA); the plain ones are for fills, stripes and dots. */
#wos {
  --wo-crit-ink: #b42318;
  --wo-c1: #6f8fff;
  --wo-cyan: #22d3ee;
  --wo-cyan-ink: #0e7490;
  --wo-warn: #f59e0b;
  --wo-warn-ink: #92400e;

  /* Racking and cartons are drawn in their real colours: amber beams,
     cardboard, wooden pallets. Cyan is WarehouseOS at work. */
  --wo-beam: #d97706;
  --wo-box: #c9a57b;
  --wo-box-dark: #a8825a;
  --wo-pallet: #8a6a48;
}

/* Facts WarehouseOS pulled out */
#wos .pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#wos .pill {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
  border-radius: 999px;
  padding: 5px 11px;
}

#wos .dark .pill {
  color: #fff;
  background: rgb(61 107 255 / 22%);
}

#wos .btn-s {
  font-size: 13px;
  padding: 8px 14px;
}

#wos .dr-a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

/* A decision taken stays gold: it is the human's action. */
#wos .is-taken:disabled {
  opacity: 1;
  cursor: default;
  transform: none;
  box-shadow: none;
}

#wos .auth {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

#wos .auth-l {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--nlm-navy-400);
  margin-inline-end: 4px;
}

#wos .auth-b {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 6px;
  padding: 4px 10px;
}

/* ---------- 01 the questions ---------- */

#wos .qa {
  height: 104px;
}

#wos .qn {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--nlm-danger);
  margin-bottom: 8px;
}

#wos .qchip {
  font: inherit;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#wos .qchip[aria-pressed="true"] {
  color: #fff;
  background: var(--nlm-navy-900);
  border-color: var(--nlm-navy-900);
}

/* the meter */
#wos .meter-h {
  margin: 0 0 14px;
}

#wos .meter-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  font-size: 13px;
}

#wos .meter-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#wos .meter-rows dd {
  margin: 0;
  font-family: var(--nlm-font-mono);
  font-weight: 600;
  white-space: nowrap;
  color: #ff8a8a;
}

#wos .meter-x {
  display: block;
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-navy-400);
}

#wos .qrate {
  margin-top: 0;
}

#wos .qrate input {
  width: 112px;
}

/* ---------- what if ---------- */

#wos .turn-flow {
  gap: 6px;
}

#wos .turn-flow li {
  font-size: 13.5px;
  padding: 7px 12px;
}

#wos .turn-q + .turn-q {
  margin-top: 10px;
}

#wos .flow-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

#wos .flow-ai {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  color: #fff;
}

#wos .flow-ai .node {
  width: 52px;
  height: 52px;
}

#wos .flow-ai .node-core {
  width: 40px;
  height: 40px;
}

#wos .flow-ai .node-core :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
}

#wos .flow-replay {
  padding-inline: 12px 16px;
}

#wos .flow-replay :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#wos .steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

#wos .step {
  background: var(--nlm-navy-800);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 14px;
  padding: 20px 18px;
  transition: border-color 0.35s, opacity 0.35s;
}

#wos .step.is-done {
  border-color: rgb(34 197 94 / 45%);
}

#wos .step.is-gold.is-done {
  border-color: var(--pq-gold);
}

#wos .flow.is-armed .step:not(.is-done) {
  opacity: 0.45;
}

#wos .step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

#wos .step .ico {
  width: 36px;
  height: 36px;
  background: rgb(61 107 255 / 18%);
  color: var(--pq-ai);
}

#wos .step.is-gold .ico {
  background: rgb(227 178 60 / 18%);
  color: var(--pq-gold);
}

#wos .step-n {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-navy-400);
}

#wos .step h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  margin: 0 0 8px;
}

#wos .step p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--nlm-navy-300);
  margin: 0;
}

#wos .ck {
  flex: none;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgb(255 255 255 / 25%);
  color: transparent;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

#wos .ck :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#wos .step.is-done .ck {
  background: var(--pq-ok);
  border-color: var(--pq-ok);
  color: #fff;
}

#wos .step.is-gold.is-done .ck {
  background: var(--pq-gold);
  border-color: var(--pq-gold);
  color: var(--pq-gold-ink);
}

#wos .flow.is-armed .step.is-done .ck {
  animation: pq-pop 0.4s var(--nlm-ease-soft);
}

/* ---------- 03 see it work: bar and counters ---------- */

#wos .day-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

#wos .day-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wos .day-n {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

#wos .day-n li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--nlm-fg-2);
}

#wos .day-n b {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.1;
  color: var(--nlm-fg-1);
}

[dir="rtl"] #wos .day-n b.ltr {
  text-align: end;
}

#wos .day-n .is-bad b {
  color: var(--nlm-danger);
}

#wos .day-n .is-ai b {
  color: var(--nlm-signal-ink);
}

/* ---------- 04 tabs ---------- */

#wos .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

#wos .tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line-strong);
  border-radius: 999px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

#wos .tab :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

#wos .tab[aria-selected="true"] {
  color: #fff;
  background: var(--nlm-navy-900);
  border-color: var(--nlm-navy-900);
}

#wos .vp {
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 32px);
  animation: pq-rise 0.45s var(--nlm-ease-soft);
}

#wos .vq {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--nlm-fg-1);
  margin: 0 0 18px;
}

#wos .vnote {
  font-size: 13px;
  font-style: italic;
  color: var(--nlm-fg-3);
  margin: 14px 0 0;
}

#wos .vp .qctl output {
  color: var(--nlm-fg-1);
}

/* Tables */
#wos .sc-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
}

#wos .sc {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

#wos .sc :is(th, td) {
  text-align: start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nlm-line);
  white-space: nowrap;
}

#wos .sc thead th {
  font-family: var(--nlm-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
}

#wos .sc tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}

/* ---------- 06 capabilities ---------- */

#wos .cloud {
  list-style: none;
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wos .cloud li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1px solid rgb(61 107 255 / 35%);
  border-radius: 999px;
  padding: 8px 15px;
}

#wos .cloud :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
  color: var(--nlm-signal);
}

#wos .cloud.is-armed li {
  opacity: 0;
  transform: translateY(8px) scale(0.94);
}

#wos .cloud.is-armed.is-in li {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--nlm-ease), transform 0.45s var(--nlm-ease-soft);
  transition-delay: calc(var(--i) * 60ms);
}

#wos .feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

#wos .feat {
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 16px;
  transition: transform 0.25s var(--nlm-ease), box-shadow 0.25s var(--nlm-ease);
}

#wos .feat:hover {
  transform: translateY(-4px);
  box-shadow: var(--nlm-shadow-md);
}

#wos .feat h3 {
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
  color: var(--nlm-fg-1);
  margin: 12px 0 6px;
}

#wos .feat p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--nlm-fg-2);
  margin: 0;
}

#wos .roles {
  margin-top: clamp(28px, 4vw, 44px);
}

#wos .roles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

#wos .roles li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 12px;
}

#wos .roles b {
  font-family: var(--nlm-font-display);
  font-size: 13.5px;
  color: var(--nlm-fg-1);
}

/* ---------- 07 before / after ---------- */

#wos .out-sw {
  margin-bottom: 20px;
}

#wos .out-g {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
}

#wos .core {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  font-size: 13.5px;
  line-height: 1.35;
}

#wos .core :is(th, td) {
  text-align: start;
  font-weight: 500;
  padding: 9px 12px;
  background: var(--nlm-navy-900);
  border-block: 1px solid var(--nlm-line-dark);
  transition: color 0.4s var(--nlm-ease), opacity 0.4s var(--nlm-ease);
}

#wos .core :is(th, td):first-child {
  border-inline-start: 1px solid var(--nlm-line-dark);
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
}

#wos .core :is(th, td):last-child {
  border-inline-end: 1px solid var(--nlm-line-dark);
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
}

#wos .core thead th {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-navy-400);
  background: transparent;
  border-color: transparent;
  padding-block: 0 2px;
}

#wos .core thead th:is(:first-child, :last-child) {
  border-color: transparent;
}

#wos .core td {
  position: relative;
  padding-inline-start: 32px;
}

#wos .core td :is(svg, i[data-lucide]) {
  position: absolute;
  top: calc(50% - 7px);
  inset-inline-start: 10px;
  width: 14px;
  height: 14px;
  color: var(--nlm-navy-600);
}

/* Before WarehouseOS there is no action and no outcome to show: the cells
   stay, empty. */
#wos .core :is(.c-ai, .c-out) > * {
  transition: opacity 0.4s var(--nlm-ease), visibility 0s;
}

#wos .c-pain {
  color: var(--nlm-navy-400);
  text-decoration: line-through;
  text-decoration-color: rgb(255 255 255 / 30%);
}

#wos .c-ai {
  color: var(--pq-ai);
}

#wos .c-out {
  color: #5ee08a;
  font-weight: 600;
}

/* The last row is the human one: readable in both states, its outcome gold. */
#wos .is-human .c-pain {
  color: #fff;
  text-decoration: none;
}

#wos .is-human .c-ai {
  color: var(--nlm-navy-400);
}

#wos .is-human .c-out {
  color: var(--pq-gold);
}

#wos [data-state="before"] tr:not(.is-human) .c-pain {
  color: #ff8a8a;
  text-decoration-color: transparent;
}

#wos [data-state="before"] tr:not(.is-human) :is(.c-ai, .c-out) > * {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--nlm-ease), visibility 0s 0.4s;
}

/* The morning inventory brief */
#wos .report {
  position: relative;
  background: var(--nlm-navy-900);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 16px;
  overflow: hidden;
  color: var(--nlm-navy-300);
}

#wos .report-b {
  padding: clamp(18px, 2vw, 24px);
}

#wos .report-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-bottom: 14px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#wos .report-h strong {
  font-family: var(--nlm-font-display);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

/* The brief's values are phrases, not single numbers: one per row. */
#wos .kpis {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

#wos .kpis li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  background: rgb(255 255 255 / 5%);
  border-radius: 10px;
  padding: 10px 12px;
}

#wos .kpis li:first-child {
  grid-column: 1 / -1;
}

#wos .kpis b {
  flex: 0 1 auto;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  text-align: end;
  color: #fff;
}

#wos .kpis li:first-child b {
  font-size: 28px;
}

#wos .kpis .is-bad b {
  color: #ff8a8a;
}

#wos .kpis .is-warn b {
  color: #fbbf24;
}

#wos .kpis .is-ok b {
  color: #5ee08a;
}

#wos .report-n {
  margin: 14px 0 0;
  font-size: 11.5px;
  font-style: italic;
  color: var(--nlm-navy-400);
}

#wos .blind {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: rgb(8 9 31 / 72%);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nlm-ease), visibility 0.5s;
}

#wos .blind b {
  display: block;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
}

#wos .blind p {
  max-width: 34ch;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--nlm-navy-300);
}

#wos [data-state="before"] .blind {
  opacity: 1;
  visibility: visible;
}

/* ---------- 08 who it's for ---------- */

#wos .tabp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 18px;
  padding: clamp(22px, 3vw, 36px);
  animation: pq-rise 0.45s var(--nlm-ease-soft);
}

#wos .tabp h3 {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px);
  color: var(--nlm-fg-1);
  margin: 16px 0 10px;
}

#wos .tabp p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nlm-fg-2);
  margin: 0;
}

#wos .ex {
  background: var(--nlm-gray-50);
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 18px;
}

#wos .tabp .ex-l {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
  margin-bottom: 12px;
}

/* ---------- 09 getting started ---------- */

#wos .tl-wrap {
  position: relative;
}

#wos .tl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);
}

#wos .tl-line {
  position: absolute;
  top: 21px;
  inset-inline: 21px;
  height: 2px;
  background: var(--nlm-signal);
  transform-origin: 0 50%;
}

[dir="rtl"] #wos .tl-line {
  transform-origin: 100% 50%;
}

#wos .tl li {
  position: relative;
}

#wos .tl-dot {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  color: #fff;
  background: var(--nlm-navy-900);
  box-shadow: 0 0 0 6px #fff;
}

#wos .tl-dot :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
}

#wos .tl h3 {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--nlm-fg-1);
  margin: 0 0 8px;
}

#wos .tl p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--nlm-fg-2);
  margin: 0;
}

/* ---------- closing ---------- */

#wos .final .h2 {
  max-width: 24ch;
  margin-bottom: 16px;
}

#wos .cta-note {
  max-width: 46ch;
  margin: 0 auto 32px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.55;
  color: var(--nlm-navy-300);
}

/* Ten warehouses, pulled into the line and the wordmark. */
#wos .cv-t {
  top: calc(50% - 7px);
  inset-inline-start: calc(50% - 7px);
  width: 14px;
  height: 10px;
  border-radius: 2px;
  background: var(--wo-c1);
  border: 0;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 12%);
}

#wos .also {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 30px 0 0;
  font-family: var(--nlm-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--nlm-navy-400);
}

#wos .also a {
  color: #fff;
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 999px;
  padding: 5px 12px;
  transition: border-color 0.2s, background 0.2s;
}

#wos .also a:hover {
  border-color: var(--nlm-signal);
  background: var(--nlm-signal);
}

@media (width <= 1180px) {
  #wos .feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #wos .roles ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (width <= 980px) {
  #wos .steps,
  #wos .feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* The meter rides the bottom of the screen here (see product-page.css), so it
     is kept short: the four figures sit two by two. */
  #wos .meter-l {
    margin-bottom: 4px;
  }

  #wos .meter-h {
    font-size: 22px;
    margin: 0 0 8px;
  }

  #wos .meter-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    font-size: 11.5px;
    line-height: 1.3;
  }

  #wos .meter-rows > div {
    flex-direction: column;
    gap: 1px;
  }

  #wos .meter-x {
    display: none;
  }
}

@media (width <= 640px) {
  #wos .tl-line {
    display: none;
  }

  #wos .day-ctl {
    width: 100%;
  }

  #wos .day-ctl :is(.btn-n, .btn-g) {
    flex: 1;
    justify-content: center;
  }

  #wos .kpis {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The table reads as stacked cards: pain, then what the AI does, then the outcome. */
  #wos .core,
  #wos .core tbody,
  #wos .core tr,
  #wos .core :is(th, td) {
    display: block;
  }

  #wos .core thead {
    display: none;
  }

  #wos .core tr {
    margin-bottom: 8px;
    background: var(--nlm-navy-900);
    border: 1px solid var(--nlm-line-dark);
    border-radius: 10px;
    padding: 8px 4px;
  }

  #wos .core tbody :is(th, td),
  #wos .core tbody :is(th, td):is(:first-child, :last-child) {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding-block: 4px;
  }
}

/* ---------- hero ---------- */
#wos .display {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.9vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 18px;
  text-wrap: balance;
}

/* The H1 names the product for search; the display line is the headline. */
#wos .hero-h.wo-h1 {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--nlm-navy-300);
  margin-bottom: 12px;
}

#wos .btns {
  flex-wrap: wrap;
}

@keyframes wo-draw {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes wo-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 4px var(--wo-cyan));
  }

  50% {
    filter: drop-shadow(0 0 12px var(--wo-cyan));
  }
}

@keyframes wo-flash {
  0% {
    box-shadow: 0 0 0 0 rgb(34 211 238 / 55%);
  }

  100% {
    box-shadow: 0 0 0 14px rgb(34 211 238 / 0%);
  }
}

@keyframes wo-walk {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(calc(120px * var(--dir)));
  }
}

@keyframes wo-road {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  55% {
    opacity: 1;
  }

  80%,
  100% {
    transform: translateX(calc(84px * var(--dir)));
    opacity: 0;
  }
}

@keyframes wo-belt {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(56px * var(--dir)));
  }
}

@keyframes wo-g2 {
  0%,
  24% {
    opacity: 0.12;
  }

  25%,
  100% {
    opacity: 1;
  }
}

@keyframes wo-g3 {
  0%,
  49% {
    opacity: 0.12;
  }

  50%,
  100% {
    opacity: 1;
  }
}

@keyframes wo-g4 {
  0%,
  74% {
    opacity: 0.12;
  }

  75%,
  100% {
    opacity: 1;
  }
}

/* ---------- the network map (hero, 02, 03) ---------- */

#wos .ksa {
  display: block;
  width: 100%;
  height: auto;
}

#wos .ksa-land {
  fill: rgb(255 255 255 / 5%);
  stroke: rgb(255 255 255 / 22%);
  stroke-width: 1.2;
}

#wos .wd {
  transition: opacity 0.35s var(--nlm-ease);
}

#wos .wd.is-hide {
  opacity: 0;
}

#wos .wd-ring {
  fill: none;
  stroke: rgb(61 107 255 / 45%);
  stroke-width: 1.5;
}

#wos .wd-dot {
  fill: var(--nlm-signal);
}

#wos .wd-l {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  fill: var(--nlm-navy-300);
  text-anchor: middle;
}

#wos .wd.hi .wd-dot {
  fill: var(--wo-cyan);
}

#wos .wd.hi .wd-ring {
  stroke: var(--wo-cyan);
  animation: wo-pulse 1.6s ease-in-out infinite;
}

#wos .wd.hi .wd-l {
  fill: var(--wo-cyan);
  font-weight: 700;
}

#wos .ksa-hub line {
  stroke: var(--wo-cyan);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0;
  transition: opacity 0.5s var(--nlm-ease);
  transition-delay: calc(var(--i) * 50ms);
}

/* ---------- hero: the teaser ---------- */

#wos .stage.wh {
  padding: 14px;
  overflow: hidden;
}

#wos .wh-in {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#wos .wh-crumb {
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#wos .wh-crumb li {
  color: var(--wo-cyan);
  background: rgb(34 211 238 / 8%);
  border: 1px solid rgb(34 211 238 / 40%);
  border-radius: 6px;
  padding: 3px 7px;
}

#wos .wh-crumb li:last-child {
  color: var(--nlm-navy-950);
  background: var(--wo-cyan);
  font-weight: 700;
}

/* Three panes share one place: the map, the racking, the trail. The static
   frame (no script, reduced motion) is the racking at the end of the chain. */
#wos .wh-panes {
  display: grid;
}

#wos .wh-panes > * {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--nlm-ease), visibility 0.45s;
}

#wos .wh:not([data-f]) .wh-rack,
#wos .wh:is([data-f="2"], [data-f="3"], [data-f="4"], [data-f="6"]) .wh-rack,
#wos .wh:is([data-f="1"], [data-f="7"]) .wh-map,
#wos .wh[data-f="5"] .wh-trail {
  opacity: 1;
  visibility: visible;
}

#wos .wh-map,
#wos .wh-rack {
  position: relative;
}

#wos .wh-map .ksa {
  max-height: 300px;
  margin-inline: auto;
}

#wos .wh.is-hub .ksa-hub line {
  opacity: 0.7;
}

#wos .wh-hubc {
  position: absolute;
  inset-block-start: 57.6%;
  inset-inline-start: 50%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nlm-navy-950);
  background: var(--wo-cyan);
  border-radius: 8px;
  padding: 6px 10px;
  translate: -50% -50%;
  opacity: 0;
  transition: opacity 0.45s var(--nlm-ease);
}

[dir="rtl"] #wos .wh-hubc {
  translate: 50% -50%;
}

#wos .wh-hubc :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
}

#wos .wh.is-hub .wh-hubc {
  opacity: 1;
}

#wos .wh-count {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: 4px;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 18px;
  color: #fff;
}

#wos .wh:not([data-f="1"]) .wh-count {
  opacity: 0;
}

#wos .rkg {
  display: block;
  width: 100%;
  height: auto;
}

#wos .rkg .up {
  fill: var(--nlm-navy-600);
}

#wos .rkg .beam {
  fill: var(--wo-beam);
}

#wos .rkg .pl-base {
  fill: var(--wo-pallet);
}

#wos .rkg .ct {
  fill: var(--wo-box);
  stroke: var(--wo-box-dark);
  stroke-width: 0.8;
}

#wos .rkg .glow {
  fill: var(--wo-cyan);
  opacity: 0;
  transition: opacity 0.4s var(--nlm-ease);
}

#wos .wh.is-glow .rkg .glow {
  opacity: 1;
  animation: wo-glow 1.6s ease-in-out infinite;
}

#wos .wh-search {
  position: absolute;
  inset-block-start: 8%;
  inset-inline-start: 6%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nlm-font-mono);
  font-size: 12px;
  color: var(--nlm-fg-1);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: var(--nlm-shadow-md);
}

#wos .wh-search :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
  color: var(--nlm-fg-3);
}

#wos .wh-search b {
  color: var(--nlm-success);
}

#wos .wh-sn {
  position: absolute;
  inset-block-end: 4%;
  inset-inline-end: 4%;
}

#wos .wh:not([data-f]) .wh-search {
  inset-block-start: 4%;
}

/* The serial label, with a barcode drawn in CSS. */
#wos .sn {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 168px;
  font-family: var(--nlm-font-mono);
  color: var(--nlm-fg-1);
  background: #fff;
  border: 2px solid var(--wo-cyan);
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 0 22px rgb(34 211 238 / 40%);
  direction: ltr;
}

#wos .sn-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 9.5px;
  color: var(--nlm-fg-3);
}

#wos .sn-bars {
  height: 26px;
  background: repeating-linear-gradient(90deg, var(--nlm-fg-1) 0 2px, transparent 2px 4px, var(--nlm-fg-1) 4px 5px, transparent 5px 8px, var(--nlm-fg-1) 8px 11px, transparent 11px 12px);
}

#wos .sn-id {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-align: center;
}

#wos .wh-trail {
  list-style: none;
  margin: 0;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  place-self: center;
  gap: 12px;
}

#wos .wh-trail li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--nlm-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

#wos .wh-trail li + li::before {
  content: "";
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: 15px;
  height: 12px;
  border-inline-start: 2px solid var(--wo-cyan);
}

#wos .wh-tn {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nlm-navy-950);
  background: var(--wo-cyan);
}

#wos .wh-tn :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#wos .wh-where {
  position: absolute;
  inset: -14px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 110px);
  letter-spacing: -0.03em;
  color: #fff;
  background: rgb(10 12 40 / 82%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--nlm-ease), visibility 0.4s;
}

#wos .wh[data-f="3"] .wh-where,
#wos .wh[data-f="8"] .fh-end {
  opacity: 1;
  visibility: visible;
}

#wos .wh-caps {
  display: grid;
  min-height: 24px;
  text-align: center;
}

#wos .wh-caps p {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity 0.35s var(--nlm-ease);
}

#wos .wh[data-cap="easy"] [data-c="easy"],
#wos .wh[data-cap="ten"] [data-c="ten"],
#wos .wh[data-cap="chain"] [data-c="chain"],
#wos .wh[data-cap="trace"] [data-c="trace"],
#wos .wh[data-cap="view"] [data-c="view"] {
  opacity: 1;
}

#wos .wh[data-cap="chain"] [data-c="chain"] {
  font-size: clamp(11px, 1.1vw, 13px);
  color: var(--wo-cyan);
}

#wos .fh-end {
  position: absolute;
  inset: -14px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--nlm-navy-950);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nlm-ease), visibility 0.5s;
}

#wos .fh-word {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  color: #fff;
}

#wos .fh-by {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--nlm-navy-300);
}

/* ---------- 01 the questions: the pain loops ---------- */

#wos .qa :is(svg, i[data-lucide]) {
  flex: none;
}

/* Q1: warehouses multiply, each with its own sheet; the total is "?" */
#wos .qa-whs {
  display: grid;
  grid-template-columns: repeat(5, 22px);
  gap: 4px 6px;
}

#wos .qa-wh {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--nlm-navy-600);
}

#wos .qa-wh :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
}

#wos .qa-wh :is(svg, i[data-lucide]) + :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
  color: var(--nlm-success);
}

#wos .qa-tot {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  color: var(--nlm-fg-3);
  border: 1px dashed var(--nlm-danger);
  border-radius: 8px;
  padding: 6px 12px;
}

#wos .qa-tot b,
#wos .qa-site b,
#wos .qa-sn span {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1;
  color: var(--nlm-danger);
}

/* Q2: a picker walks the aisles while the clock runs */
#wos .qa-aisles {
  position: relative;
  flex: 1;
  height: 62px;
  display: flex;
  justify-content: space-between;
  max-width: 170px;
}

#wos .qa-aisles > span {
  width: 14px;
  border-radius: 3px;
  background: repeating-linear-gradient(180deg, var(--nlm-gray-200) 0 12px, var(--wo-beam) 12px 14px);
}

#wos .qa-walk {
  position: absolute;
  inset-block-end: 4px;
  inset-inline-start: 12px;
  width: 22px;
  height: 22px;
  color: var(--nlm-navy-900);
}

#wos .qa-watch {
  display: flex;
  align-items: center;
  gap: 8px;
}

#wos .qa-tick {
  display: block;
  height: 1.3em;
  overflow: hidden;
  font-family: var(--nlm-font-mono);
  font-size: 18px;
  line-height: 1.3;
  color: var(--nlm-danger);
}

#wos .qa-tick span {
  display: block;
}

/* At rest the clock shows the last value. */
#wos .qa-tick span:first-child {
  margin-block-start: -2.6em;
}

/* Q3: a transfer leaves A and never arrives at B */
#wos .qa-site {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  color: var(--nlm-fg-3);
}

#wos .qa-site :is(svg, i[data-lucide]) {
  width: 26px;
  height: 26px;
  color: var(--nlm-navy-600);
}

#wos .qa-road {
  position: relative;
  flex: 1;
  height: 26px;
  max-width: 120px;
  background: linear-gradient(90deg, var(--nlm-fg-3) 50%, transparent 0) 0 50% / 8px 2px repeat-x;
  mask-image: linear-gradient(90deg, #000 45%, transparent 75%);
}

[dir="rtl"] #wos .qa-road {
  mask-image: linear-gradient(270deg, #000 45%, transparent 75%);
}

#wos .qa-truck {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 0;
  width: 22px;
  height: 22px;
  color: var(--nlm-navy-900);
}

/* Q4: dated cartons slide towards "Expired"; a serial goes to "?" */
#wos .qa-belt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  padding-inline-end: 64px;
}

#wos .qa-ctn {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 9.5px;
  color: var(--nlm-fg-2);
}

#wos .qa-ctn :is(svg, i[data-lucide]) {
  width: 24px;
  height: 24px;
  color: var(--wo-box-dark);
}

#wos .qa-exp {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--nlm-danger);
  border-inline-start: 2px solid var(--nlm-danger);
  padding-inline-start: 6px;
  background: #fff;
}

#wos .qa-sn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-fg-2);
  border: 1px solid var(--nlm-line-strong);
  border-radius: 6px;
  padding: 5px 8px;
}

/* Q5: "In stock" over an empty bin; the order turns "Delayed" */
#wos .qa-bin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#wos .qa-ok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--nlm-success);
  background: var(--nlm-success-soft);
  border-radius: 999px;
  padding: 3px 8px;
}

#wos .qa-ok :is(svg, i[data-lucide]) {
  width: 12px;
  height: 12px;
}

#wos .qa-empty {
  width: 74px;
  height: 40px;
  border: 2px dashed var(--nlm-line-strong);
  border-block-start: 0;
  border-radius: 0 0 6px 6px;
}

#wos .qa-order {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  color: var(--nlm-fg-3);
  border: 1px solid var(--nlm-line-strong);
  border-radius: 8px;
  padding: 6px 10px;
}

#wos .qa-order b {
  font-size: 12px;
  color: var(--wo-warn-ink);
}

@media (prefers-reduced-motion: no-preference) {
  #wos .qa-g2 {
    animation: wo-g2 6s steps(1, end) infinite;
  }

  #wos .qa-g3 {
    animation: wo-g3 6s steps(1, end) infinite;
  }

  #wos .qa-g4 {
    animation: wo-g4 6s steps(1, end) infinite;
  }

  #wos .qa-walk {
    animation: wo-walk 4.5s ease-in-out infinite;
  }

  #wos .qa-tick span:first-child {
    animation: wo-roll3 4.5s steps(1, end) infinite;
  }

  #wos .qa-truck {
    animation: wo-road 3.2s ease-in infinite;
  }

  #wos .qa-ctn {
    animation: wo-belt 3.6s linear infinite;
  }

  #wos .qa-order b {
    animation: wo-blink 1.4s steps(1, end) infinite;
  }
}

/* ---------- turning point: where? ---------- */

#wos .turn-find {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
}

#wos .turn-card {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nlm-font-mono);
  font-size: 12.5px;
  color: #fff;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 10px;
  padding: 8px 12px;
  transition: color 0.5s, background 0.5s, border-color 0.5s;
}

#wos .turn-card :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#wos .turn-where {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: clamp(44px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wo-cyan);
  transition: color 0.5s;
}

#wos .turn.is-armed:not(.is-on) .turn-card {
  color: var(--nlm-fg-2);
  background: #fff;
  border-color: var(--nlm-line-strong);
}

#wos .turn.is-armed:not(.is-on) .turn-where {
  color: var(--nlm-fg-3);
}

/* ---------- 02 the solution: the zoom explorer ---------- */

#wos .zm {
  margin-bottom: clamp(40px, 6vw, 72px);
}

#wos .zm-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

#wos .zm-crumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

#wos .zm-crumb button {
  font: inherit;
  font-family: var(--nlm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--wo-cyan);
  background: rgb(34 211 238 / 8%);
  border: 1px solid rgb(34 211 238 / 40%);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

#wos .zm-crumb button:hover:not(:disabled) {
  background: rgb(34 211 238 / 18%);
}

#wos .zm-crumb button:disabled {
  color: var(--nlm-navy-950);
  background: var(--wo-cyan);
  font-weight: 700;
  cursor: default;
}

#wos .zm-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wos .zm-ctl .btn-g {
  color: #fff;
  border-color: rgb(255 255 255 / 30%);
  background: transparent;
}

#wos .zm-g {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

#wos .zm-view {
  position: relative;
  display: grid;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--nlm-navy-900);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 16px;
}

#wos .zm-lv {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: clamp(12px, 2vw, 24px);
  transition: opacity 0.4s var(--nlm-ease), transform 0.4s var(--nlm-ease-soft);
}

#wos .zm-lv.is-from-out {
  opacity: 0;
  transform: scale(0.7);
}

#wos .zm-lv.is-from-in {
  opacity: 0;
  transform: scale(1.3);
}

#wos .zm-lv.is-to-in {
  opacity: 0;
  transform: scale(1.6);
}

#wos .zm-lv.is-to-out {
  opacity: 0;
  transform: scale(0.6);
}

#wos .zm-lv > :is(svg, .ksa) {
  width: 100%;
  max-height: 100%;
}

#wos .zm-lv .ksa {
  max-width: 420px;
}

#wos .zm .hi {
  cursor: pointer;
}

#wos .lv-svg {
  display: block;
  width: 100%;
  height: auto;
}

#wos .lv-svg text {
  font-family: var(--nlm-font-mono);
  font-size: 10px;
  fill: var(--nlm-navy-400);
  text-anchor: middle;
}

#wos .lv-svg .bld {
  fill: rgb(255 255 255 / 3%);
  stroke: rgb(255 255 255 / 16%);
}

#wos .lv-svg .zn rect {
  fill: rgb(255 255 255 / 5%);
  stroke: rgb(255 255 255 / 18%);
}

#wos .lv-svg .zn line {
  stroke: rgb(255 255 255 / 12%);
  stroke-width: 3;
}

#wos .lv-svg .zn text {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 22px;
  fill: var(--nlm-navy-300);
}

#wos .lv-svg .dock {
  fill: rgb(255 255 255 / 14%);
}

#wos .lv-svg .dock.is-on {
  fill: var(--nlm-success);
}

#wos .lv-svg .ai-rack {
  fill: rgb(255 255 255 / 14%);
}

#wos .lv-svg .ai-lane {
  fill: transparent;
}

#wos .lv-svg .pf {
  fill: rgb(61 107 255 / 35%);
}

#wos .lv-svg .rs {
  fill: rgb(255 255 255 / 10%);
}

#wos .lv-svg :is(.up, .floor) {
  fill: var(--nlm-navy-600);
  stroke: var(--nlm-navy-600);
}

#wos .lv-svg .beam {
  fill: var(--wo-beam);
}

#wos .lv-svg .bn-box,
#wos .lv-svg .bn-big {
  fill: rgb(255 255 255 / 4%);
  stroke: rgb(255 255 255 / 18%);
}

#wos .lv-svg .bn.is-empty .bn-box {
  stroke-dasharray: 4 4;
}

#wos .lv-svg .ct,
#wos .lv-svg .ct-big > rect:first-child {
  fill: var(--wo-box);
  stroke: var(--wo-box-dark);
}

#wos .lv-svg .ct-tape {
  fill: var(--wo-box-dark);
}

#wos .lv-svg .ct-lbl {
  fill: #fff;
}

#wos .lv-svg .bn text {
  font-size: 12px;
  fill: var(--nlm-navy-300);
}

#wos .lv-svg .ct-sn {
  font-size: 13px;
  font-weight: 700;
  fill: var(--wo-cyan);
}

/* The level the chain goes through next. */
#wos .lv-svg .hi :is(rect, .ai-rack) {
  stroke: var(--wo-cyan);
  stroke-width: 2;
}

#wos .lv-svg .zn.hi rect,
#wos .lv-svg .bn.hi .bn-box,
#wos .lv-svg .ai.hi .ai-lane {
  fill: rgb(34 211 238 / 16%);
}

#wos .lv-svg .ai.hi .ai-rack,
#wos .lv-svg .rk.hi :is(.pf, .rs) {
  fill: rgb(34 211 238 / 30%);
}

#wos .lv-svg .hi text {
  fill: var(--wo-cyan);
  font-weight: 700;
}

#wos .lv-svg .ct-big.hi > rect:first-child {
  stroke: var(--wo-cyan);
  stroke-width: 3;
  animation: wo-glow 1.6s ease-in-out infinite;
}

#wos .lv-key {
  display: flex;
  gap: 16px;
  margin: 0;
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  color: var(--nlm-navy-300);
}

#wos .lv-key span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-inline-end: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}

#wos .k-pf::before {
  background: rgb(61 107 255 / 55%);
}

#wos .k-rs::before {
  background: rgb(255 255 255 / 22%);
}

#wos .sku {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 220px;
  text-align: center;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 2px solid var(--wo-cyan);
  border-radius: 14px;
  padding: 18px 22px;
}

#wos .sku-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: var(--nlm-signal);
}

#wos .sku-id {
  font-family: var(--nlm-font-mono);
  font-size: 13px;
  color: var(--nlm-fg-3);
}

#wos .sku-id b {
  color: var(--nlm-fg-1);
}

#wos .sku-n {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 18px;
}

#wos .sku-tags span {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nlm-signal-ink);
  background: var(--nlm-signal-soft);
  border-radius: 999px;
  padding: 3px 9px;
}

#wos .sku-a {
  font-size: 13px;
  font-weight: 600;
  color: var(--nlm-success);
}

#wos .zm-lv .sn {
  transform: scale(1.35);
}

#wos .zm-card {
  display: flex;
  flex-direction: column;
}

#wos .zm-t {
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.25;
  color: var(--nlm-fg-1);
  margin: 0 0 12px;
}

#wos .zm-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#wos .zm-lines li {
  position: relative;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--nlm-fg-2);
  padding-inline-start: 18px;
}

#wos .zm-lines li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.55em;
  inset-inline-start: 0;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--wo-cyan);
}

/* ---------- 03 see it work: the search ---------- */

#wos .fd-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
}

#wos .fd-box {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--nlm-font-mono);
  font-size: 15px;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1.5px solid var(--nlm-signal);
  border-radius: 12px;
  padding: 11px 14px;
}

#wos .fd-box :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
  color: var(--nlm-signal);
}

#wos .fd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#wos .fd-order {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--nlm-fg-2);
}

#wos .fd-order b {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nlm-fg-3);
}

#wos .fd .day-n {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

#wos .day-n .is-ok b {
  color: var(--nlm-success);
}

#wos .day-n .is-warn b {
  color: var(--wo-warn-ink);
}

#wos .day-n li i {
  font-style: normal;
  color: var(--nlm-fg-3);
}

#wos .fd-g {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

#wos .fd-map {
  padding: 12px;
}

#wos .fd-map .ksa-land {
  fill: var(--nlm-gray-50);
  stroke: var(--nlm-line-strong);
}

#wos .fd-map .wd-ring {
  stroke: rgb(61 107 255 / 25%);
}

#wos .fd-map .wd-dot {
  fill: var(--nlm-gray-300);
}

#wos .fd-map .wd-l {
  fill: var(--nlm-fg-3);
}

#wos .fd-map .wd.is-found .wd-dot {
  fill: var(--nlm-success);
}

#wos .fd-map .wd.is-warn .wd-dot {
  fill: var(--wo-warn);
}

#wos .fd-map .wd.hi .wd-dot {
  fill: var(--wo-cyan-ink);
}

#wos .fd-map .wd.hi .wd-ring {
  stroke: var(--wo-cyan-ink);
}

#wos .fd-map .wd.hi .wd-l {
  fill: var(--wo-cyan-ink);
}

#wos .fd-map.is-scan .wd-ring {
  animation: wo-scan 0.6s ease-in-out both;
  animation-delay: calc(var(--i) * 70ms);
}

#wos .fd-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#wos .fd-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) 64px 64px minmax(0, 1.5fr);
  align-items: center;
  gap: 6px 12px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 10px 12px;
}

#wos .fd-row.is-warn {
  border-color: rgb(245 158 11 / 55%);
  background: rgb(245 158 11 / 5%);
}

#wos .fd-row.is-transit {
  border: 1.5px dashed rgb(34 211 238 / 60%);
}

#wos .fd-row.is-none {
  background: var(--nlm-gray-50);
  color: var(--nlm-fg-3);
}

#wos .fd-wh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 14px;
  text-align: start;
  color: var(--nlm-fg-1);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 6px;
  margin-inline-start: -6px;
}

#wos button.fd-wh {
  cursor: pointer;
}

#wos button.fd-wh:hover {
  border-color: var(--nlm-line-strong);
}

#wos .fd-wh[aria-pressed="true"] {
  color: var(--wo-cyan-ink);
  border-color: var(--wo-cyan-ink);
}

#wos .fd-wh.is-t {
  font-size: 13px;
  font-weight: 600;
}

#wos .fd-route {
  white-space: nowrap;
}

#wos .fd-wh :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

#wos .fd-n {
  display: flex;
  flex-direction: column;
  font-size: 10.5px;
  color: var(--nlm-fg-3);
}

#wos .fd-n b {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 20px;
  line-height: 1.1;
  color: var(--nlm-fg-1);
}

#wos .fd-loc,
#wos .fd-note {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--nlm-fg-2);
}

#wos .fd-loc :is(svg, i[data-lucide]),
#wos .fd-note :is(svg, i[data-lucide]) {
  width: 14px;
  height: 14px;
  color: var(--wo-cyan-ink);
}

#wos .fd-note {
  grid-column: 1 / -1;
  font-family: var(--nlm-font-mono);
  font-size: 11.5px;
  color: var(--nlm-fg-3);
}

#wos .is-warn .fd-note {
  color: var(--wo-warn-ink);
}

#wos .is-warn .fd-note :is(svg, i[data-lucide]) {
  color: var(--wo-warn-ink);
}

#wos .sn-btn {
  font: inherit;
  color: var(--wo-cyan-ink);
  background: rgb(34 211 238 / 10%);
  border: 1px solid rgb(14 116 144 / 40%);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

#wos .sn-btn:hover {
  background: rgb(34 211 238 / 20%);
}

#wos .fd-batch {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nlm-fg-1);
}

#wos .fd-batch :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
  margin-block-start: 3px;
  color: var(--nlm-danger);
}

#wos .fd-plan {
  margin-bottom: 16px;
}

#wos .fd-plan .panel-t,
#wos .trail .panel-t {
  display: flex;
  align-items: center;
  gap: 8px;
}

#wos .fd-plan .panel-t :is(svg, i[data-lucide]),
#wos .trail .panel-t :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
  color: var(--nlm-signal);
}

#wos .fd-lines {
  margin: 0 0 12px;
  padding-inline-start: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--nlm-fg-1);
}

#wos .fd-skip,
#wos .fd-total {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.5;
}

#wos .fd-skip {
  color: var(--wo-warn-ink);
}

#wos .fd-total {
  font-weight: 600;
  color: var(--nlm-success);
  margin-bottom: 14px;
}

#wos :is(.fd-skip, .fd-total) :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
  margin-block-start: 2px;
}

#wos .trail.is-open {
  animation: wo-flash 0.9s ease-out;
}

#wos .trail-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 16px;
}

#wos .trail-cap {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--nlm-fg-2);
}

#wos .trail-cap b {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wo-cyan-ink);
}

#wos .trail-t td {
  white-space: normal;
  min-width: 140px;
}

#wos .trail-t tbody th {
  font-family: var(--nlm-font-mono);
  font-weight: 500;
  font-size: 12.5px;
}

#wos .trail-t tr.is-next :is(th, td) {
  color: var(--nlm-fg-3);
}

#wos .trail-t tr.is-done :is(th, td) {
  color: var(--nlm-success);
  font-weight: 600;
}

#wos .trail-pend {
  font-style: italic;
}

/* ---------- 04 stock that stays right ---------- */

#wos .vsku {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 16px;
  font-family: var(--nlm-font-mono);
  font-size: 12px;
  color: var(--nlm-fg-3);
}

#wos .vsku :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#wos .dleft {
  display: inline-block;
  min-width: 36px;
  text-align: center;
  font-family: var(--nlm-font-mono);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--nlm-fg-2);
  background: var(--nlm-gray-100);
}

#wos .is-crit .dleft {
  color: var(--wo-crit-ink);
  background: var(--nlm-danger-soft);
}

#wos .is-warn .dleft {
  color: var(--wo-warn-ink);
  background: rgb(245 158 11 / 16%);
}

#wos .fefo-g,
#wos .cnt-g,
#wos .cov-g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

#wos .fefo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 12px;
}

#wos .fefo-top .panel-t {
  margin: 0;
}

#wos .fefo-top .qsw {
  font-size: 13px;
  color: var(--nlm-fg-1);
  background: #fff;
  border-color: var(--nlm-line-strong);
}

#wos .fefo-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#wos .fefo-strip li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1.5px solid var(--nlm-line-strong);
  border-radius: 10px;
  padding: 8px 12px;
  animation: pq-rise 0.4s var(--nlm-ease-soft);
}

#wos .fefo-strip li + li {
  margin-inline-start: 18px;
}

#wos .fefo-strip li + li::before {
  content: "→";
  position: absolute;
  margin-inline-start: -30px;
  margin-block-start: 8px;
  color: var(--nlm-fg-3);
}

[dir="rtl"] #wos .fefo-strip li + li::before {
  content: "←";
}

#wos .fefo-strip li.is-crit {
  border-color: var(--nlm-danger);
}

#wos .fefo-strip li.is-warn {
  border-color: var(--wo-warn);
}

#wos .fefo-strip b {
  font-family: var(--nlm-font-mono);
  color: var(--nlm-fg-1);
}

#wos .fefo-strip.is-fifo li.is-crit {
  opacity: 0.55;
  border-style: dashed;
}

#wos .fefo-cost {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--nlm-danger);
}

#wos .fefo-cost :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
}

#wos .sug {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 16px;
}

#wos .sug-row {
  margin-top: 16px;
}

#wos .sug p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nlm-fg-2);
}

#wos .sug p > :is(svg, i[data-lucide]) {
  width: 16px;
  height: 16px;
  margin-block-start: 3px;
}

#wos .sug-alert {
  color: var(--wo-warn-ink) !important;
}

#wos .sug-alert.is-ai {
  color: var(--wo-cyan-ink) !important;
}

#wos .sug-t {
  font-weight: 600;
  color: var(--nlm-signal-ink) !important;
}

#wos .cnt-n {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

#wos .cnt-n li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--nlm-fg-2);
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 12px;
  padding: 10px 14px;
}

#wos .cnt-n b {
  font-family: var(--nlm-font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--nlm-fg-1);
}

#wos .cnt-n .is-ok b {
  color: var(--nlm-success);
}

#wos .cnt-n .is-bad b {
  color: var(--nlm-danger);
}

#wos .var {
  display: inline-block;
  font-family: var(--nlm-font-mono);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
}

#wos .var.is-down {
  color: var(--wo-crit-ink);
  background: var(--nlm-danger-soft);
}

#wos .var.is-up {
  color: var(--wo-warn-ink);
  background: rgb(245 158 11 / 16%);
}

#wos .pair-ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: var(--wo-cyan-ink);
}

#wos .cnt-t tr.is-pair {
  background: rgb(34 211 238 / 6%);
}

#wos .cnt-t tr.is-fixed .var {
  color: var(--nlm-success);
  background: var(--nlm-success-soft);
  text-decoration: line-through;
}

#wos .cnt-m {
  width: 100%;
}

#wos .cnt-m p {
  justify-content: space-between;
  font-size: 13px;
}

#wos .cnt-m b {
  font-family: var(--nlm-font-mono);
  color: var(--nlm-fg-1);
}

#wos .cnt-bar,
#wos .cov-bar {
  position: relative;
  display: block;
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--nlm-gray-100);
}

#wos .cnt-bar i,
#wos .cov-bar i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--nlm-success);
  transform: scaleX(var(--f));
  transform-origin: 0 50%;
  transition: transform 0.7s var(--nlm-ease-soft), background 0.4s;
}

[dir="rtl"] #wos :is(.cnt-bar, .cov-bar) i {
  transform-origin: 100% 50%;
}

#wos .cnt-scan {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nlm-font-mono);
  font-size: 12px !important;
  color: var(--nlm-fg-1) !important;
  background: var(--nlm-gray-50);
  border-radius: 8px;
  padding: 6px 10px;
}

#wos .sug-open {
  border-block-start: 1px solid var(--nlm-line);
  padding-block-start: 10px;
  width: 100%;
}

#wos .sug .vnote {
  margin: 0;
}

#wos .cov {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--nlm-line);
  border-radius: 14px;
  padding: 16px;
}

#wos .cov-target {
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  color: var(--nlm-fg-3);
}

#wos .cov-target span::before {
  content: "";
  display: inline-block;
  width: 14px;
  margin-inline-end: 6px;
  vertical-align: 3px;
  border-block-start: 2px dashed var(--nlm-fg-2);
}

#wos .cov-r {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 76px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

#wos .cov-n {
  font-weight: 600;
  color: var(--nlm-fg-1);
}

#wos .cov-bar {
  height: 14px;
  margin: 0;
  overflow: visible;
}

#wos .cov-bar i {
  transform: scaleX(var(--w));
}

/* The target, the same place on every bar. */
#wos .cov-bar::after {
  content: "";
  position: absolute;
  inset-block: -4px;
  inset-inline-start: calc(var(--t) * 100%);
  border-inline-start: 2px dashed var(--nlm-fg-2);
}

#wos .cov-r.is-low .cov-bar i {
  background: var(--nlm-danger);
}

#wos .cov-r.is-over .cov-bar i {
  background: var(--wo-warn);
}

#wos .cov-d {
  font-family: var(--nlm-font-mono);
  font-size: 12.5px;
  text-align: end;
  color: var(--nlm-fg-1);
}

#wos .cov-r.is-low .cov-d {
  color: var(--nlm-danger);
}

#wos .cov-r.is-over .cov-d {
  color: var(--wo-warn-ink);
}

#wos .cov-flag {
  font-family: var(--nlm-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 7px;
}

#wos .cov-flag.is-low {
  color: var(--wo-crit-ink);
  background: var(--nlm-danger-soft);
}

#wos .cov-flag.is-over {
  color: var(--wo-warn-ink);
  background: rgb(245 158 11 / 16%);
}

#wos .sug-after {
  font-size: 13px !important;
}

/* ---------- 05 dock to dispatch ---------- */

#wos .lanes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

#wos .lane {
  --p: 4;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  background: var(--nlm-navy-900);
  border: 1px solid var(--nlm-line-dark);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 24px);
}

#wos .lane-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

#wos .lane-t {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--nlm-font-display);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
}

#wos .lane-t :is(svg, i[data-lucide]) {
  width: 20px;
  height: 20px;
  color: var(--wo-cyan);
}

#wos .lane-s {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

/* The conveyor the steps sit on. */
#wos .lane-s::before {
  content: "";
  position: absolute;
  inset-block-start: 19px;
  inset-inline: 10%;
  border-block-start: 2px dashed rgb(34 211 238 / 40%);
}

#wos .lane-s li[data-ls] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  line-height: 1.3;
  color: var(--nlm-navy-300);
}

#wos .lane-n {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nlm-navy-300);
  background: var(--nlm-navy-950);
  border: 1.5px solid rgb(255 255 255 / 20%);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}

#wos .lane-n :is(svg, i[data-lucide]) {
  width: 17px;
  height: 17px;
}

#wos .lane-ck {
  width: 14px;
  height: 14px;
  color: var(--pq-ok);
  opacity: 0;
  transition: opacity 0.3s;
}

#wos .lane-s li.is-done {
  color: #fff;
}

#wos .lane-s li.is-done .lane-n {
  color: #fff;
  background: rgb(34 197 94 / 22%);
  border-color: var(--pq-ok);
}

#wos .lane-s li.is-done .lane-ck {
  opacity: 1;
}

/* The carton travelling along the lane while it runs. */
#wos .lane-tok {
  position: absolute;
  inset-block-start: -14px;
  inset-inline-start: calc((var(--p) + 0.5) * 20% - 13px);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nlm-navy-950);
  background: var(--wo-box);
  box-shadow: 0 0 14px rgb(34 211 238 / 50%);
  opacity: 0;
  transition: inset-inline-start 0.45s var(--nlm-ease-soft), opacity 0.3s;
}

#wos .lane-tok :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
}

#wos .lane.is-running .lane-tok {
  opacity: 1;
}

#wos .lane-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--nlm-font-mono);
  font-size: 11.5px;
  color: var(--nlm-navy-300);
}

#wos .lane-line :is(svg, i[data-lucide]) {
  width: 15px;
  height: 15px;
  color: var(--wo-cyan);
}

/* ---------- 07 before / after ---------- */

#wos .out-lbl {
  margin: -8px 0 16px;
  font-family: var(--nlm-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#wos .out-lbl [data-lbl="before"] {
  display: none;
  color: #ff8a8a;
}

#wos .out-lbl [data-lbl="with"] {
  color: #5ee08a;
}

#wos [data-state="before"] .out-lbl [data-lbl="before"] {
  display: inline;
}

#wos [data-state="before"] .out-lbl [data-lbl="with"] {
  display: none;
}

/* ---------- 08 who it's for: the sample question ---------- */

#wos .ex-ask {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--nlm-font-display);
  font-weight: 600;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.45;
  color: var(--nlm-fg-1);
  background: #fff;
  border: 1.5px solid var(--nlm-signal);
  border-radius: 12px;
  padding: 12px 14px;
}

#wos .ex-ask :is(svg, i[data-lucide]) {
  width: 18px;
  height: 18px;
  margin-block-start: 3px;
  color: var(--nlm-signal);
}

#wos .tabp .ex-q {
  margin: 0;
}

/* ---------- 09 getting started: the line draws itself ---------- */

/* Scroll-linked, so only where view() timelines exist (see .reveal). */
@supports (animation-timeline: view()) {
  #wos .tl-line {
    animation: wo-draw linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 45%;
  }

  #wos .tl-dot {
    animation: pq-pop 0.6s var(--nlm-ease-soft) both;
    animation-timeline: view();
    animation-range: entry 20% cover 40%;
  }
}

/* ---------- responsive (WarehouseOS objects) ---------- */

@media (width <= 1180px) {
  #wos .fd .day-n {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #wos .fd-g {
    grid-template-columns: minmax(0, 1fr);
  }

  #wos .fd-map .ksa {
    max-width: 440px;
    margin-inline: auto;
  }
}

@media (width <= 980px) {
  #wos .zm-g,
  #wos .fefo-g,
  #wos .cnt-g,
  #wos .cov-g,
  #wos .lanes {
    grid-template-columns: minmax(0, 1fr);
  }

  #wos .roles ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 640px) {
  #wos .fd .day-n {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #wos .fd-row {
    grid-template-columns: minmax(0, 1fr) 54px 54px;
  }

  #wos .fd-loc {
    grid-column: 1 / -1;
  }

  #wos .zm-view {
    aspect-ratio: 1 / 1;
  }

  #wos .zm-lv .sn {
    transform: none;
  }

  #wos .lane-s li[data-ls] {
    font-size: 10.5px;
  }

  #wos .lane-n {
    width: 34px;
    height: 34px;
  }

  #wos .lane-s::before {
    inset-block-start: 16px;
  }

  #wos .cov-r {
    grid-template-columns: minmax(0, 1fr) 70px;
  }

  #wos .cov-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #wos .wh-crumb {
    font-size: 9px;
  }

  #wos .sn {
    min-width: 140px;
  }

  #wos .wh-sn .sn {
    transform: scale(0.85);
    transform-origin: 100% 100%;
  }
}