/* Drillkit: practice drills (tables-practice, speed-maths-practice). Big, thumb-friendly controls; no layout jumps at load. */
.dk-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dk-lbl{font-weight:700;font-size:14px;margin:12px 0 6px}
.dk-switches{display:grid;gap:12px;margin:14px 0 4px}
.dk-opts{margin-top:14px}
.dk-opts .field{margin-bottom:6px}
.dk-modes .chip,.sm-topics .chip,#sm-level .chip,#sm-round .chip{min-height:40px;font-size:14.5px}
.sm-all{border-style:dashed}

/* tables picker */
.tp-tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px;margin-bottom:12px}
.tp-t{font:800 19px var(--font);min-height:50px;border:2px solid var(--ink);border-radius:var(--r-sm);background:#fff;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.tp-t[aria-pressed=true]{background:var(--sun);box-shadow:3px 3px 0 var(--ink)}
.tp-quick{margin-bottom:6px}
.tp[data-mode=learn] .tp-o-p,.tp[data-mode=learn] .tp-o-t,.tp[data-mode=practice] .tp-o-t,.tp[data-mode=timed] .tp-o-p{display:none}

/* learn: chart */
.tp-lbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tp-lbar .chip{min-height:40px}
.tp-nav{padding:6px 16px;font-size:22px;line-height:1}
.tp-nav:first-child{margin-right:auto}.tp-nav:last-child{margin-left:auto}
.tp-nav:disabled{opacity:.35;cursor:default;box-shadow:none}
.tp-chart{list-style:none;margin:0;padding:0;border:2.5px solid var(--ink);border-radius:var(--r);overflow:hidden;background:#fff}
.tp-chart li{display:flex;align-items:center;justify-content:space-between;gap:4px 14px;flex-wrap:wrap;min-height:48px;padding:6px 16px;border-bottom:1.5px dashed var(--line)}
.tp-chart li:nth-child(odd){background:#fff8ea}
.tp-chart li:last-child{border-bottom:0}
.tp-eq{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tp-eq b{display:inline-block;min-width:2.2em;color:var(--blue-d);font-weight:800}
.tp-hiw{display:none;font-size:17px;color:var(--ink-2);font-weight:600}
.tp-hi .tp-hiw{display:block}
.tp-chart.tp-long li{min-height:40px}.tp-chart.tp-long .tp-eq{font-size:20px}
.tp-peek{font:800 18px var(--font);min-width:2.4em;min-height:34px;border:2px solid var(--ink);border-radius:var(--pill);background:var(--sun);color:var(--ink);cursor:pointer}

/* drill stage */
.dk-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700;font-size:13.5px;white-space:nowrap;color:var(--ink-2);font-variant-numeric:tabular-nums}
.dk-time{font-size:22px;font-weight:800;color:var(--ink);min-width:3.2em;text-align:center}
.dk-time.dk-low{color:var(--err)}
.dk-step{margin:8px 0 14px}
.dk-card{background:#fff8ea;border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:var(--hard);padding:18px 16px 12px;text-align:center;transition:background-color .2s}
.dk-card.dk-right{background:#dff7ea}
.dk-card.dk-wrong{background:#ffe7e3}
.dk-q{margin:0;font-size:clamp(34px,9vw,54px);font-weight:800;line-height:1.15;min-height:1.2em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dk-q.dk-qlong,.dk:not(.dk-on) .dk-q{font-size:clamp(22px,6.2vw,34px)}
.sm .dk-q{min-height:2.3em;display:grid;place-items:center}
.dk:not(.dk-on) .dk-form,.dk:not(.dk-on) .dk-pad{display:none}
.dk-sub{margin:6px 0 0;font-size:16px;font-weight:600;color:var(--ink-2);min-height:1.5em}
.dk-form{display:flex;justify-content:center;gap:10px;margin:14px auto 6px;max-width:330px}
.dk-in{flex:1;min-width:0;width:auto!important;font:800 30px var(--font)!important;text-align:center;padding:8px 10px!important;border-width:2.5px!important}
.dk-in:disabled{background:#f6f7fb}
.dk-ok{min-width:84px;font-size:18px}
.dk-fb{margin:4px 0 0;min-height:3em;font-size:16px;font-weight:600;line-height:1.45}
.dk-fb b{color:var(--err)}
.dk-fb span{display:block;font-size:14px;color:var(--ink-2);font-weight:500}
.dk-ok-t{color:var(--ok);font-weight:800;font-size:18px}
.dk-bad-t{color:var(--ink)}
.dk-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:360px;margin:14px auto 0}
.dk-pad button{font:800 24px var(--font);min-height:54px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dk-pad button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.dk-pad .dk-padok{background:var(--blue);color:#fff;font-size:20px}
.dk-pad .dk-wide{grid-column:1/-1}
.dk-actions{display:flex;justify-content:center;gap:12px;margin-top:16px}
.dk-actions .btn{min-width:150px;font-size:17px;padding:13px 24px}
.dk-result{margin-top:20px;border-top:2px dashed var(--line);padding-top:16px}
.dk-result:focus{outline:none}
.dk-result h3{font-size:16px;margin:16px 0 8px}
.dk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.dk-tiles div{border:2px solid var(--ink);border-radius:var(--r-sm);padding:8px 10px;background:var(--blue-soft);text-align:center}
.dk-tiles b{display:block;font-size:24px;line-height:1.2;font-variant-numeric:tabular-nums}
.dk-tiles span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.dk-result>.hint{margin-top:8px}
.dk-review{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dk-review li{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border:2px solid var(--ink);border-radius:var(--r-sm);padding:8px 12px;background:#ffe7e3}
.dk-review.dk-slow li{background:#fff5e0}
.dk-rq{font-weight:800;font-variant-numeric:tabular-nums}
.dk-ry{font-size:14px;color:var(--ink-2);font-weight:600}
.dk-clean{font-weight:700;color:var(--ok);margin:12px 0 0}

/* weak spots + progress panels */
.dk-app+.dk-more{margin-top:24px}
.dk-more+.mv-panel{margin-top:24px}
.dk-more h2{margin-bottom:12px}
.dk-weak{min-height:120px}
.dk-empty{margin:0;min-height:110px;display:grid;place-items:center;text-align:center;padding:12px;border:2px dashed var(--line);border-radius:var(--r-sm);color:var(--muted);font-size:14px}
.dk-heat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.dk-heat li{border:2px solid var(--ink);border-radius:var(--r-sm);padding:8px 10px;display:grid;gap:1px}
.dk-heat b{font-size:15px}
.dk-heat span{font-size:13px;font-weight:700}
.dk-heat small{font-size:12px;color:var(--ink-2)}
.dk-good{background:#dff7ea}.dk-mid{background:#fff1cc}.dk-poor{background:#ffe0dc}.dk-few{background:var(--soft)}
.dk-legend{margin-top:10px}
.dk-legend span{display:inline-block;width:12px;height:12px;border:1.5px solid var(--ink);border-radius:3px;vertical-align:-1px;margin:0 3px 0 6px}
.dk-legend span:first-child{margin-left:0}
.dk-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.dk-facts li{border:2px solid var(--ink);border-radius:var(--pill);padding:4px 12px;font-weight:800;background:#fff}
.dk-facts small{font-weight:600;color:var(--ink-2)}
.dk-more h3{font-size:16px;margin:16px 0 8px}

/* speed maths levels table */
.sm-lv{width:100%;border-collapse:collapse;font-size:13px;margin:16px 0 8px}
.sm-lv caption{text-align:left;font-weight:800;font-size:14px;padding-bottom:6px;color:var(--ink)}
.sm-lv th,.sm-lv td{border:1.5px solid var(--ink);padding:5px 7px;text-align:left;vertical-align:top}
.sm-lv thead th{background:var(--blue-soft)}

@media (max-width:520px){
  .panel.dk-stagep{padding:18px 14px}
  .dk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-eq{font-size:21px}
  .dk-pad button{min-height:52px}
  .dk-bar{font-size:12.5px}.dk-time{font-size:19px}
}
@media (prefers-reduced-motion:reduce){.dk-card{transition:none}}

/* printing: only the sheet (tables-practice builds .tp-sheet on demand) */
.tp-sheet{display:none}
@media print{
  @page{size:A4;margin:14mm}
  body.tp-printing>*:not(.tp-sheet){display:none!important}
  body.tp-printing .tp-sheet{display:block;color:#000;font:15px/1.5 var(--font)}
  body.tp-printing .tp-sheet,body.tp-printing .tp-sheet *{visibility:visible}
  .tp-sheet h1{font-size:20px;margin:0 0 12px}
  .tp-ph{display:flex;flex-wrap:wrap;gap:6px 24px;border-bottom:1.5px solid #000;padding-bottom:8px;margin-bottom:12px;font-size:14px}
  .tp-ph b{flex-basis:100%}
  .tp-pq{columns:4;column-gap:18px;margin:0;padding-left:26px;font-size:16px}
  .tp-pq li{break-inside:avoid;padding:9px 0}
  .tp-pkey{break-before:page}
  .tp-pchart{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
  .tp-pchart section{border:1.5px solid #000;border-radius:8px;padding:6px 10px;break-inside:avoid}
  .tp-pchart h2{font-size:15px;margin:0 0 4px}
  .tp-pchart ol{list-style:none;margin:0;padding:0;font-size:14px}
  .tp-pchart small{display:block;font-size:11px;color:#333}
  .tp-pfoot{font-size:11px;color:#444;margin-top:12px}
}