/* =============================================================
   WLWYB WEB 3.0 - 001 B2B Skeptic's Sequence
   Load after colors_and_type.css, data_system.css, site.css
   ============================================================= */

/* ---- Page-level constraints --------------------------------- */

body {
  height: 100dvh;
  overflow: hidden;
}

/* ---- Back-to-partition mark --------------------------------- */

.b2b-back {
  position: fixed;
  top: var(--space-5);
  left: var(--space-5);
  z-index: 200;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-dim);
  text-transform: uppercase;
  transition: color 200ms ease;
}

.b2b-back:hover { color: var(--color-primary); }

/* ---- 3-column layout ---------------------------------------- */

.b2b-layout {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
  /* Full-width bottom rule caps the app: the spine + rail column lines
     terminate against it, and the colophon reads as a separate band below. */
  border-bottom: 1px solid var(--color-border);
}

/* ---- Numbered spine (01-08, far left) ----------------------- */

.b2b-spine {
  width: 48px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-9) 0 var(--space-5);
  gap: var(--space-1);
  overflow-y: auto;
}

.spine-item {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-1);
  letter-spacing: 0.06em;
  line-height: 1;
  transition: color 150ms ease;
}

.spine-item:hover { color: var(--color-secondary); }

.spine-item[aria-current="step"] {
  color: var(--color-accent-yellow);
}

/* ---- Reading column (2 parts) ------------------------------- */

.b2b-reading {
  flex: 2;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-9) var(--space-8) var(--space-5);
  gap: var(--space-5);
  position: relative;
}

/* Step counter */
.step-num {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-dim);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: var(--space-4);
}

/* Question (Cabinet Grotesk, large) */
.step-question {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-bright);
  margin-bottom: var(--space-5);
  max-width: 600px;
  text-wrap: balance;
}

/* Answer (Archivo, max 60ch) */
.step-answer {
  font-family: var(--font-primary);
  font-size: var(--size-md);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  max-width: 60ch;
}

.step-answer p { margin-bottom: var(--space-3); }
.step-answer p:last-child { margin-bottom: 0; }

/* Cross-fade on step transition */
.b2b-step {
  transition: opacity 200ms ease;
}
.b2b-step.is-fading { opacity: 0; }

/* ---- Nav controls ------------------------------------------ */

.b2b-controls {
  background: var(--color-void);
  padding: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  margin-top: auto;
  flex-shrink: 0;
}

/* Q&A sits above the nav row and the progress line */
.b2b-controls .step-question { margin-bottom: var(--space-4); }
.b2b-controls .step-answer p:last-child { margin-bottom: 0; }

.b2b-nav-row {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-7);
}

.b2b-progress-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.b2b-next {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.b2b-next:hover {
  color: var(--color-bright);
}

/* ---- Booking section (step 08) ----------------------------- */

.b2b-booking-wrap[hidden] { display: none; }

.b2b-booking-wrap {
  max-width: 560px;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ---- Step 08: atypical single-screen booking layout -------- */

/* Reading column packs top-down and never scrolls on step 08. */
.b2b-reading.is-booking {
  overflow: hidden;
  padding-top: var(--space-8);
  padding-bottom: var(--space-4);
  gap: var(--space-3);
}

.b2b-reading.is-booking .b2b-stepnum .step-num { margin-bottom: 0; }

.b2b-reading.is-booking .b2b-booking-wrap {
  max-width: none;
  /* Fill the panel so the Q&A sits at the top and the booking box drops
     to the bottom. */
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Lead-in line below the Q&A on step 08 */
.bk__cta {
  font-family: var(--font-primary);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-primary);
  margin-top: var(--space-4);
  max-width: 70ch;
}

/* Booking box (slot picker | form) dropped toward the bottom, with breathing
   room left below it for balance. */
.b2b-reading.is-booking .bk__cols {
  margin-top: auto;
  margin-bottom: var(--space-8);
}

/* Q&A intro pinned to the top of the booking block */
.bk__intro:empty { display: none; }

.bk__intro .step-question {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-bright);
  margin-bottom: var(--space-2);
  max-width: 640px;
  text-wrap: balance;
}

.bk__intro .step-rule { display: none; }

.bk__intro .step-answer {
  font-family: var(--font-primary);
  font-size: var(--size-base);
  line-height: var(--leading-normal);
  color: var(--color-secondary);
  max-width: 70ch;
}

.bk__intro .step-answer p { margin-bottom: var(--space-1); }
.bk__intro .step-answer p:last-child { margin-bottom: 0; }

/* Two columns: slot picker | brief form */
.bk__cols {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-7);
  align-items: start;
  margin-top: var(--space-4);
}

