/* ============================================================
   B20 FACTORY — early access
   white paper / blue ink · engineering-drawing aesthetic
   ============================================================ */

:root {
  --paper: #f7faff;          /* sheet background */
  --paper-raised: #ffffff;   /* panels */
  --ink: #0a2a66;            /* deep blue text */
  --blue: #1156ff;           /* primary line/ink */
  --blue-soft: #6f96e8;      /* secondary annotations */
  --blue-wash: #e9f0ff;      /* light fills */
  --line: rgba(17, 86, 255, .34);
  --line-soft: rgba(17, 86, 255, .13);
  --grid-fine: rgba(17, 86, 255, .055);
  --grid-bold: rgba(17, 86, 255, .10);
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--blue); color: #fff; }

/* ---------------------------------------------------- blueprint grid */

.bp-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
}

/* ---------------------------------------------------------- topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(247, 250, 255, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .12em;
}

.topbar__brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }

.topbar__mark {
  width: 12px; height: 12px;
  border: 2px solid var(--blue);
  background:
    linear-gradient(45deg, transparent 46%, var(--blue) 46%, var(--blue) 54%, transparent 54%);
}

.topbar__sep { color: var(--blue-soft); margin: 0 8px; }

.topbar__stat { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.topbar__stat b { color: var(--blue); font-size: 13px; }
.topbar__stat .dim { color: var(--blue-soft); }

.led {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(17, 86, 255, .18);
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(17, 86, 255, .07); } }

/* ------------------------------------------------------------ sheet */

.sheet {
  max-width: 780px;
  margin: 28px auto 48px;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* -------------------------------------------------------------- hero */

.hero {
  background: var(--paper-raised);
  border: 1.5px solid var(--blue);
  outline: 1px solid var(--line-soft);
  outline-offset: 5px;
  padding: 0 0 8px;
}

.hero__meta {
  display: flex;
  gap: 22px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--blue-soft);
}
.hero__meta-right { margin-left: auto; color: var(--blue); }

.hero__title {
  font-family: var(--sans);
  font-size: clamp(38px, 8vw, 64px);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.05;
  padding: 22px 18px 4px;
  color: var(--blue);
  -webkit-text-stroke: 0;
}

.hero__sub {
  padding: 6px 18px 18px;
  max-width: 56ch;
  color: var(--ink);
}
.hero__sub b { color: var(--blue); }

.hero__fig {
  margin: 0 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 16px 16px;
}

.factory { display: block; width: 100%; height: auto; }

.hero__cap {
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--blue-soft);
}

/* ---- factory svg strokes */

.f-line  { fill: none; stroke: var(--blue); stroke-width: 1.6; }
.f-lite  { fill: var(--blue-wash); stroke: var(--blue); stroke-width: 1.4; }
.f-unit  { fill: var(--paper-raised); stroke: var(--blue); stroke-width: 1.6; }
.f-dash  { fill: none; stroke: var(--blue-soft); stroke-width: 1; stroke-dasharray: 4 6; }
.f-cross { stroke: var(--blue-soft); stroke-width: 1; }
.f-text  { font-family: var(--mono); font-size: 11px; font-weight: 700; fill: var(--blue); letter-spacing: .05em; }
.f-text--unit { font-size: 8.5px; }

.f-note line { stroke: var(--blue-soft); stroke-width: 1; }
.f-note text { font-family: var(--mono); font-size: 9.5px; fill: var(--blue-soft); letter-spacing: .12em; }

.f-dim line { stroke: var(--blue-soft); stroke-width: 1; }
.f-dim path { fill: var(--blue-soft); }
.f-dim rect { fill: var(--paper-raised); stroke: none; }
.f-dim text { font-family: var(--mono); font-size: 9.5px; fill: var(--blue-soft); letter-spacing: .14em; }

/* ---- factory motion */

.f-belt {
  fill: none; stroke: var(--blue); stroke-width: 1.6;
  stroke-dasharray: 8 6;
  animation: belt 1.1s linear infinite;
}
@keyframes belt { to { stroke-dashoffset: -14; } }

.units { animation: roll 3.4s linear infinite; }
@keyframes roll { to { transform: translateX(96px); } }

.gear--big   { animation: spin 9s linear infinite; transform-origin: 290px 164px; }
.gear--small { animation: spin 6s linear infinite reverse; transform-origin: 322px 196px; }
@keyframes spin { to { transform: rotate(360deg); } }

