﻿/* Typing Tests only. Shared navigation and all Practice/Learn styles are unchanged. */
.test-page {background:#f7f9fc;padding:32px 24px 64px;color:#253d51;font:14px/1.65 var(--font-ui)}
.test-container {max-width:1100px;margin:auto;min-width:0}.test-setup-container {max-width:880px}
.test-page * {box-sizing:border-box}.test-page h1,.test-page h2,.test-page h3 {font-family:var(--font-ui);line-height:1.35;letter-spacing:-.025em;color:#253d51}.test-page h1 {font-size:32px;margin:5px 0 10px;font-weight:800}.test-page h2 {font-size:21px;margin:0 0 5px}.test-page h3 {font-size:16px;margin:0}.test-page p {color:#617585;margin:5px 0}.test-page a {text-decoration:none}.test-page :is(a,button,input,select,summary):focus-visible {outline:3px solid #628baa;outline-offset:3px}
.test-breadcrumb {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;font-size:13px;color:#6b7f8e}.test-breadcrumb a {color:#476f8d}
.test-hero {position:relative;isolation:isolate;overflow:hidden;background:#edf3f7;border:1px solid #d8e4ed;padding:26px 30px;margin-bottom:28px}.test-hero::after {content:"";position:absolute;inset:0 0 0 60%;z-index:-1;opacity:.3;background-image:linear-gradient(45deg,transparent 48%,#b3cada 49%,#b3cada 50%,transparent 51%),linear-gradient(-45deg,transparent 48%,#b3cada 49%,#b3cada 50%,transparent 51%);background-size:40px 40px;mask-image:linear-gradient(to right,transparent,#000)}
.test-eyebrow {display:block;font-size:13px;text-transform:uppercase;font-weight:700;letter-spacing:.12em;color:#527895;margin-bottom:5px}.test-steps {display:flex;flex-wrap:wrap;gap:18px 30px;padding-top:19px;margin-top:19px;border-top:1px solid #dce7ef;color:#7b8e9d;font-size:13px}.test-steps>strong {color:#376786}.test-steps>strong>span,.test-steps>span>span {margin-left:7px;font-weight:500}
.test-section-head {display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 17px}.test-section-head p {font-size:13px}.test-section-head>span {font-size:13px;color:#668299;white-space:nowrap}
.test-filters {display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:16px;background:#fff;border:1px solid #dde6ed;margin-bottom:18px}.test-filters>div {flex:1;min-width:150px}.test-filters label {display:block;font-size:13px;font-weight:600;color:#587184;margin-bottom:5px}.test-filters :is(input,select) {width:100%;height:40px;border:1px solid #cbd9e3;border-radius:4px;padding:8px 10px;font:inherit;font-size:13px;background:#fbfcfd;color:#344f64}
.test-button {display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 16px;border:1px solid #477899;border-radius:4px;background:#477899;color:#fff;font:600 13px/1.6 var(--font-ui);cursor:pointer;gap:8px}.test-button:hover {background:#355e7c}.test-button:disabled {background:#8da4b4;border-color:#8da4b4;cursor:not-allowed}.test-link {color:#477899;font-size:13px;font-weight:600;display:inline-block;padding:8px 0}.test-link:hover {text-decoration:underline}
.test-passages {list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0;margin:0}.test-passages>li {display:flex;align-items:center;gap:12px;min-width:0;background:#fff;border:1px solid #dce6ed;padding:18px;box-shadow:0 2px 5px #25405804}.test-passage-number {font-size:13px;font-weight:600;color:#7893a7;align-self:flex-start;padding-top:4px;min-width:23px}.test-passages li>div {min-width:0;flex:1}.test-passages h3 {font-size:14px;letter-spacing:-.01em;margin-bottom:10px;overflow-wrap:anywhere}.test-passages h3 a {color:#2c4b63}.test-passages h3 a:hover {text-decoration:underline}.test-select {flex-shrink:0;padding:6px 10px;border:1px solid #cfdee9;border-radius:4px;color:#466f8e;font-size:13px;font-weight:650;align-self:center}.test-select:hover {background:#edf4f8}.test-passage-meta {display:flex;flex-wrap:wrap;gap:7px 12px;align-items:center;color:#718595;font-size:13px}.test-difficulty {display:inline-flex;padding:2px 7px;border:1px solid #cfdfe9;background:#eef5f9;color:#446d87;font-size:13px;font-weight:600}.difficulty-easy {background:#eff7f2;color:#407456;border-color:#d6e7dc}.difficulty-hard {background:#fcf5e9;color:#8b6836;border-color:#eadfc8}.difficulty-expert {background:#f3f0f6;color:#6f5c82;border-color:#e0d9e8}
.test-pagination {display:flex;justify-content:center;align-items:center;gap:24px;font-size:13px;margin:25px 0}.test-pagination a {font-weight:650;color:#477899}.test-pagination span {color:#7a8b98}.test-passages>.test-empty {grid-column:1/-1;display:block;text-align:center;padding:36px}.test-empty p {margin:10px 0}.test-empty a {color:#477899}
.test-history {padding:24px;background:#fff;border:1px solid #dce6ed;margin-top:32px}.test-history .test-section-head {margin-top:0}.test-highlights {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:18px 0 24px;padding:18px 0;border-top:1px solid #e4ebf0;border-bottom:1px solid #e4ebf0}.test-highlights dt {font-size:13px;color:#6b8090}.test-highlights dd {font-size:25px;font-weight:700;color:#345c79;margin:4px 0 0;letter-spacing:-.03em}
.test-history-empty {text-align:center;padding:22px 16px;background:#f8fbfd;border:1px dashed #dce6ed;}.test-history-empty>span {font-size:28px;color:#7194ae}.test-history-empty h3 {margin:8px 0}.test-history-empty p {font-size:13px;max-width:480px;margin:8px auto}
.test-history-table {width:100%;border-collapse:collapse;text-align:left;font-size:13px;margin-top:14px;table-layout:fixed}.test-history-table th {font-size:13px;background:#f3f7fa;color:#6b8090;padding:10px 7px}.test-history-table td {padding:13px 7px;border-bottom:1px solid #e9eff3;color:#50697d;overflow-wrap:anywhere}.test-history-table th:nth-child(2) {width:27%}.test-history-table th:last-child {width:14%}.test-history-table a {color:#477899;font-weight:600}
.test-selected {display:flex;align-items:center;gap:18px;background:#fff;border:1px solid #8eafc7;box-shadow:inset 3px 0 #5f88a6;padding:23px;margin-bottom:18px}.test-selected>div {flex:1;min-width:0}.test-selected h2 {font-size:22px;overflow-wrap:anywhere;margin:4px 0 12px}.test-selected-check {display:flex;align-items:center;justify-content:center;width:33px;height:33px;flex-shrink:0;color:#4d7e67;background:#eef7f1;border:1px solid #cde3d5;border-radius:50%;font-size:17px}.test-configuration {padding:26px;background:#fff;border:1px solid #dce6ed;}.test-configuration fieldset {padding:0;border:0;margin:0;min-width:0}.test-configuration legend {font:700 19px var(--font-ui);margin-bottom:8px;color:#2c485c}.test-configuration fieldset>p {font-size:13px}.test-durations {display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:9px;margin:22px 0 26px}.test-durations label {position:relative;cursor:pointer;min-width:0}.test-durations input {position:absolute;width:1px;height:1px;opacity:0}.test-durations span {display:flex;align-items:baseline;justify-content:center;gap:4px;padding:12px 4px;border:1px solid #d0dee8;font-size:18px;font-weight:700;color:#526f85;background:#f8fafc}.test-durations small {font-size:13px;font-weight:500}.test-durations input:checked+span {background:#eaf3f9;border-color:#5e8cad;color:#2e6289;box-shadow:inset 0 -2px #5e8cad}.test-durations input:focus-visible+span {outline:3px solid #628baa;outline-offset:3px}.test-start-row {display:flex;align-items:center;gap:18px;flex-wrap:wrap}.test-start-row>span {font-size:13px;color:#718595}.test-rules {font-size:13px;line-height:1.9;color:#677e90;padding-left:18px;border-top:1px solid #e4ebf0;margin:24px 0 0;padding-top:18px}.test-configuration .test-guest-note {font-size:13px;color:#718595;margin:18px 0;line-height:1.8}.test-configuration>ul {color:#61798b;font-size:13px;padding-left:18px}
.test-sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:850px) {.test-durations {grid-template-columns:repeat(4,minmax(0,1fr))}.test-passages>li {padding:14px;gap:9px}.test-passages h3 {font-size:13px}.test-select {padding:5px 7px;font-size:13px}.test-selected {flex-wrap:wrap}.test-history-table,.test-history-table tbody {display:block;width:100%}.test-history-table thead {display:none}.test-history-table tr {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:15px;margin-bottom:12px;border:1px solid #e0e9f0;}.test-history-table td {display:flex;flex-direction:column;border:0;padding:0;gap:4px;min-width:0}.test-history-table td::before {content:attr(data-label);font-size:13px;color:#8295a3}.test-history-table td:nth-child(2) {grid-column:1/-1;grid-row:1;font-size:14px;font-weight:600}.test-history-table td:nth-child(2)::before {display:none}}
@media(max-width:600px) {.test-page {padding:24px 16px 44px}.test-hero {padding:23px 20px}.test-page h1 {font-size:27px}.test-hero p {font-size:13px}.test-steps {gap:10px 16px;font-size:13px}.test-steps>span>span,.test-steps>strong>span {margin-left:3px}.test-passages {grid-template-columns:1fr}.test-passages h3 {font-size:15px}.test-select {font-size:13px;padding:6px 9px}.test-passage-meta {font-size:13px}.test-section-head {align-items:flex-start}.test-section-head h2 {font-size:20px}.test-filters {padding:12px;gap:10px}.test-filters>div {min-width:110px}.test-filters .test-button {flex:1}.test-selected {padding:18px;gap:12px}.test-selected h2 {font-size:20px}.test-selected-check {width:28px;height:28px}.test-selected>.test-link {margin-left:40px}.test-configuration {padding:20px}.test-highlights {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.test-highlights dd {font-size:23px}.test-history {padding:18px}.test-pagination {gap:18px;font-size:13px}.test-configuration .test-highlights {gap:18px 12px}}

/* Passage-library intro steps. */
.test-library-intro::after{content:none;background-image:none}
.test-library-intro .test-steps{justify-content:center}
.test-library-intro .test-steps>strong,.test-library-intro .test-steps>span{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid #fff;border-radius:30px;color:#fff}
.test-library-intro .test-steps>strong>span,.test-library-intro .test-steps>span>span{margin-left:0;color:#fff}
.test-library-intro .test-steps .test-step-number{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#218447;color:#fff;font-size:13px;font-weight:700;line-height:1}
