/* Lab: rulebook-map (lesson A2). Scoped to .lab--rulebook-map. */
/* Phones: questions, then the answer, then the map. Wide screens: questions and answer left, map right. */
.lab.lab--rulebook-map { grid-template-areas: "head" "controls" "out" "stage"; }
.lab--rulebook-map > .lab__head { grid-area: head; }
.lab--rulebook-map > .lab__controls { grid-area: controls; display: block; }
.lab--rulebook-map > .lab__out { grid-area: out; }
.lab--rulebook-map > .lab__stage { grid-area: stage; max-width: 26rem; }
@media (min-width: 760px) {
  .lab.lab--rulebook-map { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); grid-template-areas: "head head" "controls stage" "out stage"; column-gap: var(--s-6); align-items: start; }
}
.lab--rulebook-map .rm__questions { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.lab--rulebook-map .rm__questions li { border-bottom: 1px solid var(--rule); }
.lab--rulebook-map .rm__q { width: 100%; text-align: left; font: inherit; font-size: var(--t-s); color: var(--grey-text); background: none; border: 0; padding: 10px 0 10px var(--s-3); border-inline-start: 2px solid transparent; cursor: pointer; }
.lab--rulebook-map .rm__q:hover { color: var(--ink); }
.lab--rulebook-map .rm__q[aria-pressed="true"] { color: var(--ink); border-inline-start-color: var(--ink); }
.lab--rulebook-map .rm__q:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.lab--rulebook-map .rm__box { fill: var(--paper); stroke: var(--rule); stroke-width: 1; }
.lab--rulebook-map .rm__name { fill: var(--ink); font-size: 13px; font-family: var(--font); }
.lab--rulebook-map .rm__status { fill: var(--grey-text); font-size: 11px; font-family: var(--font); }
.lab--rulebook-map .rm__doc:hover .rm__box { stroke: var(--ink); }
.lab--rulebook-map .rm__doc.is-also .rm__box { stroke: var(--ink); stroke-dasharray: 4 3; }
.lab--rulebook-map .rm__doc.is-on .rm__box { fill: var(--ink); stroke: var(--ink); }
.lab--rulebook-map .rm__doc.is-on .rm__name, .lab--rulebook-map .rm__doc.is-on .rm__status { fill: var(--paper); }
.lab--rulebook-map .rm__doc:focus { outline: none; }
.lab--rulebook-map .rm__doc:focus-visible .rm__box { stroke: var(--ink); stroke-width: 3; }
.lab--rulebook-map .rm__answer { display: grid; gap: var(--s-2); max-width: 46em; }
.lab--rulebook-map .rm__label { font-size: var(--t-s); color: var(--grey-text); }
.lab--rulebook-map .rm__para { font-size: var(--t-m); font-weight: 500; }
.lab--rulebook-map .rm__doc-about { color: var(--grey-text); }
@media (prefers-reduced-motion: no-preference) { .lab--rulebook-map .rm__box { transition: fill 200ms var(--ease), stroke 200ms var(--ease); } }