/* CAN bootloader demo — bus diagram, terminal, flash map */

.bus {
  inline-size: 100%;
  block-size: auto;
}

.bus__board {
  fill: var(--c-bg-2);
  stroke: var(--c-line-strong);
}

.bus__pins,
.bus__line {
  fill: none;
  stroke: var(--c-ink-2);
  stroke-width: 1;
}

.bus__line--l {
  stroke-dasharray: 6 3;
}

.bus__term {
  fill: var(--c-surface);
  stroke: var(--c-muted);
}

.bus__text {
  fill: var(--c-muted);
  font-family: var(--f-mono);
  font-size: 11px;
}

.bus__text--big {
  fill: var(--c-ink);
  font-size: 15px;
  font-weight: 500;
}

.bus__led {
  fill: var(--c-surface-2);
  stroke: var(--c-line-strong);
  transition: fill 0.1s var(--ease-soft);
}

.bus__led.is-on {
  fill: var(--c-accent-fill);
  stroke: var(--c-accent-fill);
}

.bus__led.is-fault {
  fill: var(--c-fault);
  stroke: var(--c-fault);
}

.bus__packet {
  fill: var(--c-accent-fill);
  opacity: 0;
}

.bus__packet--rx {
  fill: var(--c-ink-2);
}

.bus__packet.is-moving {
  animation: packet-tx 0.32s var(--ease-in-out);
}

.bus__packet--rx.is-moving {
  animation-name: packet-rx;
}

@keyframes packet-tx {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(322px); }
}

@keyframes packet-rx {
  0% { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(-322px); }
}

/* Terminal */
.term {
  display: grid;
  border: var(--hair) solid var(--c-line-strong);
  background: var(--c-bg);
}

.term__out {
  block-size: 280px;
  overflow-y: auto;
  padding: var(--s-3);
  font-size: var(--fs-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  overscroll-behavior: contain;
}

.term__line.is-accent {
  color: var(--c-accent);
}

.term__line.is-fault {
  color: var(--c-fault);
}

.term__line.is-muted {
  color: var(--c-muted);
}

.term__line.is-cmd {
  color: var(--c-ink);
  font-weight: 500;
}

.term__in {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-top: var(--hair) solid var(--c-line);
}

.term__prompt {
  color: var(--c-accent);
  font-size: var(--fs-sm);
}

.term__input {
  flex: 1;
  min-inline-size: 0;
  padding: var(--s-1) 0;
  background: transparent;
  border: 0;
  font-size: var(--fs-sm);
}

.term__input:focus-visible {
  outline: none;
}

.term:focus-within {
  border-color: var(--c-accent);
}

/* Flash map: dot-matrix of 1 KB sectors */
.flash-map {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 3px;
}

.flash-map span,
.cell-key {
  aspect-ratio: 1;
  border: var(--hair) solid var(--c-line);
  background: transparent;
  transition: background-color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft);
}

.cell-key {
  display: inline-block;
  inline-size: 10px;
}

.flash-map .is-bl,
.cell-key--bl {
  background: var(--c-surface-2);
  border-color: var(--c-line-strong);
}

.flash-map .is-erased,
.cell-key--erased {
  border-color: var(--c-accent);
}

.flash-map .is-written,
.cell-key--written {
  background: var(--c-accent-fill);
  border-color: var(--c-accent-fill);
}

.flash-map .is-active {
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.flash-map .is-bad {
  background: var(--c-fault);
  border-color: var(--c-fault);
}

@media (prefers-reduced-motion: reduce) {
  .bus__packet.is-moving {
    animation: none;
  }
}