/* The purple Teaching Tools page (pages/purple/tools.php) and Quizzes page
   (pages/purple/quizzes.php); docs/purple-rollout.md, step 5. From the mockup's live/tools.html
   and live/quizzes.html. Loaded after css/purple-hub.css. */
/* Teaching Tools (NEW DESIGN, picked 2026-10-01: "hub style"). The hub header (breadcrumb, one
   title line, counts), one white panel of big cards, then the worksheet makers that go with the
   tools. Each card's picture is the colourful part of the tool itself (HK.RESOURCES art, hub-kit.js).
   The three quizzes sit in a panel of their own between the tools and the makers (2026-10-01); the
   header's Tools tab opens this page.
   The four tools are the ones the live /tools/ page shows (it hides Fraction Strips and Geoboard). */
.tl-art { background: #fff; display: grid; place-items: center; }
.tl-art svg { width: 94%; height: auto; max-height: 94%; }
.tgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc .tl-art { height: 176px; border: 2px solid var(--pv-cream); border-bottom: 0; border-radius: 22px 22px 0 0; box-sizing: border-box; }
.pc .d { font-size: 13.5px; line-height: 1.5; color: #4b3f6b; margin-top: 8px; }
.kband.big { padding: 18px 20px 20px; }
.kband .sec .hint { margin-left: auto; font-size: 13px; color: var(--pv-muted); font-weight: 600; }
/* "Explore all worksheet makers": inside the related makers card, under the makers, at the left.
   The site's usual button (.tc .go in topics.html, .door .go on the landing page) at its usual size */
.allmk { display: inline-block; margin-top: 16px; padding: 11px 20px; border-radius: 999px; background: var(--pv-orange); color: var(--pv-plum); font: 700 14px 'DM Sans', sans-serif; text-decoration: none; white-space: nowrap; }
.allmk:hover { background: var(--pv-orange-d); }
@media (max-width: 1100px) { .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tgrid { grid-template-columns: 1fr; } }

/* ---- The Quizzes page: three big cards across, a little taller ---- */
.hk-quizzes .tl-art svg { width: 86%; max-height: 90%; }
.hk-quizzes .tgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-quizzes .pc .tl-art { height: 196px; }
@media (max-width: 900px) { .hk-quizzes .tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hk-quizzes .tgrid { grid-template-columns: 1fr; } }