/* What is Er zijn fouten gemaakt's own (taaltaal-exercise-passive.js); the card, the tabs and the buttons are
   taaltaal-scene.css. Plain on purpose, as Smoesjes: the forms, the sentences, and the two at the office. What something
   happens to is green (the subject of the passive) and slides to the front, worden and the participle are blue and bold;
   in De verbouwing the chat has a fixed height and scrolls inside */
taaltaal-exercise-passive .tpv-front { color: #1f5e40; font-weight: bold; text-decoration: underline 2px #7cc59c; text-underline-offset: 3px; }
taaltaal-exercise-passive .tpv-verb { color: #2b3f93; font-weight: bold; text-decoration: underline 2px #73d2f7; text-underline-offset: 3px; }

/* Uitleg: the forms as pills, the rule, the active sentence, its passive with the subject sliding to the front, another
   sentence, the mistake on a yellow note */
taaltaal-exercise-passive .tpv-forms { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
taaltaal-exercise-passive .tpv-forms button { padding: 6px 16px; border: 1px solid #dcd6c8; border-radius: 16px; background: #fff; font: inherit;
        font-size: 16px; font-weight: bold; color: #2b3f93; cursor: pointer; box-shadow: 0 1px 2px rgba(60, 45, 20, .1); }
taaltaal-exercise-passive .tpv-forms button:hover { background: #f3f6fb; }
taaltaal-exercise-passive .tpv-forms button[aria-pressed="true"] { background: linear-gradient(#ee3399, #cd1269); border-color: #cd1269; color: #fff; }
taaltaal-exercise-passive .tpv-board { margin-top: 4px; }
/* the score of Bouw de zin beside Linda; the empty line and the key out of sight, in their place, so nothing moves */
taaltaal-exercise-passive .tpv-done .tpv-line, taaltaal-exercise-passive .tpv-done .tts-legend { visibility: hidden; }
/* the tip as far from the yellow note as from the bottom of the card (its padding is 20px) */
taaltaal-exercise-passive .tpv-on-explain .tts-tip { margin-top: 20px; }
/* Linda beside what she says in Uitleg and Bouw de zin, round as in De verbouwing */
taaltaal-exercise-passive .tpv-with { display: flex; align-items: flex-start; gap: 14px; }
taaltaal-exercise-passive .tpv-with > :last-child { flex: 1; min-width: 0; }
taaltaal-exercise-passive .tpv-round { flex: none; margin: 0; }
taaltaal-exercise-passive .tpv-head .tpv-forms { justify-content: flex-start; }
taaltaal-exercise-passive .tpv-head .tpv-rule { margin: 10px 0 0; }
taaltaal-exercise-passive .tpv-round svg { width: 64px; height: 64px; }
taaltaal-exercise-passive .tpv-rule { margin: 0 0 12px; font-size: 15px; color: #5b4a30; }
taaltaal-exercise-passive .tpv-say { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
taaltaal-exercise-passive .tpv-sentence { font-size: 21px; color: #333; line-height: 1.6; }
taaltaal-exercise-passive .tpv-w { display: inline-block; }
taaltaal-exercise-passive .tpv-active { margin: 6px 0 0; font-size: 15px; color: #6b6559; }
taaltaal-exercise-passive .tpv-active small { margin-right: 4px; font-size: 12.5px; color: #8a7a5a; }
taaltaal-exercise-passive .tpv-obj { color: #1f5e40; font-weight: bold; }
taaltaal-exercise-passive .tpv-sentence { display: inline-flex; flex-wrap: wrap; gap: 0 .3em; }
taaltaal-exercise-passive .tpv-waiting .tpv-w { opacity: 0; }
taaltaal-exercise-passive .tpv-also > span { font-size: 16px; color: #444; }     /* the sentence only: the button stays as big as the first */
taaltaal-exercise-passive .tpv-also small { margin-right: 4px; font-size: 12.5px; color: #8a7a5a; }
taaltaal-exercise-passive .tpv-not { margin: 14px 0 0; padding: 8px 12px; border-radius: 6px; background: #fdf6a3; box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
        font-size: 13.5px; color: #6b5a40; }
taaltaal-exercise-passive .tpv-not s { font-weight: bold; color: #a0054f; text-decoration-thickness: 2px; }

/* Bouw de zin: the active sentence to turn around, the line the pieces go into, and the pool they come from */
taaltaal-exercise-passive .tpv-first { margin: 0 0 10px; font-size: 19px; color: #333; }
taaltaal-exercise-passive .tpv-first .tts-score { display: block; }
taaltaal-exercise-passive .tpv-thanks { display: block; margin-top: 6px; font-size: 18px; font-style: italic; color: #2f7a57; }
taaltaal-exercise-passive .tpv-thanks small { display: block; font-size: 12.5px; font-style: normal; color: #8a8a8a; }
taaltaal-exercise-passive .tpv-first .tts-next { display: block; margin-top: 25px; font-size: 15px; }
taaltaal-exercise-passive .tpv-make { display: block; font-size: 13px; font-weight: bold; color: #c70765; }
taaltaal-exercise-passive .tpv-first small { display: block; margin-top: 3px; font-size: 12.5px; color: #8a7a5a; }
taaltaal-exercise-passive .tpv-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 48px; padding: 6px 8px; border-radius: 8px;
        background: #fff; border: 2px dashed #d9cdb4; }
taaltaal-exercise-passive .tpv-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 48px; margin-top: 10px; }
taaltaal-exercise-passive .tpv-tile { padding: 7px 14px; border: 1px solid #c9a46e; border-radius: 6px; background: linear-gradient(#f8e3bd, #e9c48c);
        font: inherit; font-size: 17px; font-weight: bold; color: #5a3a17; cursor: pointer; box-shadow: 0 2px 0 #b98d52; }
taaltaal-exercise-passive .tpv-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 #b98d52; }
taaltaal-exercise-passive .tpv-tile.right { background: #ecf8ea; border-color: #393; color: #1f6b1f; box-shadow: none; cursor: default; }
taaltaal-exercise-passive .tpv-tile.wrong { background: #fdeef4; border-color: #c70765; color: #a0054f; box-shadow: none; }
taaltaal-exercise-passive .tpv-on-build .tts-feedback { min-height: 92px; }
taaltaal-exercise-passive .tpv-good { font-size: 16px; }
taaltaal-exercise-passive .tpv-good b { color: #2f9a2f; }
taaltaal-exercise-passive .tpv-good small { display: block; font-size: 12.5px; color: #888; font-style: italic; }
taaltaal-exercise-passive .tpv-on-build .tts-why { margin: 10px 0 0; }

/* De verbouwing: Linda and Carlos, the chat between them, and what Carlos says */
taaltaal-exercise-passive .tpv-office { display: grid; grid-template-columns: 78px 1fr 78px; align-items: center; gap: 14px; }
taaltaal-exercise-passive .tpv-who { margin: 0; text-align: center; }
taaltaal-exercise-passive .tpv-who svg { display: block; width: 72px; height: 72px; border-radius: 50%; border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(60, 45, 20, .25); }
taaltaal-exercise-passive .tpv-who figcaption { margin-top: 3px; font-size: 13px; font-weight: bold; color: #5b4a30; }
taaltaal-exercise-passive .tpv-who figcaption small { font-weight: normal; color: #8a7a5a; }
taaltaal-exercise-passive .tpv-where { margin: 0; font-size: 14.5px; color: #5b4a30; text-align: center; }
/* Carlos is not there yet until the mail is opened */
taaltaal-exercise-passive .tpv-carlos svg { transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.3, .5, 1); }
taaltaal-exercise-passive .tpv-office:not(.tpv-here) .tpv-carlos svg { opacity: .35; transform: scale(.9); }
/* who talks: the head nods a little, the mouth opens with the sound (a blink until the sound is measured) */
taaltaal-exercise-passive .tpv-who .head { transform-box: view-box; transform-origin: 50px 70px; }
taaltaal-exercise-passive .tpv-who.talking .head { animation: tpv-nod .9s ease-in-out infinite alternate; }
@keyframes tpv-nod { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
taaltaal-exercise-passive .tpv-who .mouth-open { opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; }
taaltaal-exercise-passive .tpv-who.talking:not(.lips) .mouth-open { animation: tpv-talk .32s steps(1) infinite; }
@keyframes tpv-talk { 0% { opacity: 1; } 50% { opacity: 0; } }

taaltaal-exercise-passive .tpv-log { display: flex; flex-direction: column; gap: 7px; height: 210px; overflow-y: auto; margin: 12px 0 0; list-style: none; }
taaltaal-exercise-passive .tpv-log li { max-width: 82%; padding: 6px 12px 7px; border-radius: 12px 12px 12px 3px; background: #fff;
        box-shadow: 0 1px 3px rgba(60, 45, 20, .14); animation: tpv-in .25s ease-out; }
@keyframes tpv-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
taaltaal-exercise-passive .tpv-log li b { display: block; font-size: 11.5px; color: #8a7a5a; }
taaltaal-exercise-passive .tpv-log li span { font-size: 16px; color: #2b2b2b; }
taaltaal-exercise-passive .tpv-log li small { display: block; font-size: 12px; color: #8a8a8a; font-style: italic; }
taaltaal-exercise-passive .tpv-log .tpv-linda { border-left: 4px solid #4a78c2; }
taaltaal-exercise-passive .tpv-log .tpv-carlos { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: linear-gradient(#ecf7f0, #dcefe3); }
taaltaal-exercise-passive .tpv-log .tpv-carlos b { color: #2f7a57; }
taaltaal-exercise-passive .tpv-log .tpv-carlos.oops { opacity: .65; }
taaltaal-exercise-passive .tpv-log .tpv-carlos.oops span { text-decoration: line-through; text-decoration-color: #c70765; }

taaltaal-exercise-passive .tpv-choose { display: flow-root; min-height: 200px; }     /* room for a note, the task and three choices: the card keeps its height */
taaltaal-exercise-passive .tts-play.tpv-enter { align-self: flex-start; margin: 18px 0 12px; }     /* the start, as every play button: the white arrow */
taaltaal-exercise-passive .tpv-on-talk .tpv-choose:has(.tpv-enter) { display: flex; justify-content: center; }
taaltaal-exercise-passive .tpv-task { margin: 10px 0 7px; font-size: 15px; color: #2b3f93; }
taaltaal-exercise-passive .tpv-task b { color: #c70765; }
taaltaal-exercise-passive .tpv-choose .tts-why { margin: 10px 0 0; }
taaltaal-exercise-passive .tpv-choose .tts-answers button { padding: 8px 14px; }

@media (max-width: 560px)
{
    taaltaal-exercise-passive .tpv-office { grid-template-columns: 62px 1fr 62px; gap: 10px; }
    taaltaal-exercise-passive .tpv-who svg { width: 56px; height: 56px; }
    /* on a phone Linda stands small at the start of the rule, the text around her, and Luister goes under the sentence,
       so the sentence keeps the whole width */
    taaltaal-exercise-passive .tpv-with { display: block; }
    /* the line and the pool room for two rows each, the feedback for its longest, so Bouw de zin keeps its height */
    taaltaal-exercise-passive .tpv-line { min-height: 150px; align-content: flex-start; }     /* the passive with moet: three rows */
    taaltaal-exercise-passive .tpv-on-build .tpv-with { display: flow-root; min-height: 105px; }     /* the longest active sentence, its margin inside */
    taaltaal-exercise-passive .tpv-tile { padding: 6px 10px; font-size: 15px; }     /* the long pieces of the passive: two rows in the pool */
    taaltaal-exercise-passive .tpv-pool { min-height: 89px; align-content: flex-start; }
    taaltaal-exercise-passive .tpv-on-build .tts-feedback { min-height: 106px; }
    taaltaal-exercise-passive .tpv-round { float: left; margin: 0 10px 4px 0; }
    taaltaal-exercise-passive .tpv-on-explain .tts-tip { margin-top: 12px; }     /* the card's padding on a phone */
    taaltaal-exercise-passive .tpv-round svg { width: 48px; height: 48px; }
    taaltaal-exercise-passive .tpv-round figcaption { display: none; }
    taaltaal-exercise-passive .tpv-say { flex-direction: column; align-items: flex-start; gap: 6px; }
    taaltaal-exercise-passive .tpv-say, taaltaal-exercise-passive .tpv-not, taaltaal-exercise-passive .tpv-line { clear: both; }
    taaltaal-exercise-passive .tpv-where { font-size: 13px; }
    taaltaal-exercise-passive .tpv-log { height: 190px; }
    taaltaal-exercise-passive .tpv-choose { min-height: 290px; }
    taaltaal-exercise-passive .tpv-log li { max-width: 92%; }
    taaltaal-exercise-passive .tpv-sentence { font-size: 18px; }
    taaltaal-exercise-passive .tpv-say { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-passive .tpv-who.talking .head, taaltaal-exercise-passive .tpv-who.talking .mouth-open,
    taaltaal-exercise-passive .tpv-log li { animation: none; }
    taaltaal-exercise-passive .tpv-carlos svg { transition: none; }
}