/* What is Wat zei ik nou?'s own (taaltaal-exercise-slips.js); the card, the tabs and the buttons are taaltaal-scene.css.
   Plain on purpose, as Bij de buren: the three at the party, the chat between them, and what Carlos says. When a slip is
   said the two in the circle laugh: their heads shake a little, never more than that */

/* Op de verjaardag: Linda and Ans in the circle, a line about where we are, and Carlos (who is not in yet until he rings) */
taaltaal-exercise-slips .tsl-circle { display: grid; grid-template-columns: 70px 70px 1fr 70px; align-items: center; gap: 12px; }
taaltaal-exercise-slips .tsl-who { margin: 0; text-align: center; }
taaltaal-exercise-slips .tsl-who svg { display: block; width: 64px; height: 64px; border-radius: 50%; border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(60, 45, 20, .25); }
taaltaal-exercise-slips .tsl-who figcaption { margin-top: 3px; font-size: 13px; font-weight: bold; color: #5b4a30; }
taaltaal-exercise-slips .tsl-who figcaption small { font-weight: normal; color: #8a7a5a; }
taaltaal-exercise-slips .tsl-where { margin: 0; font-size: 14.5px; color: #5b4a30; text-align: center; }
taaltaal-exercise-slips .tsl-carlos svg { transition: opacity .6s ease, transform .6s cubic-bezier(.3, 1.3, .5, 1); }
taaltaal-exercise-slips .tsl-circle:not(.tsl-here) .tsl-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-slips .tsl-who .head { transform-box: view-box; transform-origin: 50px 70px; }
taaltaal-exercise-slips .tsl-who.talking .head { animation: tsl-nod .9s ease-in-out infinite alternate; }
@keyframes tsl-nod { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
taaltaal-exercise-slips .tsl-who .mouth-open { opacity: 0; transform-box: fill-box; transform-origin: 50% 25%; }
taaltaal-exercise-slips .tsl-who.talking:not(.lips) .mouth-open { animation: tsl-talk .32s steps(1) infinite; }
@keyframes tsl-talk { 0% { opacity: 1; } 50% { opacity: 0; } }
/* a slip: Linda and Ans laugh, a quick shake of the head */
taaltaal-exercise-slips .tsl-laugh .tsl-linda .head, taaltaal-exercise-slips .tsl-laugh .tsl-ans .head { animation: tsl-laugh .22s ease-in-out 4 alternate; }
@keyframes tsl-laugh { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-2px) rotate(3deg); } }

/* the chat scrolls inside, and takes the height the turn leaves it (.tsl-area is measured in the script; .tsl-room is the
   chat's smallest); a slip stays in it, struck through */
taaltaal-exercise-slips .tsl-area { display: flex; flex-direction: column; margin-top: 12px; }
taaltaal-exercise-slips .tsl-room { height: 200px; }
taaltaal-exercise-slips .tsl-log { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 7px; overflow-y: auto; margin: 0; list-style: none; }
taaltaal-exercise-slips .tsl-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: tsl-in .25s ease-out; }
@keyframes tsl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* while the bell rings the door lies over the empty chat (taaltaal-scene.css) */
taaltaal-exercise-slips .tsl-log { position: relative; }
taaltaal-exercise-slips .tsl-log li b { display: block; font-size: 11.5px; color: #8a7a5a; }
taaltaal-exercise-slips .tsl-log li span { font-size: 16px; color: #2b2b2b; }
taaltaal-exercise-slips .tsl-log li small { display: block; font-size: 12px; color: #8a8a8a; font-style: italic; }
taaltaal-exercise-slips .tsl-log .tsl-linda { border-left: 4px solid #4a78c2; }
taaltaal-exercise-slips .tsl-log .tsl-ans { border-left: 4px solid #c70765; }
taaltaal-exercise-slips .tsl-log .tsl-carlos { align-self: flex-end; border-radius: 12px 12px 3px 12px; background: linear-gradient(#ecf7f0, #dcefe3); }
taaltaal-exercise-slips .tsl-log .tsl-carlos b { color: #2f7a57; }
taaltaal-exercise-slips .tsl-log .tsl-carlos.oops { background: #fff8d6; }
taaltaal-exercise-slips .tsl-log .tsl-carlos.oops span { text-decoration: line-through wavy #e0a800; text-decoration-thickness: 1px; }

/* what Carlos says */
taaltaal-exercise-slips .tsl-choose { flex: none; display: flow-root; }       /* flow-root: the first margin stays inside */
taaltaal-exercise-slips .tts-play.tsl-enter { align-self: flex-start; margin: 18px 0 12px; }     /* the start, as every play button: the white arrow */
taaltaal-exercise-slips .tsl-on-party .tsl-choose:has(.tsl-enter) { display: flex; justify-content: center; align-items: flex-start; }
taaltaal-exercise-slips .tsl-task { margin: 10px 0 7px; font-size: 15px; color: #2b3f93; }
taaltaal-exercise-slips .tsl-task b { color: #c70765; }
taaltaal-exercise-slips .tsl-choose .tts-why { margin: 10px 0 0; }
taaltaal-exercise-slips .tsl-choose .tts-answers button { padding: 8px 14px; }
taaltaal-exercise-slips .tsl-end { width: 100%; }
taaltaal-exercise-slips .tsl-more { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid #dcd6c8; border-radius: 8px;
        background: #fff; font: inherit; font-weight: bold; color: #c70765; cursor: pointer; }
taaltaal-exercise-slips .tsl-more .ico { width: 18px; height: 18px; }

/* Wat zei ik nou?: Carlos beside the kinds of slip and what they have in common; then the slips, each what he said (struck
   through, wavy) and what he meant, both to hear, and the why under it */
taaltaal-exercise-slips .tsl-head { display: flex; align-items: flex-start; gap: 14px; }
taaltaal-exercise-slips .tsl-head > :last-child { flex: 1; min-width: 0; }
taaltaal-exercise-slips .tsl-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
taaltaal-exercise-slips .tsl-kinds button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid #dcd6c8; border-radius: 16px;
        background: #fff; font: inherit; font-size: 14px; font-weight: bold; color: #2b3f93; cursor: pointer; box-shadow: 0 1px 2px rgba(60, 45, 20, .1); }
taaltaal-exercise-slips .tsl-kinds button .ico { width: 17px; height: 17px; }
taaltaal-exercise-slips .tsl-kinds button:hover { background: #f3f6fb; }
taaltaal-exercise-slips .tsl-kinds button[aria-pressed="true"] { background: linear-gradient(#ee3399, #cd1269); border-color: #cd1269; color: #fff; }
taaltaal-exercise-slips .tsl-why { margin: 10px 0 0; font-size: 15px; color: #5b4a30; }
taaltaal-exercise-slips .tsl-board { margin-top: 8px; }
taaltaal-exercise-slips .tsl-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 6px; font-size: 14px; color: #5b4a30; }
taaltaal-exercise-slips .tsl-small svg { width: 40px; height: 40px; border-width: 2px; }
taaltaal-exercise-slips .tsl-slips { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
taaltaal-exercise-slips .tsl-slips li { padding: 7px 12px 8px; border-radius: 8px; background: rgba(255, 255, 255, .7); box-shadow: 0 1px 2px rgba(60, 45, 20, .1); }
taaltaal-exercise-slips .tsl-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 22px; margin: 0; font-size: 16px; }
taaltaal-exercise-slips .tsl-said, taaltaal-exercise-slips .tsl-meant { display: inline-flex; align-items: center; gap: 6px; }
taaltaal-exercise-slips .tsl-said s { color: #8a6a10; text-decoration: line-through wavy #e0a800; text-decoration-thickness: 1px; }
taaltaal-exercise-slips .tsl-meant b { color: #1f6b1f; }
taaltaal-exercise-slips .tsl-slips small { display: block; margin-top: 3px; font-size: 13px; color: #6b5a40; }
taaltaal-exercise-slips .tsl-hear { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0;
        border-radius: 50%; background: linear-gradient(#ee3399, #cd1269); color: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(150, 10, 80, .3); }
taaltaal-exercise-slips .tsl-meant .tsl-hear { background: linear-gradient(#45a845, #2f8a2f); box-shadow: 0 1px 3px rgba(30, 90, 30, .3); }
taaltaal-exercise-slips .tsl-hear .ico { width: 16px; height: 16px; }
taaltaal-exercise-slips .tsl-on-slips .tts-tip { margin-top: 20px; }

@media (max-width: 560px)
{
    /* Carlos's name takes two lines here: the three stay level */
    taaltaal-exercise-slips .tsl-circle { grid-template-columns: 58px 58px 1fr 58px; gap: 8px; align-items: start; }
    taaltaal-exercise-slips .tsl-where { align-self: center; }
    taaltaal-exercise-slips .tsl-who svg { width: 52px; height: 52px; }
    taaltaal-exercise-slips .tsl-where { font-size: 12.5px; }
    taaltaal-exercise-slips .tsl-room { height: 170px; }
    taaltaal-exercise-slips .tsl-log li { max-width: 92%; }
    /* Carlos small beside the kinds of slip, the text around him */
    taaltaal-exercise-slips .tsl-head { display: block; }
    taaltaal-exercise-slips .tsl-head > .tsl-who { float: left; margin: 0 10px 4px 0; }
    taaltaal-exercise-slips .tsl-head > .tsl-who svg { width: 44px; height: 44px; }
    taaltaal-exercise-slips .tsl-head > .tsl-who figcaption { display: none; }
    taaltaal-exercise-slips .tsl-board { clear: both; }
    taaltaal-exercise-slips .tsl-on-slips .tts-tip { margin-top: 12px; }     /* the card's padding on a phone */
}
@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-slips .tsl-who.talking .head, taaltaal-exercise-slips .tsl-who.talking .mouth-open, taaltaal-exercise-slips .tsl-laugh .head,
    taaltaal-exercise-slips .tsl-log li { animation: none; }
    taaltaal-exercise-slips .tsl-carlos svg { transition: none; }
}