/* DarkWarehouse — Hazard Line components. Requires tokens.css.
   Put class="dw" on <body>. Everything is prefixed dw- so it never collides with app CSS. */

.dw {
  margin: 0;
  background: var(--dw-bg);
  color: var(--dw-fg);
  font: 400 var(--dw-text-md)/1.55 var(--dw-font-body);
  -webkit-font-smoothing: antialiased;
}
.dw *, .dw *::before, .dw *::after { box-sizing: border-box; }
.dw :focus-visible { outline: 3px solid var(--dw-accent); outline-offset: 2px; }

/* ---------- type ---------- */
.dw-display, .dw-h1, .dw-h2, .dw-h3 {
  font-family: var(--dw-font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0;
  text-wrap: balance;
}
.dw-display { font-weight: 900; font-size: clamp(2.5rem, 8vw, 5rem); }
.dw-h1 { font-weight: 900; font-size: clamp(var(--dw-text-xl), 5vw, var(--dw-text-3xl)); }
.dw-h2 { font-weight: 800; font-size: var(--dw-text-xl); }
.dw-h3 { font-weight: 800; font-size: var(--dw-text-lg); letter-spacing: 0.02em; }
.dw-label {
  font: 500 var(--dw-text-xs)/1.3 var(--dw-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dw-muted);
}
.dw-muted { color: var(--dw-muted); }
.dw-mono { font-family: var(--dw-font-mono); font-size: 0.9em; }
.dw-num { font-variant-numeric: tabular-nums; }
.dw a, .dw-link { color: var(--dw-accent-ink); text-underline-offset: 3px; }

/* ---------- stripe ---------- */
.dw-stripe { height: 8px; background: var(--dw-stripe); }
.dw-stripe--thin { height: 4px; }

/* ---------- app shell ---------- */
.dw-topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--dw-bg); border-bottom: 1px solid var(--dw-line); }
.dw-topbar::before { content: ""; display: block; height: 4px; background: var(--dw-stripe); }
.dw-topbar__in {
  display: flex; align-items: center; gap: var(--dw-s3); flex-wrap: wrap;
  padding-block: var(--dw-s3);
  padding-left: max(var(--dw-s4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--dw-s4), env(safe-area-inset-right, 0px));
  max-width: 1200px; margin: 0 auto;
}
.dw-topbar__mark { width: 28px; height: 28px; flex: none; }
.dw-topbar__title { font: 800 var(--dw-text-lg)/1 var(--dw-font-display); text-transform: uppercase; letter-spacing: 0.02em; }
.dw-topbar__meta { margin-left: auto; display: flex; gap: var(--dw-s2); align-items: center; flex-wrap: wrap; }
.dw-main {
  max-width: 1200px; margin: 0 auto;
  padding-block: var(--dw-s6) var(--dw-s8);
  padding-left: max(var(--dw-s4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--dw-s4), env(safe-area-inset-right, 0px));
  display: grid; gap: var(--dw-s5);
}

/* ---------- bay code: every just-in-time app has one ---------- */
.dw-bay {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 var(--dw-text-xs)/1 var(--dw-font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 8px; border: 1px solid var(--dw-fg); border-radius: var(--dw-radius);
}
.dw-bay::before { content: ""; width: 6px; height: 6px; background: var(--dw-accent); }

/* ---------- buttons ---------- */
.dw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--dw-s2);
  font: 700 var(--dw-text-sm)/1 var(--dw-font-body);
  padding: 11px 18px; min-height: 40px;
  border-radius: var(--dw-radius); border: 1.5px solid var(--dw-line);
  background: var(--dw-raised); color: var(--dw-fg);
  cursor: pointer; text-decoration: none;
  transition: background .12s, border-color .12s, transform .06s;
}
.dw-btn:hover { border-color: var(--dw-fg); }
.dw-btn:active { transform: translateY(1px); }
.dw-btn:disabled { opacity: .45; cursor: not-allowed; }
.dw-btn--primary { background: var(--dw-accent); border-color: var(--dw-accent); color: var(--dw-on-accent); }
.dw-btn--primary:hover { border-color: var(--dw-fg); }
.dw-btn--ghost { background: transparent; border-color: transparent; }
.dw-btn--ghost:hover { border-color: var(--dw-line); }
.dw-btn--stop { background: transparent; border-color: var(--dw-stop); color: var(--dw-stop); }

