/* The question map (assets/question-map/question-map.js).
   Colors are roles: the canvas reads them from these variables, so light and dark
   mode change here only. The five category colors keep one order everywhere
   (chapters, papers, case studies, code practice, private drafts). They pass the
   dataviz palette checks in both modes (lightness band, chroma, color-blind and
   normal-vision separation of neighbours); in light mode the first and last sit just
   under 3:1 against white, which the labelled column headers and the list view cover. */

.qmap {
  --qmap-surface: #ffffff;
  --qmap-ink: #24272a;
  --qmap-muted: #626a70;
  --qmap-line: #dfe3e1;
  --qmap-stripe: rgba(36, 39, 42, 0.028);
  --qmap-wash: rgba(53, 183, 121, 0.14);
  --qmap-accent: #187453;
  --qmap-ring: #ffffff;
  --qmap-chapters: #1baf7a;
  --qmap-papers: #2a78d6;
  --qmap-case-studies: #eb6834;
  --qmap-code-practice: #4a3aa7;
  --qmap-private: #e87ba4;
  --qmap-unused: #848b91;
  --qmap-panel: #f7f8f7;
  color: var(--qmap-ink);
  margin: 0.5rem 0 1rem;
}

body.quarto-dark .qmap {
  --qmap-surface: #17191d;
  --qmap-ink: #e6e8eb;
  --qmap-muted: #a2a9b1;
  --qmap-line: #3a4048;
  --qmap-stripe: rgba(230, 232, 235, 0.035);
  --qmap-wash: rgba(95, 211, 154, 0.16);
  --qmap-accent: #5fd39a;
  --qmap-ring: #17191d;
  --qmap-chapters: #199e70;
  --qmap-papers: #3987e5;
  --qmap-case-studies: #d95926;
  --qmap-code-practice: #9085e9;
  --qmap-private: #d55181;
  --qmap-unused: #8d949c;
  --qmap-panel: #1e2126;
}

/* The map sits in a Quarto figure, which centers its contents; the map reads from the start. */
.qmap {
  text-align: start;
}

/* Toolbar: one band of controls above the map. */
.qmap-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.6rem;
}

.qmap-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.6rem;
}

.qmap-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-right: 0.6rem;
  border-right: 1px solid var(--qmap-line);
}

.qmap-group:last-child {
  border-right: 0;
}

.qmap-search {
  flex: 1 1 18rem;
  min-width: 12rem;
  max-width: 34rem;
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.4rem;
  background: var(--qmap-surface);
  color: var(--qmap-ink);
  font: inherit;
}

.qmap-search:focus-visible,
.qmap-select:focus-visible,
.qmap-chip:focus-visible,
.qmap-icon:focus-visible,
.qmap-action:focus-visible,
.qmap-link:focus-visible,
.qmap-stage:focus-visible {
  outline: 2px solid var(--qmap-accent);
  outline-offset: 2px;
}

.qmap-count,
.qmap-audience,
.qmap-hint,
.qmap-muted {
  color: var(--qmap-muted);
  font-size: 0.86rem;
}

.qmap-audience {
  margin-left: auto;
  padding: 0.12rem 0.55rem;
  border: 1px dashed var(--qmap-muted);
  border-radius: 1rem;
}

.qmap-chip,
.qmap-popover > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem;
  border: 1px solid var(--qmap-line);
  border-radius: 1rem;
  background: var(--qmap-surface);
  color: var(--qmap-ink);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.qmap-popover > summary::-webkit-details-marker {
  display: none;
}

.qmap-chip[aria-pressed="true"] {
  border-color: var(--qmap-ink);
  background: var(--qmap-ink);
  color: var(--qmap-surface);
}

.qmap-chip[data-category][aria-pressed="false"] {
  opacity: 0.55;
  text-decoration: line-through;
}

.qmap-chip[data-category][aria-pressed="true"] {
  background: var(--qmap-surface);
  color: var(--qmap-ink);
  border-color: var(--qmap-line);
}

