/* Final dark theme overrides for diagrams and matrices. */
.diagram svg text { fill: var(--ink); }
.diagram svg .s,
.diagram svg .m { fill: var(--dim); }
.diagram.mini svg { background: #111113; }

.poster-svg svg { background: #111113; border-radius: 8px; }
.poster-svg .chip,
.poster-svg .chip-iso,
.poster-svg .chip-opt,
.poster-svg .chip-id,
.poster-svg .dw,
.poster-svg .glyph,
.poster-svg .cfbox { fill: #18181b; }
.poster-svg .ar,
.poster-svg .dot { stroke: #71717a; fill: #71717a; }
.poster-svg .src { fill: #8b8b95; }

.matrix-fig { color: var(--ink); }
.matrix-fig table { background: #111113; border-color: var(--line); }
.matrix-fig table.matrix-m1 { min-width: 1500px; }
.matrix-fig table.matrix-m2 { min-width: 1280px; }
.matrix-fig th,
.matrix-fig td { color: var(--ink); border-color: #27272a; }
.matrix-fig th.col,
.matrix-fig th.grp,
.matrix-fig th.coreh,
.matrix-fig th.corner { background: #18181b; border-color: #3f3f46; color: var(--dim); }
.matrix-fig tr.rg th { background: rgba(246, 130, 31, .10); color: #fdba74; }
.matrix-fig .mC,
.matrix-fig .mI,
.matrix-fig .aV { background: var(--cf); color: #000; }
.matrix-fig .mR,
.matrix-fig .aP { background: var(--cf-t); color: #fb923c; border-color: var(--cf); }
.matrix-fig .mO,
.matrix-fig .aU { background: #18181b; color: #a1a1aa; border-color: #71717a; }
.matrix-fig .mN,
.matrix-fig .aN { color: #71717a; }
.matrix-fig .box { background: #18181b; border-color: #3f3f46; }
.matrix-fig .tag { color: #fb923c; border-color: #f6821f; }

/* arrowheads and leftover hard-coded colours */
.poster-svg marker path { fill: #a1a1aa; }
.poster-svg marker#aid path { fill: var(--id); }
.poster-svg .ar-id { stroke: var(--id); }
.poster-svg .ribbon { fill: rgba(246, 130, 31, .10); stroke: #f6821f; }
.poster-svg .rt, .poster-svg .idl { fill: #fb923c !important; }
.matrix-fig table.matrix-m2 { min-width: 1100px; }

/* ---------- phones: no sideways scroll ---------- */
@media (max-width: 899px) {
  .diagram svg.min { min-width: 0; }
  .matrix-scroll { overflow: visible; }
  .fig.matrix-fig { background: none; border: 0; padding: 0; }
  .matrix-fig .legend { gap: 6px 18px; font-size: 14px; }
  .matrix-fig table.mx { display: block; min-width: 0; margin-top: .75rem; background: none; border: 0; border-radius: 0; }
  .matrix-fig table.mx thead { display: none; }
  .matrix-fig table.mx tbody { display: block; }
  .matrix-fig table.mx tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem .7rem; margin: 0 0 .85rem; padding: 0 .95rem .95rem; border: 1px solid var(--line); border-radius: 12px; background: #111113; }
  .matrix-fig table.mx tr.rg { display: block; margin: 1.25rem 0 .6rem; padding: 0; border: 0; background: none; }
  .matrix-fig table.mx tr.rg th { display: block; padding: .1rem 0; background: none; border: 0; }
  .matrix-fig table.mx th.rowh { grid-column: 1 / -1; display: block; padding: .9rem 0 .6rem; border: 0; border-bottom: 1px solid #27272a; }
  .matrix-fig table.mx th.rowh b { font-size: 1rem; }
  .matrix-fig table.mx td { display: flex; align-items: flex-start; gap: .55rem; padding: 0; border: 0; text-align: left; font-size: .85rem; line-height: 1.3; color: var(--ink); }
  .matrix-fig table.mx td[data-label]:not(.wr)::after { content: attr(data-label); padding-top: .25rem; }
  .matrix-fig table.mx td .cell { flex: none; width: 26px; height: 26px; font-size: 14px; }
  .matrix-fig table.mx td.na, .matrix-fig table.mx td.cnt { display: none; }
  .matrix-fig table.mx td.no { opacity: .45; }
  .matrix-fig table.mx td.wr { display: block; grid-column: 1 / -1; margin-top: .15rem; padding-top: .7rem; border-top: 1px solid #27272a; font-size: .9rem; line-height: 1.45; }
  .matrix-fig table.mx td.wr::before { content: attr(data-label); display: block; margin-bottom: .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
}