/* The free times tables test (templates/times_tables.html, static/times_tables.js).

   One page in the exercise book, on practice.css's reading measure. The
   setup is a row of paper keys to pick tables with; the run is one fact set
   large in the middle of the page with the answer box and a number pad under
   it; the result is a 12 by 12 times table, each fact tried shaded as it
   went. Under all of that is the printable sheet, which is the whole page
   without JavaScript. book.css and public.css bring the tokens and the keys.

   The script marks <html> with tt-js as it loads. Under that mark the test
   shows and the sheet hides, unless the address asked for a sheet by its
   seed (data-tt-sheet="asked"), when the sheet stays and the test never
   shows. Without the mark the sheet is the page. */

.tt-app { display: none; }
.tt-js .tt[data-tt-sheet="spare"] .tt-app { display: block; }
.tt-js .tt[data-tt-sheet="spare"] .tt-sheet { display: none; }
.tt [hidden] { display: none !important; }

.tt h2 { display: block; text-decoration: none; }
.tt-h3 { margin: 28px 0 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }

/* A key drawn as a line of pen: "Pick tables instead", "Stop and see the result". */
.tt-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font: 700 1rem var(--f-print);
  color: var(--pen);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ------------------------------------------------------------------ the setup */

.tt-setup { max-width: 38rem; margin-top: 30px; scroll-margin-top: 90px; }
.tt-setup h2:focus { outline: none; }
.tt-field { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.tt-field legend { padding: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.tt-field .hint { max-width: 40em; }

.tt-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.tt-chip { min-height: 44px; padding: 0 0.95rem; font-size: 1rem; border-radius: 999px; }

/* Each table is a paper key with its own box inside, so the form sends with
   no script and a chosen one fills with highlighter. */
.tt-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; margin: 12px 0 0; }
.tt-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.tt-pick { position: relative; display: block; min-width: 0; cursor: pointer; }
.tt-pick input { position: absolute; top: 50%; left: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; }
.tt-pick span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 0.9rem;
  font: 700 1.15rem/1 var(--f-print);
  color: var(--ink);
  background: var(--key);
  border: 2px solid var(--key-line);
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--key-edge);
  transition: background-color 120ms ease;
}
.tt-pick input:checked + span { color: var(--hl-ink); background: var(--hl); border-color: var(--start-line); box-shadow: 0 4px 0 var(--start-edge); }
.tt-pick input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.tt-pick:active span { transform: translateY(3px); box-shadow: 0 1px 0 var(--key-edge); }
.tt-picks .tt-pick span { padding: 0; }

.tt-check { margin: 22px 0 0; }
.tt-only { margin: 18px 0 0; padding: 12px 14px; background: var(--tint); border-radius: 10px; }
.tt-only-line { margin: 0 0 4px; font-weight: 700; }
.tt-only-fact { white-space: nowrap; }
.tt-go { margin-top: 26px; }
.tt-go .prep-price { margin-top: 12px; }
.tt-setup .chk-error { margin-top: 18px; }

/* ------------------------------------------------------------------ the run */

