/* One illustrative order; the line ends at the clinical review gate. */
.order-story-section {
  --order-story-ink: oklch(23.08% 0.0326 283.5);
  --order-story-muted: oklch(48.68% 0.0388 298.3);
  --order-story-iris: oklch(54.96% 0.1776 286.2);
  --order-story-line: oklch(90.07% 0.0178 296.6);
  --order-story-progress: 1;
  position: relative;
  padding-block: clamp(48px, 7vw, 100px);
  color: var(--order-story-ink);
  scroll-margin-top: 104px;
}
.order-story-section *, .order-story-section *::before, .order-story-section *::after { box-sizing: border-box; }
.order-story-section ::selection { background: oklch(89.35% 0.0578 295.0); color: oklch(23.08% 0.0326 283.5); }
.order-story-anchor { position: absolute; top: 0; scroll-margin-top: 104px; }
.order-story-heading { display: grid; gap: 24px; margin-bottom: 34px; }
.order-story-heading h2 { font-size: clamp(34px, 4.2vw, 56px); letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; font-weight: 600; }
.order-story-heading > p { font-size: 16px; line-height: 1.75; color: var(--order-story-muted); max-width: 43ch; margin: 0; }
.order-story-record { position: relative; border: 1px solid var(--order-story-line); border-radius: 16px; background: var(--white); overflow: hidden; }
.order-story-record-header { display: flex; gap: 16px; justify-content: space-between; align-items: center; padding: 23px 22px; border-bottom: 1px solid var(--order-story-line); }
.order-story-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.order-story-order-icon { display: grid; place-items: center; width: 38px; height: 44px; color: var(--order-story-iris); flex-shrink: 0; }
.order-story-order-icon svg { width: 28px; height: 32px; }
.order-story-identity span:not(.order-story-order-icon) { display: block; font-size: 12px; color: var(--order-story-muted); line-height: 1.6; }
.order-story-identity strong { display: block; font-size: 17px; font-weight: 650; line-height: 1.5; font-variant-numeric: tabular-nums; }
.order-story-sample { margin: 0; font-size: 12px; line-height: 1.7; color: var(--order-story-muted); text-align: right; }
.order-story-sample span { display: none; }
.order-story-lanes { position: relative; isolation: isolate; }
.order-story-connection { position: absolute; z-index: -1; left: 42px; top: 49px; bottom: 0; width: 1px; pointer-events: none; }
.order-story-connection-first, .order-story-connection-last, .order-story-connection-ink { position: absolute; width: 1px; display: block; }
.order-story-connection-first { top: 0; height: var(--order-story-clinical-distance, 33.333%); background: oklch(81.38% 0.0496 297.1); }
.order-story-connection-last { top: var(--order-story-clinical-distance, 33.333%); height: var(--order-story-pharmacy-distance, 33.333%); border-left: 1px dashed oklch(78.46% 0.0301 298.8); }
.order-story-connection-ink { top: 0; height: var(--order-story-clinical-distance, 33.333%); background: var(--order-story-iris); transform: scaleY(var(--order-story-progress)); transform-origin: top; }
.order-story-connection::after { content: ''; position: absolute; left: -3px; top: calc(var(--order-story-clinical-distance, 33.333%) * var(--order-story-progress)); width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--order-story-iris); }
.order-story-lane { position: relative; padding: 26px 22px 29px 76px; min-width: 0; }
.order-story-lane + .order-story-lane { border-top: 1px solid var(--order-story-line); }
.order-story-lane::before { content: ''; position: absolute; z-index: -2; inset: 0; background: oklch(96.63% 0.0136 299.8); opacity: 0; transition:opacity 180ms ease-out; }
.order-story-lane[data-active]::before { opacity: 1; }
.order-story-stage-control { position: relative; }
.order-story-node { position: absolute; top: 1px; left: -55px; width: 43px; height: 43px; border: 1px solid oklch(83.58% 0.0312 300.2); border-radius: 50%; display: grid; place-items: center; background: var(--white); }
.order-story-node svg { width: 22px; height: 22px; stroke-width: 1.7; }
.order-story-commerce .order-story-node { background: oklch(95.10% 0.0184 166.4); color: oklch(45.90% 0.0753 166.0); border-color: oklch(84.14% 0.0457 165.7); }
.order-story-clinical .order-story-node { background: var(--order-story-iris); color: var(--white); border-color: var(--order-story-iris); }
.order-story-pharmacy .order-story-node { color: oklch(55.10% 0.0394 299.7); background: oklch(98.37% 0.0041 301.4); }
.order-story-stage { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0; background: transparent; border: 0; border-radius: 4px; color: var(--order-story-muted); font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; text-align: left; touch-action: manipulation; }
.order-story-stage:disabled { opacity: 1; color: var(--order-story-muted); cursor: default; }
.order-story-step { font-size: 12px; font-weight: 500; color: var(--order-story-muted); font-variant-numeric: tabular-nums; }
.order-story-stage[aria-pressed=true] { color: oklch(45.90% 0.1714 285.1); }
.order-story-inspect { margin-left: auto; width: 18px; height: 18px; opacity: 0; }
.order-story-enhanced .order-story-inspect { opacity: 1; }
.order-story-stage:focus-visible, .order-story-link:focus-visible { outline: 3px solid var(--order-story-iris); outline-offset: 5px; }
.order-story-lane h3 { margin: 16px 0 24px; color: var(--order-story-ink); font-size: clamp(27px, 2.6vw, 36px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; text-wrap: balance; }
.order-story-facts { margin: 0 0 20px; padding: 0; display: grid; gap: 11px; }
.order-story-facts > div { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.order-story-facts dt { color: var(--order-story-muted); font-size: 13px; line-height: 1.6; }
.order-story-facts dd { margin: 0; padding-inline: 7px; text-align: right; font-size: 13px; line-height: 1.6; font-weight: 550; color: var(--order-story-ink); }
.order-story-facts dd.order-story-state { padding: 2px 7px; border-radius: 4px; font-size: 12px; font-weight: 650; }
.order-story-facts dd.order-story-state-complete { background: oklch(95.10% 0.0184 166.4); color: oklch(42.88% 0.0732 164.6); }
.order-story-facts dd.order-story-state-review { background: oklch(92.31% 0.0357 298.0); color: oklch(44.99% 0.1677 285.4); }
.order-story-facts dd.order-story-state-waiting { background: oklch(94.47% 0.0111 303.1); color: oklch(46.86% 0.0348 302.4); }
.order-story-lane > p { margin: 0; font-size: 15px; line-height: 1.75; color: var(--order-story-muted); max-width: 39ch; }
.order-story-context { display: flex; align-items: flex-start; gap: 14px; padding: 25px 22px; background: oklch(95.13% 0.0137 299.8); border-top: 1px solid var(--order-story-line); min-height: 146px; }
.order-story-context-icon { color: oklch(51.64% 0.1559 289.2); padding-top: 2px; }
.order-story-context-icon svg { width: 21px; height: 21px; }
.order-story-context strong { display: block; font-size: 16px; font-weight: 650; line-height: 1.55; }
.order-story-context p { font-size: 14px; line-height: 1.75; margin: 6px 0 0; max-width: 70ch; color: var(--order-story-muted); }
.order-story-context-position { display: none; }
.order-story-live { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.order-story-footer { display: flex; align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 23px; }
.order-story-footer p { font-size: 13px; line-height: 1.7; color: var(--order-story-muted); margin: 0; }
.order-story-link { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; color: var(--order-story-ink); font-size: 13px; line-height: 1.5; font-weight: 650; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: oklch(77.38% 0.0504 298.3); }
.order-story-link svg { width: 18px; height: 18px; flex-shrink: 0; }
@media (hover: hover) {
  .order-story-stage:not(:disabled):hover { color: oklch(45.90% 0.1714 285.1); }
  .order-story-link:hover { color: oklch(45.90% 0.1714 285.1); text-decoration-color: currentColor; }
}
@media (min-width: 720px) {
  .order-story-heading { grid-template-columns: 1.35fr 1fr; align-items: end; gap: 60px; margin-bottom: 44px; }
  .order-story-heading > p { font-size: 16px; justify-self: end; }
  .order-story-record-header { padding: 25px 30px; }
  .order-story-sample span { display: block; }
  .order-story-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-story-lane { padding: 96px 24px 32px; }
  .order-story-lane + .order-story-lane { border-top: 0; border-left: 1px solid var(--order-story-line); }
  .order-story-stage-control { position: static; }
  .order-story-node { top: 30px; left: calc(50% - 22px); width: 44px; height: 44px; }
  .order-story-connection { left: 16.6667%; right: 16.6667%; top: 51px; bottom: auto; width: auto; height: 1px; }
  .order-story-connection-first, .order-story-connection-last, .order-story-connection-ink { height: 1px; width: 50%; }
  .order-story-connection-first { top: 0; left: 0; height: 1px; }
  .order-story-connection-last { top: 0; left: 50%; height: 1px; border-left: 0; border-top: 1px dashed oklch(78.46% 0.0301 298.8); }
  .order-story-connection-ink { top: 0; left: 0; height: 1px; transform: scaleX(var(--order-story-progress)); transform-origin: left; }
  .order-story-connection::after { left: calc(50% * var(--order-story-progress)); top: -3px; margin-top: 0; margin-left: -3px; }
  .order-story-stage { font-size: 14px; gap: 10px; }
  .order-story-lane h3 { font-size: clamp(26px, 2.65vw, 36px); margin-top: 12px; }
  .order-story-facts > div { gap: 6px; }
  .order-story-context { padding: 25px 30px; align-items: center; min-height: 116px; }
  .order-story-context-position { display: block; margin-left: auto; padding-left: 15px; flex-shrink: 0; font-size: 12px; letter-spacing: .06em; color: var(--order-story-muted); font-variant-numeric: tabular-nums; }
  .order-story-footer { flex-direction: row; justify-content: space-between; align-items: center; gap: 30px; }
}
@media (min-width: 1100px) {
  .order-story-lane { padding-inline: 31px; }
  .order-story-stage { font-size: 15px; }
  .order-story-facts dt, .order-story-facts dd { font-size: 14px; }
  .order-story-facts dd.order-story-state { font-size: 13px; }
  .order-story-lane > p { font-size: 16px; }
  .order-story-heading > p { font-size: 17px; }
}
@media (max-width: 359px) {
  .order-story-record-header { padding-inline: 15px; gap: 8px; }
  .order-story-order-icon { display: none; }
  .order-story-identity strong { font-size: 15px; }
  .order-story-sample { font-size: 11px; }
  .order-story-lane { padding-right: 17px; padding-left: 64px; }
  .order-story-node { left: -46px; width: 36px; height: 36px; top: 4px; }
  .order-story-connection { left: 36px; }
  .order-story-stage { font-size: 14px; gap: 8px; }
  .order-story-lane h3 { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .order-story-section *, .order-story-section *::before, .order-story-section *::after { transition:none!important; animation: none !important; }
  .order-story-connection-ink { transform: none !important; }
  .order-story-connection::after { display: none; }
}
@media print {
  .order-story-section { break-inside: avoid; padding-block: 24px; }
  .order-story-connection-ink { transform: none; }
  .order-story-inspect { display: none; }
}
.reduce-motion .order-story-section *, .reduce-motion .order-story-section *::before, .reduce-motion .order-story-section *::after { transition:none!important; animation: none !important; }
.reduce-motion .order-story-connection-ink { transform: none !important; }
.reduce-motion .order-story-connection::after { display: none; }

/* The progress line itself communicates the clinical gate without a layout-driven dot. */
.order-story-connection::after { display: none; }