.writing-step-map { margin:18px 0 24px; }
.writing-step-map ol { display:flex; flex-wrap:wrap; gap:10px 20px; padding:0; margin:0; list-style:none; }
.writing-step-map li { position:relative; flex:1 1 145px; }
.writing-step-map li:not(:last-child)::after { content:'→'; position:absolute; right:-16px; top:7px; color:var(--muted); }
.writing-step-map a { display:flex; align-items:flex-start; gap:8px; color:var(--blue); font-size:.8rem; font-weight:700; line-height:1.4; padding:6px 0; }
.step-number { display:inline-grid; place-items:center; flex:0 0 25px; width:25px; height:25px; border:1px solid var(--blue); border-radius:50%; background:var(--blue-soft); color:var(--blue); font-size:.8rem; font-weight:800; line-height:1; }
.writing-step-heading { display:flex; align-items:flex-start; gap:10px; }
.component-card input, .component-card textarea { scroll-margin-top:calc(var(--workspace-top, 112px) + 20px); }
.production-preview { white-space:normal !important; }
.preview-step + .preview-step { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.preview-step-label { display:flex; align-items:center; gap:8px; margin:0 0 9px; color:var(--blue); font-size:.8rem; line-height:1.45; }
.preview-step-label .step-number { width:22px; height:22px; flex-basis:22px; font-size:.75rem; }
.learner-text { white-space:pre-wrap; overflow-wrap:anywhere; }
.preview-title .learner-text { font-weight:700; }
.connector-aid { display:grid; gap:8px; margin:6px 0 10px; }
.connector-aid label { font-size:.85rem; font-weight:700; }
.connector-aid select { font-size:.9rem; padding:10px; }
.connector-details { border-top:1px solid var(--line); padding-top:12px; margin-top:10px; }
.connector-details summary { color:var(--blue); font-size:.85rem; font-weight:700; cursor:pointer; }
.connector-details .connector-aid { margin-top:14px; }
.paragraph-functions { color:var(--blue) !important; font-size:.83rem; font-weight:700; margin:0; }
.optional-step { color:var(--muted); font-size:.8rem; font-weight:600; }
@media (max-width:650px) {
  .writing-step-map ol { flex-direction:column; gap:10px; }
  .writing-step-map li { flex:0 1 auto; }
  .writing-step-map li:not(:last-child)::after { content:'↓'; left:8px; right:auto; top:auto; bottom:-12px; }
  .writing-step-map a { align-items:center; }
}