/* Grid items must be allowed to shrink below content width */
.bk__cols > * { min-width: 0; }

/* Tighter form so the whole engage fits one screen */
.b2b-reading.is-booking .ct__form-wrap { padding-top: 0; }
.b2b-reading.is-booking .ct__field { margin-bottom: var(--space-3); }
.b2b-reading.is-booking .ct__form-wrap textarea { min-height: 54px; }
.b2b-reading.is-booking .ct__label { margin-bottom: var(--space-1); }
.b2b-reading.is-booking .ct__form-wrap input,
.b2b-reading.is-booking .ct__form-wrap textarea { padding: var(--space-2) var(--space-3); }
.b2b-reading.is-booking .bk__date-btn { padding: var(--space-2) 0; }
.b2b-reading.is-booking .bk__tz-row { margin-bottom: var(--space-2); }
.b2b-reading.is-booking .bk__sel-row { margin-bottom: var(--space-2); min-height: 0; }
.b2b-reading.is-booking .bk__tz-select { min-width: 0; }

/* Nav + progress stay compact and anchored at the bottom */
.b2b-reading.is-booking .b2b-controls { gap: var(--space-3); padding: var(--space-3) 0 0; }

/* Timezone row */
.bk__tz-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.bk__tz-label {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--color-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.bk__tz-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  padding: var(--space-1) var(--space-2);
  flex: 1;
}

/* Selected slot display */
.bk__sel-row {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-dim);
  min-height: 20px;
  margin-bottom: var(--space-3);
  letter-spacing: 0.04em;
}

.bk__selected-prefix,
.bk__selected-value { display: none; }

.bk__selected-prefix--on,
.bk__selected-value--on { display: inline; }

.bk__selected-value--on {
  color: var(--color-primary);
  margin-left: var(--space-1);
}

/* State message (loading, error, no slots) */
.bk__dates-state {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-dim);
  letter-spacing: 0.04em;
}

/* Date accordion */
.bk__date-item {
  border-bottom: 1px solid var(--color-border);
}

.bk__date-btn {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: color 150ms ease;
  text-align: left;
}

.bk__date-btn:hover { color: var(--color-bright); }

.bk__date-arrow {
  font-size: var(--size-sm);
  color: var(--color-dim);
}

.bk__slots {
  overflow: hidden;
  height: 0;
}

.bk__slots-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) 0 var(--space-4);
}

.bk__slot-btn {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
  letter-spacing: 0.04em;
}

.bk__slot-btn:hover {
  border-color: var(--color-secondary);
  color: var(--color-bright);
}

.bk__slot-btn--selected {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

/* Contact form */
.ct__form-wrap {
  padding-top: var(--space-5);
}

.ct__field {
  margin-bottom: var(--space-5);
}

.ct__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--color-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.ct__form-wrap input,
.ct__form-wrap textarea {
  width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: var(--size-base);
  padding: var(--space-3) var(--space-4);
  resize: vertical;
  transition: border-color 200ms ease;
}

.ct__form-wrap input:focus,
.ct__form-wrap textarea:focus {
  outline: none;
  border-color: var(--color-secondary);
}

.ct__field-error {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: #e05050;
  margin-top: var(--space-1);
  letter-spacing: 0.04em;
}

.ct__field-error--on { display: block; }

.ct__submit {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-void);
  background: var(--color-accent-yellow);
  border: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-6);
  text-transform: uppercase;
  transition: opacity 200ms ease;
}

.ct__submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Success state */
.ct__success { display: none; }
.ct__success--visible { display: block; }

