/*
  Spell Beasts for Schools, teacher app: insights, Teach it and Tests (docs/TEACHER-UX.md
  sections 5.12-5.14). Package P3's own styles, loaded after teach.css; every class here starts
  with ins- (the insight card, panel and Insights tab), ti- (Teach it and its chooser) or tt-
  (Tests: start, the live board, results). The shell's components (buttons, chips, level tags,
  name and word chips, misspellings, sheets, tables, the board dialog) keep their own styles in
  teach.css; this file only lays out these screens.

  Teach it is a projector page: dusk by default (paper-light on dusk is 11.2:1), Light for
  bright rooms, buttons at least 72px high, the word as big as the screen allows, and no
  movement when reduced motion is asked for. Its sound buttons are drawn by lib/phonics.js with
  the children's css/components.css, which teachit.js loads while the page is open; the
  overrides for dusk are below.

  What this must never do: carry a level, a right or a wrong answer by colour alone (each has
  an icon, a word or a strike), put a misspelling on a coloured fill, or let a page scroll
  sideways at 390px.
*/

/* ---------- the insight card ---------- */

.ins-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ins-list { display: flex; flex-direction: column; gap: 10px; }
.ins-card {
  --lvl: var(--yolk-deeper);
  position: relative;
  min-width: 0;
  padding: 11px 14px 10px 16px;
  border: 1.5px solid var(--ink);
  border-left: 8px solid var(--lvl);
  border-radius: 10px;
  background: #fff;
}
.ins-card--act { --lvl: var(--think-ink); }
.ins-card--watch { --lvl: var(--yolk-deeper); }
.ins-card--celebrate { --lvl: var(--leaf); }
.ins-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 4px; }
.ins-meta { font-size: 0.8125rem; color: var(--ink-soft); }
.teach .ins-title { margin: 0; font-family: var(--t-font); font-size: 1.0625rem; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.ins-detail { margin: 3px 0 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.ins-w { font-size: 1.08em; }
.ins-title .t-miss s, .ins-detail .t-miss s { font-size: 1.05em; }
.ins-mixup { color: var(--ink-soft); font-weight: 500; }
.ins-card .t-namechips { margin-top: 8px; }

.ins-why { margin-top: 8px; font-size: 0.9rem; }
.ins-why summary { cursor: pointer; color: var(--pond-deep); font-weight: 650; width: max-content; max-width: 100%; min-height: 32px; display: flex; align-items: center; }
.ins-why-b { margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: var(--paper); display: flex; flex-direction: column; gap: 6px; }
.ins-why-b > p { margin: 0; }
.ins-ev { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ins-ev > div { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); gap: 2px 12px; }
.ins-ev dt { color: var(--ink-soft); font-weight: 650; }
.ins-ev dd { margin: 0; overflow-wrap: anywhere; }
.ins-times { color: var(--ink-soft); font-size: 0.875em; }

.ins-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 10px; }
.ins-hide { margin-left: auto; color: var(--ink-soft); }
.ins-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; }
.ins-ask-q { margin: 0 4px 0 0; font-weight: 700; }
.ins-ask-h { flex-basis: 100%; margin: 0; }

.ins-hidden {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 10px;
  padding: 8px 12px; border: 1.5px dashed var(--rule); border-radius: 10px; color: var(--ink-soft); font-size: 0.9rem;
}
.ins-hidden:focus { outline: 3px solid var(--pond); outline-offset: 2px; }
.ins-hidden-t { margin: 0; overflow-wrap: anywhere; }
.ins-hidden-t b { color: var(--ink); font-weight: 650; }
.ins-hidden .t-error { margin: 4px 0 0; }

.ins-more { margin: 2px 0 0; font-weight: 650; }
.ins-more a { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; }
.ins-panel > .t-empty { padding-block: 10px; }

/* a folded part says so: ▸ closed, ▾ open (the summaries are flex, which hides the browser's marker) */
.ins-why > summary::before, .ins-hiddenbox > summary::before, .tt-script > summary::before, .tt-all > summary::before {
  content: "▸"; display: inline-block; width: 1.1em; flex: none; color: currentColor;
}
.ins-why[open] > summary::before, .ins-hiddenbox[open] > summary::before, .tt-script[open] > summary::before, .tt-all[open] > summary::before { content: "▾"; }
.ins-why > summary::-webkit-details-marker, .ins-hiddenbox > summary::-webkit-details-marker { display: none; }

/* ---------- the Insights tab ---------- */

.ins-pick { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.ins-pick .t-select { width: auto; min-width: 12rem; max-width: 100%; }
.ins-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.ins-lede { max-width: 70ch; margin: 0; }
.ins-page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ins-section > h3 { margin: 0 0 8px; }
.ins-hiddenbox { border-top: 1.5px solid var(--rule); padding-top: 10px; }
.ins-hiddenbox summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; width: max-content; max-width: 100%; }
.ins-hiddenbox-b { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ---------- Teach it ---------- */

body.is-teachit.ti-light { background: var(--paper-light); }
.ti-board {
  --ti-fg: var(--paper-light);
  --ti-line: rgba(255, 250, 241, 0.7);
  --ti-soft: rgba(255, 250, 241, 0.09);
  min-height: 100dvh;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px clamp(16px, 4vw, 48px) 20px;
  background: var(--dusk);
  color: var(--ti-fg);
}
.ti-board.is-light { --ti-fg: var(--ink); --ti-line: var(--ink); --ti-soft: var(--paper); background: var(--paper-light); }
.ti-top { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; font-size: 0.9375rem; }
.ti-k { margin: 0; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8125rem; opacity: 0.9; }
.ti-pos { margin-right: auto; font-weight: 700; }
.ti-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 72px; min-width: 72px; padding: 6px 16px;
  border: 2px solid var(--ti-line); border-radius: 14px; background: transparent; color: var(--ti-fg);
  font: 700 1rem/1.2 var(--t-font); text-decoration: none; cursor: pointer;
}
.ti-btn:hover { background: var(--ti-soft); }
.ti-btn:focus-visible { outline: 4px solid var(--yolk); outline-offset: 3px; }
.ti-board.is-light .ti-btn:focus-visible { outline-color: var(--pond); }
.ti-btn[aria-pressed="true"] { background: var(--ti-fg); color: var(--dusk); border-color: var(--ti-fg); }
.ti-board.is-light .ti-btn[aria-pressed="true"] { color: var(--paper-light); }
.ti-btn:disabled { opacity: 0.4; cursor: default; }
.ti-btn kbd { font: 700 0.75rem/1 var(--t-font); padding: 3px 6px; border-radius: 5px; border: 1px solid currentColor; opacity: 0.85; }
.ti-btn--big { padding: 10px 28px; font-size: 1.375rem; border-radius: 18px; }
.ti-btn--go { background: var(--yolk); color: var(--ink); border-color: var(--yolk); box-shadow: 0 5px 0 var(--yolk-deeper); }
.ti-btn--go:hover { background: var(--yolk-hover); }
.ti-btn--go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--yolk-deeper); }

.ti-main { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
.ti-stage { position: relative; }
.ti-body { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.ti-wordrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; width: 100%; }
.ti-say {
  grid-column: 1; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%;
  border: 3px solid var(--ti-fg); background: var(--pond); color: var(--paper-light); cursor: pointer;
}
.ti-say:hover { background: var(--pond-hover); }
.ti-say:focus-visible { outline: 4px solid var(--yolk); outline-offset: 4px; }
.ti-word { grid-column: 2; min-width: 0; width: 100%; }
.ti-word .phonics { --ph-size: clamp(3.5rem, 13vw, 10rem); --ph-fit: 0.64; color: var(--ti-fg); }
.ti-word .ti-plain {
  display: block; text-align: center; color: var(--ti-fg); font-size: clamp(3.5rem, 13vw, 10rem); line-height: 1.15;
  overflow-wrap: anywhere;
}
.ti-word .ti-plain .t-tricky { color: inherit; background: linear-gradient(to bottom, transparent 58%, rgba(240, 140, 180, 0.62) 58%, rgba(240, 140, 180, 0.62) 92%, transparent 92%); }
.ti-board.is-dusk .ph-g.is-focus { color: var(--paper-light); }
.ti-board.is-dusk .ph-g.is-silent { color: rgba(255, 250, 241, 0.45); }
.ti-board.is-dusk .ph-g.is-focus .ph-ls::before { mix-blend-mode: normal; background: rgba(240, 140, 180, 0.62); }
.ti-board.is-dusk .ph-g.is-focus .ph-btn, .ti-board.is-dusk .ph-arc.is-focus { color: var(--think); }
.ti-miss {
  grid-column: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 30vw;
  padding: 10px 18px; border: 2px dashed var(--ti-line); border-radius: 16px;
}
.ti-miss[hidden] { display: none; }
.ti-miss-k { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.ti-miss s {
  font-family: var(--font-word); font-weight: 700; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.1;
  text-decoration-line: line-through; text-decoration-color: var(--think); text-decoration-thickness: 5px;
  overflow-wrap: anywhere;
}
.ti-board.is-light .ti-miss s { text-decoration-color: var(--think-ink); }
.ti-miss-n { font-size: 0.9375rem; font-weight: 650; }
.ti-concept { margin: 0; font-size: clamp(1.15rem, 2.2vw, 1.75rem); max-width: 46ch; }
.ti-concept b, .ti-cards b { font-weight: 800; }
.ti-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; width: 100%; max-width: 1000px; text-align: left; }
.ti-cards--one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.ti-cards p { margin: 0; padding: 14px 18px; border-radius: 16px; background: var(--ti-soft); border: 1.5px solid var(--ti-line); font-size: clamp(1rem, 1.6vw, 1.3rem); }
.ti-l { display: block; margin-bottom: 4px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yolk); }
.ti-board.is-light .ti-l { color: var(--yolk-deeper); }
.ti-body.is-covered .ti-word, .ti-body.is-covered .ti-miss, .ti-body.is-covered .ti-concept, .ti-body.is-covered .ti-cards { visibility: hidden; }
.ti-cover { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ti-cover[hidden] { display: none; }
.ti-cover p {
  margin: 0; padding: 22px 30px; border-radius: 20px; border: 3px dashed var(--ti-line); background: var(--ti-soft);
  font-size: clamp(1.2rem, 2.6vw, 2rem); font-weight: 700; max-width: 30ch;
}
.ti-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ti-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-width: 0; }
.ti-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ti-fg); }
.ti-dots i.on { background: var(--ti-fg); }
.ti-keys { margin: 0; text-align: center; font-size: 0.875rem; opacity: 0.85; }
.ti-none { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; max-width: 40rem; margin: 0 auto; }
.ti-none-t { margin: 0; font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 700; }
.ti-board .t-loading { color: var(--ti-fg); }

/* the chooser */
.ti-choose { display: flex; flex-direction: column; gap: 10px; }
.ti-pick { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ti-pick li { min-height: 40px; display: flex; align-items: center; }
.ti-pick .t-check { gap: 10px; flex-wrap: wrap; }
.ti-pick .t-word { font-size: 1.15rem; }
.ti-all { padding-top: 8px; border-top: 1px solid var(--t-feint); font-weight: 650; }

/* ---------- Tests ---------- */

.tt-start { margin-top: 14px; }
.tt-start-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px 28px; margin-bottom: 14px; }
.tt-words { border: none; padding: 0; margin: 0; min-width: 0; }
.tt-wordlist { list-style: decimal; padding-left: 2rem; margin: 6px 0 8px; columns: 2 12rem; column-gap: 20px; }
.tt-wordlist li { break-inside: avoid; min-height: 36px; }
.tt-wordlist .t-word { font-size: 1.05rem; }
.tt-earlier { margin-top: 18px; }
.tt-earlier h3 { margin: 0 0 8px; }
.tt-earlier-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tt-earlier-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--t-feint); }
.tt-earlier-list li:first-child { border-top: none; }
.tt-earlier-list a { font-weight: 700; min-height: 32px; display: inline-flex; align-items: center; }