.qmap-select {
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.4rem;
  background: var(--qmap-surface);
  color: var(--qmap-ink);
  font: inherit;
  font-size: 0.86rem;
}

.qmap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.86rem;
  cursor: pointer;
}

.qmap-zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}

.qmap-icon {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.45rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.4rem;
  background: var(--qmap-surface);
  color: var(--qmap-ink);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}

.qmap-zoom-label {
  min-width: 3.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  color: var(--qmap-muted);
}

.qmap-popover {
  position: relative;
}

.qmap-popover-body {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  width: min(26rem, 88vw);
  max-height: 22rem;
  overflow: auto;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.5rem;
  background: var(--qmap-surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.qmap-skill-list {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2 12rem;
  font-size: 0.86rem;
}

.qmap-skill-list li {
  break-inside: avoid;
  margin-bottom: 0.2rem;
}

/* Swatches carry the category color beside its name. */
.qmap-swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.18rem;
  flex: none;
  background: var(--qmap-unused);
}

[data-category="chapters"] .qmap-swatch,
.qmap-badge[data-category="chapters"] { --qmap-cat: var(--qmap-chapters); }
[data-category="papers"] .qmap-swatch,
.qmap-badge[data-category="papers"] { --qmap-cat: var(--qmap-papers); }
[data-category="case-studies"] .qmap-swatch,
.qmap-badge[data-category="case-studies"] { --qmap-cat: var(--qmap-case-studies); }
[data-category="code-practice"] .qmap-swatch,
.qmap-badge[data-category="code-practice"] { --qmap-cat: var(--qmap-code-practice); }
[data-category="private"] .qmap-swatch,
.qmap-badge[data-category="private"] { --qmap-cat: var(--qmap-private); }
[data-category="unused"] .qmap-swatch { --qmap-cat: transparent; box-shadow: inset 0 0 0 2px var(--qmap-unused); }

[data-category] .qmap-swatch {
  background: var(--qmap-cat, var(--qmap-unused));
}

.qmap-badge[data-category] {
  box-shadow: inset 3px 0 0 var(--qmap-cat);
}

/* The stage: three canvases (plot, row header, column header) and the minimap. */
.qmap-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
}

.qmap-panel-open .qmap-body {
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 38%);
}

.qmap-stage {
  position: relative;
  height: clamp(30rem, calc(100vh - 15rem), 70rem);
  overflow: hidden;
  border: 1px solid var(--qmap-line);
  border-radius: 0.55rem;
  background: var(--qmap-surface);
  touch-action: none;
  user-select: none;
  cursor: grab;
}

.qmap-stage.qmap-pointer {
  cursor: pointer;
}

.qmap-stage.qmap-grabbing {
  cursor: grabbing;
}

.qmap-stage canvas {
  position: absolute;
  display: block;
}

.qmap-corner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  padding: 0 0.7rem 0.55rem;
  border-right: 1px solid var(--qmap-line);
  border-bottom: 1px solid var(--qmap-line);
  background: var(--qmap-surface);
  color: var(--qmap-muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.qmap-minimap {
  z-index: 3;
  border: 1px solid var(--qmap-line);
  border-radius: 0.35rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  cursor: crosshair;
}

/* The bubble follows the pointer; it never takes the pointer itself. */
.qmap-bubble {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(23rem, 80%);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.55rem;
  background: var(--qmap-surface);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  font-size: 0.86rem;
  line-height: 1.45;
  pointer-events: none;
}

.qmap-bubble[hidden] {
  display: none;
}

.qmap-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.35rem;
}

.qmap-badge {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.3rem;
  font-size: 0.75rem;
  color: var(--qmap-muted);
  white-space: nowrap;
}

.qmap-kind-M {
  border-color: var(--qmap-ink);
  color: var(--qmap-ink);
}

.qmap-process {
  font-style: italic;
}

.qmap-draft-badge {
  border-style: dashed;
}

.qmap-title {
  display: block;
  font-size: 0.98rem;
  line-height: 1.3;
}

.qmap-summary {
  margin: 0.3rem 0 0.4rem;
}

.qmap-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.4rem;
}