.ct__success-head {
  font-family: var(--font-display);
  font-size: var(--size-xl);
  font-weight: 700;
  color: var(--color-bright);
  margin-bottom: var(--space-3);
}

.ct__success-sub {
  font-family: var(--font-primary);
  font-size: var(--size-base);
  color: var(--color-secondary);
}

/* ---- Evidence rail (1 part, right column) ------------------- */

.b2b-rail {
  width: 300px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  background: var(--color-depth);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.rail-chip {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.rail-count {
  font-family: var(--font-mono);
  font-size: var(--size-2xl);
  font-weight: var(--weight-normal);
  color: var(--color-accent-yellow);
  line-height: 1;
  letter-spacing: -0.02em;
  transition: opacity 200ms ease;
}

.rail-count.is-hidden { display: none; }

.rail-claim {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  color: var(--color-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.rail-cards {
  flex: 1;
  overflow-y: auto;
  transition: opacity 150ms ease;
}

.rail-cards.is-fading { opacity: 0; }

/* Case file card */
.case-card {
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  transition: background 200ms ease;
  cursor: default;
}

/* Visual recess -- the model, lit like an exhibition object */
.card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-3);
  background: var(--color-void);
  box-shadow: var(--shadow-cell);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.9;
  transition: opacity 400ms ease, transform 700ms var(--ease-cinematic);
}

.card-frame-note {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-muted);
}

.case-card[data-dossier-id]:not(.is-redacted) {
  cursor: pointer;
}

.case-card:last-child { border-bottom: none; }
.case-card:hover { background: var(--color-surface); }

.case-card.is-redacted { opacity: 0.3; }

.card-id {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--color-dim);
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: var(--space-1);
}

.card-title {
  font-family: var(--font-primary);
  font-size: var(--size-md);
  font-weight: var(--weight-bold);
  color: var(--color-bright);
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: var(--space-1);
}

.card-org {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--color-dim);
  letter-spacing: 0.04em;
  display: block;
  margin-bottom: var(--space-2);
}

.card-client {
  font-family: var(--font-primary);
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-1);
}

.card-sector {
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  color: var(--color-dim);
  display: block;
  margin-bottom: var(--space-1);
}

.card-note {
  font-family: var(--font-primary);
  font-size: var(--size-xs);
  color: var(--color-dim);
  display: block;
}

.case-card.is-redacted .card-client {
  letter-spacing: 0.3em;
  color: var(--color-muted);
}

/* ---- Mobile rail strip (shown at <= 900px) ------------------ */

.b2b-rail-strip { display: none; }

@media (max-width: 900px) {
  body { overflow: auto; height: auto; }

  .b2b-layout {
    flex: 0 0 auto;
    flex-direction: column;
    overflow: visible;
    min-height: 0;
  }

  .b2b-spine { display: none; }

  .b2b-reading {
    padding: var(--space-7) var(--space-5) var(--space-5);
    overflow: visible;
    flex: none;
  }

  .b2b-controls { position: static; }

  .b2b-rail { display: none; }

  /* Step 08 returns to a single scrolling column on mobile */
  .b2b-reading.is-booking { overflow: visible; padding-top: var(--space-7); }
  .bk__cols { grid-template-columns: 1fr; gap: var(--space-6); margin-top: var(--space-5); }

  .b2b-rail-strip {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-depth);
  }

  .rail-strip-label {
    font-family: var(--font-mono);
    font-size: var(--size-2xs);
    color: var(--color-dim);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    order: -2;   /* label stays on top; files open upward between it and the button */
  }

  /* Obvious full-width drawer: reads as "there are N files to open, down here".
     Bordered surface, uppercase mono, a down-chevron that flips when open and
     nudges to signal there is more below. No accent fill. */
  .rail-strip-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-muted);
    color: var(--color-bright);
    font-family: var(--font-data);
    font-size: var(--size-sm);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-retrieval),
                background var(--duration-fast) var(--ease-retrieval);
  }
  /* Up-chevron like the INDEX button (drawer opens upward); flips down when open. */
  .rail-strip-toggle::after {
    content: "\25B2";
    font-size: 11px;
    line-height: 1;
    color: var(--color-secondary);
    flex: none;
    transition: transform var(--duration-default) var(--ease-retrieval);
  }
  .rail-strip-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
  .rail-strip-toggle:active {
    background: var(--color-elevation);
    border-color: var(--color-secondary);
  }

  /* Cards render above the toggle so the drawer opens upward into view. */
  .rail-strip-cards {
    width: 100%;
    order: -1;
    padding: 0;
  }

  .rail-strip-cards .case-card {
    padding: var(--space-3) 0;
  }
}