.f-smoke circle { fill: none; stroke: var(--blue-soft); stroke-width: 1.2; opacity: 0; }
.f-smoke .s1 { animation: puff 3s ease-out infinite; }
.f-smoke .s2 { animation: puff 3s ease-out infinite 1s; }
.f-smoke .s3 { animation: puff 3s ease-out infinite 2s; }
@keyframes puff {
  0%   { opacity: 0;  transform: translateY(6px); }
  30%  { opacity: .8; }
  100% { opacity: 0;  transform: translateY(-10px); }
}

/* ----------------------------------------------------------- stepper */

.stepper {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 2px 6px;
}

.stepnode {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--blue-soft);
  white-space: nowrap;
}

.stepnode__n {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1.5px solid var(--line);
  background: var(--paper-raised);
  font-weight: 700;
  color: var(--blue-soft);
  transition: all .25s ease;
}

/* connecting line */
.stepnode:not(:last-child)::after {
  content: "";
  flex: 1;
  min-width: 24px;
  height: 0;
  margin: 0 12px;
  border-top: 1.5px dashed var(--line);
}
.stepnode:not(:last-child) { flex: 1; }

.stepnode.is-active .stepnode__n {
  border-color: var(--blue);
  color: var(--blue);
  box-shadow: 3px 3px 0 var(--blue-wash);
}
.stepnode.is-active { color: var(--blue); }

.stepnode.is-done .stepnode__n {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.stepnode.is-done { color: var(--ink); }
.stepnode.is-done:not(:last-child)::after { border-top-style: solid; border-color: var(--blue); }

/* ------------------------------------------------------------ panels */

.panel {
  background: var(--paper-raised);
  border: 1.5px solid var(--blue);
  transition: opacity .3s ease;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .14em;
}

.panel__step  { color: var(--blue-soft); }
.panel__title { font-weight: 700; color: var(--blue); }

.panel__chip {
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--line);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--blue-soft);
  background: var(--paper);
}

.panel__body { padding: 16px; }

.panel__lead {
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 14px;
  max-width: 60ch;
}

/* locked */
.panel.is-locked { border-style: dashed; border-color: var(--line); opacity: .55; }
.panel.is-locked .panel__body { display: none; }

/* active */
.panel.is-active .panel__chip {
  border-color: var(--blue);
  color: var(--blue);
  animation: chipblink 1.6s steps(2) infinite;
}
@keyframes chipblink { 50% { background: var(--blue-wash); } }

/* done — collapse to the head line */
.panel.is-done { border-color: var(--line); }
.panel.is-done .panel__chip {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.panel.is-done .panel__lead,
.panel.is-done .field,
.panel.is-done .field__err { display: none; }
.panel.is-done .panel__done-line { display: block; }

.panel__done-line {
  font-size: 13px;
  color: var(--ink);
}
.panel__done-line b { color: var(--blue); }

/* ------------------------------------------------------------- field */

.field {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--blue);
  background: var(--paper);
  max-width: 520px;
}

.field__prefix {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--line);
  color: var(--blue);
  font-weight: 700;
  background: var(--blue-wash);
}

.field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 12px;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
}
.field__input::placeholder { color: var(--blue-soft); opacity: .75; }

.field__err {
  margin-top: 8px;
  font-size: 12px;
  color: #c0332b;
  min-height: 1em;
}

.hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }

/* -------------------------------------------------------------- btn */

