/* M3 only. Shapes, labels and computed values teach the system. */
.m3-card { min-height: 150px; display: grid; align-content: center; gap: var(--s3); }
.m3-card h3 { font-family: var(--font-display); font-size: var(--fs-md); }
.m3-readout { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s4); padding: var(--s4); border: 1px solid var(--line); background: var(--surface-2); }
.m3-readout .mono { font-size: var(--fs-sm); overflow-wrap: anywhere; }
.m3-ring-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(120px, 1fr); gap: var(--s4); align-items: center; padding: var(--s3); }
.m3-ring { width: 100%; max-height: 320px; overflow: visible; }
.m3-ring-line { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.m3-ring-title { fill: var(--ink); font: 12px var(--font-mono); }
.m3-ring-sub { fill: var(--ink-2); font: 11px var(--font-mono); }
.m3-ring-node { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.m3-ring-label { fill: var(--ink); font: 12px var(--font-mono); }
.m3-key-stayed { fill: var(--ok); stroke: var(--surface); stroke-width: 1; }
.m3-key-moved { stroke: var(--slow); stroke-width: 2; fill: none; }
.m3-distribution { display: grid; gap: var(--s2); }
.m3-shard { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2); padding: var(--s2); border: 1px solid var(--line); font-size: var(--fs-micro); }
.m3-shard-fill { width: 100%; height: 5px; background: var(--surface-2); position: relative; }
.m3-shard-fill::after { content: ''; display: block; height: 100%; width: var(--m3-share); background: var(--accent); }
.m3-partition { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); padding: var(--s5) var(--s3); }
.m3-copy { display: grid; justify-items: center; gap: var(--s4); border: 1px solid var(--line-strong); background: var(--surface); padding: var(--s5) var(--s3); text-align: center; }
.m3-copy > b { font-size: var(--fs-xl); }
.m3-wire { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); white-space: nowrap; }
.m3-wire[data-cut='yes'] { color: var(--fail); border-bottom: 2px dashed var(--fail); }
.m3-redundancy { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s2); align-items: center; padding: var(--s4) 0; }
.m3-redundant-group { display: grid; gap: var(--s2); min-width: 0; }
.m3-redundant-group > h3 { text-align: center; }
.m3-part { display: grid; justify-items: center; gap: var(--s2); border: 1px solid var(--line-strong); background: var(--surface); padding: var(--s3) var(--s2); text-align: center; font-size: var(--fs-micro); }
.m3-part > svg { font-size: 24px; color: var(--accent); }
.m3-connect { color: var(--ink-2); }
.m3-waterfall { display: grid; gap: var(--s3); }
.m3-trace-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 80px; gap: var(--s3); align-items: center; font-size: var(--fs-sm); }
.m3-trace-track { height: 20px; background: var(--surface-2); border-left: 1px solid var(--line-strong); }
.m3-trace-bar { height: 100%; background: var(--accent); min-width: 2px; }
.m3-evidence { min-width: 0; }
@media (max-width: 620px) {
  .m3-ring-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .m3-ring { max-height: 250px; }
  .m3-distribution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .m3-partition { grid-template-columns: minmax(0, 1fr); padding: var(--s3) 0; }
  .m3-copy { padding: var(--s3); gap: var(--s2); }
  .m3-wire { text-align: center; justify-self: center; }
  .m3-redundancy { grid-template-columns: minmax(0, 1fr); }
  .m3-redundant-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .m3-redundant-group > h3 { grid-column: 1 / -1; text-align: left; }
  .m3-connect { justify-self: center; transform: rotate(90deg); }
  .m3-part { font-size: var(--fs-micro); padding: var(--s2); }
  .m3-trace-row { grid-template-columns: 90px minmax(0, 1fr) 66px; gap: var(--s2); font-size: var(--fs-micro); }
}

.m3-mini-nodes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s2); }
.m3-mini-nodes .m3-copy { padding: var(--s3) var(--s2); gap: var(--s2); }
.m3-mini-nodes .m3-copy > b { font-size: var(--fs-md); }