/* ---- Phones (<= 600px): tighten the fold, size the touch targets ---- */

@media (max-width: 600px) {
  /* Reading column: less dead vertical space, comfortable side gutters. */
  .b2b-reading {
    padding: var(--space-6) var(--space-4) var(--space-4);
    gap: var(--space-4);
    min-width: 0;
  }

  /* Long headlines must never push the viewport wide. The desktop clamp
     floors at 28px; on a 375px phone that can crowd, so step it down and
     let long words break rather than overflow. */
  .step-question {
    font-size: clamp(24px, 6.2vw, 32px);
    margin-bottom: var(--space-4);
    max-width: none;
    overflow-wrap: anywhere;
  }

  .step-answer {
    max-width: none;
    overflow-wrap: anywhere;
  }

  .step-num { overflow-wrap: anywhere; }

  /* Nav row: PREV / NEXT spread across the width so both sit under a thumb,
     each with a >=44px hit area (visual restraint kept via small type). */
  .b2b-controls { gap: var(--space-4); padding: var(--space-4) 0 var(--space-2); }

  .b2b-nav-row {
    justify-content: space-between;
    gap: var(--space-4);
  }

  .b2b-prev,
  .b2b-next {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-1);
    min-width: 0;
  }

  /* Progress row stays legible and does not shrink below its label. */
  .b2b-progress-row { gap: var(--space-3); }
  .b2b-progress-read { min-width: 0; overflow-wrap: anywhere; }

  /* ---- Evidence drawer: tighten for small phones (keeps 900px drawer style) ---- */
  .b2b-rail-strip { padding: var(--space-4) var(--space-4); }
  .rail-strip-label { min-width: 0; overflow-wrap: anywhere; }
  .rail-strip-toggle { min-height: 48px; padding: var(--space-3) var(--space-4); }

  /* ---- Step 08 booking: single comfortable column ---- */
  .b2b-reading.is-booking {
    padding: var(--space-6) var(--space-4) var(--space-4);
    gap: var(--space-4);
  }

  .bk__cols { gap: var(--space-5); margin-top: var(--space-4); }
  .bk__cols > * { min-width: 0; }

  .bk__intro .step-question {
    font-size: clamp(22px, 5.6vw, 30px);
    max-width: none;
    overflow-wrap: anywhere;
  }

  .bk__intro .step-answer { max-width: none; overflow-wrap: anywhere; }

  .bk__cta { max-width: none; overflow-wrap: anywhere; }

  /* Timezone row wraps instead of squeezing the select off-screen.
     16px font-size stops iOS Safari from zooming when the select is tapped. */
  .bk__tz-row { flex-wrap: wrap; gap: var(--space-2); }
  .bk__tz-select { flex: 1 1 100%; min-width: 0; font-size: var(--size-base); min-height: 44px; }

  /* Date accordion and slot chips as touchable targets. */
  .bk__date-btn { min-height: 44px; padding: var(--space-3) 0; }

  .bk__slots-grid { gap: var(--space-2); }
  .bk__slot-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-4);
  }

  /* Form fields already full-width; keep inputs a comfortable height and
     keep the SEND button a proper tap target. */
  .ct__form-wrap input,
  .ct__form-wrap textarea { min-width: 0; }

  .ct__submit {
    min-height: 44px;
    width: 100%;
    padding: var(--space-3) var(--space-6);
  }

  /* ---- Cold-open threshold: trim heavy display + padding on phones ---- */
  .co { padding: var(--space-6) var(--space-4); }

  .co-display {
    font-size: clamp(40px, 12vw, 64px);
    margin-bottom: var(--space-5);
    overflow-wrap: anywhere;
  }

  .co-sub { max-width: none; margin-bottom: var(--space-6); overflow-wrap: anywhere; }

  .co-enter {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
  }

  /* Evidence cards on mobile: allow long client names / notes to wrap. */
  .card-title,
  .card-client,
  .card-note { overflow-wrap: anywhere; }
}