.tt-run { max-width: 30rem; margin: 30px auto 0; scroll-margin-top: 90px; }
.tt-bar { display: flex; align-items: center; gap: 12px; }
.tt-progress { flex: 1 1 auto; width: auto; height: 12px; accent-color: var(--pen); }
.tt-progress::-webkit-progress-bar { background: var(--tint); border-radius: 6px; }
.tt-progress::-webkit-progress-value { background: var(--pen); border-radius: 6px; }
.tt-progress::-moz-progress-bar { background: var(--pen); border-radius: 6px; }
.tt-count { flex: none; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-timer { flex: none; min-width: 3.2em; font: 800 1.3rem/1 var(--f-print); font-variant-numeric: tabular-nums; text-align: right; }

.tt-q {
  margin: 26px 0 0;
  font: 800 clamp(2.8rem, 1.6rem + 5vw, 4.4rem)/1.1 var(--f-print);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: center;
  overflow-wrap: anywhere;
}
.tt-again-tag { display: block; margin-bottom: 4px; font-size: 1rem; font-weight: 700; letter-spacing: 0; color: var(--ink-soft); }
.tt-feedback { min-height: 2.4rem; margin: 8px 0 0; font: 700 1.5rem/1.3 var(--f-print); font-variant-numeric: tabular-nums; text-align: center; }
.tt-feedback.is-right { color: var(--done); }
.tt-feedback.is-wrong { color: var(--red); }
.tt-tick { display: inline-block; font-size: 2rem; line-height: 1; }

.tt-answer {
  display: block;
  width: 100%;
  min-height: 72px;
  margin: 8px 0 0;
  padding: 0.4rem 0.9rem;
  font: 700 2.2rem/1.2 var(--f-print);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: center;
  background: var(--slip);
  border: 2px solid var(--key-line);
  border-radius: 12px;
}
.tt-answer:focus { border-color: var(--pen); }

/* The pad: three keys to a row, Back and Go either side of the zero. On a
   screen with a mouse or trackpad the keyboard types and the pad stays
   away, which the script also decides for the box's inputmode. */
.tt-pad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tt-pad .key { min-height: 64px; padding: 0; font: 700 1.6rem/1 var(--f-print); }
.tt-pad .tt-back { font-size: 1.1rem; }
.tt-pad .key-go { font-size: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .tt-pad { display: none; }
}
.tt-stop { margin-top: 20px; }

/* ------------------------------------------------------------------ the result */

.tt-result { margin-top: 30px; }
.tt-result h2:focus { outline: none; }
.tt-timeout { margin: 12px 0 0; font-weight: 700; color: var(--ink-soft); }
.tt-score { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding-top: 14px; border-top: 2px solid var(--rule); }
.tt-score div { min-width: 0; }
.tt-score dt { font-size: 0.95rem; font-weight: 700; color: var(--ink-soft); }
.tt-score dd { margin: 2px 0 0; font: 800 1.8rem/1.1 var(--f-print); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* The 12 by 12 table, the 1s along its top and side as on the back cover.
   Twelve columns fit a phone at this size; a narrower screen scrolls it. */
.tt-grid-wrap { max-width: 32rem; margin: 14px 0 0; overflow-x: auto; }
.tt-grid {
  width: 100%;
  min-width: 300px;
  table-layout: fixed;
  border-collapse: collapse;
  font: 600 clamp(0.62rem, 0.42rem + 1vw, 0.9rem)/1 var(--f-print);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.tt-grid th, .tt-grid td { height: 2.3em; padding: 0; border: 1px solid var(--ink-soft); }
.tt-grid th { font-weight: 800; color: var(--ink); background: var(--tint); }
.tt-grid td { color: var(--ink-soft); }
.tt-grid td.is-fast, .tt-legend .is-fast { color: var(--done); font-weight: 800; background: var(--done-bg); }
.tt-grid td.is-slow, .tt-legend .is-slow { color: var(--hl-ink); font-weight: 800; background: var(--hl); }
.tt-grid td.is-wrong, .tt-legend .is-wrong { color: #ffffff; font-weight: 800; background: var(--red); }

.tt-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.tt-legend li { display: flex; align-items: center; gap: 8px; }
.tt-legend span { display: inline-block; flex: none; width: 1.1em; height: 1.1em; border: 1px solid var(--ink-soft); }

.tt-next-intro { max-width: 40em; margin: 10px 0 0; }
.tt-next { display: grid; gap: 6px; max-width: 40em; margin: 12px 0 0; padding-left: 1.4em; font-weight: 700; font-variant-numeric: tabular-nums; }
.tt-none { margin: 12px 0 0; font-weight: 700; }
.tt-keys { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
.tt-keys .key { min-height: 56px; }
.tt-keys .key-start { border-color: var(--start-edge); }
.tt-learn { margin-top: clamp(44px, 6vw, 72px); }

/* ------------------------------------------------------------------ the sheet */

.tt-sheet { margin-top: 30px; }
.tt-sheet-qs, .tt-sheet-key {
  columns: 2;
  column-gap: 2.5rem;
  max-width: 34rem;
  margin: 18px 0 0;
  padding-left: 1.8em;
  font: 600 1.25rem/2.2 var(--f-print);
  font-variant-numeric: tabular-nums;
}
.tt-sheet-qs li, .tt-sheet-key li { break-inside: avoid; }
.tt-sheet-key { font-size: 1.05rem; line-height: 1.9; }
.tt-blank { display: inline-block; width: 3.2em; height: 1em; border-bottom: 2px solid var(--ink); vertical-align: -0.1em; }
.tt-try { margin: 26px 0 0; }

/* ------------------------------------------------------------------ narrower */

@media (max-width: 620px) {
  .tt-keys .key, .tt-go .key-start { width: 100%; }
  .tt-score { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tt-score dd { font-size: 1.4rem; }
  .tt-seg .tt-pick { flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .tt-sheet-qs, .tt-sheet-key { columns: 1; }
  .tt-picks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ motion */

@keyframes tt-pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .tt-feedback .tt-tick { animation: tt-pop 240ms var(--ease) both; }
}
@media (prefers-reduced-motion: reduce) {
  .tt-pick span { transition: none; }
}

/* ------------------------------------------------------------------ print

   The grid with the score and the facts to practise, or the sheet with its
   answers on a second page. The cover, the back cover and the keys stay off
   the paper, and the shading keeps its colours. */

@media print {
  .nav, .back, .skip, .page::before, .tt-setup, .tt-run, .tt-keys, .tt-later, .tt-learn, .tt-faq,
  .prep-more, .prep-fine, .tt-fresh, .tt-try, .tt-timeout, .tt .prep-meta,
  .tt > .prep-lede, .tt > .prep-intro { display: none !important; }
  .tt-result, .tt-sheet { display: block !important; margin-top: 12px; }
  .tt-js .tt[data-tt-sheet="spare"] .tt-sheet { display: none !important; }
  .tt-js .tt[data-tt-sheet="spare"] .tt-result[hidden] { display: none !important; }
  .tt-grid, .tt-legend span, .tt-grid td { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .tt-grid th, .tt-grid td { border-color: #000000; }
  .tt-sheet-key { break-before: page; }
}