.tt-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--t-gap); margin-top: 14px; align-items: start; }
.tt-live-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 8px; }
.tt-live-head h3 { margin: 0; }
.tt-live-head .t-toggle { flex: 0 1 22rem; border-top: 0; padding: 0; }
.tt-big { margin: 4px 0 10px; font-size: 1.15rem; font-weight: 700; }
.tt-grid { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.tt-box { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1.5px solid var(--rule); border-radius: 10px; background: #fff; min-width: 0; }
.tt-n { font-family: var(--font-display); font-variation-settings: var(--display-axes); font-weight: 800; font-size: 1.4rem; line-height: 1.1; }
.tt-c { font-size: 0.8125rem; color: var(--ink-soft); white-space: nowrap; }
p.tt-wait { margin: 0; font-size: 1.05rem; }
div.tt-wait { display: flex; flex-direction: column; gap: 6px; }
div.tt-wait p { margin: 0; font-size: 1.05rem; }
.tt-status { margin: 10px 0 0; }
.tt-code { text-align: left; }
.tt-code h3 { margin: 0 0 6px; }
.tt-code-v { margin: 10px 0; font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.1; white-space: nowrap; }
.tt-qr .t-qr { width: min(200px, 100%); height: auto; }
.tt-reach { margin: 12px 0 0; }
.tt-script { margin-top: 14px; }
.tt-script summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.tt-script-list { margin: 8px 0 0; padding-left: 2rem; display: flex; flex-direction: column; gap: 8px; }
.tt-script-word { display: block; font-size: 1.25rem; }
.tt-script-sent { display: block; color: var(--ink-soft); }

/* the board, full screen (the shell's .t-board dialog) */
.tt-board .t-board-top { flex-wrap: wrap; }
.tt-board-sw {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 6px 16px; border-radius: 12px;
  border: 2px solid rgba(255, 250, 241, 0.7); background: transparent; color: var(--paper-light); font: 700 1.05rem var(--t-font); cursor: pointer;
}
.tt-board-sw::after { content: "Off"; padding: 2px 8px; border-radius: 999px; background: rgba(255, 250, 241, 0.15); }
.tt-board-sw[aria-checked="true"]::after { content: "On"; background: var(--paper-light); color: var(--dusk); }
.tt-board-main { flex: 1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 3vw; align-items: center; padding: 1vw 3vw 3vw; min-height: 0; }
.tt-board-counts { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tt-board-big { margin: 0; font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 800; }
.tt-board .tt-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tt-board .tt-box { background: rgba(255, 250, 241, 0.08); border-color: rgba(255, 250, 241, 0.5); color: var(--paper-light); }
.tt-board .tt-c { color: var(--paper-light); font-size: clamp(0.9rem, 1.4vw, 1.2rem); }
.tt-board .tt-n { font-size: clamp(1.6rem, 3vw, 2.6rem); }
.tt-board .tt-wait { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.tt-board .tt-wait .t-namechip { font-size: 1.1rem; }
.tt-board-code { display: flex; flex-direction: column; align-items: center; gap: 1vh; text-align: center; }
.tt-board-code p { margin: 0; font-size: clamp(1.1rem, 2vw, 1.7rem); font-weight: 700; }
.tt-board-code .t-board-code { font-size: clamp(2.4rem, 6vw, 6rem) !important; }
.tt-board-code .t-board-qr .t-qr { width: min(24vw, 40vh); }

/* results */
.tt-sum { margin: 12px 0 14px; font-size: 1.15rem; }
.tt-reteach { margin-bottom: 18px; border-left: 8px solid var(--think-ink); }
.tt-reteach h3 { margin: 0 0 2px; }
.tt-reteach-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.tt-reteach-words .t-word { font-size: 1.25rem; }
.tt-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--t-gap); align-items: start; }
.tt-results h3 { margin: 0 0 8px; }
.tt-score { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tt-score .t-bar { width: 72px; }
.tt-wordres { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.tt-wordres li { padding: 10px 0; border-top: 1.5px dashed var(--rule); }
.tt-wordres li:first-child { border-top: none; padding-top: 0; }
.tt-wordres-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.tt-wordres-n { font-size: 0.9rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.tt-wrote { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.tt-times { color: var(--ink-soft); font-size: 0.875rem; }
.tt-all { margin-top: 18px; }
.tt-all summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.tt-all .t-ans.is-wrong { background: transparent; color: var(--ink); }

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

@media (max-width: 1100px) {
  .tt-grid, .tt-board .tt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1020px) {
  .tt-cols, .tt-results, .tt-start-grid { grid-template-columns: minmax(0, 1fr); }
  .tt-board-main { grid-template-columns: minmax(0, 1fr); }
  .ti-wordrow { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .ti-say, .ti-word, .ti-miss { grid-column: 1; }
  .ti-miss { max-width: 100%; }
}

@media (max-width: 760px) {
  .ins-card { padding: 10px 12px 10px 14px; }
  .ins-ev > div { grid-template-columns: minmax(0, 1fr); }
  .ins-hide { margin-left: 0; }
  .ins-pick { width: 100%; }
  .ins-pick .t-select { flex: 1; min-width: 0; }
  .tt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tt-wordlist { columns: 1; }
  .tt-start-go {
    position: sticky; bottom: calc(var(--t-bottom-h, 64px) + 8px); z-index: 5;
    margin: 0 -8px; padding: 8px; border-radius: 12px; background: var(--paper-light); box-shadow: 0 -2px 0 var(--paper-shade);
  }
  .ti-board { padding: 12px 16px 16px; }
  .ti-btn { min-width: 56px; padding: 6px 12px; }
  .ti-tools .ti-btn-t, .ti-tools kbd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ti-btn--big { padding: 8px 16px; font-size: 1.1rem; }
  .ti-cards { grid-template-columns: minmax(0, 1fr); }
  .ti-say { width: 64px; height: 64px; }
  .ti-keys { display: none; }
}

@media (max-width: 480px) {
  .ti-nav .ti-btn--big .ti-btn-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ti-dots { gap: 6px; }
  .ti-dots i { width: 10px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ti-btn--go:active { transform: none; }
}

/* ---------- print: Look, Say, Cover, Write, Check; test results (printDocument in ui.js) ---------- */

@media print {
  .ins-p h1 { margin-bottom: 1mm; }
  .ins-p-name { display: flex; align-items: flex-end; gap: 3mm; margin: 4mm 0 3mm; font-weight: 700; }
  .ins-p-line { flex: 1; border-bottom: 0.3mm solid #000; height: 5mm; }
  .ins-p-line--short { flex: 0 0 40mm; }
  .ins-p-steps { display: flex; flex-wrap: wrap; gap: 1mm 6mm; padding-left: 5mm; margin: 0 0 4mm; font-size: 9pt; }
  .ins-p-table th, .ins-p-table td { height: 14mm; border: 0.3mm solid #666; vertical-align: middle; }
  .ins-p-table thead th { height: auto; }
  .ins-p-word .t-word { font-size: 18pt; color: #000; }
  .ins-p-word .t-tricky { background: none; text-decoration: underline; text-decoration-thickness: 0.6mm; text-underline-offset: 1mm; color: #000; }
  .ins-p-tick { width: 14mm; text-align: center; }
  .ins-p-foot { margin-top: 3mm; }
  .tt-p .t-answers { font-size: 7.5pt; margin-bottom: 5mm; }
  .tt-p .t-answers th, .tt-p .t-answers td { white-space: normal; overflow-wrap: anywhere; padding: 1mm 0.8mm; }
  .tt-p .t-ans.is-ok, .tt-p .t-ans.is-wrong { background: none; color: #000; }
  .tt-p s { text-decoration-thickness: 0.4mm; }
}