/* WhereisMyRide hub page; builds on /metro/tunnel.css */
.wm-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 22px; }
.wm-chapters a {
  display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; text-decoration: none;
  color: var(--text); background: var(--panel-strong); border: 1px solid var(--line); font-weight: 600; font-size: 0.92rem;
}
.wm-chapters a:hover { border-color: #8a5a2b; }
.wm-chapters b {
  display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%;
  background: rgba(176, 138, 30, 0.18); color: #6b4a14; font-family: "Space Grotesk", sans-serif;
}
.wm-math {
  max-width: 820px; margin-top: 18px; padding: 6px 24px 10px; border-left: 3px solid rgba(138, 90, 43, 0.35);
  background: rgba(255, 255, 255, 0.55); border-radius: 0 16px 16px 0;
}
.wm-math p { color: var(--muted); line-height: 1.7; }
.wm-math .katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; margin: 0.9em 0; }
.wm-math .katex { font-size: 1.08em; color: var(--text); }
.wm-check { max-width: 820px; margin-top: 16px; }
.wm-check p { color: var(--muted); line-height: 1.7; margin: 8px 0; }
.wm-check b { color: var(--text); }
.wm-feature {
  display: flex; gap: 18px; align-items: center; margin-top: 22px; padding: 18px 22px; border-radius: var(--radius);
  background: rgba(176, 138, 30, 0.12); border: 1px solid rgba(176, 138, 30, 0.35); color: var(--text); text-decoration: none; line-height: 1.6;
}
.wm-feature:hover { border-color: #8a5a2b; }
.wm-feature b { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; }
.wm-feature-cat svg { image-rendering: pixelated; display: block; }
.mt-chart .limit { stroke: #8d8496; stroke-width: 1.2; stroke-dasharray: 5 4; }
.wm-graded td { white-space: normal; vertical-align: top; min-width: 120px; text-align: left; }
.wm-graded th { text-align: left; }
.g { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.g-yes { background: rgba(62, 142, 78, 0.14); color: #2d6b3a; }
.g-part { background: rgba(201, 138, 26, 0.16); color: #7a520c; }
@media (max-width: 720px) {
  .wm-math { padding: 4px 14px 8px; }
  .wm-feature { flex-direction: column; align-items: flex-start; }
}
.stat strong span { font-size: inherit; color: inherit; line-height: inherit; }