/* ── Map maker (/tools/map-maker/) ──────────────────────────────────────
   Controls on the left, the live page on the right; on a phone the page
   comes first so the map is above the fold. The page itself is an SVG drawn
   in points by tool.js and always reads as white paper, in both themes, so its
   own colors are fixed in the SVG; everything around it uses tokens. Print
   hides the site and shows only #mm-print-root, which tool.js fills with the
   pages and an @page size just before window.print(). */
.q-tool.mm { max-width: 1180px; padding-top: 14px; }
.mm-tabs { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.mm-tab {
  min-height: 44px;
  padding: 8px 18px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--bg-card-border);
  border-radius: 999px;
  cursor: pointer;
}
.mm-tab[aria-selected="true"] {
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--accent-green) 55%, transparent);
  background: color-mix(in srgb, var(--accent-green) 12%, transparent);
}
.mm-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.mm-stage { order: -1; min-width: 0; display: flex; flex-direction: column; }
/* On a phone the page comes first and the buttons follow it; on a wide screen
   the buttons sit above the page. */
.mm-stage .mm-preview { order: 1; }
.mm-stage .mm-keytoggle { order: 2; align-self: flex-start; }
.mm-stage .mm-page2 { order: 3; }
.mm-stage .mm-actions { order: 4; margin-top: 12px; }
.mm-stage .q-feedback { order: 5; }
@media (min-width: 980px) {
  .mm-grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); align-items: start; }
  .mm-stage { order: 0; position: sticky; top: 84px; }
  .mm-stage .mm-actions { order: 0; margin-top: 0; }
  .mm-stage .q-feedback { order: 0; }
}
.mm-panel { min-width: 0; }
.mm-group { border: 0; margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--bg-card-border); min-width: 0; }
.mm-group legend {
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.mm-field { display: grid; gap: 6px; margin: 0 0 12px; min-width: 0; }
.mm-field > span { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); }
.mm-field .q-input { width: 100%; min-width: 0; min-height: 44px; }
.mm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.mm-hint { margin: 0 0 10px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); }
.mm-labels { margin-bottom: 0; }
.mm-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.mm-swb {
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  display: inline-grid;
  place-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--bg-card-border);
  border-radius: 12px;
  cursor: pointer;
}
.mm-swb[aria-pressed="true"] {
  color: var(--text-primary);
  border-color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--text-primary);
}
.mm-sw {
  display: inline-block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--text-quaternary);
  flex: 0 0 auto;
}
.mm-legend { display: grid; gap: 8px; margin: 0 0 12px; }
.mm-legend-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; }
.mm-legend-row .q-input { min-height: 44px; width: 100%; }
.mm-checks { display: grid; gap: 2px; margin: 0 0 10px; }
.mm-checks label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}
.mm-checks input { width: 18px; height: 18px; accent-color: var(--accent-green); flex: 0 0 auto; }
.mm-listbox { margin-top: 12px; }
.mm-listbox summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
}
.mm-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 6px;
  max-height: 340px;
  overflow: auto;
}
.mm-li {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--bg-card-border);
  border-radius: 10px;
  cursor: pointer;
}
.mm-li:hover { color: var(--text-primary); border-color: var(--text-quaternary); }
.mm-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.mm-actions .q-btn { min-height: 44px; }
.mm-preview {
  margin-top: 8px;
  padding: clamp(8px, 2vw, 16px);
  background: var(--surface-3);
  border: 1px solid var(--bg-card-border);
  border-radius: 14px;
  min-height: 200px;
}
.mm-preview > svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 78vh;
  margin: 0 auto;
  box-shadow: var(--shadow-medium);
}
.mm-preview[data-orient="portrait"] > svg { max-width: 640px; }
.mm-page2 { margin-top: 12px; }
.mm-keytoggle { margin-top: 10px; min-height: 44px; }
.mm-preview .mm-c { cursor: pointer; transition: fill .15s ease; }
.mm-preview .mm-c:hover { stroke: var(--accent-green); stroke-width: 1.4; }
.mm-preview .mm-wrong { fill: #E8A193; }
.mm-preview .mm-pulse { animation: mm-pulse 1.1s ease-in-out infinite; }
@keyframes mm-pulse { 50% { stroke-opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .mm-preview .mm-pulse { animation: none; }
  .mm-preview .mm-c { transition: none; }
}
.mm[data-mode="practice"] .mm-actions { display: none; }
.mm-prompt { margin: 0 0 6px; font-family: var(--font-serif); font-size: 26px; line-height: 1.2; color: var(--text-primary); }
.mm-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; margin-top: 16px; }
.mm-alt .mm-field { margin: 0; }
.mm-alt .q-btn { min-height: 44px; }
.mm-done {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--surface-3);
  border: 1px solid var(--bg-card-border);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-secondary);
}
.mm-done p { margin: 0 0 10px; }
#mm-print-root { display: none; }
@media print {
  body.mm-printing { background: #fff; }
  body.mm-printing > *:not(#mm-print-root) { display: none; }
  body.mm-printing #mm-print-root { display: block; }
  .mm-print-page { overflow: hidden; break-after: page; }
  .mm-print-page:last-child { break-after: auto; }
  .mm-print-page > svg { display: block; width: 100%; height: 100%; }
}
@media (max-width: 460px) {
  .mm-row { grid-template-columns: minmax(0, 1fr); }
  .mm-alt { grid-template-columns: minmax(0, 1fr); }
}