/* class7-math-ch2-rules.css - Arithmetic Expressions Tier 3 "Why do we need rules? (The Confusion Problem)".
   Almost everything is shared (class7-math-ch2-common.css); only Tier 3 touches live here.
   Popup ids are the lower-case prefixes: rucomma, rukids, rustory, rualarm, rupunct. */

/* cards, sentences and answers keep every word on one line */
.c72-overlay[id^="rucomma"] .c72-svg text,
.c72-overlay[id^="rukids"] .c72-svg text,
.c72-overlay[id^="rustory"] .c72-svg text,
.c72-overlay[id^="rualarm"] .c72-svg text,
.c72-overlay[id^="rupunct"] .c72-svg text { white-space: nowrap; }

/* the little faces of the kids in a story sit on the text line */
.c72-overlay[id^="rukids"] .quiz-question .c72-inl,
.c72-overlay[id^="rualarm"] .quiz-question .c72-inl { width: 1.7em; height: 1.7em; vertical-align: -0.55em; margin-right: 2px; }

/* the tallest pictures: cap the height on small screens */
.c72-overlay[id^="rucomma"] .c72-svg { max-height: 300px; }
.c72-overlay[id^="rukids"] .c72-svg { max-height: 290px; }
.c72-overlay[id^="rustory"] .c72-svg { max-height: 280px; }
.c72-overlay[id^="rualarm"] .c72-svg { max-height: 240px; }
.c72-overlay[id^="rupunct"] .c72-svg { max-height: 150px; }
@media (max-width: 400px) {
    .c72-overlay[id^="rucomma"] .c72-svg { max-height: 260px; }
    .c72-overlay[id^="rukids"] .c72-svg { max-height: 250px; }
    .c72-overlay[id^="rustory"] .c72-svg { max-height: 240px; }
}

/* the alarm siren (Absurd Answer Alarm): soft red glow, shaking dome, blinking sound waves */
.c72-svg .ru-halo { fill: rgba(255, 143, 120, .3); animation: c72-glow 1s ease-in-out infinite; }
.c72-svg .ru-dome { transform-box: fill-box; transform-origin: 50% 100%; animation: ru-wobble .45s ease-in-out infinite alternate; }
.c72-svg .ru-arc { fill: none; stroke: #E4705A; stroke-width: 4; stroke-linecap: round; }
@keyframes ru-wobble { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }