/* class7-math-ch2-brackets.css - Arithmetic Expressions Tier 4 "Brackets (Maths Punctuation)".
   Almost everything is shared (class7-math-ch2-common.css); only Tier 4 touches live here.
   Popup ids are the lower-case prefixes: brspot, brsame, brplace, brnest, brwords. */

/* tiles, sentences and answers keep every word on one line */
.c72-overlay[id^="brspot"] .c72-svg text,
.c72-overlay[id^="brsame"] .c72-svg text,
.c72-overlay[id^="brplace"] .c72-svg text,
.c72-overlay[id^="brnest"] .c72-svg text,
.c72-overlay[id^="brwords"] .c72-svg text { white-space: nowrap; }

/* the little faces of the kids in a story sit on the text line */
.c72-overlay[id^="brwords"] .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^="brspot"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="brsame"] .c72-svg { max-height: 250px; }
.c72-overlay[id^="brplace"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="brnest"] .c72-svg { max-height: 190px; }
.c72-overlay[id^="brwords"] .c72-svg { max-height: 240px; }
@media (max-width: 400px) {
    .c72-overlay[id^="brsame"] .c72-svg { max-height: 220px; }
    .c72-overlay[id^="brwords"] .c72-svg { max-height: 210px; }
}

/* the dashed ring around a bracket slowly marches, like a spotlight */
.c72-svg .br-ring { animation: br-march 1.6s linear infinite; }
@keyframes br-march { to { stroke-dashoffset: -28; } }