/* ---- Small phones (<= 380px): one more notch of restraint ---- */

@media (max-width: 380px) {
  .b2b-reading,
  .b2b-reading.is-booking {
    padding: var(--space-5) var(--space-3) var(--space-4);
  }

  .step-question { font-size: clamp(22px, 6.4vw, 27px); }

  .bk__intro .step-question { font-size: clamp(20px, 5.8vw, 26px); }

  /* Keep PREV / NEXT labels from bumping into each other at 320px. */
  .b2b-nav-row { gap: var(--space-3); }

  .co { padding: var(--space-5) var(--space-3); }
  .co-display { font-size: clamp(34px, 12vw, 48px); }
}

/* Hover-only reveals are invisible on touch: gate the rail card "OPEN FILE"
   badge and the hover lift/zoom behind a real pointer, and give touch a
   correct resting state. Navigation never depends on hover (spine is hidden
   on mobile; PREV / NEXT and the rail-strip toggle drive it). */
@media (hover: none) {
  .case-card[data-dossier-id]:not(.is-redacted)::after { opacity: 0; }
  .case-card[data-dossier-id]:not(.is-redacted):hover { transform: none; }
  .case-card[data-dossier-id]:not(.is-redacted):hover .card-img {
    opacity: 0.9;
    transform: none;
  }
}

/* ---- Light mode overrides ---------------------------------- */

[data-theme="light"] .b2b-rail {
  background: #ece9e0;
}

[data-theme="light"] .b2b-controls,
[data-theme="light"] .b2b-rail-strip {
  background: #f5f4ef;
}

[data-theme="light"] .bk__tz-select,
[data-theme="light"] .ct__form-wrap input,
[data-theme="light"] .ct__form-wrap textarea,
[data-theme="light"] .bk__slot-btn {
  background: #ece9e0;
  color: #1a1a18;
}

[data-theme="light"] .ct__submit {
  color: #f5f4ef;
}

/* ---- Reduced motion ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .b2b-step,
  .rail-cards,
  .b2b-next,
  .case-card {
    transition: none;
  }
}

/* =============================================================
   CINEMATIC LAYER  (cinematic intensity adds; restrained hides)
   ============================================================= */

.b2b-layout,
.b2b-reading > * { position: relative; z-index: 1; }

/* ---- Cold-open threshold ------------------------------------ */
.co {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: var(--color-void);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 620ms var(--ease-cinematic);
}
.co.is-open { opacity: 1; pointer-events: auto; }
.co.is-done { display: none; }

.co-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  width: 100%;
}

.co-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-dim);
  margin-bottom: var(--space-6);
}

.co-display {
  font-family: var(--font-display);
  font-size: clamp(52px, 9vw, 132px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  color: var(--color-bright);
  margin-bottom: var(--space-6);
}
.co-accent { color: var(--color-accent-yellow); }

.co-sub {
  font-family: var(--font-primary);
  font-size: var(--size-md);
  line-height: var(--leading-normal);
  color: var(--color-secondary);
  max-width: 52ch;
  margin-bottom: var(--space-7);
}

.co-enter {
  font-family: var(--font-mono);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-bright);
  background: transparent;
  border: 1px solid var(--color-secondary);
  padding: var(--space-3) var(--space-6);
  cursor: pointer;
  transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
}
.co-enter:hover {
  color: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
  background: rgba(245, 176, 0, 0.05);
}

.co-hint {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-muted);
}

.co-scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-yellow), transparent);
  opacity: 0;
  pointer-events: none;
}
.co.is-exiting .co-scan { animation: co-scan 560ms var(--ease-retrieval) forwards; }
@keyframes co-scan {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(100vh); }
}

