/* ============================================================
   lab.css — "From the chair to the lab and back" (ClLab)
   Signature visual: the STATUS LADDER. A lab case card for
   Crown · #14 where a pip advances along a horizontal filling
   track — Impression → Sent → In production → Shipped → Seated.
   Past stops mint ✓, the current stop sand-blue, upcoming stops
   muted. Along the way the attachments dock, the Rx validates
   itself (Shade A2 ✓ · Margin ✓ · Zirconia ✓), the live lab
   quote flows into the plan estimate, and a second lab's quote
   settles on the stage floor. CSS-only, one 14s looping
   timeline (--lab-t). Everything is namespaced under .cl-lab;
   keyframes are clLab-prefixed since keyframe names are global.
   Base (non-animated) styles equal the FINAL scene — case
   seated, every stop minted — so prefers-reduced-motion shows
   the story's conclusion as a still. Tokens inherited from
   styles.css; accent = sand-blue, layered under house indigo.
   ============================================================ */

.cl-lab {
  --cl-blue: #5a82c2;
  --cl-blue-deep: #3d63a4;
  --cl-blue-wash: color-mix(in srgb, #5a82c2 8%, #fff);
  --cl-mint-wash: color-mix(in srgb, var(--mint) 10%, #fff);
  --lab-t: 14s; /* one full case cycle */
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(70% 55% at 8% 18%, var(--cl-blue-wash), transparent 62%),
    linear-gradient(180deg, #fff, var(--paper));
}

.cl-lab .eyebrow { color: var(--cl-blue-deep); }
.cl-lab .h2 { margin: 14px 0 12px; }
.cl-lab .lead { max-width: 56ch; }

.cl-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}

/* ── right column: chips + editorial footnotes ── */
.cl-lab-chips { margin-top: clamp(24px, 3vw, 34px); }
.cl-lab-chips-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: 12px;
}
.cl-lab-chiplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
}
.cl-lab-copychip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-70);
  transition: border-color .2s ease, color .2s ease;
}
.cl-lab-copychip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--cl-blue);
  opacity: .75;
}
.cl-lab-copychip:hover {
  border-color: color-mix(in srgb, var(--cl-blue) 40%, var(--line));
  color: var(--ink);
}

.cl-lab-notes {
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  max-width: 52ch;
}
.cl-lab-notes li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-60);
}
.cl-lab-notes b {
  color: var(--ink);
  font-weight: 600;
  margin-right: 4px;
}

/* ============================================================
   THE STAGE — one soft surface holding the case card
   ============================================================ */
.cl-lab-stage {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 50% at 100% 0%, var(--periwinkle), transparent 55%),
    radial-gradient(70% 60% at 0% 100%, var(--cl-blue-wash), transparent 60%),
    linear-gradient(165deg, #fff, var(--paper));
  box-shadow: var(--shadow-float);
  padding: clamp(18px, 2.2vw, 26px) clamp(16px, 2vw, 24px) clamp(14px, 1.8vw, 20px);
  overflow: hidden;
}

/* header strip */
.cl-lab-stagehead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.cl-lab-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cl-blue-deep);
}
.cl-lab-live i {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--mint);
  animation: clLabLive 2.4s ease-out infinite;
}
.cl-lab-open { color: var(--ink-40); }

/* ── the case card ── */
.cl-lab-card {
  border: 1px solid var(--line);
  border-radius: var(--r-soft);
  background: #fff;
  box-shadow: var(--shadow-1);
  padding: 16px 18px 15px;
  animation: clLabCard var(--lab-t) ease infinite both;
}

.cl-lab-cardhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.cl-lab-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cl-lab-case {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cl-lab-labname {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-60);
}
.cl-lab-due {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cl-blue-deep);
  border: 1px solid color-mix(in srgb, var(--cl-blue) 30%, var(--line));
  border-radius: var(--r-pill);
  background: var(--cl-blue-wash);
  padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   THE STATUS LADDER — five stops, a filling track, one pip
   ============================================================ */
.cl-lab-ladder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 18px 0 4px;
  padding-top: 4px;
}

/* the resting track, first-dot-center → last-dot-center */
.cl-lab-track {
  position: absolute;
  top: 14px;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
  background: var(--line);
}

/* the fill, advancing in fifths as the pip hops */
.cl-lab-fill {
  position: absolute;
  top: 14px;
  left: 10%;
  width: 80%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--cl-blue), var(--cl-blue-deep));
  transform-origin: left center;
  transform: scaleX(1); /* base = final scene: fully filled */
  animation: clLabFill var(--lab-t) ease infinite both;
}

/* the pip riding the track — base = final scene: seated, mint */
.cl-lab-pip {
  position: absolute;
  top: 15px;
  left: 90%;
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  transform: translate(-50%, -50%);
  z-index: 2;
  background: var(--mint);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--mint) 18%, transparent),
    0 2px 6px color-mix(in srgb, var(--mint) 35%, transparent);
  animation: clLabPip var(--lab-t) ease infinite both;
}

