/* 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; }

/* photographs to read */
#scene > .figure.rw-fig { width: min(100%, 272px); }
.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; }

/* a bar, then an arch */
.rw-spanbox { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.rw-span { width: min(100%, 320px); height: auto; display: block; overflow: visible; }
.rw-grd { stroke: var(--line-strong); stroke-width: 2; }
.rw-pier, .rw-half, .rw-vous { fill: #7a7063; stroke: #2b2721; stroke-width: 1.2; }
.rw-load { fill: #4a5260; stroke: #2b2721; stroke-width: 1.2; }
.rw-load.off, .rw-bar.off, .rw-arch.off, .rw-tgts.off { opacity: 0; pointer-events: none; }
.rw-arch { transition: opacity .4s; }
.rw-crack { fill: none; stroke: #FF8A8A; stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rw-flow { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 5; opacity: 0; transition: opacity .5s; }
.rw-flowing .rw-flow { opacity: 1; }
.rw-tgt { fill: rgba(252,192,80,.14); stroke: var(--gold); stroke-width: 1.5; stroke-dasharray: 4 3; cursor: pointer; }

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