.am { margin: var(--s-5) 0; }
.am [hidden] { display: none !important; }
.am-controls { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.am-choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.am-choice-label { flex-basis: 100%; font-weight: 700; font-size: var(--fs-small); }
.am-btn, .am-part { min-height: 2.75rem; padding: var(--s-1) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); color: var(--navy); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.am-btn[aria-pressed="true"], .am-part[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: var(--on-dark); }
.am-part-name { font-weight: 600; }
.am-canvas { padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.am-svg { display: block; width: 100%; max-width: 46rem; height: auto; margin: 0 auto; font-family: var(--font); }
.am-housing { fill: var(--bg); stroke: var(--line-strong); stroke-width: 2; }
.am-note { font-size: 11px; fill: var(--muted); }
.am-module rect { fill: var(--bg); stroke: var(--c-dali); stroke-width: 2; }
.am-module-label { font-size: 11px; font-weight: 700; fill: var(--ink); }
.am-bus { fill: none; stroke: var(--c-dali); stroke-width: 2.5; stroke-dasharray: 7 3; }
.am-driver rect { fill: var(--blue-pale); stroke: var(--blue); stroke-width: 1.5; }
.am-driver-label { font-size: 11px; font-weight: 700; fill: var(--blue); }
.am-slot rect { fill: var(--bg); stroke: var(--blue); stroke-width: 1.5; }
.am-slot text { font-size: 10px; font-weight: 700; fill: var(--ink); }
.am-slot .am-slot-name { font-size: 8.5px; font-weight: 400; fill: var(--muted); }
.am-slot.is-optional rect { stroke-dasharray: 4 3; fill: var(--surface); }
.am-slot.is-picked rect { stroke: var(--navy); stroke-width: 3; }
.am-led { fill: #f5c542; }
.am-light { fill: rgba(255, 214, 102, .22); }
.am-packet { fill: var(--c-flow); opacity: 0; }
.am.ix-ask .am-bus { stroke: var(--c-flow); }
.am-slot.is-answer rect { stroke: var(--navy); stroke-width: 3; }
.am.is-reading .am-packet.is-go { opacity: 1; }
.am.is-read .am-bus { stroke-width: 4; }
.am-parts { list-style: none; display: grid; gap: var(--s-1); margin: var(--s-3) 0 0; padding: 0; }
.am-parts li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); font-size: var(--fs-small); }
.am-status { color: var(--muted); }
.am-actions { margin: var(--s-3) 0 0; }
.am-out:empty { display: none; }
.am-out { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-left: 3px solid var(--c-dali); background: var(--surface); }
.am-out p { margin: 0 0 var(--s-1); }
.am-canvas { container: am-canvas / inline-size; }
@container am-canvas (max-width: 44rem) { .am-slot .am-slot-name { display: none; } }
.am-key { color: var(--text); }
@container am-canvas (max-width: 32.75rem) {
  .am-svg .am-note, .am-svg .am-module-label, .am-svg .am-driver-label, .am-slot .am-slot-name { display: none; }
  .am-slot text { font-size: 19px; dominant-baseline: central; }
  .am-key { display: flex; }
}
@media (prefers-reduced-motion: no-preference) {
  .am-slot rect, .am-bus { transition: stroke var(--dur) var(--ease), stroke-width var(--dur) var(--ease); }
}