/* What is De mail's own (taaltaal-exercise-clauses.js); the card, the tabs and the buttons are taaltaal-scene.css. Plain on
   purpose, as Smoesjes: the link words, the sentences, and the mail Carlos writes with Ans reading along. The link word is
   magenta, the verb blue and bold wherever it goes, so the eye follows it; the mail has a fixed height and scrolls inside */
taaltaal-exercise-clauses .tcl-link { color: #c70765; }
taaltaal-exercise-clauses .tcl-verb { color: #2b3f93; font-weight: bold; text-decoration: underline 2px #73d2f7; text-underline-offset: 3px; }

/* Uitleg: the twelve link words as small pills, the rule, the sentence in which the verb moves, one more, the mistake on a
   yellow note */
taaltaal-exercise-clauses .tcl-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
taaltaal-exercise-clauses .tcl-words button { padding: 4px 11px; border: 1px solid #dcd6c8; border-radius: 14px; background: #fff; font: inherit;
        font-size: 14.5px; font-weight: bold; color: #2b3f93; cursor: pointer; box-shadow: 0 1px 2px rgba(60, 45, 20, .1); }
taaltaal-exercise-clauses .tcl-words button:hover { background: #f3f6fb; }
taaltaal-exercise-clauses .tcl-words button[aria-pressed="true"] { background: linear-gradient(#ee3399, #cd1269); border-color: #cd1269; color: #fff; }
taaltaal-exercise-clauses .tcl-board { margin-top: 4px; }
/* the score of Bouw de zin beside Carlos; the empty line and the key out of sight, in their place, so nothing moves */
taaltaal-exercise-clauses .tcl-done .tcl-line, taaltaal-exercise-clauses .tcl-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-clauses .tcl-on-explain .tts-tip { margin-top: 20px; }
/* Carlos beside his sentences in Uitleg and Bouw de zin, round as in the mail */
taaltaal-exercise-clauses .tcl-with { display: flex; align-items: flex-start; gap: 14px; }
taaltaal-exercise-clauses .tcl-with > :last-child { flex: 1; min-width: 0; }
taaltaal-exercise-clauses .tcl-round { flex: none; margin: 0; }
taaltaal-exercise-clauses .tcl-head .tcl-words { justify-content: flex-start; }
taaltaal-exercise-clauses .tcl-head .tcl-rule { margin: 10px 0 0; min-height: 4.4em; }     /* room for the longest rule: the board stays put */
taaltaal-exercise-clauses .tcl-round svg { width: 64px; height: 64px; }
taaltaal-exercise-clauses .tcl-rule { margin: 0 0 12px; font-size: 15px; color: #5b4a30; }
taaltaal-exercise-clauses .tcl-say { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
taaltaal-exercise-clauses .tcl-sentence { font-size: 21px; color: #333; line-height: 1.6; }
taaltaal-exercise-clauses .tcl-part { display: inline-flex; flex-wrap: wrap; gap: 0 .3em; }
taaltaal-exercise-clauses .tcl-w { display: inline-block; }
taaltaal-exercise-clauses .tcl-also > span { font-size: 16px; color: #444; }     /* the sentence only: the button stays as big as the first */
taaltaal-exercise-clauses .tcl-also small { margin-right: 4px; font-size: 12.5px; color: #8a7a5a; }
taaltaal-exercise-clauses .tcl-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-clauses .tcl-not s { font-weight: bold; color: #a0054f; text-decoration-thickness: 2px; }

/* Bouw de zin: the first sentence with its link word, the line the pieces go into, and the pool they come from */
taaltaal-exercise-clauses .tcl-first { margin: 0 0 10px; font-size: 19px; color: #333; }
taaltaal-exercise-clauses .tcl-first .tts-score { display: block; }
taaltaal-exercise-clauses .tcl-thanks { display: block; margin-top: 6px; font-size: 18px; font-style: italic; color: #2f7a57; }
taaltaal-exercise-clauses .tcl-thanks small { display: block; font-size: 12.5px; font-style: normal; color: #8a8a8a; }
taaltaal-exercise-clauses .tcl-first .tts-next { display: block; margin-top: 25px; font-size: 15px; }
taaltaal-exercise-clauses .tcl-first small { display: block; margin-top: 3px; font-size: 12.5px; color: #8a7a5a; }
taaltaal-exercise-clauses .tcl-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-clauses .tcl-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 48px; margin-top: 10px; }
taaltaal-exercise-clauses .tcl-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-clauses .tcl-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 #b98d52; }
taaltaal-exercise-clauses .tcl-tile.right { background: #ecf8ea; border-color: #393; color: #1f6b1f; box-shadow: none; cursor: default; }
taaltaal-exercise-clauses .tcl-tile.wrong { background: #fdeef4; border-color: #c70765; color: #a0054f; box-shadow: none; }
taaltaal-exercise-clauses .tcl-on-build .tts-feedback { min-height: 92px; }
taaltaal-exercise-clauses .tcl-good { font-size: 16px; }
taaltaal-exercise-clauses .tcl-good b { color: #2f9a2f; }
taaltaal-exercise-clauses .tcl-good small { display: block; font-size: 12.5px; color: #888; font-style: italic; }
taaltaal-exercise-clauses .tcl-on-build .tts-why { margin: 10px 0 0; }

/* De mail: Ans and Carlos at the top, the mail between them below */
taaltaal-exercise-clauses .tcl-office { display: grid; grid-template-columns: 78px 1fr 78px; align-items: center; gap: 14px; }
taaltaal-exercise-clauses .tcl-who { margin: 0; text-align: center; }
taaltaal-exercise-clauses .tcl-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-clauses .tcl-who figcaption { margin-top: 3px; font-size: 13px; font-weight: bold; color: #5b4a30; }
taaltaal-exercise-clauses .tcl-who figcaption small { font-weight: normal; color: #8a7a5a; }
taaltaal-exercise-clauses .tcl-where { margin: 0; font-size: 14.5px; color: #5b4a30; text-align: center; }
/* who talks: the head nods a little, the mouth opens with the sound (a blink until the sound is measured) */
taaltaal-exercise-clauses .tcl-who .head { transform-box: view-box; transform-origin: 50px 70px; }
taaltaal-exercise-clauses .tcl-who.talking .head { animation: tcl-nod .9s ease-in-out infinite alternate; }
@keyframes tcl-nod { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
taaltaal-exercise-clauses .tcl-who .mouth-open { opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; }
taaltaal-exercise-clauses .tcl-who.talking:not(.lips) .mouth-open { animation: tcl-talk .32s steps(1) infinite; }
@keyframes tcl-talk { 0% { opacity: 1; } 50% { opacity: 0; } }

/* De mail: a letter set into the paper (tts-chat), the sentence being written with its gap; what Ans says above the
   choices, the words to choose from as a row of buttons. The choices keep their room, so nothing moves from sentence to sentence */
taaltaal-exercise-clauses .tcl-mail { height: 220px; overflow-y: auto; margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: #2b2b2b; }
taaltaal-exercise-clauses .tcl-mail p { margin: 0 0 8px; }
/* white, as a mail is: on the paper of the card it looks like the mail program, not like a note */
taaltaal-exercise-clauses .tcl-mail.tts-chat { padding: 13px 14px 8px; background: #fff; border-color: #d8dce2; }
taaltaal-exercise-clauses .tcl-meta { padding-bottom: 6px; border-bottom: 1px solid #e4e7ec; font-size: 13px; color: #5f6670; }
taaltaal-exercise-clauses .tcl-meta b { color: #3f454d; }
taaltaal-exercise-clauses .tcl-gap { display: inline-block; min-width: 64px; margin: 0 3px; padding: 0 6px; border-bottom: 2px dashed #c70765; color: #c70765;
        font-weight: bold; text-align: center; }
taaltaal-exercise-clauses .tcl-gap.ok { min-width: 0; margin: 0 1px; padding: 0 4px; border-bottom: 2px solid #393; color: #1f6b1f; background: #ecf8ea; border-radius: 4px 4px 0 0; }
taaltaal-exercise-clauses .tcl-gap.oops { border-bottom-color: #c70765; background: #fdeef4; text-decoration: line-through; }
taaltaal-exercise-clauses .tcl-bye { margin-top: 12px; }
taaltaal-exercise-clauses .tcl-said { margin: 10px 0 0; padding: 7px 12px 8px; border-radius: 12px 12px 12px 3px; background: #fff; border-left: 4px solid #4a78c2;
        box-shadow: 0 1px 3px rgba(60, 45, 20, .14); font-size: 15.5px; }
taaltaal-exercise-clauses .tcl-said b { display: block; font-size: 11.5px; color: #8a7a5a; }
taaltaal-exercise-clauses .tcl-said small { display: block; font-size: 12px; color: #8a8a8a; font-style: italic; }
taaltaal-exercise-clauses .tcl-answers { display: flex; flex-wrap: wrap; gap: 8px; }
taaltaal-exercise-clauses .tcl-answers button { padding: 8px 16px; border: 1px solid #dcd6c8; border-radius: 8px; background: #fff; font: inherit; font-size: 16px;
        font-weight: bold; color: #2b3f93; cursor: pointer; box-shadow: 0 1px 3px rgba(60, 45, 20, .12); }
taaltaal-exercise-clauses .tcl-answers button:hover { background: #f3f6fb; }

taaltaal-exercise-clauses .tcl-choose { min-height: 190px; }
taaltaal-exercise-clauses .tts-play.tcl-open { align-self: flex-start; margin: 18px 0 12px; }     /* the start, as every play button: the white arrow */
taaltaal-exercise-clauses .tcl-on-talk .tcl-choose:has(.tcl-open) { display: flex; justify-content: center; }
taaltaal-exercise-clauses .tcl-task { margin: 10px 0 7px; font-size: 15px; color: #2b3f93; }
taaltaal-exercise-clauses .tcl-task b { color: #c70765; }
taaltaal-exercise-clauses .tcl-choose .tts-why { margin: 10px 0 0; }

@media (max-width: 560px)
{
    taaltaal-exercise-clauses .tcl-office { grid-template-columns: 62px 1fr 62px; gap: 10px; }
    taaltaal-exercise-clauses .tcl-who svg { width: 56px; height: 56px; }
    /* on a phone Carlos stands small at the start of the rule, the text around him, and Luister goes under the sentence,
       so the sentence keeps the whole width */
    taaltaal-exercise-clauses .tcl-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-clauses .tcl-line { min-height: 113px; align-content: flex-start; }
    taaltaal-exercise-clauses .tcl-pool { min-height: 89px; align-content: flex-start; }
    taaltaal-exercise-clauses .tcl-on-build .tts-feedback { min-height: 142px; }     /* the longest: a sentence with its English */
    taaltaal-exercise-clauses .tcl-on-build .tcl-with { min-height: 76px; }     /* a main clause of two lines */
    taaltaal-exercise-clauses .tcl-round { float: left; margin: 0 10px 4px 0; }
    taaltaal-exercise-clauses .tcl-on-explain .tts-tip { margin-top: 12px; }     /* the card's padding on a phone */
    taaltaal-exercise-clauses .tcl-round svg { width: 48px; height: 48px; }
    taaltaal-exercise-clauses .tcl-round figcaption { display: none; }
    taaltaal-exercise-clauses .tcl-say { flex-direction: column; align-items: flex-start; gap: 6px; }
    taaltaal-exercise-clauses .tcl-say, taaltaal-exercise-clauses .tcl-not, taaltaal-exercise-clauses .tcl-line { clear: both; }
    taaltaal-exercise-clauses .tcl-where { font-size: 13px; }
    taaltaal-exercise-clauses .tcl-mail { height: 200px; font-size: 15px; }
    taaltaal-exercise-clauses .tcl-choose { min-height: 278px; }     /* room for Ans, her English, the note and the choices */
    taaltaal-exercise-clauses .tcl-sentence { font-size: 18px; }
    taaltaal-exercise-clauses .tcl-say { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-clauses .tcl-who.talking .head, taaltaal-exercise-clauses .tcl-who.talking .mouth-open { animation: none; }
}