/* ---------- pills ---------- */
.dw-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 var(--dw-font-mono); letter-spacing: 0.04em; text-transform: lowercase;
  padding: 5px 9px; border-radius: var(--dw-radius-pill);
  border: 1px solid currentColor; color: var(--dw-muted); white-space: nowrap;
}
.dw-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dw-pill--go { color: var(--dw-go); }
.dw-pill--stop { color: var(--dw-stop); }
.dw-pill--caution { color: var(--dw-caution); }
.dw-pill--info { color: var(--dw-info); }
.dw-pill--ttl { color: var(--dw-accent-ink); }

/* ---------- cards ---------- */
.dw-card {
  background: var(--dw-surface); border: 1px solid var(--dw-line); border-radius: var(--dw-radius);
  padding: var(--dw-s5); display: grid; gap: var(--dw-s3); min-width: 0;
}
.dw-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--dw-s3); flex-wrap: wrap; }

/* gate = a human has to decide something. The ONLY place the stripe frames content. */
.dw-gate {
  position: relative; background: var(--dw-surface);
  border: 1.5px solid var(--dw-accent); border-radius: var(--dw-radius);
  padding: var(--dw-s5); padding-left: calc(var(--dw-s5) + 12px);
  display: grid; gap: var(--dw-s3); min-width: 0;
}
.dw-gate::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 12px; background: var(--dw-stripe); }
.dw-gate__actions { display: flex; gap: var(--dw-s2); flex-wrap: wrap; }

/* ---------- progress ---------- */
.dw-progress { height: 8px; background: var(--dw-raised); border: 1px solid var(--dw-line); border-radius: var(--dw-radius); overflow: hidden; }
.dw-progress > span { display: block; height: 100%; background: var(--dw-accent); }
.dw-progress--blocked > span { background: var(--dw-stripe); }

/* ---------- stat ---------- */
.dw-stat { display: grid; gap: 2px; }
.dw-stat__v { font: 900 var(--dw-text-2xl)/1 var(--dw-font-display); font-variant-numeric: tabular-nums; }

/* ---------- table ---------- */
.dw-table-wrap { overflow-x: auto; border: 1px solid var(--dw-line); border-radius: var(--dw-radius); }
.dw-table { width: 100%; border-collapse: collapse; font-size: var(--dw-text-sm); }
.dw-table th { text-align: left; font: 500 var(--dw-text-xs)/1.3 var(--dw-font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dw-muted); background: var(--dw-surface); }
.dw-table th, .dw-table td { padding: 10px 14px; border-bottom: 1px solid var(--dw-line); white-space: nowrap; }
.dw-table tr:last-child td { border-bottom: 0; }
.dw-table td.dw-num { text-align: right; }

/* ---------- forms ---------- */
.dw-field { display: grid; gap: 6px; }
.dw-input, .dw-select, .dw-textarea {
  font: 400 var(--dw-text-md)/1.4 var(--dw-font-body); color: var(--dw-fg);
  background: var(--dw-bg); border: 1.5px solid var(--dw-line); border-radius: var(--dw-radius);
  padding: 10px 12px; width: 100%;
}
.dw-input:focus, .dw-select:focus, .dw-textarea:focus { border-color: var(--dw-accent); outline: none; }
.dw-choice { display: flex; align-items: center; gap: var(--dw-s3); padding: 12px 14px; border: 1.5px solid var(--dw-line); border-radius: var(--dw-radius); cursor: pointer; }
.dw-choice:has(input:checked) { border-color: var(--dw-accent); background: var(--dw-raised); }
.dw-choice input { accent-color: var(--dw-accent); width: 18px; height: 18px; }

/* ---------- chat message (bot → person) ---------- */
.dw-msg { background: var(--dw-surface); border: 1px solid var(--dw-line); border-radius: var(--dw-radius); padding: var(--dw-s3) var(--dw-s4); display: grid; gap: 6px; max-width: 60ch; }
.dw-msg__who { display: flex; align-items: center; gap: var(--dw-s2); font: 500 var(--dw-text-xs)/1 var(--dw-font-mono); color: var(--dw-muted); }
.dw-msg__who::before { content: ""; width: 8px; height: 8px; background: var(--dw-accent); }

@media (prefers-reduced-motion: reduce) { .dw * { transition: none !important; } }