/* ============================================================
   W2-B — SCIENCE + PROOF-CERTIFIED DIGITAL FACTORY prototype skin
   Additive only, same non-destructive contract as W2-A's skin file.
   Direction per SONNET_WEB_WORK_ORDERS_V1 W2-B: "process, evidence,
   verification, R&D credibility." Motion favors precise, measured
   verification cues (checkmarks, tick marks, grid alignment) over
   W2-A's glow/circuit premium-tech aesthetic. Orange = attention/
   pending, cyan = verified, per SHARED_DESIGN_SYSTEM_V1 tokens.
   ============================================================ */

:root{
  --w2b-verified: #3FD3B8;
  --w2b-pending: #E0A23C;
  --w2b-line: rgba(63,211,184,.18);
  --w2b-ink: #070A09;
}

body[data-w2b="science-factory"]{
  background:
    linear-gradient(180deg, rgba(63,211,184,.05), transparent 30%),
    #06090A;
}

/* Institutional grid backdrop on the hero: fixed rule lines, no
   radial vignette drama — precision over spectacle. */
body[data-w2b="science-factory"] .hero.ink.hero-universal{ position:relative; }
body[data-w2b="science-factory"] .hero.ink.hero-universal::before{
  content:"";
  position:absolute; inset:0;
  background-image: linear-gradient(var(--w2b-line) 1px, transparent 1px);
  background-size: 100% 48px;
  opacity:.4;
  pointer-events:none;
}
body[data-w2b="science-factory"] .hero .wrap{ position:relative; z-index:1; }

/* Label reads as a lab/QA stamp: monospace-flavoured, bracketed */
body[data-w2b="science-factory"] .hero .label{
  font-family: var(--f-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: var(--w2b-verified);
  letter-spacing:.04em;
}
body[data-w2b="science-factory"] .hero .label::before{ content:"[ "; }
body[data-w2b="science-factory"] .hero .label::after{ content:" ]"; }

/* Module grid: reads as an instrument panel — square meter caps,
   verified/pending coloring instead of a single glow tone. */
body[data-w2b="science-factory"] .module{
  border-radius:4px;
  border:1px solid rgba(63,211,184,.14);
}
body[data-w2b="science-factory"] .module .meter{ border-radius:2px; }
body[data-w2b="science-factory"] .module .meter i{
  border-radius:1px;
  background: rgba(63,211,184,.18);
}
body[data-w2b="science-factory"] .module .meter i[data-w2b-lit="verified"]{ background: var(--w2b-verified); }
body[data-w2b="science-factory"] .module .meter i[data-w2b-lit="pending"]{ background: var(--w2b-pending); }

/* Cycle rail: each dot becomes a certification stamp — a checkmark
   is stroke-drawn (dasharray/dashoffset) once the step is "passed",
   never looping. */
body[data-w2b="science-factory"] .cycle-rail .fill{
  background: linear-gradient(90deg, var(--w2b-pending), var(--w2b-verified));
}
body[data-w2b="science-factory"] .cycle-rail .step .dot{
  position:relative;
  border:1px solid rgba(63,211,184,.25);
  border-radius:3px;
  overflow:visible;
}
body[data-w2b="science-factory"] .cycle-rail .step[data-w2b-passed="1"] .dot{
  border-color: var(--w2b-verified);
  color: var(--w2b-verified);
}
body[data-w2b="science-factory"] .cycle-rail .step .w2b-tick{
  position:absolute; right:-6px; top:-6px; width:14px; height:14px;
  pointer-events:none;
}
body[data-w2b="science-factory"] .cycle-rail .step .w2b-tick path{
  fill:none; stroke:var(--w2b-verified); stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray: 16; stroke-dashoffset: 16;
}
body[data-w2b="science-factory"] .cycle-rail .step[data-w2b-passed="1"] .w2b-tick path{
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .38s ease-out;
}

/* World cards: certification-corner tag instead of a hover-tilt —
   evidence-forward rather than premium-forward. Meaning never
   depends on hover (cards remain plain, fully labeled links). */
body[data-w2b="science-factory"] .world-card{
  border-radius:6px;
  border:1px solid rgba(63,211,184,.12);
}
body[data-w2b="science-factory"] .world-card .tag{
  border:1px solid var(--w2b-verified);
  color: var(--w2b-verified);
  background: rgba(6,9,10,.72);
}

/* Feature numerals: square "spec sheet" numbering, verified tick
   appears once bound instead of a glow. */
body[data-w2b="science-factory"] .feature{
  border-left:2px solid rgba(63,211,184,.15);
  padding-left:14px;
}
body[data-w2b="science-factory"] .feature .n{
  font-family: var(--f-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: rgba(63,211,184,.45);
}
body[data-w2b="science-factory"] .feature[data-w2b-bound="1"]{
  border-left-color: var(--w2b-verified);
}
body[data-w2b="science-factory"] .feature[data-w2b-bound="1"] .n{ color: var(--w2b-verified); }

/* Contact/footer: certified-seal border, no glow */
body[data-w2b="science-factory"] .form-card{ border:1px solid rgba(63,211,184,.22); border-radius:6px; }
body[data-w2b="science-factory"] .site-foot{ border-top:1px solid rgba(63,211,184,.14); }

/* Reveal baseline — identical contract to W2-A: only applies once
   [data-w2b-armed] is set by JS after motion-preference is known;
   default (no JS) state is always fully visible. */
body[data-w2b-armed="1"] [data-w2b-io]{ opacity:0; transform:translateY(14px); }
body[data-w2b-armed="1"] [data-w2b-io].w2b-in{
  opacity:1; transform:translateY(0);
  transition:opacity .42s ease-out, transform .42s ease-out;
}

@media (prefers-reduced-motion: reduce){
  body[data-w2b-armed="1"] [data-w2b-io]{ opacity:1 !important; transform:none !important; }
  body[data-w2b="science-factory"] .cycle-rail .step .w2b-tick path{ transition:none !important; }
}