/* stops */
.cl-lab-stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--ink); /* base = final scene: every label reached */
}
.cl-lab-stop--2 { animation: clLabStop2 var(--lab-t) ease infinite both; }
.cl-lab-stop--3 { animation: clLabStop3 var(--lab-t) ease infinite both; }
.cl-lab-stop--4 { animation: clLabStop4 var(--lab-t) ease infinite both; }
.cl-lab-stop--5 { animation: clLabStop5 var(--lab-t) ease infinite both; }

/* the dot: muted → sand-blue (current) → mint ✓ (past) */
.cl-lab-dot {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  border: 2px solid var(--mint);
  background: var(--mint); /* base = final scene: minted */
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 1;
}
.cl-lab-dot::after {
  content: "✓";
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: inherit;
}
.cl-lab-stop--1 .cl-lab-dot { animation: clLabDot1 var(--lab-t) ease infinite both; }
.cl-lab-stop--2 .cl-lab-dot { animation: clLabDot2 var(--lab-t) ease infinite both; }
.cl-lab-stop--3 .cl-lab-dot { animation: clLabDot3 var(--lab-t) ease infinite both; }
.cl-lab-stop--4 .cl-lab-dot { animation: clLabDot4 var(--lab-t) ease infinite both; }
.cl-lab-stop--5 .cl-lab-dot { animation: clLabDot5 var(--lab-t) ease infinite both; }

.cl-lab-stoplabel {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  max-width: 9ch;
  color: currentColor;
}

/* ── attachment + validation rows ── */
.cl-lab-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.cl-lab-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.cl-lab-rowk {
  flex-shrink: 0;
  width: 68px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.cl-lab-row--attach { animation: clLabAttach var(--lab-t) ease infinite both; }

.cl-lab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-60);
}
.cl-lab-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--cl-blue);
  opacity: .7;
}

.cl-lab-ok {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--mint) 35%, #fff);
  border-radius: var(--r-pill);
  background: var(--cl-mint-wash);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
}
.cl-lab-ok i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: var(--mint);
}
.cl-lab-ok--1 { animation: clLabOk1 var(--lab-t) ease infinite both; }
.cl-lab-ok--2 { animation: clLabOk2 var(--lab-t) ease infinite both; }
.cl-lab-ok--3 { animation: clLabOk3 var(--lab-t) ease infinite both; }

/* ── the live cost line ── */
.cl-lab-cost {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
  animation: clLabCost var(--lab-t) ease infinite both;
}
.cl-lab-cost-k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-blue-deep);
}
.cl-lab-cost-v {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cl-lab-cost-arrow { font-size: 12px; color: var(--ink-40); }
.cl-lab-cost-note {
  font-size: 12px;
  font-weight: 500;
  color: color-mix(in srgb, var(--mint) 75%, var(--ink));
}

/* ── the second quote, across the stage floor ── */
.cl-lab-alt {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding: 13px 4px 0;
  border-top: 1px solid var(--line-2);
  font-family: var(--mono);
  animation: clLabAlt var(--lab-t) ease infinite both;
}
.cl-lab-alt-k {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cl-blue-deep);
}
.cl-lab-alt-v {
  font-size: 11.5px;
  color: var(--ink-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   TIMELINE — one 14s cycle (each 1% = 140ms)
   0–3    the card settles, pip resting at Impression
   4–8    attachments dock (STL, Rx PDF, photos)
   9–18   the Rx validates itself — three mint checks pop
   19–25  pip hops to Sent · 26 Sent goes current
   44–62  In production (the long hold) · 55 the quote lands
   63     Coastline's second quote settles on the floor
   67–78  Shipped · 83 Seated · 90 the pip turns mint
   96–100 soft reset
   ============================================================ */

@keyframes clLabCard {
  0%       { opacity: 0; transform: translateY(6px); }
  3%       { opacity: 1; transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}

@keyframes clLabFill {
  0%, 19%  { transform: scaleX(0); }
  25%      { transform: scaleX(.25); }
  40%      { transform: scaleX(.25); }
  46%      { transform: scaleX(.5); }
  62%      { transform: scaleX(.5); }
  67%      { transform: scaleX(.75); }
  78%      { transform: scaleX(.75); }
  83%, 100% { transform: scaleX(1); }
}

@keyframes clLabPip {
  0%, 19% {
    left: 10%;
    background: var(--cl-blue);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--cl-blue) 15%, transparent),
      0 2px 6px color-mix(in srgb, var(--cl-blue) 30%, transparent);
    animation-timing-function: cubic-bezier(.65,.05,.35,1);
  }
  25%      { left: 30%; }
  40%      { left: 30%; animation-timing-function: cubic-bezier(.65,.05,.35,1); }
  46%      { left: 50%; }
  62%      { left: 50%; animation-timing-function: cubic-bezier(.65,.05,.35,1); }
  67%      { left: 70%; }
  78%      { left: 70%; animation-timing-function: cubic-bezier(.65,.05,.35,1); }
  83%      { left: 90%; }
  86% {
    background: var(--cl-blue);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--cl-blue) 15%, transparent),
      0 2px 6px color-mix(in srgb, var(--cl-blue) 30%, transparent);
  }
  90%, 100% {
    left: 90%;
    background: var(--mint);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--mint) 18%, transparent),
      0 2px 6px color-mix(in srgb, var(--mint) 35%, transparent);
  }
}

