/* ==========================================================================
   testing.css -- the testing tablet (testing.php).

   Two kinds of screen: the teacher's setup (who, which test, how many) and
   the student's (Ready, Start, the test). The student's are bigger and
   plainer. AbcPrint for anything a child reads; Arial for PINs, where every
   character has to be unmistakable.
   ========================================================================== */

/* --- sign in ----------------------------------------------------------- */

.ts-ask { margin: 0 0 14px; text-align: center; font-size: 17px; line-height: 1.5; }

.ts-email {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: #0a0a0a;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font: 20px/1.2 Arial, Helvetica, sans-serif;
}
.ts-email:focus { outline: none; border-color: var(--orange); }

.ts-pin-in {
    display: block;
    width: 100%;
    margin: 0 0 18px;
    padding: 14px 12px;
    background: #0a0a0a;
    border: 2px solid var(--line);
    border-radius: var(--radius);
    color: var(--yellow);
    text-align: center;
    text-transform: uppercase;
    font: bold 40px/1.1 Arial, Helvetica, sans-serif;
    letter-spacing: 10px;
}
.ts-pin-in:focus { outline: none; border-color: var(--orange); }
.ts-go { width: 100%; }

/* --- signed in: the bar and the stage --------------------------------- */

body.ts { overflow: hidden; height: 100%; }

.ts-bar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 12000;
    display: flex; align-items: center; gap: 12px; padding: 0 12px;
    background: var(--green-bar); border-bottom: 2px solid #3a2a12;
}
.ts-mark {
    width: calc(var(--bar-h) - 14px); height: calc(var(--bar-h) - 14px); flex: 0 0 auto;
    background: url("../img/fav_icon/favicon-180.png") center / contain no-repeat;
}
.ts-title {
    flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif; font-size: 24px; color: var(--yellow);
}
.ts-bar-btn { font-size: 18px; padding: 6px 18px; }

