/* S261009-A — Coordinator Typing Test (apply page). Brand colours match onboarding/apply and the Scheduling Exercise. */

/* card on Review & Submit */
.tt-card{border:1.5px solid #8B2D6E;background:#F5E0EE;border-radius:10px;padding:1rem 1.25rem;margin:0 0 1.25rem}
.tt-card-h{font-weight:600;color:#4A1942;margin-bottom:.35rem}
.tt-card p{font-size:.86rem;line-height:1.55;color:#2D2226;margin:0 0 .75rem}
.tt-card-done{display:flex;gap:.75rem;align-items:center;font-size:.9rem;color:#2D2226}
.tt-tick{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#BFD230;color:#4A1942;font-weight:700;flex:0 0 34px}
.tt-tick-info{background:#E8D5F0;font-style:italic;font-family:Georgia,serif}

/* buttons */
.tt-btn{padding:.55rem 1.3rem;border-radius:8px;border:1.5px solid #E8D5F0;background:#fff;color:#4A1942;font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;transition:filter .15s}
.tt-btn:hover{filter:brightness(1.04)}
.tt-btn:disabled{opacity:.5;cursor:not-allowed}
.tt-btn-go{background:#BFD230;border-color:#BFD230;color:#4A1942}

/* overlay */
.tt-ov{--tt-plum:#4A1942;--tt-fuchsia:#8B2D6E;--tt-chart:#BFD230;--tt-dark:#2D2226;--tt-mid:#6B5B6E;--tt-lp:#E8D5F0;--tt-red:#c0392b;
  position:fixed;inset:0;z-index:9999;background:#F7F4F0;display:none;flex-direction:column;font-family:'DM Sans',system-ui,sans-serif;color:var(--tt-dark);overflow:auto;-webkit-tap-highlight-color:transparent}
.tt-ov.open{display:flex}
.tt-ov *{box-sizing:border-box}
html.tt-noscroll,html.tt-noscroll body{overflow:hidden}
.tt-top{min-height:56px;background:var(--tt-plum);color:#fff;display:flex;align-items:center;gap:14px;padding:8px 14px;position:sticky;top:0;z-index:2;border-bottom:3px solid var(--tt-chart)}
.tt-title{font-family:'DM Serif Display',Georgia,serif;font-size:1.15rem;flex:1}
.tt-timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.5rem;letter-spacing:.02em;background:rgba(255,255,255,.12);padding:2px 12px;border-radius:8px;min-width:84px;text-align:center}
.tt-timer-low{background:var(--tt-chart);color:var(--tt-plum)}
.tt-x{background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.tt-x-box{position:absolute;top:10px;right:14px;color:var(--tt-mid)}
.tt-wrap{flex:1 0 auto;display:flex;justify-content:center;padding:24px 16px}
.tt-box{position:relative;max-width:820px;width:100%;background:#fff;border-radius:12px;padding:28px 32px;box-shadow:0 2px 14px rgba(74,25,66,.08);line-height:1.55;align-self:flex-start}
.tt-box h2{font-family:'DM Serif Display',Georgia,serif;font-weight:400;color:var(--tt-plum);font-size:1.6rem;margin:0 0 .6rem}
.tt-box h3{font-family:'DM Sans',system-ui,sans-serif;font-weight:700;font-size:.95rem;margin:1.1rem 0 .3rem;color:var(--tt-dark)}
.tt-box p{margin:0 0 .5rem;font-size:.92rem}
.tt-lead{font-size:1rem!important;color:var(--tt-plum)}
.tt-how{margin:.2rem 0 .4rem 1.2rem;padding:0;font-size:.92rem}
.tt-how li{margin:.25rem 0}
.tt-red{color:var(--tt-red);font-weight:600}
.tt-small{font-size:.8rem;color:var(--tt-mid);line-height:1.45;font-weight:400}
.tt-center{text-align:center}
.tt-err{background:#fce4e4;color:#8b1a1a;border-radius:8px;padding:.65rem .9rem;font-size:.88rem;margin:.5rem 0 .75rem}
.tt-warn{background:#fff3e0;color:#7a4300;border-radius:8px;padding:.65rem .9rem;font-size:.88rem;margin:.25rem 0 .75rem}
.tt-pledge{display:flex;gap:.6rem;align-items:flex-start;margin:1.2rem 0 .4rem;font-size:.92rem;font-weight:500;cursor:pointer}
.tt-pledge input{margin-top:4px;width:18px;height:18px;accent-color:var(--tt-fuchsia);flex:0 0 18px}
.tt-go{text-align:center;margin:1rem 0 .4rem}
.tt-go .tt-btn{padding:.75rem 2rem;font-size:1rem}

/* passage: letters turn dark when right, red when wrong; the next letter is underlined */
.tt-passage{position:relative;font-size:1.18rem;line-height:1.85;color:#9a8f9c;background:#FDF9F5;border:1.5px solid var(--tt-lp);border-radius:10px;padding:10px 14px;letter-spacing:.01em;word-wrap:break-word;-webkit-user-select:none;user-select:none;cursor:text}
.tt-passage span{border-radius:2px}
.tt-passage span.ok{color:var(--tt-dark)}
.tt-passage span.bad{color:var(--tt-red);background:#fde4e1;text-decoration:underline wavy rgba(192,57,43,.6)}
.tt-passage span.cur{box-shadow:inset 0 -3px 0 var(--tt-fuchsia);color:var(--tt-plum);background:rgba(139,45,110,.08)}
.tt-pin{position:relative;height:calc(1.85em * 5);overflow:hidden;scroll-behavior:auto}   /* exactly 5 lines; scrolled by whole lines */
.tt-passage-warm{font-size:1.05rem;margin:.2rem 0 .5rem}
.tt-input{width:100%;font:inherit;font-size:1.05rem;line-height:1.5;padding:.6rem .8rem;border:1.5px solid var(--tt-lp);border-radius:8px;color:var(--tt-dark);background:#fff;outline:none;resize:none}
.tt-input:focus{border-color:var(--tt-fuchsia);box-shadow:0 0 0 3px rgba(139,45,110,.12)}
.tt-input[readonly]{background:#f3f0f2;color:var(--tt-mid)}
.tt-input-run{margin-top:12px}
.tt-status{font-weight:600;color:var(--tt-plum);margin:0 0 .6rem!important}
.tt-done-tick{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--tt-chart);color:var(--tt-plum);font-size:28px;font-weight:700;margin-bottom:.6rem}

/* confirm box */
.tt-confirm{position:fixed;inset:0;background:rgba(45,34,38,.45);display:flex;align-items:center;justify-content:center;z-index:10001;padding:16px}
.tt-confirm-in{background:#fff;border-radius:12px;padding:22px 24px;max-width:430px;width:100%;box-shadow:0 10px 40px rgba(0,0,0,.25)}
.tt-confirm-in h3{margin:0 0 .4rem;color:var(--tt-plum);font-size:1.1rem}
.tt-confirm-in p{margin:0 0 1rem;font-size:.92rem;line-height:1.5}
.tt-confirm-b{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}

@media(max-width:640px){
  .tt-box{padding:22px 16px}
  .tt-wrap{padding:12px 10px}
  .tt-passage{font-size:1.05rem}
  .tt-timer{font-size:1.25rem;min-width:70px}
}