/* The Commons and weekends: this stop's own drawings (05-17 sections.commons). Shared looks are in living/explain.css. */
.cm-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cm-tab { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(255,255,255,0.7); font: 600 13.5px/1 var(--wum-body); color: var(--ink); cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.cm-tab[aria-pressed="true"] { background: var(--ink); color: #FFF4EA; border-color: var(--ink); }
.cm-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.cm-svg { width: 100%; height: auto; display: block; border-radius: 16px; }
.cm-ground { fill: #8A4B2E; transition: fill 0.6s; }
.cm-svg[data-w="earth"] .cm-ground { fill: #C9A97E; }
.cm-svg[data-w="hall"] .cm-ground { fill: #5A3424; }
.cm-hall { fill: #C2734A; stroke: #F4F2EE; stroke-width: 3; opacity: 0; transition: opacity 0.6s; }
.cm-svg[data-w="hall"] .cm-hall { opacity: 1; }
.cm-svg[data-w="hall"] .cm-rings > g { clip-path: url(#cmHall); }
.cm-rings circle { fill: url(#cmRing); stroke: #FFD9A8; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: cmRing 2.7s cubic-bezier(.2,.6,.3,1) var(--d, 0s) infinite; opacity: 0; }
@keyframes cmRing { 0% { transform: scale(0.05); opacity: 0.9; } 80% { opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } }
.cm-edge { fill: none; stroke: #FFF4EA; stroke-width: 1.5; stroke-dasharray: 5 6; opacity: 0.85; transition: r 0.6s; }
.cm-svg[data-w="hall"] .cm-edge { opacity: 0; }
.cm-r { font: 600 13px/1 var(--wum-mono); fill: #FFF4EA; }
.cm-read { display: grid; gap: 10px; padding: 20px 22px; border-radius: 16px; background: rgba(255,252,247,0.86); color: #3E2F27; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px -16px rgba(60,30,10,0.5); }
.cm-svg { box-shadow: 0 14px 34px -16px rgba(60,30,10,0.7); }
.cm-read h4 { margin: 0; font: 700 26px/1 var(--wum-display); text-transform: uppercase; }
.cm-read p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.cm-scale { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--wum-mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
.cm-week, .cm-orbit { width: 100%; height: auto; display: block; overflow: visible; }
.cm-orbit { max-width: 440px; margin: 0 auto; }
@media (max-width: 960px) { .cm-stage { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .cm-rings circle { animation: none; opacity: 0.5; transform: none; } }