/* ADA and Accessibility page only. Shared look lives in ../assets/explainers.css. */

/* diagrams keep a readable size on wide screens */
.page-sec .fig > svg { max-width: 540px; margin-left: auto; margin-right: auto; }
.page-sec .fig { overflow: hidden; }

/* overview map spots: sink when pressed */
#parkmap .spot { cursor: pointer; }
#parkmap .spot circle, #parkmap .spot text { transition: transform .12s, fill .15s; transform-box: fill-box; transform-origin: center; }
#parkmap .spot:active circle { fill: #c9a000; transform: scale(.82) translateY(1px); }
#parkmap .spot:active text { transform: scale(.82); }
#parkmap .spot.on circle { fill: #1c5fa8; }
#parkmap .spot.on text { fill: #fff; }
#parkmap .spot:focus { outline: none; }
#parkmap .spot:focus-visible circle { stroke: #c00; stroke-width: 3; }
#spotdetail .box p { margin: 6px 0 10px; }

/* picker buttons above or below a drawing */
.pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pick .b95 { flex: 1 1 auto; min-height: 44px; }

/* range sliders: full width, big thumb for thumbs */
input[type=range] { width: 100%; height: 44px; margin: 0; accent-color: #1c5fa8; }

/* tool results */
.pass { color: #1e7a32; }
.fail { color: #c00; }
.warn { color: #9a6a00; }
.calc input[type=number], .calc select, #parkcalc input, #builder select { width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px; }
.win .bd .fig { margin: 8px 0; }
#slopeout .tablewrap td, #slopeout .tablewrap th { font-size: 14px; }
#slopeout .cite, #buildout .cite, #countout .cite, #widthout .cite, #parkout .cite, #playsay .cite, #spotdetail .cite { white-space: normal; }
#countout ul, #buildout ul { padding-left: 20px; }
#countout li, #buildout li { margin: 6px 0; }
.lcd { display: inline-block; font-size: 18px; letter-spacing: 1px; padding: 0 6px; margin-right: 2px; }

/* parking spaces strip */
.pspaces { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.pspace { width: 26px; height: 40px; background: #1c5fa8; border: 2px solid #000; font: bold 9px var(--sans); color: #fff; writing-mode: vertical-rl; text-align: center; line-height: 22px; }
.pspace.van { width: 34px; background: #0d3d73; }

/* play area picker: dimmed groups fade */
#playfig .pg { transition: opacity .25s; }
#playsay { min-height: 3em; }

@media (prefers-reduced-motion: reduce) {
  #playfig .pg, #parkmap .spot circle, #parkmap .spot text { transition: none; }
}


/* learning ladder: games and level checks */
.ticket { border: 2px dashed #000; background: #fffbe0; padding: 12px; margin: 6px 0 10px; font: 16px var(--ui); display: flex; flex-direction: column; gap: 6px; }
.ticket b { font: bold 13px var(--ui); color: #000080; }
.b95.right { background: #c8f0c8; }
.b95.wrong { background: #f6c6c6; }
.gameout { min-height: 2.5em; }
.gameout .cite, .cqa .cite, #erasay .cite, #matsay .cite, #ptout .cite { white-space: normal; }
.checkq { border: 2px solid #000; box-shadow: 3px 3px #000; background: #fff; padding: 4px 12px 8px; margin: 10px 0 18px; max-width: 66ch; }
.cq { border-bottom: 1px dotted #888; padding: 4px 0 6px; }
.cq:last-of-type { border-bottom: 0; }
.cqq { margin: 8px 0 4px; }
.cqa p { margin: 6px 0; }
.cqscore { margin: 8px 0 0; }
details.more { margin: 10px 0; }
details.more > summary { cursor: pointer; font-weight: bold; min-height: 44px; display: flex; align-items: center; }
#erafig svg, #matfig svg, #ptfig svg { display: block; width: 100%; max-width: 540px; margin: 0 auto; }
#erasay, #matsay { min-height: 3em; }
.bars { margin: 8px 0; }
.barlab { font: bold 14px var(--ui); margin: 8px 0 4px; }
.bar { height: 22px; background: #1c5fa8; border: 2px solid #000; transition: width .15s; }
.bar.cap { background: #ffd400; }
#slopegame .fig svg, #matfig svg { max-width: 480px; }

/* number cards: one fact per card, the number to remember on top */
.acards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.acards .ig, .terms .ig, .compare .ig { border: 2px solid #000; background: #fff; box-shadow: 3px 3px 0 #000; padding: 10px; min-width: 0; }
.acards .ig > b, .terms .ig > b, .compare .ig > b { display: block; font: 900 18px/1.2 var(--black); color: #000080; margin-bottom: 4px; }
.acards .ig p, .terms .ig p, .compare .ig p { margin: 0; font-size: 14px; line-height: 1.45; }
.compare .ig p + p { margin-top: 8px; padding-top: 8px; border-top: 1px dotted #888; }
.acards .ig.yes > b { color: #1e7a32; }
.acards .ig.no > b { color: #555; }
.acards .cite, .terms .cite, .compare .cite { white-space: normal; }
.terms { margin: 10px 0 16px; }
.compare { margin: 10px 0 16px; }
@media (max-width: 759px) { .two.terms, .two.compare { grid-template-columns: 1fr 1fr; gap: 8px; } .compare .ig { padding: 8px; } .compare .ig p { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }