/* What is Smoesjes's own (taaltaal-exercise-excuses.js); the card, the tabs and the buttons are taaltaal-scene.css. Plain on
   purpose, as Bij de buren: the words, the sentences, and the two at the office. The link word is magenta, the verb blue and
   bold wherever it goes, so the eye follows it; on Monday morning the chat has a fixed height and scrolls inside */
taaltaal-exercise-excuses .tbx-link { color: #c70765; }
taaltaal-exercise-excuses .tbx-verb { color: #2b3f93; font-weight: bold; text-decoration: underline 2px #73d2f7; text-underline-offset: 3px; }

/* Uitleg: the four words as pills, the rule, the sentence in which the verb moves, the umbrella, the mistake on a yellow note */
taaltaal-exercise-excuses .tbx-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
taaltaal-exercise-excuses .tbx-words 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-excuses .tbx-words button:hover { background: #f3f6fb; }
taaltaal-exercise-excuses .tbx-words button[aria-pressed="true"] { background: linear-gradient(#ee3399, #cd1269); border-color: #cd1269; color: #fff; }
taaltaal-exercise-excuses .tbx-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-excuses .tbx-done .tbx-line, taaltaal-exercise-excuses .tbx-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-excuses .tbx-on-explain .tts-tip { margin-top: 20px; }
/* Carlos beside his excuses in Uitleg and Bouw de zin, round as on Monday morning */
taaltaal-exercise-excuses .tbx-with { display: flex; align-items: flex-start; gap: 14px; }
taaltaal-exercise-excuses .tbx-with > :last-child { flex: 1; min-width: 0; }
taaltaal-exercise-excuses .tbx-round { flex: none; margin: 0; }
taaltaal-exercise-excuses .tbx-head .tbx-words { justify-content: flex-start; }
taaltaal-exercise-excuses .tbx-head .tbx-rule { margin: 10px 0 0; }
taaltaal-exercise-excuses .tbx-round svg { width: 64px; height: 64px; }
taaltaal-exercise-excuses .tbx-rule { margin: 0 0 12px; font-size: 15px; color: #5b4a30; }
taaltaal-exercise-excuses .tbx-say { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
taaltaal-exercise-excuses .tbx-sentence { font-size: 21px; color: #333; line-height: 1.6; }
taaltaal-exercise-excuses .tbx-part { display: inline-flex; flex-wrap: wrap; gap: 0 .3em; }
taaltaal-exercise-excuses .tbx-w { display: inline-block; }
taaltaal-exercise-excuses .tbx-also > span { font-size: 16px; color: #444; }     /* the sentence only: the button stays as big as the first */
taaltaal-exercise-excuses .tbx-also small { margin-right: 4px; font-size: 12.5px; color: #8a7a5a; }
taaltaal-exercise-excuses .tbx-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-excuses .tbx-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-excuses .tbx-first { margin: 0 0 10px; font-size: 19px; color: #333; }
taaltaal-exercise-excuses .tbx-first .tts-score { display: block; }
taaltaal-exercise-excuses .tbx-thanks { display: block; margin-top: 6px; font-size: 18px; font-style: italic; color: #2f7a57; }
taaltaal-exercise-excuses .tbx-thanks small { display: block; font-size: 12.5px; font-style: normal; color: #8a8a8a; }
taaltaal-exercise-excuses .tbx-first .tts-next { display: block; margin-top: 25px; font-size: 15px; }
taaltaal-exercise-excuses .tbx-first small { display: block; margin-top: 3px; font-size: 12.5px; color: #8a7a5a; }
taaltaal-exercise-excuses .tbx-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-excuses .tbx-pool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 48px; margin-top: 10px; }
taaltaal-exercise-excuses .tbx-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-excuses .tbx-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 #b98d52; }
taaltaal-exercise-excuses .tbx-tile.right { background: #ecf8ea; border-color: #393; color: #1f6b1f; box-shadow: none; cursor: default; }
taaltaal-exercise-excuses .tbx-tile.wrong { background: #fdeef4; border-color: #c70765; color: #a0054f; box-shadow: none; }
taaltaal-exercise-excuses .tbx-on-build .tts-feedback { min-height: 92px; }
taaltaal-exercise-excuses .tbx-good { font-size: 16px; }
taaltaal-exercise-excuses .tbx-good b { color: #2f9a2f; }
taaltaal-exercise-excuses .tbx-good small { display: block; font-size: 12.5px; color: #888; font-style: italic; }
taaltaal-exercise-excuses .tbx-on-build .tts-why { margin: 10px 0 0; }

/* Maandagochtend: Linda and Carlos, the chat between them, and what Carlos says */
taaltaal-exercise-excuses .tbx-office { display: grid; grid-template-columns: 78px 1fr 78px; align-items: center; gap: 14px; }
taaltaal-exercise-excuses .tbx-who { margin: 0; text-align: center; }
taaltaal-exercise-excuses .tbx-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-excuses .tbx-who figcaption { margin-top: 3px; font-size: 13px; font-weight: bold; color: #5b4a30; }
taaltaal-exercise-excuses .tbx-who figcaption small { font-weight: normal; color: #8a7a5a; }
taaltaal-exercise-excuses .tbx-where { margin: 0; font-size: 14.5px; color: #5b4a30; text-align: center; }
/* Carlos is not in yet until he walks in */
taaltaal-exercise-excuses .tbx-carlos svg { transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.3, .5, 1); }
taaltaal-exercise-excuses .tbx-office:not(.tbx-here) .tbx-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-excuses .tbx-who .head { transform-box: view-box; transform-origin: 50px 70px; }
taaltaal-exercise-excuses .tbx-who.talking .head { animation: tbx-nod .9s ease-in-out infinite alternate; }
@keyframes tbx-nod { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
taaltaal-exercise-excuses .tbx-who .mouth-open { opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; }
taaltaal-exercise-excuses .tbx-who.talking:not(.lips) .mouth-open { animation: tbx-talk .32s steps(1) infinite; }
@keyframes tbx-talk { 0% { opacity: 1; } 50% { opacity: 0; } }

taaltaal-exercise-excuses .tbx-log { display: flex; flex-direction: column; gap: 7px; height: 240px; overflow-y: auto; margin: 12px 0 0; list-style: none; }
taaltaal-exercise-excuses .tbx-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: tbx-in .25s ease-out; }
@keyframes tbx-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
taaltaal-exercise-excuses .tbx-log li b { display: block; font-size: 11.5px; color: #8a7a5a; }
taaltaal-exercise-excuses .tbx-log li span { font-size: 16px; color: #2b2b2b; }
taaltaal-exercise-excuses .tbx-log li small { display: block; font-size: 12px; color: #8a8a8a; font-style: italic; }
taaltaal-exercise-excuses .tbx-log .tbx-linda { border-left: 4px solid #4a78c2; }
taaltaal-exercise-excuses .tbx-log .tbx-carlos { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: linear-gradient(#ecf7f0, #dcefe3); }
taaltaal-exercise-excuses .tbx-log .tbx-carlos b { color: #2f7a57; }
taaltaal-exercise-excuses .tbx-log .tbx-carlos.oops { opacity: .65; }
taaltaal-exercise-excuses .tbx-log .tbx-carlos.oops span { text-decoration: line-through; text-decoration-color: #c70765; }

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

@media (max-width: 560px)
{
    taaltaal-exercise-excuses .tbx-office { grid-template-columns: 62px 1fr 62px; gap: 10px; }
    taaltaal-exercise-excuses .tbx-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-excuses .tbx-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-excuses .tbx-line { min-height: 103px; align-content: flex-start; }
    taaltaal-exercise-excuses .tbx-pool { min-height: 89px; align-content: flex-start; }
    taaltaal-exercise-excuses .tbx-on-build .tts-feedback { min-height: 106px; }
    taaltaal-exercise-excuses .tbx-round { float: left; margin: 0 10px 4px 0; }
    taaltaal-exercise-excuses .tbx-on-explain .tts-tip { margin-top: 12px; }     /* the card's padding on a phone */
    taaltaal-exercise-excuses .tbx-round svg { width: 48px; height: 48px; }
    taaltaal-exercise-excuses .tbx-round figcaption { display: none; }
    taaltaal-exercise-excuses .tbx-say { flex-direction: column; align-items: flex-start; gap: 6px; }
    taaltaal-exercise-excuses .tbx-say, taaltaal-exercise-excuses .tbx-not, taaltaal-exercise-excuses .tbx-line { clear: both; }
    taaltaal-exercise-excuses .tbx-where { font-size: 13px; }
    taaltaal-exercise-excuses .tbx-log { height: 190px; }
    taaltaal-exercise-excuses .tbx-log li { max-width: 92%; }
    taaltaal-exercise-excuses .tbx-sentence { font-size: 18px; }
    taaltaal-exercise-excuses .tbx-say { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-excuses .tbx-who.talking .head, taaltaal-exercise-excuses .tbx-who.talking .mouth-open,
    taaltaal-exercise-excuses .tbx-log li { animation: none; }
    taaltaal-exercise-excuses .tbx-carlos svg { transition: none; }
}