/* Chapter 3, Know the room. Site tokens only; the kit's frame from /playbook/kit/kit.css. The white-space glow is a
   gradient set as an attribute, so it is drawn, not checked as a mark. */

/* the still: the map at story and convenience, and Kiln's own SWOT */
.room-still,.room-map{font-family:var(--font)}
.room-grid-s line,.room-grid line{stroke:var(--rule);stroke-dasharray:2 6}
.room-axis-s,.room-axis{fill:none;stroke:var(--faint)}
.room-still .room-end,.room-map .room-end{fill:var(--muted);font-size:17px}
.room-still .room-title-s,.room-map .room-title{fill:var(--ink);font-size:20px}
.room-still .room-ws-s{fill:var(--halo-lamp);font-size:24px}
.room-still .room-ws-sub{fill:var(--halo-lamp);font-size:18px}
.room-pts-s text{fill:var(--muted);font-size:19px}
.room-pts-s .room-kiln-s{fill:var(--ink);font-size:22px}
.room-still .pb-lit{fill:var(--spark)}
.room-still .pb-dim{fill:var(--ground);stroke:var(--faint);stroke-width:1.5}
.room-swot-s text{fill:var(--muted);font-size:18px}
.room-swot-s .room-swot-h{fill:var(--ink);font-size:24px}
.room-swot-s .room-swot-k{fill:var(--ink);font-size:19px}

/* live: the map beside the card; the layer has its own height */
.js .room .pb-stage > .pb-still{display:none}
.room .pb-stage > .pb-layer{position:relative;inset:auto;height:auto;display:none}
.js .room .pb-stage > .pb-layer{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(16rem,1fr);gap:1.5rem 2.5rem;align-items:start}
@media (max-width:52rem){.js .room .pb-stage > .pb-layer{grid-template-columns:minmax(0,1fr)}}
.room-map{display:block;width:100%;height:auto;overflow:visible}
.room-map [hidden]{display:none}
.room-map .room-pt-label{fill:var(--muted);font-size:19px;pointer-events:none;user-select:none;-webkit-user-select:none}
.room-map .is-kiln .room-pt-label,.room-map .is-selected .room-pt-label{fill:var(--ink)}
.room-pt:not(.is-kiln) .pb-dot{fill:var(--muted)}
.room-pt.is-selected:not(.is-kiln) .pb-dot{fill:var(--ink)}
.room-pt.is-kiln .pb-dot{stroke:var(--halo-lamp);stroke-width:2}
.room-map .room-ws-label{fill:var(--halo-lamp);font-size:20px;pointer-events:none}
.room-ghost-ring{fill:none;stroke:var(--halo-lamp);stroke-width:1.5;stroke-dasharray:3 4}
.room-map .room-ghost-label{fill:var(--halo-lamp);font-size:16px}
@media (prefers-reduced-motion:no-preference){.room-region{animation:room-in .7s var(--ease-draw)}}
@keyframes room-in{from{opacity:0}}
.room-line{max-width:34rem;margin-top:.75rem;color:var(--muted);font-size:var(--t-meta);line-height:1.5;min-height:3em}

/* the card: evidence first, then the SWOT */
.room-card{border-top:1px solid var(--rule);padding-top:1rem;font-size:var(--t-meta);line-height:1.45;transform-origin:left center}
.room-card-name{font-size:var(--t-lede);color:var(--ink);line-height:1.2}
.room-card-line{color:var(--muted);margin-top:.3rem}
.room-ev,.room-swot{display:grid;grid-template-columns:minmax(6.5rem,auto) minmax(0,1fr);gap:.35rem 1rem;margin:1rem 0 0}
.room-ev dt,.room-ev dd,.room-swot dd{color:var(--muted);margin:0}
.room-ev .is-on{color:var(--ink)}
.room-swot{border-top:1px solid var(--rule);padding-top:1rem}
.room-swot dt{color:var(--halo-lamp)}
.room-card-note{margin-top:1rem;color:var(--halo-lamp)}

/* controls: two axis groups drawn like the kit's buttons, then the company row */
html:not(.js) .room-controls,html:not(.js) .room-pick{display:none}
.room-axis-pick{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;min-width:0;flex-basis:100%}
.room-axis-pick legend{color:var(--muted);font-size:var(--t-meta);padding:0;margin-bottom:.45rem;float:left;width:100%}
.room-axis-pick label{position:relative;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.5rem .9rem;border:1px solid var(--faint);font-size:var(--t-meta);line-height:1.3;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.room-axis-pick label{transition:border-color .2s,background-color .2s}}
.room-axis-pick label:hover,.room-axis-pick label:has(input:checked){border-color:var(--ink)}
.room-axis-pick label:has(input:checked){background:var(--ground-raised)}
.room-axis-pick label:has(input:focus-visible){outline:1px solid var(--ink);outline-offset:3px}
.room-axis-pick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.room-axis-pick label::before{content:"";width:.55rem;height:.55rem;border:1px solid var(--faint);border-radius:50%}
.room-axis-pick label:has(input:checked)::before{background:var(--spark);border-color:var(--spark)}
.room-pick{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.room > .room-pick{margin-left:calc((var(--pb-stage-w) - 100cqw) / 2 + var(--pb-shift))}
.room-pick-btn[aria-pressed="true"]{border-color:var(--ink);background:var(--ground-raised)}
.room [hidden]{display:none!important}