.btn {
  appearance: none;
  border: 0;
  border-left: 1.5px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  padding: 12px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, transform .06s ease;
}
.btn:hover  { background: #0d43cc; }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--blue-soft); cursor: default; }

.btn--ghost {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn--ghost:hover { background: var(--blue-wash); }

/* -------------------------------------------------------------- tasks */

.tasks { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.task {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1.5px solid var(--blue);
  background: var(--paper);
  transition: opacity .25s ease, border-color .25s ease;
}

.task__idx {
  font-size: 10.5px;
  letter-spacing: .12em;
  color: var(--blue-soft);
  min-width: 38px;
}

.task__body { flex: 1; min-width: 0; }
.task__title { display: block; font-weight: 700; font-size: 13.5px; color: var(--ink); }
.task__desc  { display: block; font-size: 12px; color: var(--blue-soft); margin-top: 2px; }

.task__state { display: flex; align-items: center; gap: 10px; }

.task__btn {
  border: 1.5px solid var(--blue);
  border-left: 1.5px solid var(--blue);
  padding: 9px 16px;
}

/* verify progress bar */
.task__bar {
  display: none;
  width: 110px;
  height: 10px;
  border: 1px solid var(--blue);
  background: var(--paper-raised);
  overflow: hidden;
}
.task__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(
    -45deg, var(--blue) 0 6px, #4d7dff 6px 12px);
}

.task__check {
  display: none;
  width: 26px; height: 26px;
  border: 1.5px solid var(--blue);
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  text-align: center;
  line-height: 24px;
}

/* task states */
.task--locked { border-style: dashed; border-color: var(--line); opacity: .5; }
.task--locked .task__btn { display: none; }

.task--verifying .task__btn { display: none; }
.task--verifying .task__bar { display: block; }
.task--verifying .task__bar i { animation: fill var(--verify-ms, 1600ms) linear forwards; }
@keyframes fill { to { width: 100%; } }

.task--done { border-color: var(--line); background: var(--paper-raised); }
.task--done .task__btn, .task--done .task__bar { display: none; }
.task--done .task__check { display: block; }
.task--done .task__title { color: var(--blue-soft); text-decoration: line-through; text-decoration-thickness: 1px; }

/* --------------------------------------------------------------- pass */

.pass {
  position: relative;
  background: var(--paper-raised);
  border: 1.5px solid var(--blue);
  outline: 1px solid var(--line-soft);
  outline-offset: 5px;
  padding: 0;
  animation: passIn .45s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes passIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.pass__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  letter-spacing: .16em;
}
.pass__brand { font-weight: 700; color: var(--blue); }
.pass__chain { color: var(--blue-soft); border: 1px solid var(--line); padding: 2px 8px; }

.pass__main {
  display: flex;
  gap: 18px;
  padding: 18px 16px;
  align-items: center;
  flex-wrap: wrap;
}

.pass__seat { text-align: center; min-width: 150px; }
.pass__seatlabel { font-size: 10.5px; letter-spacing: .2em; color: var(--blue-soft); }
.pass__seatnum {
  font-family: var(--sans);
  font-size: 52px;
  font-weight: 800;
  color: var(--blue);
  line-height: 1.1;
}

.pass__rows { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 7px; }
.pass__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--line-soft);
  padding-bottom: 6px;
}
.pass__k { color: var(--blue-soft); letter-spacing: .12em; font-size: 11px; }
.pass__v { font-weight: 700; color: var(--ink); }

.pass__stamp {
  position: absolute;
  top: 52px;
  right: 18px;
  transform: rotate(-8deg);
  border: 2px solid var(--blue);
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  padding: 5px 10px;
  opacity: .85;
  background: rgba(255, 255, 255, .8);
  pointer-events: none;
}

.pass__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 14px;
}
.pass__badge {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--blue);
  border: 1px solid var(--blue);
  background: var(--blue-wash);
  padding: 4px 9px;
}

.pass__code {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 16px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.pass__barcode {
  flex: 1;
  height: 30px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 5px,
    var(--ink) 5px 8px, transparent 8px 10px,
    var(--ink) 10px 11px, transparent 11px 15px,
    var(--ink) 15px 18px, transparent 18px 21px);
  opacity: .8;
}
.pass__serial { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }

.pass__foot {
  display: flex;
  gap: 10px;
  padding: 0 16px 16px;
  flex-wrap: wrap;
}
.pass__foot .btn { border: 1.5px solid var(--blue); text-decoration: none; display: inline-block; }

.pass__note {
  padding: 0 16px 16px;
  font-size: 11.5px;
  color: var(--blue-soft);
}

/* ------------------------------------------------------------- footer */

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto 34px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--blue-soft);
  flex-wrap: wrap;
}
.footer__x { color: var(--blue); text-decoration: none; font-weight: 700; }
.footer__x:hover { text-decoration: underline; }

/* --------------------------------------------------------- responsive */

@media (max-width: 560px) {
  .topbar { font-size: 10.5px; padding: 9px 12px; }
  .topbar__sep { margin: 0 5px; }

  .hero__meta { gap: 12px; flex-wrap: wrap; }
  .hero__title { padding-top: 16px; }

  .stepnode__name { display: none; }
  .stepnode.is-active .stepnode__name { display: inline; }

  .task { flex-wrap: wrap; }
  .task__idx { min-width: auto; }
  .task__body { flex-basis: 100%; order: -1; }
  .task__state { margin-left: auto; }

  .field { flex-wrap: nowrap; }
  .btn { padding: 12px 13px; font-size: 11px; }

  .pass__stamp { position: static; transform: rotate(-4deg); margin: 10px 16px 0; display: inline-block; }
  .pass__seatnum { font-size: 42px; }
}

/* ---------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .f-belt, .units, .gear--big, .gear--small, .f-smoke circle,
  .led, .panel.is-active .panel__chip { animation: none !important; }
  html { scroll-behavior: auto; }
}