/* dots: muted → sand-blue current → mint ✓ */
@keyframes clLabDot1 {
  0%, 19% {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cl-blue) 16%, transparent);
  }
  23%, 100% {
    background: var(--mint);
    border-color: var(--mint);
    color: #fff;
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes clLabDot2 {
  0%, 23% {
    background: #fff;
    border-color: var(--line);
    color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
  26%, 40% {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cl-blue) 16%, transparent);
  }
  44%, 100% {
    background: var(--mint);
    border-color: var(--mint);
    color: #fff;
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes clLabDot3 {
  0%, 44% {
    background: #fff;
    border-color: var(--line);
    color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
  47%, 62% {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cl-blue) 16%, transparent);
  }
  66%, 100% {
    background: var(--mint);
    border-color: var(--mint);
    color: #fff;
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes clLabDot4 {
  0%, 66% {
    background: #fff;
    border-color: var(--line);
    color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
  69%, 78% {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cl-blue) 16%, transparent);
  }
  82%, 100% {
    background: var(--mint);
    border-color: var(--mint);
    color: #fff;
    box-shadow: 0 0 0 0 transparent;
  }
}
@keyframes clLabDot5 {
  0%, 82% {
    background: #fff;
    border-color: var(--line);
    color: transparent;
    box-shadow: 0 0 0 0 transparent;
  }
  85%, 88% {
    background: var(--cl-blue);
    border-color: var(--cl-blue);
    color: transparent;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cl-blue) 16%, transparent);
  }
  91%, 100% {
    background: var(--mint);
    border-color: var(--mint);
    color: #fff;
    box-shadow: 0 0 0 0 transparent;
  }
}

/* stop labels: muted until the pip arrives */
@keyframes clLabStop2 {
  0%, 23%   { color: var(--ink-40); }
  27%, 100% { color: var(--ink); }
}
@keyframes clLabStop3 {
  0%, 44%   { color: var(--ink-40); }
  48%, 100% { color: var(--ink); }
}
@keyframes clLabStop4 {
  0%, 66%   { color: var(--ink-40); }
  70%, 100% { color: var(--ink); }
}
@keyframes clLabStop5 {
  0%, 82%   { color: var(--ink-40); }
  86%, 100% { color: var(--ink); }
}

/* attachments dock, checks pop, the quote lands */
@keyframes clLabAttach {
  0%, 4%    { opacity: 0; transform: translateY(4px); }
  8%, 100%  { opacity: 1; transform: none; }
}
@keyframes clLabOk1 {
  0%, 9%    { opacity: 0; transform: scale(.92); }
  12%, 100% { opacity: 1; transform: none; }
}
@keyframes clLabOk2 {
  0%, 12%   { opacity: 0; transform: scale(.92); }
  15%, 100% { opacity: 1; transform: none; }
}
@keyframes clLabOk3 {
  0%, 15%   { opacity: 0; transform: scale(.92); }
  18%, 100% { opacity: 1; transform: none; }
}
@keyframes clLabCost {
  0%, 50%   { opacity: 0; transform: translateY(6px); }
  55%, 100% { opacity: 1; transform: none; }
}
@keyframes clLabAlt {
  0%, 58%  { opacity: 0; transform: translateY(6px); }
  63%      { opacity: 1; transform: none; }
  96%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes clLabLive {
  0%       { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 40%, transparent); }
  70%      { box-shadow: 0 0 0 7px transparent; }
  100%     { box-shadow: 0 0 0 0 transparent; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .cl-lab-grid { grid-template-columns: 1fr; gap: 40px; }
  .cl-lab-stage { max-width: 620px; order: 2; }
}
@media (max-width: 560px) {
  .cl-lab-stage { padding: 16px 14px 12px; }
  .cl-lab-card { padding: 14px 13px 13px; }
  .cl-lab-stoplabel { font-size: 9px; max-width: 8ch; }
  .cl-lab-rowk { width: 100%; }
  .cl-lab-open { display: none; }
  .cl-lab-alt-v { white-space: normal; }
}

/* reduced motion — freeze on the final scene (case seated, quote in the plan) */
@media (prefers-reduced-motion: reduce), (max-width: 700px) {
  .cl-lab *,
  .cl-lab *::before,
  .cl-lab *::after {
    animation: none !important;
    transition: none !important;
  }
}