/* A teaching tool page (/tools/<slug>/) in the purple theme; markup changes in includes/purple/tool-page.php
   (docs/purple-rollout.md, step 5). Started as a copy of the mockup's live/tool-live.css. */
/* Live teaching tools in the purple site (2026-09-30), built by toolShell() in
   scripts/purple-live-snapshots.mjs into live/tools/<slug>.html. The generator look (white
   sidebar column, Fredoka title, cream workspace), but a tool is one screen:
   - no page scroll and no footer: the tool fills the window under the 76px header;
   - the sidebar runs the full height (it scrolls inside itself only if a tool's options are
     taller than the window) and collapses with the tab on its edge (340px, the generator sidebar's width). */
html, body.pv-tool { height: 100%; overflow: hidden !important; }
body.pv-tool { display: flex !important; flex-direction: column; margin: 0; background: var(--pv-cream) !important; }
body.pv-tool .pv-footer { display: none !important; }
body.pv-tool .pv-top { flex: none; }

body.pv-tool .main-container { flex: 1 1 auto; min-height: 0; height: auto !important; max-height: none !important;
  display: grid !important; grid-template-columns: 340px minmax(0, 1fr) !important; margin: 0 !important; max-width: none !important; width: auto !important; position: relative; }
body.pv-tool .main-container.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) !important; }

/* the sidebar: white, full height, the generator sidebar's type */
body.pv-tool .main-container > .sidebar { position: relative !important; top: 0 !important; height: 100% !important; max-height: none !important; min-height: 0;
  overflow-y: auto; box-sizing: border-box; background: #fff !important; border-right: 1px solid var(--pv-line) !important; box-shadow: none !important;
  padding: 28px 24px 32px !important; width: auto !important; margin: 0 !important; border-radius: 0 !important; }
body.pv-tool .main-container > .sidebar.collapsed { padding: 0 !important; border-right: 0 !important; overflow: hidden; }
body.pv-tool .main-container > .sidebar::-webkit-scrollbar { width: 8px; }
body.pv-tool .sidebar .crumb { margin-bottom: 14px; }
body.pv-tool .sidebar .crumb a { font: 700 12.5px 'DM Sans', sans-serif; color: var(--pv-violet); text-decoration: none; }
body.pv-tool .sidebar .crumb a:hover { text-decoration: underline; }
body.pv-tool .sidebar h1 { font: 600 24px/1.15 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; margin: 0 0 6px !important; text-align: left; }
body.pv-tool .sidebar .subtitle { font-size: 13px !important; line-height: 1.45; color: var(--pv-muted) !important; margin: 0 0 22px !important; }

/* the workspace: everything right of the sidebar fills what is left, no scrolling */
body.pv-tool .main-container > :not(.sidebar):not(.collapse-btn) { min-width: 0; min-height: 0; height: 100% !important; max-height: 100% !important; overflow: hidden; box-sizing: border-box; background: var(--pv-cream) !important; }

/* the collapse tab on the sidebar's edge */
body.pv-tool .collapse-btn { display: grid !important; place-items: center; position: absolute !important; top: 50% !important; left: 340px !important; transform: translateY(-50%); z-index: 50;
  width: 22px; height: 56px; padding: 0 !important; background: #fff !important; border: 1px solid var(--pv-line) !important; border-left: 0 !important; border-radius: 0 12px 12px 0 !important;
  color: var(--pv-violet) !important; font-size: 11px !important; cursor: pointer; box-shadow: 4px 0 12px rgba(52,30,96,.06) !important; transition: left .25s; }