.ts-stage {
    position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: radial-gradient(circle at 50% 0%, #1d1a0c 0%, #000 65%);
}
.ts-screen { padding: 22px 20px 40px; }

.ts-head {
    margin: 0 0 20px;
    text-align: center;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: normal;
    color: var(--yellow);
}
.ts-who { color: #fff; }

/* --- 1. students ------------------------------------------------------- */

.ts-names {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
}
.ts-name {
    padding: 18px 12px;
    background: var(--panel);
    border: 2px solid var(--line);
    border-radius: 10px;
    color: var(--ink);
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 26px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ts-name:active, .ts-name:focus-visible { border-color: var(--yellow); outline: none; }
/*  Absent students stay choosable -- they may be testing late -- just quieter. */
.ts-name.is-absent { opacity: 0.45; }

/* --- 2. tests ---------------------------------------------------------- */

.ts-tests {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    max-width: 1200px;
    margin: 0 auto;
}
.ts-test {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 16px;
    background: var(--panel);
    border: 2px solid var(--line);
    border-left-width: 10px;
    border-radius: 10px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ts-test:active, .ts-test:focus-visible { border-color: var(--yellow); outline: none; }
.ts-test-name { font-family: "AbcPrint", Helvetica, Arial, sans-serif; font-size: 26px; }
.ts-test-blurb { font-size: 14px; color: var(--ink-dim); line-height: 1.4; }

.ts-empty {
    grid-column: 1 / -1;
    margin: 10vh auto 0;
    max-width: 560px;
    text-align: center;
    color: var(--ink-dim);
    font-size: 19px;
    line-height: 1.6;
}

/* --- 3. how many questions -------------------------------------------- */

.ts-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 360px;
    margin: 0 auto;
}
.ts-count-ask { margin: 0 0 10px; font-size: 20px; color: var(--ink); }
.ts-count-display {
    width: 100%;
    padding: 10px;
    background: #0a0a0a;
    border: 2px solid var(--line);
    border-radius: 10px;
    text-align: center;
    font: bold 56px/1.1 Arial, Helvetica, sans-serif;
    color: var(--yellow);
}
.ts-count-max {
    margin: 8px 0 14px;
    font: bold 20px/1.2 Arial, Helvetica, sans-serif;
    color: #9de07f;
}
/*  A digit that would go past Max: the display shakes and Max lights up. */
.ts-count-display.is-shake { animation: ts-shake 0.35s; border-color: #b34040; }
.ts-count-max.is-flash { animation: ts-flash 0.9s; }
@keyframes ts-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}
@keyframes ts-flash {
    0%, 100% { color: #9de07f; }
    30%, 70% { color: #fff; text-shadow: 0 0 12px #9de07f; }
}

.ts-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    width: 100%;
    margin-bottom: 18px;
}
.ts-keypad button {
    padding: 14px 0;
    background: #2a2a2a;
    border: 2px solid var(--line);
    border-radius: 10px;
    color: #fff;
    font: bold 32px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ts-keypad button:active { border-color: var(--yellow); background: #3d3d3d; }
.ts-keypad .is-clear { color: #ffb3b3; }
.ts-keypad .is-del { color: #fff1a8; }
.ts-next { width: 100%; }

/*  A test's own extra choice (Most blocks: 10 20 50 ...), above the keypad. */
.ts-option { width: 100%; margin-bottom: 18px; text-align: center; }
.ts-option-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ts-option-row button {
    min-width: 64px;
    padding: 10px 12px;
    background: #2a2a2a;
    border: 2px solid var(--line);
    border-radius: 10px;
    color: #fff;
    font: bold 22px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ts-option-row button.is-on { background: var(--yellow); border-color: var(--yellow); color: #1a1a1a; }

/* --- 4. ready ----------------------------------------------------------- */

.ts-ready {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--bar-h) - 80px);
    text-align: center;
}
.ts-ready-test { margin: 0 0 8px; font-size: 22px; color: var(--ink-dim); }
.ts-ready-name {
    margin: 0 0 10px;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: clamp(48px, 9vw, 96px);
    font-weight: normal;
    color: var(--yellow);
}
.ts-ready-n { margin: 0 0 30px; font-size: 22px; color: var(--ink); }
.ts-start {
    padding: 22px 80px;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: 48px;
    border-radius: 16px;
}

/* --- 5. the test --------------------------------------------------------- */

.ts-screen.ts-run { position: absolute; inset: 0; padding: 0; }
/*  width: 1px + min-width: 100% (and the same for height): Safari on an
    iPad otherwise grows a frame to fit whatever is inside it, so anything
    a little too wide pushes the test off the right of the screen. */
.ts-run iframe {
    display: block;
    width: 1px; min-width: 100%;
    height: 1px; min-height: 100%;
    border: 0;
    background: #0d0d0d;
}

/*  The progress bar sits in the top bar, between the name and End. */
.ts-progress {
    position: relative;
    flex: 0 1 420px;
    height: 26px;
    background: #1b2108;
    border: 2px solid #2a3410;
    border-radius: 999px;
    overflow: hidden;
}
.ts-progress[hidden] { display: none; }
.ts-progress-fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0;
    background: linear-gradient(#b8e35a, #7fb21d);
    transition: width 0.3s ease;
}
.ts-progress-text {
    position: relative;
    display: block;
    text-align: center;
    font: bold 15px/22px Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px #000;
}

/* --- 6. results ------------------------------------------------------------ */

.ts-res-head {
    margin: 0 0 16px;
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: clamp(40px, 7vw, 72px);
    font-weight: normal;
    color: var(--yellow);
}
.ts-res-score {
    font-family: "AbcPrint", Helvetica, Arial, sans-serif;
    font-size: clamp(44px, 8vw, 84px);
    color: #fff;
}
.ts-res-pct {
    margin: 4px 0 10px;
    font: bold 34px/1.2 Arial, Helvetica, sans-serif;
    color: #9de07f;
}
.ts-res-note { min-height: 1.4em; margin: 0 0 28px; font-size: 18px; color: var(--ink-dim); }

/* --- Data Entry -------------------------------------------------------- */
/*  A paper test typed in by the teacher. The working side reads like the
    worksheet -- top number, sign and bottom number, a rule, the answer --
    in paper-white boxes, each with its own keypad; the list of what has
    been added is on the right. Arial for every number and sign. */

.ts-entry-btn { background: #1e88c7; border-color: #1e88c7; color: #fff; }
.ts-entry-btn:hover { background: #2a99da; }

.ts-sub { margin: -10px 0 22px; text-align: center; font-size: 18px; color: var(--ink-dim); }

.ts-test.is-soon { opacity: 0.45; cursor: default; }
.ts-test.is-soon .ts-test-blurb { font-style: italic; }

.ts-screen.de { padding: 16px 20px 20px; }

.de-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px;
    max-width: 1200px;
    height: calc(100vh - var(--bar-h) - 36px);
    margin: 0 auto;
}

.de-work { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.de-date {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 4px;
    font-size: 17px; color: var(--ink-dim);
}
.de-date input {
    padding: 7px 10px;
    background: #0a0a0a;
    border: 2px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: 18px/1.2 Arial, Helvetica, sans-serif;
    color-scheme: dark;
}
.de-date input:focus { outline: none; border-color: var(--yellow); }

.de-row {
    display: grid;
    grid-template-columns: 44px var(--box-w, 120px) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
.de-sign {
    text-align: center;
    font: bold 56px/1 Arial, Helvetica, sans-serif;
    color: #fff;
}
.de-box {
    height: 96px;
    background: #fff;
    border: 3px solid #c9c9c9;
    border-radius: 10px;
    text-align: center;
    font: bold 64px/90px Arial, Helvetica, sans-serif;
    color: #111;
}
.de-box.is-answer { border-color: var(--yellow); }
.de-box.is-shake { animation: ts-shake 0.35s; border-color: #b34040; }

/*  2-, 3- and 4-digit work: typed numbers, right-aligned so the ones, tens,
    hundreds and thousands line up down the column, as on paper. */
.de-work.is-typed .de-box {
    padding-right: 14px;
    text-align: right;
    font-size: 56px;
    letter-spacing: 2px;
}

/*  The rule under the bottom number, as on paper. */
.de-rule {
    width: calc(44px + 14px + var(--box-w, 120px));
    height: 5px;
    margin: 2px 0;
    background: #fff;
    border-radius: 3px;
}

.de-pad-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.de-label {
    font-size: 13px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;
    color: var(--ink-dim);
}
.de-pad {
    display: grid;
    grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
    gap: 6px;
    max-width: 440px;
}
.de-pad button {
    height: 46px;
    background: #2a2a2a;
    border: 2px solid var(--line);
    border-radius: 9px;
    color: #fff;
    font: bold 24px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.de-pad button:active { border-color: var(--yellow); background: #3d3d3d; }
.de-pad button.is-on { background: var(--yellow); border-color: var(--yellow); color: #111; }
.de-pad button:disabled { opacity: 0.25; cursor: default; }
.de-pad .is-clear { color: #ffb3b3; }
.de-pad .is-del { color: #fff1a8; }

.de-add {
    max-width: calc(44px + 14px + var(--box-w, 120px) + 14px + 440px);
    margin-top: 8px;
    background: #1e88c7;
    border-color: #1e88c7;
    color: #fff;
}
.de-add:hover:not(:disabled) { background: #2a99da; }
.de-add:disabled { opacity: 0.4; }
.de-msg { min-height: 1.3em; margin: 0; font-size: 17px; color: #ffb3b3; }

/* The list */

.de-list {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--panel);
    border: 2px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.de-list-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-bottom: 2px solid var(--line);
}
.de-list-title { font-family: "AbcPrint", Helvetica, Arial, sans-serif; font-size: 24px; color: var(--yellow); }
.de-list-score { font: bold 16px/1.2 Arial, Helvetica, sans-serif; color: #9de07f; white-space: nowrap; }

.de-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 4px 0;
    list-style: none;
}
.de-hint { padding: 18px 16px; font-size: 17px; line-height: 1.5; color: var(--ink-dim); }

.de-item {
    display: grid;
    grid-template-columns: 34px 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.de-item-n { font: 15px/1 Arial, Helvetica, sans-serif; color: var(--ink-dim); text-align: right; }
.de-item-mark { font: bold 22px/1 Arial, Helvetica, sans-serif; text-align: center; }
.de-item-fact { font: bold 26px/1.2 Arial, Helvetica, sans-serif; white-space: nowrap; }
.de-item.is-right .de-item-mark, .de-item.is-right .de-item-fact { color: #8fe07a; }
.de-item.is-wrong .de-item-mark, .de-item.is-wrong .de-item-fact { color: #ff8a8a; }
.de-item.is-new { animation: de-new 0.9s ease-out; }
@keyframes de-new {
    0%   { background: rgba(255, 216, 77, 0.35); }
    100% { background: transparent; }
}
.de-item-del {
    padding: 8px 12px;
    background: #b8392c;
    border: 0;
    border-radius: 8px;
    color: #fff;
    font: bold 15px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
}
.de-item-del:active { background: #d9483a; }

.de-save { margin: 12px; }

/*  Portrait, or a small tablet: the list goes under the keypads. */
@media (max-width: 900px) {
    .de-wrap { grid-template-columns: 1fr; height: auto; }
    .de-list { max-height: 60vh; }
}
@media (max-height: 760px) and (min-width: 901px) {
    .de-box { height: 80px; font-size: 54px; line-height: 74px; }
    .de-pad button { height: 40px; font-size: 22px; }
    .de-sign { font-size: 48px; }
}

/* --- the PIN box -------------------------------------------------------- */

.ts-modal {
    position: fixed; inset: 0; z-index: 13000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.75);
}
.ts-modal[hidden] { display: none; }
.ts-modal-card {
    width: 100%;
    max-width: 380px;
    padding: 24px 22px;
    background: var(--panel);
    border: 2px solid var(--line);
    border-radius: 12px;
}
.ts-modal-ask { margin: 0 0 14px; text-align: center; font-size: 20px; color: var(--ink); }
.ts-modal-bad { min-height: 1.4em; margin: -8px 0 12px; text-align: center; color: #ffb3b3; }
.ts-modal-btns { display: flex; gap: 10px; }
.ts-modal-btns .btn { flex: 1 1 0; padding-left: 0; padding-right: 0; }