/* Rose window: scene styles, prefix rw- */

/* the two photographs of the same window, under one wiper */
.rw-both { width: 100%; display: grid; place-items: center; }
.rw-both .compare { width: min(100%, 268px); }
.rw-both .cmp { aspect-ratio: 1 / 1; touch-action: none; }
.rw-both .wiper { pointer-events: none; }

/* photographs to read */
.hero.rw-fig-wide img { width: auto; max-width: 100%; max-height: 236px; border-radius: 10px; }

/* the rose diagram */
.rw-rosebox { --rw-stone: #8a8072; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.rw-rose { width: 236px; height: 236px; flex: none; display: block; }
.rw-ring { fill: none; stroke: var(--rw-stone); stroke-width: 14; }
.rw-web { fill: var(--rw-stone); transition: opacity .5s; }
.rw-cell {
  stroke: var(--rw-stone); stroke-width: 5.5; stroke-linejoin: round;
  transform-box: fill-box; transform-origin: center;
  transition: transform .8s cubic-bezier(.45,0,.9,.5), opacity .8s, filter .3s;
}
.rw-cell.blow { transform: scale(1.06); transition: transform .5s ease-out; }
.rw-cell.hold { filter: drop-shadow(0 0 5px rgba(252,192,80,.7)); }
.rw-cell.gone { transform: translateY(78px) rotate(13deg) scale(.88); opacity: 0; }
.rw-bare .rw-web { opacity: 0; }
.rw-bare .rw-cell { stroke-width: 0; }
.rw-verdict { min-height: 20px; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.rw-verdict.ok { color: var(--mint); }
.rw-verdict.no { color: #FF8A8A; }
.rw-rosebox .gauge { width: min(100%, 250px); }

/* the tools under the rose */
.rw-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.rw-key { font-size: 12px; color: var(--faint); }
.rw-g .gt { position: relative; overflow: visible; }
.rw-g .gt .rw-limit { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); border-radius: 1px; }

/* two panes in the wind */
.rw-panebox { position: relative; width: min(100%, 320px); margin: 0 auto; }
.rw-panes { width: 100%; height: auto; display: block; }
.rw-pane { fill: rgba(80,130,220,.45); stroke: #8a8072; stroke-width: 4; }
.rw-quad { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-dasharray: 5 4; }
.rw-quads { transition: opacity .4s; }
.rw-quads.off { opacity: 0; }
.rw-gust { fill: none; stroke: var(--faint); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rw-ptags { position: relative; height: 18px; }
.rw-ptags span { position: absolute; transform: translateX(-50%); font: 700 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }

@media (max-height: 700px) {
  .rw-panebox { width: min(100%, 260px); }
  .rw-both .compare { width: min(100%, 222px); }
  .hero.rw-fig-wide img { max-height: 192px; }
  .rw-rose { width: 170px; height: 170px; }
}