/* ============================================================
   driftless — /cascades methodology page styles (DW-038)
   Content-led page built on the docs layout (ds/docs.css).
   Phase numbers (01-04) are typographic anchors; sub-points use
   a definition grid (mono label + body); the closing "absent"
   section uses a distinct panel with struck item names.
   No diagrams, no interactive visuals — typography and
   hierarchy only. Responsive: definition grid stacks on mobile;
   nothing scrolls horizontally at any viewport.
   ============================================================ */

/* ===== Hero CTA row ===== */
.cascades-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-6);
}

/* ===== Section body: comfortable reading measure (~72ch) ===== */
.cascades-prose section > p {
  max-width: 72ch;
}

/* ===== Phase anchors: large numeral + phase name ===== */
.phase-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}
.phase-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.phase-name {
  font-size: var(--text-2xl);
  margin: 0;
}

/* ===== Sub-points: definition rows (label + body) ===== */
.phase-points {
  margin-top: var(--space-2);
}
.phase-point {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 6px 32px;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border-subtle);
}
.phase-point:first-child {
  border-top: none;
  padding-top: 0;
}
.phase-point-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 4px;
}
.phase-point-body p {
  max-width: 72ch;
  margin-top: 0;
}
.phase-point-body p + p {
  margin-top: var(--space-3);
}

/* Spec-gate checks (Phase 02 — Gate) */
.phase-checks {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 72ch;
}
.phase-checks li {
  padding-left: 18px;
  position: relative;
  line-height: var(--leading-relaxed);
}
.phase-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-200);
}

/* ===== Cascade effect flow list ===== */
.cascade-flow {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 72ch;
}
.cascade-flow li {
  padding-left: 18px;
  position: relative;
  line-height: var(--leading-relaxed);
}
.cascade-flow li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--teal-600);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ===== What's Intentionally Absent — distinct closing panel ===== */
.absent-panel {
  margin-top: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.absent-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.absent-panel li {
  line-height: var(--leading-relaxed);
  max-width: 72ch;
}
.absent-panel li + li {
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-4);
}
/* Struck item name: reinforces "this is what we removed". */
.absent-item-name {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  color: var(--text-muted);
  font-weight: var(--fw-bold);
}
.absent-panel .absent-why {
  color: var(--text-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ===== Tablet (max-width: 1024px) ===== */
@media (max-width: 1024px) {
  .phase-point {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 4px 20px;
  }
  .phase-num {
    font-size: 48px;
  }
}

/* ===== Mobile (max-width: 768px) ===== */
@media (max-width: 768px) {
  .phase-header {
    gap: 14px;
  }
  .phase-num {
    font-size: 40px;
  }
  .phase-name {
    font-size: var(--text-lg);
  }
  /* Definition rows stack: label above body, no horizontal scroll. */
  .phase-point {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .phase-point-label {
    padding-top: 0;
  }
  .absent-panel {
    padding: var(--space-5);
  }
}

/* ===== Small phone (max-width: 480px) ===== */
@media (max-width: 480px) {
  .phase-num {
    font-size: 32px;
  }
  .cascades-cta .btn {
    width: 100%;
    justify-content: center;
  }
}