body.pv-tool .collapse-btn:hover { background: #ece8ff !important; }
body.pv-tool .collapse-btn.collapsed-pos { left: 0 !important; }

/* phones: the options stack above the workspace, which scrolls with the page there */
@media (max-width: 760px) {
  html, body.pv-tool { height: auto; overflow: auto !important; }
  body.pv-tool .main-container { display: block !important; }
  body.pv-tool .main-container > .sidebar { height: auto !important; border-right: 0 !important; border-bottom: 1px solid var(--pv-line) !important; }
  body.pv-tool .main-container > :not(.sidebar):not(.collapse-btn) { height: 70vh !important; }
  body.pv-tool .collapse-btn { display: none !important; }
}

/* ---- The sidebar's controls, as in the generator sidebar (gen.css + gen-live.css), 2026-10-01 ----
   Each tool keeps its own markup and script; these rules restyle what they share: section
   headings, labels, selects and number boxes, checkboxes, buttons, the Advanced toggle, notes. */
body.pv-tool .sidebar { font-family: 'DM Sans', sans-serif; }
/* section headings ("Add Blocks", "Range", a fraction group): Fredoka with a trailing hairline */
body.pv-tool .sidebar .section-label { display: flex !important; align-items: center; gap: 10px; font: 600 15px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 22px 0 12px !important; }
body.pv-tool .sidebar .section-label::after { content: ''; flex: 1; height: 1px; background: var(--pv-line); }
body.pv-tool .sidebar .subtitle + .section-label { margin-top: 4px !important; }
/* labels: small uppercase, as "MISSING VALUE" on a generator */
body.pv-tool .sidebar .control-group { margin-bottom: 16px !important; }
body.pv-tool .sidebar .control-group > label:not(.adv-checkbox-row), body.pv-tool .sidebar .bank-group-header { display: block; font: 700 11.5px 'DM Sans', sans-serif !important; letter-spacing: 1px; text-transform: uppercase; color: var(--pv-muted) !important; margin-bottom: 6px !important; }
body.pv-tool .sidebar select, body.pv-tool .sidebar input[type="number"], body.pv-tool .sidebar input[type="text"] { width: 100%; box-sizing: border-box; padding: 11px 14px !important; font: 600 14px 'DM Sans', sans-serif !important; border: 2px solid var(--pv-line) !important; border-radius: 14px !important; background-color: #fff !important; color: var(--pv-plum) !important; box-shadow: none; }
body.pv-tool .sidebar select:focus, body.pv-tool .sidebar input:focus { outline: none; border-color: var(--pv-violet) !important; box-shadow: 0 0 0 3px rgba(99,75,245,.15) !important; }
body.pv-tool .sidebar .range-row .control-group { margin-bottom: 0 !important; }
body.pv-tool .sidebar .range-row input { padding: 11px 10px !important; }
/* checkboxes */
body.pv-tool .sidebar .adv-checkbox-row, body.pv-tool .sidebar .checkbox-row, body.pv-tool .sidebar .checkbox-row span { display: flex; align-items: center; gap: 9px; font: 600 14px 'DM Sans', sans-serif !important; color: var(--pv-ink) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer; }
body.pv-tool .sidebar .adv-checkbox-row { margin-bottom: 10px !important; }
body.pv-tool .sidebar input[type="checkbox"] { width: 18px !important; height: 18px !important; flex: none; accent-color: var(--pv-violet) !important; cursor: pointer; }
body.pv-tool .sidebar .checkbox-section { margin-bottom: 16px; }
/* buttons: full-size white pills; the one that applies a change is orange, like Print */
body.pv-tool .sidebar .action-btn, body.pv-tool .sidebar .btn-clear, body.pv-tool .sidebar .clear-btn, body.pv-tool .sidebar .btn-apply, body.pv-tool .sidebar .btn-danger {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 13px 16px !important; margin: 0 !important; font: 700 15px 'DM Sans', sans-serif !important;
  border: 2px solid var(--pv-line) !important; border-radius: 999px !important; background: #fff !important; color: var(--pv-plum) !important; box-shadow: none !important; text-align: center !important; text-transform: none !important; letter-spacing: 0 !important; transform: none !important; cursor: pointer; transition: .15s; }
body.pv-tool .sidebar .action-btn:not(:disabled):hover, body.pv-tool .sidebar .btn-clear:hover, body.pv-tool .sidebar .clear-btn:hover { border-color: var(--pv-lav) !important; color: var(--pv-violet-d) !important; background: #fff !important; }
body.pv-tool .sidebar .action-btn.danger:not(:disabled):hover, body.pv-tool .sidebar .btn-danger:hover, body.pv-tool .sidebar .actions > .btn-clear:hover { border-color: #f0b9b4 !important; color: #c0392b !important; }
body.pv-tool .sidebar button:disabled { opacity: .45 !important; cursor: not-allowed; }
body.pv-tool .sidebar .btn-apply { background: var(--pv-orange) !important; border-color: var(--pv-orange) !important; }
body.pv-tool .sidebar .btn-apply:hover { background: var(--pv-orange-d) !important; border-color: var(--pv-orange-d) !important; }
/* stacks and rows of buttons */
body.pv-tool .sidebar .actions-section, body.pv-tool .sidebar .actions, body.pv-tool .sidebar .button-group, body.pv-tool .sidebar .clear-group { display: grid !important; gap: 10px !important; margin: 0 0 10px !important; }
body.pv-tool .sidebar .clear-group { grid-template-columns: 1fr 1fr; }
body.pv-tool .sidebar .clear-group button { padding: 11px 8px !important; font-size: 14px !important; }
body.pv-tool .sidebar .actions-section .section-label { margin-bottom: 2px !important; }
body.pv-tool .sidebar .actions { margin-top: 20px !important; }
body.pv-tool .sidebar .clear-btn { margin: 4px 0 6px !important; }
/* Advanced Options: the generators' violet text toggle */
body.pv-tool .sidebar .adv-toggle { background: none !important; border: 0 !important; padding: 8px 0 !important; font: 700 13px 'DM Sans', sans-serif !important; color: var(--pv-violet) !important; cursor: pointer; }
body.pv-tool .sidebar .adv-section { margin-top: 12px !important; }
body.pv-tool .sidebar .adv-panel.open { background: var(--pv-bg); border-radius: 16px; padding: 14px 16px 6px !important; margin-top: 4px; }
/* Point | Jump: the Topics | Tags switch */
body.pv-tool .sidebar .mode-toggle { display: flex; gap: 4px; padding: 4px; border: 0 !important; border-radius: 999px !important; background: var(--pv-bg) !important; margin-bottom: 4px !important; overflow: visible; }
body.pv-tool .sidebar .mode-toggle label { flex: 1; border: 0 !important; border-radius: 999px; padding: 9px 12px !important; font: 700 13.5px 'DM Sans', sans-serif !important; color: var(--pv-plum) !important; background: none !important; text-align: center; cursor: pointer; }
body.pv-tool .sidebar .mode-toggle input[type="radio"]:checked + label { background: var(--pv-plum) !important; color: #fff !important; }
/* tiles you pick from (blocks, fraction pieces) and colour dots keep their own colours */
body.pv-tool .sidebar .block-tile, body.pv-tool .sidebar .bank-item { border: 2px solid var(--pv-line) !important; border-radius: 14px !important; background: #fff !important; box-shadow: none !important; }
body.pv-tool .sidebar .block-tile:hover, body.pv-tool .sidebar .bank-item:hover { border-color: var(--pv-lav) !important; background: #faf8fe !important; }
body.pv-tool .sidebar .block-tile-label, body.pv-tool .sidebar .bank-label { font: 700 13px 'DM Sans', sans-serif !important; color: var(--pv-plum) !important; }
body.pv-tool .sidebar .block-tile-count { color: var(--pv-muted) !important; }
body.pv-tool .sidebar .bank-section { overflow: visible !important; flex: none !important; }
body.pv-tool .sidebar .bank-group { margin-bottom: 12px !important; }
body.pv-tool .sidebar .color-picker, body.pv-tool .sidebar .color-buttons { margin-bottom: 4px; }
/* notes and read-outs: a quiet lavender box */
body.pv-tool .sidebar .help-text, body.pv-tool .sidebar .instructions { font: 500 12.5px/1.55 'DM Sans', sans-serif !important; color: var(--pv-muted) !important; background: var(--pv-bg); border: 0 !important; border-radius: 16px; padding: 14px 16px !important; margin-top: 18px !important; }
body.pv-tool .sidebar .help-text strong { color: var(--pv-plum) !important; }
body.pv-tool .sidebar .count-display { background: var(--pv-bg) !important; border: 0 !important; border-radius: 16px !important; padding: 16px !important; margin-top: 18px; }
body.pv-tool .sidebar .count-main { font: 600 26px 'Fredoka', sans-serif !important; color: var(--pv-plum) !important; }
body.pv-tool .sidebar .count-breakdown { color: var(--pv-muted) !important; }
/* Multiplication Chart's full-screen view opens its sidebar at the same width */
body.pv-tool.is-fullscreen .sidebar.fs-expanded { width: 340px !important; padding: 28px 24px 32px !important; }
body.pv-tool.is-fullscreen .collapse-btn.fs-expanded-pos { left: 340px !important; }

/* Base Ten Blocks: the "Hundreds / Tens / Ones" strip kept its 32px while hidden, so the
   workspace started below the header bar and blocks dragged to the top looked cut off. Hidden,
   it now takes no room: the workspace runs right up to the header. (The live tool was fixed the
   same day to use display instead of visibility; this rule covers the snapshot until it is rebuilt.) */
body.pv-tool .col-header[style*="hidden"] { display: none !important; }

/* Ten Frames (movable frames, 2026-10-01): the two "add a frame" buttons share a row, and Line Up
   sits right under Fill / Clear */
body.pv-tool .sidebar .actions.pair { grid-template-columns: 1fr 1fr; margin-top: 0 !important; }
body.pv-tool .sidebar .actions.pair button { padding: 11px 8px !important; font-size: 14px !important; }
body.pv-tool .sidebar .actions + .actions { margin-top: 0 !important; }
/* Show Numbers sits clear of the buttons above it */
body.pv-tool .sidebar .actions + .adv-checkbox-row { margin-top: 16px; }