/* the clock exercise (taaltaal-exercise-clock.js): a wall clock on a card in the light skeuo of
   Kennis, the answers as buttons beside it, ten dots for the round; TaalTaal blue for the hands, ERK green and magenta for
   right and wrong */
taaltaal-exercise-clock { display: block; max-width: 640px; font: 15px/1.45 Arial, Verdana, sans-serif; color: #333; }
taaltaal-exercise-clock [hidden] { display: none !important; }

taaltaal-exercise-clock .tpc-tabs { display: flex; gap: 4px; margin-left: 0; }     /* the first tab on the card's left edge */
taaltaal-exercise-clock .tpc-tabs button { padding: 6px 16px 7px; border: 1px solid #e6cfa8; border-bottom: 0; border-radius: 12px 12px 0 0;
                                           background: linear-gradient(#faefdc, #f0dcbd); color: #8a6c48; font: inherit; font-weight: bold; cursor: pointer; }
taaltaal-exercise-clock .tpc-tabs button[aria-selected="true"] { background: #fff; color: #2b3f93; position: relative; top: 1px; }

taaltaal-exercise-clock .tpc-card { display: flex; gap: 28px; align-items: center; padding: 22px 24px; border-radius: 0 10px 10px 10px;
                                    background: #fdf6ec url("/images/kennis/paper.png"); border: 1px solid rgba(120, 95, 60, .18);
                                    box-shadow: 0 2px 7px rgba(60, 45, 20, .14); }
taaltaal-exercise-clock .tpc-clock { flex: none; width: 210px; }
taaltaal-exercise-clock .face { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(40, 30, 10, .28)); touch-action: none; }
taaltaal-exercise-clock .face .tick { stroke: #9aa3b5; stroke-width: 1; }
taaltaal-exercise-clock .face .tick.big { stroke: #2b3f93; stroke-width: 2.5; stroke-linecap: round; }
taaltaal-exercise-clock .face text { font: bold 15px Arial, sans-serif; fill: #2b3f93; text-anchor: middle; }
taaltaal-exercise-clock .face .hand { stroke: #22304f; stroke-linecap: round; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
taaltaal-exercise-clock .face .hour { stroke-width: 7; }
taaltaal-exercise-clock .face .minute { stroke-width: 4.5; stroke: #2b3f93; }
taaltaal-exercise-clock .face .pin { fill: #c70765; stroke: #fff; stroke-width: 1.5; }
taaltaal-exercise-clock .face .grab { fill: transparent; }
taaltaal-exercise-clock .face.tpc-live { cursor: grab; }
taaltaal-exercise-clock .face.tpc-live:active { cursor: grabbing; }
taaltaal-exercise-clock .face.tpc-dragging .hand { transition: none; }

taaltaal-exercise-clock .tpc-side { flex: 1; min-width: 0; }
taaltaal-exercise-clock .tpc-ask { margin: 0 0 12px; font-size: 18px; font-weight: bold; color: #2b3f93; }
taaltaal-exercise-clock .tpc-ask b { display: block; margin-top: 4px; font-size: 22px; color: #8a5a2b; }
taaltaal-exercise-clock .tpc-ask small { display: block; margin-top: 4px; font-size: 12px; font-weight: normal; color: #888; }
taaltaal-exercise-clock .tpc-answers { display: grid; gap: 7px; }
taaltaal-exercise-clock .tpc-answers button { padding: 9px 14px; text-align: left; border: 1px solid #dcd6c8; border-radius: 8px; background: #fff;
                                              font: inherit; color: #333; cursor: pointer; box-shadow: 0 1px 2px rgba(60, 45, 20, .1);
                                              transition: transform .12s ease-out, box-shadow .12s ease-out; }
taaltaal-exercise-clock .tpc-answers button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 6px rgba(60, 45, 20, .16); }
taaltaal-exercise-clock .tpc-answers button:disabled { cursor: default; opacity: .7; }
taaltaal-exercise-clock .tpc-answers button.right { opacity: 1; border-color: #393; background: #ecf8ea; color: #1f6b1f; font-weight: bold; }
taaltaal-exercise-clock .tpc-answers button.wrong { opacity: 1; border-color: #c70765; background: #fdeef4; color: #a0054f; }
taaltaal-exercise-clock .tpc-answers .tpc-check { text-align: center; font-weight: bold; color: #fff; background: linear-gradient(#4a5fb0, #2b3f93); border-color: #2b3f93; }
taaltaal-exercise-clock .tpc-turn { display: flex; gap: 6px; margin-bottom: 10px; }
taaltaal-exercise-clock .tpc-turn button { width: 40px; height: 32px; border: 1px solid #dcd6c8; border-radius: 8px; background: #fff; font-size: 18px; color: #2b3f93; cursor: pointer; }

taaltaal-exercise-clock .tpc-feedback p { margin: 10px 0 0; }
taaltaal-exercise-clock .tpc-good { font-weight: bold; color: #393; font-size: 17px; }
taaltaal-exercise-clock .tpc-bad { color: #a0054f; }
taaltaal-exercise-clock .tpc-hint { font-size: 13px; color: #6b5a40; background: #fdf6a3; padding: 7px 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
taaltaal-exercise-clock .tpc-more { display: inline-block; margin-top: 6px; font-size: 13px; }
taaltaal-exercise-clock .tpc-score { font-size: 16px; }
taaltaal-exercise-clock .tpc-next { margin-top: 12px; padding: 8px 18px; border: 0; border-radius: 8px; background: linear-gradient(#4a5fb0, #2b3f93);
                                    color: #fff; font: inherit; font-weight: bold; cursor: pointer; }
taaltaal-exercise-clock button:focus-visible { outline: 2px solid #2b3f93; outline-offset: 2px; }

taaltaal-exercise-clock .tpc-progress { display: flex; gap: 6px; justify-content: center; margin: 12px 0 0; padding: 0; list-style: none; }
taaltaal-exercise-clock .tpc-progress li { width: 10px; height: 10px; border-radius: 50%; background: #e2ddd2; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15); }
taaltaal-exercise-clock .tpc-progress li.right { background: #393; }
taaltaal-exercise-clock .tpc-progress li.wrong { background: #c70765; }

@media (max-width: 560px)
{
    taaltaal-exercise-clock .tpc-card { flex-direction: column; padding: 16px; }
    taaltaal-exercise-clock .tpc-clock { width: 180px; }
    taaltaal-exercise-clock .tpc-side { width: 100%; }
}
@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-clock .face .hand, taaltaal-exercise-clock .tpc-answers button { transition: none; }
}
/* the button that says the time again, in listen and set the clock */
taaltaal-exercise-clock .tpc-play { display: block; margin: 10px 0 2px; padding: 7px 16px 8px; border: 0; border-radius: 18px; cursor: pointer;
                                    background: linear-gradient(#ee3399, #cd1269); color: #fff; font: inherit; font-weight: bold;
                                    box-shadow: 0 2px 4px rgba(150, 10, 80, .3); }
taaltaal-exercise-clock .tpc-play::before { content: ""; display: inline-block; margin-right: 8px; border-left: 9px solid #fff;
                                            border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* the hands turn as on a real clock, the short way round, from the middle of the face (the element
   turns them with a style transform on a count of minutes that does not wrap); no turning while a hand is dragged */
taaltaal-exercise-clock .face .hand { transform-box: view-box; transform-origin: 100px 100px; transition: transform .6s cubic-bezier(.3, 1.3, .5, 1); }

/* the open tab is of the same paper as the card under it, and runs into it: tab and card are one sheet */
taaltaal-exercise-clock .tpc-tabs button[aria-selected="true"] { top: 0; z-index: 2; margin-bottom: -1px; padding-bottom: 8px; color: #5a3a17;
        background: #fdf6ec url("/images/kennis/paper.png"); border-color: rgba(120, 95, 60, .18); }

/* explore: the time in big words under each other with its digits, the sound, and the steps through every time */
taaltaal-exercise-clock .tpc-words { margin: 0 0 12px; }
taaltaal-exercise-clock .tpc-words b { display: block; font-size: 30px; line-height: 1.15; color: #2b3f93; }
taaltaal-exercise-clock .tpc-digital { display: block; margin-top: 4px; font-size: 15px; color: #888; }
taaltaal-exercise-clock .tpc-explore .tpc-play { margin: 0 0 14px; }
taaltaal-exercise-clock .tpc-steps { display: flex; flex-wrap: wrap; gap: 6px; }
taaltaal-exercise-clock .tpc-steps button { padding: 6px 11px; border: 1px solid #dcd6c8; border-radius: 16px; background: #fff; font: inherit;
                                            font-size: 13px; color: #2b3f93; cursor: pointer; box-shadow: 0 1px 2px rgba(60, 45, 20, .1); }
taaltaal-exercise-clock .tpc-steps button:hover { background: #f3f6fb; }
taaltaal-exercise-clock .tpc-steps [data-now] { font-weight: bold; }
taaltaal-exercise-clock .tpc-auto { display: block; margin-top: 12px; font-size: 13px; color: #777; }

/* a right answer pops over the card instead of pushing the page: "Goed!" grows and fades  */
taaltaal-exercise-clock .tpc-card { position: relative; }
taaltaal-exercise-clock .tpc-pop { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
                                   pointer-events: none; animation: tpc-pop 1.25s ease-out forwards; }
taaltaal-exercise-clock .tpc-pop b { font-size: 58px; color: #2f9a2f; text-shadow: 0 0 2px #fff, 0 0 12px #fff, 0 3px 10px rgba(40, 90, 40, .35); }
taaltaal-exercise-clock .tpc-pop span { margin-top: 2px; font-size: 22px; font-weight: bold; color: #2b3f93; text-shadow: 0 0 2px #fff, 0 0 10px #fff; }
@keyframes tpc-pop { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: 1; transform: scale(1.05); } 60% { opacity: 1; transform: scale(1.12); }
                     100% { opacity: 0; transform: scale(1.35); } }
taaltaal-exercise-clock .tpc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

/* the way to the explanation in a feedback, as cheerful as the rest ("link met uitleg wat vrolijker weergeven") */
taaltaal-exercise-clock .tpc-more { display: inline-block; margin-top: 8px; padding: 5px 12px 6px; border-radius: 14px; background: #e3f5fd;
                                    border: 1px solid #b9e3f6; color: #2b3f93; text-decoration: none; font-size: 13px; }
taaltaal-exercise-clock .tpc-more::before { content: "\201C\00A0"; font: bold 15px Georgia, serif; color: #73a9d6; }
taaltaal-exercise-clock .tpc-more:hover { background: #d3eefb; }
@media (prefers-reduced-motion: reduce)
{
    taaltaal-exercise-clock .face .hand { transition: none; }
    taaltaal-exercise-clock .tpc-pop { animation: none; }
}
/* the choice of face, small and quiet under the clock; the Roman numerals a little
   narrower; the digital clock as a clock radio with a green display, its unlit segments faintly behind the digits */
taaltaal-exercise-clock .tpc-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; margin-top: 10px; }
taaltaal-exercise-clock .tpc-faces button { padding: 3px 8px; border: 1px solid #e3e3e3; border-radius: 10px; background: #fff; font: inherit;
                                            font-size: 11px; color: #888; cursor: pointer; }
taaltaal-exercise-clock .tpc-faces button[aria-pressed="true"] { color: #2b3f93; border-color: #b9c4e6; background: #eef2fb; font-weight: bold; }
taaltaal-exercise-clock .face text.roman { font: bold 13px Georgia, "Times New Roman", serif; letter-spacing: -.5px; }
taaltaal-exercise-clock .face.digital text { font-family: "Courier New", Courier, monospace; font-weight: bold; text-anchor: middle; }
taaltaal-exercise-clock .face.digital .lcd { font-size: 50px; fill: #1f2d1a; letter-spacing: 1px; }
taaltaal-exercise-clock .face.digital .ghost { font-size: 50px; fill: #1f2d1a; opacity: .07; letter-spacing: 1px; }
taaltaal-exercise-clock .face.digital .ampm { font-size: 12px; fill: #1f2d1a; opacity: .7; }
/* the chic face: gold beads and fleurons, numerals in a serif in dark brown, the hands in blued steel
   as on an antique clock (their parts are filled and stroked as one) */
taaltaal-exercise-clock .face.chic .bead { fill: #fff1b0; stroke: #8a6410; stroke-width: .4; }
taaltaal-exercise-clock .face.chic .fleuron { fill: #b8860b; }
taaltaal-exercise-clock .face.chic .tick { stroke: #8a6410; stroke-width: .7; }
taaltaal-exercise-clock .face.chic text.roman { font: bold 12.5px Georgia, "Times New Roman", serif; fill: #3a2a10; text-anchor: middle; letter-spacing: -.3px; }
taaltaal-exercise-clock .face.chic .hand { stroke-width: 0; }
taaltaal-exercise-clock .face.chic .hand path { fill: #1b2a52; }
taaltaal-exercise-clock .face.chic .hand circle { stroke: #1b2a52; }
/* the Roman face as a wooden kitchen clock: grain in the walnut, a black double track, big numerals
   in a serif, black spade hands */
taaltaal-exercise-clock .face.roman .grain { fill: none; stroke: #3b2008; stroke-opacity: .28; stroke-width: .7; }
taaltaal-exercise-clock .face.roman .track { stroke: #1a1410; stroke-width: .9; }
taaltaal-exercise-clock .face.roman .tick { stroke: #1a1410; stroke-width: .8; }
taaltaal-exercise-clock .face.roman .tick.big { stroke-width: 2.2; }
taaltaal-exercise-clock .face.roman text.roman { font: bold 15px Georgia, "Times New Roman", serif; fill: #1a1410; text-anchor: middle; letter-spacing: -.4px; }
taaltaal-exercise-clock .face.roman .hand { stroke-width: 0; }
taaltaal-exercise-clock .face.roman .hand path { fill: #1a1410; }
/* Klaar as a button of its own size with round ends, not the full width ("de Klaar knop hoeft niet zo
   breed, hoeken kunnen afgeronder"); and in Explore a small tip that the hand can be dragged ("ik wist niet eens dat je kon
   slepen") */
taaltaal-exercise-clock .tpc-answers .tpc-check { justify-self: start; min-width: 120px; padding: 9px 26px; border-radius: 20px; }
taaltaal-exercise-clock .tpc-tip { margin: 8px 0 0; font-size: 12px; color: #999; }
/* the polaroid of who reads the clock out loud, top right on the board and half over its edge, a little
   askew, her name under it in a hand; while she speaks her mouth moves with the sound (TaalTaalScene.lit) */
taaltaal-exercise-clock .tpc-narrator { position: absolute; right: 18px; top: -26px; z-index: 2; width: 86px; margin: 0; padding: 6px 6px 4px;
                                        background: #fff; box-shadow: 0 3px 8px rgba(40, 30, 10, .28); transform: rotate(4deg); }
taaltaal-exercise-clock .tpc-narrator img { display: block; width: 100%; height: auto; }
taaltaal-exercise-clock .tpc-narrator figcaption { margin-top: 3px; text-align: center; font: 15px "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
                                                   color: #2b3f93; line-height: 1.2; }
taaltaal-exercise-clock .tpc-face { position: relative; display: block; }
taaltaal-exercise-clock .tpc-face .mouth-open { position: absolute; left: 50%; top: 60%; width: 11%; height: 8.4%; margin: -4.2% 0 0 -5.5%; border-radius: 50%; background: #7a1d33; opacity: 0; transform-origin: 50% 25%; }
@media (max-width: 560px) { taaltaal-exercise-clock .tpc-narrator { width: 64px; right: 8px; top: -20px; } }
/* the polaroid is a button now, its name in the hand; a click pops a card out of it, to the left and
   down, where she says who she is, with a translation in grey on a page in another language */
taaltaal-exercise-clock button.tpc-narrator { border: 0; font: inherit; cursor: pointer; }
/* on a wide screen her polaroid hangs over the top right of the side; when the answers come right under the question,
   they start under the polaroid instead of behind it */
@media (min-width: 561px) { taaltaal-exercise-clock .tpc-card:has(.tpc-narrator):has(.tpc-turn[hidden]) .tpc-ask { margin-bottom: 54px; } }
taaltaal-exercise-clock button.tpc-narrator:hover { transform: rotate(2deg) scale(1.04); }
taaltaal-exercise-clock .tpc-narrator .tpc-name { display: block; margin-top: 3px; text-align: center; font: 15px "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
                                                  color: #2b3f93; line-height: 1.2; }
taaltaal-exercise-clock .tpc-hello { position: absolute; right: 118px; top: 6px; z-index: 3; width: 270px; padding: 14px 16px 12px; border-radius: 14px;
                                     background: linear-gradient(120deg, #ffffff 0%, #f4f7fd 60%, #e8eefb 100%); border: 1px solid #d6dff0;
                                     box-shadow: 0 8px 22px rgba(43, 63, 147, .22); transform-origin: 100% 0; animation: tpc-hello .26s cubic-bezier(.2, .9, .3, 1.25) both; }
taaltaal-exercise-clock .tpc-hello[hidden] { display: none; }
@keyframes tpc-hello { from { transform: translate(40px, -10px) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
taaltaal-exercise-clock .tpc-hello-text { margin: 0 24px 0 0; font-size: 15px; line-height: 1.45; color: #333; }
taaltaal-exercise-clock .tpc-hello-in { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #888; font-style: italic; }
taaltaal-exercise-clock .tpc-close { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
                                     background: #efe9de; color: #5a4a35; font-size: 18px; font-weight: bold; line-height: 25px; box-shadow: inset 0 0 0 1px rgba(90, 74, 53, .18); }
taaltaal-exercise-clock .tpc-close:hover { background: #e2d9c8; }
@media (prefers-reduced-motion: reduce) { taaltaal-exercise-clock .tpc-hello { animation: none; } }
@media (max-width: 560px) { taaltaal-exercise-clock .tpc-hello { right: 8px; top: 70px; width: auto; left: 8px; } }
/* the polaroid a little lower and still, also while she speaks or the mouse is on it ("polaroidje iets
   lager en niet laten bewegen, is afleidend") */
taaltaal-exercise-clock .tpc-narrator { top: -12px; }
taaltaal-exercise-clock .tpc-narrator.speaking { animation: none; }
taaltaal-exercise-clock button.tpc-narrator:hover { transform: rotate(4deg); }
/* on a phone the tabs on one line each, and the polaroid smaller and on the board instead of over the
   tabs */
@media (max-width: 560px)
{
    taaltaal-exercise-clock .tpc-tabs { margin-left: 0; gap: 3px; }
    taaltaal-exercise-clock .tpc-tabs button { padding: 6px 9px 7px; font-size: 13px; white-space: nowrap; }
    taaltaal-exercise-clock .tpc-narrator { width: 58px; right: 8px; top: 10px; padding: 4px 4px 2px; }
    taaltaal-exercise-clock .tpc-narrator .tpc-name { font-size: 12px; }
}
/* the words of the time keep clear of the polaroid (an Italian time is long: "Sono le nove e
   venticinque" ran under Elsa) */
taaltaal-exercise-clock .tpc-card:has(.tpc-narrator) .tpc-words b,
taaltaal-exercise-clock .tpc-card:has(.tpc-narrator) .tpc-ask { padding-right: 96px; }
@media (max-width: 560px) { taaltaal-exercise-clock .tpc-card:has(.tpc-narrator) .tpc-words b, taaltaal-exercise-clock .tpc-card:has(.tpc-narrator) .tpc-ask { padding-right: 0; } }
/* room for two lines of words always, so the card does not jump when a long time (two lines) is
   followed by a short one ("als de tijd over 2 regels is en daarna 1 regel, liever niet de klok terug laten springen"); the
   words sit at the bottom of that room, close to their digits */
taaltaal-exercise-clock .tpc-words b { min-height: 2.3em; display: flex; align-items: flex-end; }
/* in Listen the question 18px higher, its button and hint where they were ("Luister, en zet de klok op
   die tijd te veel marge boven; 15-20px naar boven? De Luister knop staat wel goed") */
taaltaal-exercise-clock .tpc-ask:has(.tpc-play) { position: relative; top: -18px; }
taaltaal-exercise-clock .tpc-ask:has(.tpc-play) .tpc-play, taaltaal-exercise-clock .tpc-ask:has(.tpc-play) small { position: relative; top: 18px; }