.qmap-keyword {
  padding: 0 0.4rem;
  border-radius: 0.8rem;
  background: var(--qmap-stripe);
  border: 1px solid var(--qmap-line);
  font-size: 0.78rem;
}

.qmap-skills {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
}

.qmap-label {
  margin-right: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qmap-muted);
}

.qmap-skill {
  padding: 0 0.35rem;
  border-left: 2px solid var(--qmap-accent);
  font-size: 0.8rem;
}

.qmap-where {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--qmap-line);
}

.qmap-where-group {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.qmap-where-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qmap-here {
  font-weight: 600;
}

.qmap-draft {
  color: var(--qmap-muted);
  font-style: italic;
}

.qmap-unused-note {
  margin: 0.4rem 0 0;
  color: var(--qmap-muted);
  font-style: italic;
}

.qmap-file {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.76rem;
  color: var(--qmap-muted);
}

/* The panel: the selected question, its places, and its own page. */
.qmap-panel {
  position: relative;
  max-height: clamp(30rem, calc(100vh - 15rem), 70rem);
  overflow: auto;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.55rem;
  background: var(--qmap-panel);
}

.qmap-panel[hidden] {
  display: none;
}

.qmap-close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--qmap-ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.qmap-panel-title {
  margin: 0.2rem 2rem 0.3rem 0;
  font-size: 1.2rem;
  line-height: 1.3;
  border: 0;
}

.qmap-panel-heading {
  margin: 0.8rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qmap-muted);
}

.qmap-panel-places {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qmap-panel-places li {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.qmap-panel-questions {
  padding-left: 1.2rem;
}

.qmap-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.8rem 0;
}

.qmap-action {
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.4rem;
  background: var(--qmap-surface);
  color: var(--qmap-ink);
  font: inherit;
  font-size: 0.84rem;
  text-decoration: none;
  cursor: pointer;
}

.qmap-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--bs-link-color, var(--qmap-accent));
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}

.qmap-frame {
  display: block;
  width: 100%;
  height: 32rem;
  border: 1px solid var(--qmap-line);
  border-radius: 0.4rem;
  background: var(--qmap-surface);
}

.qmap-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  margin-top: 0.55rem;
  font-size: 0.82rem;
  color: var(--qmap-muted);
}

.qmap-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--qmap-ink);
}

.qmap-legend-note {
  flex: 1 1 18rem;
}

/* List view: the rendered table below the map. Screen readers always reach it;
   it is shown when the reader asks for the list. */
.qmap-list-js:not(.qmap-list-shown) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.qmap-mode-list .qmap-body,
.qmap-mode-list .qmap-legend {
  display: none;
}

.qmap-list table {
  font-size: 0.9rem;
}

/* The table sits in a Quarto float, which centers its contents; a reading table reads from the start. */
.qmap-list th,
.qmap-list td {
  text-align: start;
}

/* Titles and place names wrap between words. Bootstrap's `.table a` rule would
   split them inside a word ("Recogniz/e") when a column is narrow. */
.qmap-list td a {
  word-break: normal;
}

/* On a phone the table scrolls sideways rather than squeezing the columns. */
.qmap-list td:nth-child(1) {
  min-width: 10rem;
}

.qmap-list td:nth-child(3) {
  min-width: 14rem;
}

.qmap-list td:nth-child(4) {
  min-width: 9rem;
}

/* Narrow screens: the panel becomes a sheet over the bottom of the screen. */
@media (max-width: 899.98px) {
  .qmap-panel-open .qmap-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .qmap-panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1050;
    max-height: 72vh;
    border-radius: 0.8rem 0.8rem 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.25);
  }

  .qmap-stage {
    height: clamp(26rem, calc(100vh - 13rem), 50rem);
  }

  .qmap-zoom {
    margin-left: 0;
  }

  .qmap-group {
    border-right: 0;
    padding-right: 0;
  }
}

@media print {
  .qmap-toolbar,
  .qmap-body,
  .qmap-legend {
    display: none;
  }

  .qmap-list-js:not(.qmap-list-shown) {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
  }
}