/* Staggered entrance of cold-open contents */
.co.is-open .co-eyebrow { animation: b2b-assemble 600ms var(--ease-cinematic) 60ms both; }
.co.is-open .co-display { animation: b2b-assemble 760ms var(--ease-cinematic) 160ms both; }
.co.is-open .co-sub     { animation: b2b-assemble 700ms var(--ease-cinematic) 320ms both; }
.co.is-open .co-enter   { animation: b2b-assemble 600ms var(--ease-cinematic) 460ms both; }
.co.is-open .co-hint    { animation: b2b-assemble 600ms var(--ease-cinematic) 600ms both; }

.co.co-settled .co-eyebrow,
.co.co-settled .co-display,
.co.co-settled .co-sub,
.co.co-settled .co-enter,
.co.co-settled .co-hint {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.co.co-settled { opacity: 1 !important; pointer-events: auto; }

/* ---- Retrieval-assembly motion ------------------------------ */
@keyframes b2b-assemble {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
@keyframes b2b-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Base (restrained): a quiet fade on freshly-rendered nodes */
.step-num,
.step-question,
.step-rule,
.step-answer p { animation: b2b-fade 280ms ease both; }
.rail-count,
.case-card { animation: b2b-fade 280ms ease both; }

/* Cinematic: staggered rise, label -> question -> answer -> rail */
[data-intensity="cinematic"] .step-num      { animation: b2b-assemble 520ms var(--ease-cinematic) 40ms both; }
[data-intensity="cinematic"] .step-question { animation: b2b-assemble 620ms var(--ease-cinematic) 140ms both; }
[data-intensity="cinematic"] .step-rule     { animation: b2b-assemble 520ms var(--ease-cinematic) 240ms both; transform-origin: left; }
[data-intensity="cinematic"] .step-answer p { animation: b2b-assemble 600ms var(--ease-cinematic) both; }
[data-intensity="cinematic"] .step-answer p:nth-child(1) { animation-delay: 300ms; }
[data-intensity="cinematic"] .step-answer p:nth-child(2) { animation-delay: 380ms; }
[data-intensity="cinematic"] .step-answer p:nth-child(3) { animation-delay: 460ms; }
[data-intensity="cinematic"] .step-answer p:nth-child(n+4) { animation-delay: 540ms; }
[data-intensity="cinematic"] .rail-count {
  animation: b2b-assemble 700ms var(--ease-cinematic) 220ms both;
}
[data-intensity="cinematic"] .case-card {
  animation: b2b-assemble 480ms var(--ease-cinematic) both;
  animation-delay: calc(var(--i, 0) * 45ms + 320ms);
}

/* Guaranteed-visible resting state (safety net set ~1.18s after render) */
.b2b-reading.is-settled .step-num,
.b2b-reading.is-settled .step-question,
.b2b-reading.is-settled .step-rule,
.b2b-reading.is-settled .step-answer p,
.b2b-rail.is-settled .rail-count,
.b2b-rail.is-settled .case-card {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Reading column: procedural framing --------------------- */
.step-num {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.step-tag {
  color: var(--color-accent-yellow);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}
.step-rule {
  border: none;
  border-top: 1px solid var(--color-border);
  width: 64px;
  margin: 0 0 var(--space-5);
}

/* ---- Spine: progress + state -------------------------------- */
.b2b-spine { position: relative; gap: var(--space-3); }
.b2b-spine::before {
  content: "";
  position: absolute;
  top: var(--space-9);
  height: calc(100% - var(--space-9) - var(--space-5));
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px);
  background: var(--color-border);
}
.b2b-spine::after {
  content: "";
  position: absolute;
  top: var(--space-9);
  height: calc(100% - var(--space-9) - var(--space-5));
  left: 50%;
  width: 1px;
  transform: translateX(-0.5px) scaleY(var(--spine-frac, 0));
  transform-origin: top;
  background: var(--color-accent-yellow);
  opacity: 0.55;
  transition: transform 520ms var(--ease-cinematic);
}
.spine-item {
  position: relative;
  z-index: 1;
  background: var(--color-void);
}
.spine-item.is-done { color: var(--color-dim); }
.spine-item[aria-current="step"] {
  color: var(--color-accent-yellow);
  font-weight: var(--weight-medium);
}
[data-theme="light"] .spine-item { background: #f5f4ef; }

/* ---- Vault evidence rail ------------------------------------ */
.b2b-rail { box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.5); }

.rail-chip { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.rail-count {
  font-size: var(--size-3xl);
  font-weight: var(--weight-normal);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.case-card { position: relative; }
.case-card[data-dossier-id]:not(.is-redacted) {
  transition: background 300ms ease, box-shadow 400ms ease, transform 220ms var(--ease-cinematic);
}
.case-card[data-dossier-id]:not(.is-redacted):hover {
  background: var(--color-surface);
  transform: translateX(2px);
}
.case-card[data-dossier-id]:not(.is-redacted):hover .card-frame {
  box-shadow: var(--shadow-cell-active);
}
.case-card[data-dossier-id]:not(.is-redacted):hover .card-img {
  opacity: 1;
  transform: scale(1.02);
}

/* Open label rides the bottom of the lit recess */
.case-card[data-dossier-id]:not(.is-redacted)::after {
  content: "OPEN FILE \2192";
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: var(--tracking-wide);
  color: var(--color-white);
  background: rgba(10, 10, 9, 0.72);
  padding: 3px 7px;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 2;
}
.case-card[data-dossier-id]:not(.is-redacted):hover::after { opacity: 1; }

/* Active -- the file currently open on the stage */
.case-card.is-active { background: var(--color-surface); }
.case-card.is-active .card-frame { box-shadow: var(--shadow-cell-active); }
.case-card.is-active .card-img { opacity: 1; }
.case-card.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-accent-yellow);
  z-index: 3;
}

/* Sealed / redacted files */
.case-card.is-redacted { opacity: 1; }
.case-card.is-redacted .card-client {
  display: inline-block;
  color: transparent;
  user-select: none;
  background: var(--color-elevation);
  box-shadow: inset 0 0 0 1px var(--color-border);
  letter-spacing: 0;
  min-width: 116px;
}
.case-card.is-redacted .card-id,
.case-card.is-redacted .card-sector,
.case-card.is-redacted .card-note { color: var(--color-muted); }
.case-card.is-redacted::after {
  content: "SEALED";
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--color-muted);
  border: 1px solid var(--color-muted);
  padding: 1px 5px;
  transform: rotate(-4deg);
  opacity: 0.6;
}

/* ---- Controls: prev + progress ------------------------------ */
.b2b-prev {
  font-family: var(--font-mono);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wider);
  color: var(--color-dim);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  text-transform: uppercase;
  transition: color 200ms ease, opacity 200ms ease;
}
.b2b-prev:hover { color: var(--color-bright); }
.b2b-prev[disabled] { opacity: 0.25; cursor: not-allowed; }
.b2b-prev[disabled]:hover { color: var(--color-dim); }

.b2b-progress {
  flex: 1;
  max-width: none;
  height: 1px;
  background: var(--color-border);
  position: relative;
}
.b2b-progress-bar {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 0;
  background: var(--color-accent-yellow);
  transition: width 520ms var(--ease-cinematic);
}
.b2b-progress-read {
  margin-left: 0;
  font-family: var(--font-mono);
  font-size: var(--size-2xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .b2b-progress { max-width: none; }
}

/* ---- Restrained: suppress cinematic surfaces ---------------- */
[data-intensity="restrained"] .b2b-spine::after { opacity: 0; }
[data-intensity="restrained"] .co { display: none; }

/* ---- Reduced motion: no assembly, no scan ------------------- */
@media (prefers-reduced-motion: reduce) {
  .step-num, .step-question, .step-rule, .step-answer p,
  .rail-count, .case-card,
  .co.is-open .co-eyebrow, .co.is-open .co-display,
  .co.is-open .co-sub, .co.is-open .co-enter, .co.is-open .co-hint {
    animation: none;
  }
  .co.is-exiting .co-scan { animation: none; }
  .b2b-spine::after, .b2b-progress-bar { transition: none; }
}