/* DMA journey: the selected event (request strip, lanes, controls) beside its evidence. */
.dma-workspace { display: grid; gap: 1.5rem; margin-top: 1rem; }
.dma-event, .dma-evidence { min-width: 0; }
@media (min-width: 62rem) {
  .dma-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  @media (min-height: 56rem) { .dma-event { position: sticky; top: 6rem; } }
}
.dma-strip { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: 0.5rem; }
.dma-strip p { margin: 0; }
.dma-stage { font-weight: 700; }
.dma-lanes { margin: 1rem 0; display: grid; gap: 0.75rem; }
.dma-lane { padding: 0.65rem 0.85rem; border: 1px solid var(--line); border-left-width: 6px; border-radius: 0.5rem; }
.dma-lane[data-state="done"] { border-left-color: var(--allow); }
.dma-lane[data-state="moving"] { border-left-color: var(--warn); }
.dma-lane[data-state="denied"], .dma-lane[data-state="partial"] { border-left-color: var(--deny); border-left-style: double; }
.dma-lane[data-state="idle"] { border-left-style: dotted; }
.dma-lane-head { display: flex; justify-content: space-between; gap: 1rem; }
.dma-dir { font-family: monospace; }
.dma-track { position: relative; height: 0.9rem; margin: 0.5rem 0 1.4rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); }
.dma-track::before, .dma-track::after { position: absolute; top: 100%; font: 0.75rem monospace; color: var(--muted); }
.dma-track::before { content: attr(data-from); left: 0; }
.dma-track::after { content: attr(data-to); right: 0; }
.dma-fill { position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); border-radius: inherit; background: var(--muted); }
.dma-lane[data-state="done"] .dma-fill { background: var(--allow); }
.dma-lane[data-state="moving"] .dma-fill { background: var(--warn); }
.dma-lane[data-state="partial"] .dma-fill { background: var(--allow); border-right: 6px solid var(--deny); }
.dma-lane[data-state="denied"] .dma-fill { background: repeating-linear-gradient(45deg, var(--deny) 0 6px, transparent 6px 10px); }
.dma-marker { position: absolute; top: 50%; left: 0; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); }
.dma-lane-text { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.dma-checks { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.4rem 1rem; margin: 1rem 0; }
.dma-checks dt { font-weight: 700; }
.dma-checks dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) { .dma-checks { grid-template-columns: minmax(0, 1fr); } .dma-checks dd { margin-bottom: 0.5rem; } }
.dma-request-pick { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; margin: 1rem 0; }
/* One dominant action; the rest still look like buttons before hover. */
.lesson-panel button { border: 1px solid var(--line); border-radius: 0.5rem; background: var(--surface); }
.lesson-panel [data-controls] button[data-tier="primary"] { background: var(--accent); border-color: var(--accent); color: var(--button-ink); font-weight: 700; }
.lesson-panel [data-controls] button[data-tier="quiet"], .lesson-panel #journey-restart { background: transparent; border-style: dashed; font-size: 0.875rem; }
.lesson-panel button:disabled { opacity: 0.55; cursor: not-allowed; }