.matrix-card { display: block; width: fit-content; max-width: 100%; overflow: hidden; }
.matrix-scroll { width: fit-content; max-width: 100%; overflow-x: auto; }
.route-matrix { display: grid; grid-template-columns: 150px repeat(var(--destinations), 88px); width: max-content; min-width: 0; }
.matrix-corner, .matrix-destination, .matrix-source, .matrix-cell { min-height: 88px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.matrix-corner { position: sticky; left: 0; z-index: 3; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; background: #f7f8f5; }
.matrix-corner span { font-size: 9px; color: var(--muted); letter-spacing: 1px; font-weight: 700; }
.matrix-corner b { font: 400 15px 'Instrument Serif'; }
.matrix-destination { padding: 7px 4px; text-align: center; background: #f7f8f5; display: grid; justify-items: center; align-content: center; gap: 2px; }
.matrix-destination .provider { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
.matrix-destination b { max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.matrix-destination small { display: none; }
.matrix-source { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #fbfcf9; }
.matrix-source .provider { width: 25px; height: 25px; border-radius: 6px; font-size: 9px; }
.matrix-source b, .matrix-source small { display: block; }
.matrix-source b { max-width: 98px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }
.matrix-source small { max-width: 98px; overflow: hidden; text-overflow: ellipsis; font-size: 8px; color: var(--muted); }
.matrix-cell { width: 88px; height: 88px; min-height: 0; border-top: 0; border-left: 0; background: white; padding: 7px 7px; display: grid; grid-template-columns: 10px 60px; grid-template-rows: 1fr 1fr; justify-content: start; align-content: center; column-gap: 5px; row-gap: 0; color: var(--ink); font: inherit; cursor: pointer; transition: background .18s, box-shadow .18s; }
.matrix-cell:hover { background: #f8faf4; box-shadow: inset 0 0 0 2px #cbdca8; }
.matrix-cell b { align-self: end; width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 8px; }
.matrix-cell small { align-self: start; width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size: 7px; color: var(--muted); }
.mode-dot { grid-row: 1 / 3; width: 8px; height: 36px; align-self: center; border-radius: 8px; background: #d9ded9; position: relative; box-shadow: inset 0 0 0 1px rgba(23,53,45,.06); }
.mode-dot::after { content: ''; position: absolute; left: 1px; bottom: 1px; width: 6px; height: 6px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(23,53,45,.25); transition: bottom .18s ease; }
.mode-busy { background: #f4f8e9; }
.mode-busy .mode-dot { background: #9abb55; }
.mode-busy .mode-dot::after { bottom: 10px; }
.mode-titles { background: #eef3fa; }
.mode-titles .mode-dot { background: #6683b7; }
.mode-titles .mode-dot::after { bottom: 19px; }
.mode-details { background: #f8efe1; }
.mode-details .mode-dot { background: #bd7b32; }
.mode-details .mode-dot::after { bottom: 28px; }
.self-route { cursor: not-allowed; background: repeating-linear-gradient(135deg, #f7f8f6, #f7f8f6 5px, #f0f2ef 5px, #f0f2ef 10px); color: #a3ada6; grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; }
.self-route:hover { box-shadow: none; background: repeating-linear-gradient(135deg, #f7f8f6, #f7f8f6 6px, #f0f2ef 6px, #f0f2ef 12px); }
.matrix-legend { display: flex; gap: 17px; align-items: center; margin: 0 0 12px; font-size: 10px; font-weight: 600; }
.matrix-legend span { display: flex; align-items: center; gap: 6px; }
.matrix-legend small { margin-left: auto; color: var(--muted); }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: #d9ded9; }
.legend-dot.busy { background: #9abb55; }
.legend-dot.titles { background: #6683b7; }
.legend-dot.details { background: #bd7b32; }
.matrix-warning { margin-top: 14px; }

@media (max-width: 650px) {
  .matrix-legend { gap: 9px; flex-wrap: wrap; }
  .matrix-legend small { width: 100%; margin: 0; }
  .route-matrix { grid-template-columns: 130px repeat(var(--destinations), 88px); }
  .matrix-cell { width: 88px; height: 88px; grid-template-columns: 10px 60px; }
  .matrix-cell b, .matrix-cell small { width: 60px; }
}

/* Neumorphic depth for the dense routing surface */
.matrix-card {
  border:1px solid rgba(255,255,255,.82);
  background:#f4f7f2;
  box-shadow:10px 13px 30px rgba(35,64,53,.14),-8px -8px 22px rgba(255,255,255,.9);
}
.matrix-scroll { background:#f4f7f2; }
.matrix-corner,.matrix-destination {
  border-color:rgba(210,220,211,.78);
  background:linear-gradient(145deg,#f7f9f5,#edf1ea);
  box-shadow:inset 2px 2px 6px rgba(35,64,53,.07),inset -2px -2px 6px rgba(255,255,255,.9);
}
.matrix-source {
  border-color:rgba(210,220,211,.78);
  background:rgba(247,249,245,.96);
  box-shadow:3px 0 9px rgba(35,64,53,.06),inset 0 1px 0 rgba(255,255,255,.8);
}
.matrix-cell {
  border-color:rgba(210,220,211,.72);
  background:#f6f8f4;
  box-shadow:inset 2px 2px 6px rgba(35,64,53,.07),inset -2px -2px 6px rgba(255,255,255,.92);
}
.matrix-cell:hover {
  z-index:1;
  background:#f9fbf7;
  box-shadow:inset 0 0 0 2px #c2d79a,4px 5px 12px rgba(35,64,53,.12),-3px -3px 9px rgba(255,255,255,.85);
}
.mode-busy { background:linear-gradient(145deg,#f5f9e9,#ecf3dc); }
.mode-titles { background:linear-gradient(145deg,#f2f6fb,#e7eef7); }
.mode-details { background:linear-gradient(145deg,#fbf3e8,#f3e7d5); }
.mode-dot { box-shadow:inset 2px 2px 4px rgba(35,64,53,.18),inset -1px -1px 3px rgba(255,255,255,.7); }
.mode-dot::after { box-shadow:2px 2px 4px rgba(35,64,53,.25),-1px -1px 2px rgba(255,255,255,.85); }
.self-route {
  background:repeating-linear-gradient(135deg,#f4f6f2,#f4f6f2 5px,#eaeee8 5px,#eaeee8 10px);
  box-shadow:inset 3px 3px 7px rgba(35,64,53,.07);
}
.matrix-legend span {
  padding:5px 8px;
  border-radius:999px;
  background:#f3f6f0;
  box-shadow:3px 4px 9px rgba(35,64,53,.09),-3px -3px 8px rgba(255,255,255,.86);
}