/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  .app-header { padding: 10px 14px; }
  .app-title { font-size: 15px; }
  .cw-account { max-width: 150px; }
  .cw-column { padding-top: 20px; }
  .cw-intro__steps { grid-template-columns: 1fr; }
  .cw-station__head { padding: 14px 16px; grid-template-columns: 30px 1fr auto; }
  .cw-station__body { padding: 0 16px 20px 16px; }
  .cw-station__code { padding: 14px 16px 20px 16px; }
  /* The body sits flush-left on mobile, so the gutter spine would cross the
     copy — drop it; the marker states + tint still carry the journey. */
  .cw-station::before { display: none; }
  .e2e-config-row { grid-template-columns: 1fr; gap: 4px; }
  .e2e-config-label { padding-top: 0; }
  .cw-msel__options { grid-template-columns: 1fr; }
  .cw-copyfield { grid-template-columns: 1fr auto; }
  .cw-copyfield__k { grid-column: 1 / -1; }
  .e2e-stream-info-grid { grid-template-columns: 1fr; }
  .e2e-player-drawer__panel { width: 100%; border-radius: 0; }
  .cw-btnrow .cw-btn { flex: 1 1 auto; }
  .stream-choice-card__layout { flex-direction: column; }
  .stream-choice-modal__btn { width: 100%; }
}

@media (max-width: 420px) {
  .app-eyebrow { display: none; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Print: journey reads as a checklist ────────────────────── */
@media print {
  body.cw-app-bg { background: #fff; }
  .app-header, .app-footer, .e2e-player-drawer, .app-notify-stack { display: none; }
  .cw-journey, .cw-details { box-shadow: none; border: 1px solid var(--line-strong); }
  .cw-station__body { display: block !important; }
}

/* ── Docs / help page prose (help.html) ─────────────────────── */
.cw-docs { padding: 30px 34px 38px; }
/* Qualified: must outrank the `.cw-docs p` ink color below (0,1,1). */
.cw-docs .cw-docs__kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 6px;
}
.cw-docs h1 { font-size: clamp(24px, 3.4vw, 30px); margin-bottom: 10px; }
.cw-docs > p.cw-docs__intro { font-size: 16px; color: var(--muted); margin: 0 0 26px; max-width: 640px; }
.cw-docs h2 {
  font-size: 18px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cw-docs h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.cw-docs h2 .cw-docs__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--blue);
  border-radius: 999px;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cw-docs p { margin: 10px 0; color: var(--ink); }
.cw-docs ul { margin: 10px 0; padding-left: 20px; }
.cw-docs li { margin: 6px 0; }
.cw-docs strong { color: var(--navy); }
.cw-docs__notes {
  margin-top: 34px;
  padding: 18px 20px;
  background: var(--bg-soft);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.cw-docs__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
  font-weight: 600;
  color: var(--blue-dark);
  text-decoration: none;
}
.cw-docs__back:hover { text-decoration: underline; }