/* M1 local pictures. All colours follow shared theme tokens. */
.m1-trace { display: grid; gap: var(--s2); }
.m1-trace-row { display: grid; grid-template-columns: minmax(90px, 1fr) 1fr 1fr; gap: var(--s2); align-items: center; padding: var(--s3); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-sm); }
.m1-trace-row > :last-child { grid-column: 1 / -1; }
.m1-active { border-color: var(--accent) !important; background: var(--accent-soft) !important; }
.m1-users { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s2); }
.m1-user { display: flex; flex-direction: column; align-items: center; gap: var(--s1); padding: var(--s2); border: 1px solid var(--line); background: var(--ok-soft); color: var(--ink); font: var(--fs-micro) var(--font-mono); }
.m1-user svg { width: 20px; height: 20px; }
.m1-user-lost { border-style: dashed; border-color: var(--fail); background: var(--fail-soft); }
.m1-ladder { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--line); background: var(--surface); }
.m1-ladder-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(100px, 2fr) minmax(95px, 1fr); align-items: center; gap: var(--s3); border: 1px solid var(--line); padding: var(--s3); font-size: var(--fs-sm); }
.m1-ladder-lane { position: relative; height: 36px; background: repeating-linear-gradient(to right, var(--line) 0, var(--line) 1px, transparent 1px, transparent 16.666%); border-bottom: 1px solid var(--line-strong); }
.m1-ladder-mark { position: absolute; top: 12px; width: 12px; height: 12px; border: 2px solid var(--accent); border-radius: 50%; background: var(--surface); transform: translateX(-50%); }
@media (max-width: 600px) {
  .m1-trace-row { grid-template-columns: 1fr 1fr; }
  .m1-trace-row strong { grid-column: 1 / -1; }
  .m1-users { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .m1-ladder-row { grid-template-columns: 1fr auto; gap: var(--s2); }
  .m1-ladder-lane { grid-row: 2; grid-column: 1 / -1; }
}