cs249r_book/taxonomy/explorer.css

#title-block-header {
  display: none !important;
}
.concept-explorer {
  --ink: #26323b;
  --muted: #5f6b76;
  --line: #d9e0e5;
  max-width: 1500px;
  margin: auto;
  padding: 22px 14px 48px;
  color: var(--ink);
}
.map-header {
  max-width: 950px;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: #a51c30;
  margin: 0 0 12px;
}
.map-header h1 {
  font-size: clamp(28px, 3.3vw, 44px);
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.map-header p:not(.eyebrow) {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 22px;
}
.map-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding: 17px 0;
}
.map-tools label {
  font-size: 12px;
  font-weight: 650;
  display: flex;
  align-items: center;
  gap: 12px;
}
.map-tools input {
  width: 245px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 9px 12px;
  background: #fff;
  color: #26323b;
  font: inherit;
  min-height: 40px;
}
.map-tools button {
  font: inherit;
  font-size: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 12px;
  color: #26323b;
  cursor: pointer;
}
.map-tools a {
  font-size: 12px;
  margin-left: auto;
  color: #a51c30;
}
.map-frame {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: auto;
  padding: 18px 10px;
}
#concept-map svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 750px;
}
#concept-map .node {
  cursor: pointer;
  transition: opacity 0.15s;
}
#concept-map .node:focus {
  outline: none;
}
#concept-map .node.selected path,
#concept-map .node.selected polygon {
  stroke: #a51c30;
  stroke-width: 2.8;
  fill: #fcebed;
}
#concept-map .node:focus path,
#concept-map .node:focus polygon {
  stroke: #286db0;
  stroke-width: 3;
}
#concept-map .muted {
  opacity: 0.6;
}
#concept-map .edge.active path,
#concept-map .edge.active polygon {
  stroke: #a51c30;
}
#concept-map .edge.active polygon {
  fill: #a51c30;
}
#concept-map .edge.active text {
  fill: #7d1423;
}
.map-caption {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin: 12px 0 24px;
}
.map-caption > span:first-child {
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 750;
  color: #a51c30;
  margin-right: 8px;
}
.map-draft {
  display: block;
  font-size: 11px;
}
.map-reader {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 44px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}
.concept-explorer h2 {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 20px;
  margin: 0 0 12px;
}
.concept-explorer h3 {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 24px 0 12px;
}
.concept-explorer .anchorjs-link {
  display: none;
}
.map-reader p {
  font-size: 14px;
  line-height: 1.65;
}
.detail-source {
  font-size: 11px !important;
  color: var(--muted);
}
.read-link {
  display: inline-block;
  color: #a51c30;
  font-size: 13px;
  font-weight: 650;
}
.statements {
  padding-left: 18px;
}
.statements li {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 13px;
}
.statements button {
  font: inherit;
  display: inline;
  border: 0;
  background: none;
  color: #a51c30;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.statements small {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}
.concept-index p {
  font-size: 12px;
  color: var(--muted);
}
#concept-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
#concept-list button {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--ink);
  background: transparent;
}
#concept-list button[aria-pressed="true"] {
  color: #a51c30;
  border-color: #a51c30;
  background: #fcebed;
}
.editorial-note {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  margin-top: 28px;
}
.concept-explorer :focus-visible {
  outline: 2px solid #286db0;
  outline-offset: 4px;
}
body.quarto-dark .concept-explorer {
  --ink: #e8edf2;
  --muted: #b4bfca;
  --line: #48525e;
}
body.quarto-dark #concept-list button[aria-pressed="true"] {
  color: #82152a;
}
@media (max-width: 700px) {
  .concept-explorer {
    padding: 18px 0 32px;
  }
  .map-tools {
    flex-wrap: wrap;
    gap: 12px;
  }
  .map-tools label {
    width: 100%;
    justify-content: space-between;
  }
  .map-tools input {
    width: 65%;
  }
  .map-tools a {
    margin-left: 0;
  }
  .map-reader {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .map-frame {
    padding: 10px 0;
  }
  .map-header h1 {
    font-size: 30px;
  }
  .map-caption {
    font-size: 11px;
  }
}
@media print {
  .map-tools,
  .map-reader,
  .editorial-note {
    display: none;
  }
  .map-frame {
    border: 0;
    padding: 0;
  }
  #concept-map svg {
    min-width: 0;
  }
  .concept-explorer {
    padding: 0;
  }
}

/* Chapter-generated viewers and the website share these controls. */
.map-tools {
  flex-wrap: wrap;
}
.map-tools label {
  flex-wrap: wrap;
}
.map-tools select,
.catalog-tools select,
.catalog-tools input {
  font: inherit;
  font-size: 12px;
  max-width: 340px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: #fff;
  color: #26323b;
  min-height: 40px;
}
.map-tools input {
  width: 190px;
}
.relationship-evidence {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.relationship-evidence p {
  font-size: 12px;
}
.learning-check {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.learning-check p {
  font-size: 13px;
}
.learning-check fieldset {
  padding: 0;
  border: 0;
}
.learning-check label {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
  cursor: pointer;
}
.learning-check input {
  margin-top: 3px;
  flex-shrink: 0;
}
.learning-check button,
.open-map {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.check-feedback {
  font-weight: 600;
}
.curriculum-browser {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  margin-top: 30px;
}
.curriculum-browser > summary {
  font-weight: 700;
  font-size: 19px;
  cursor: pointer;
}
.curriculum-browser > p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.catalog-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}
.catalog-tools label {
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.catalog-chapter {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 13px 16px;
  margin-top: 10px;
}
.catalog-chapter summary {
  font-weight: 650;
  font-size: 14px;
  cursor: pointer;
}
.catalog-chapter small {
  font-size: 11px;
  color: var(--muted);
  margin-left: 10px;
}
.catalog-chapter p,
.catalog-chapter li {
  font-size: 12px;
  line-height: 1.6;
}
.catalog-chapter li {
  margin: 15px 0;
}
.concept-order {
  font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 2px 7px;
  margin-left: 8px;
  color: var(--muted);
}
#catalog-status {
  font-size: 12px;
  color: var(--muted);
}
.open-map {
  display: block;
  margin-bottom: 9px;
  text-align: left;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 700px) {
  .map-tools label {
    width: 100%;
    justify-content: space-between;
  }
  .map-tools select {
    max-width: 65%;
  }
  .catalog-tools label {
    width: 100%;
    justify-content: space-between;
  }
  .catalog-tools input {
    max-width: 65%;
  }
}

.map-zoom {
  display: flex;
  align-items: center;
  gap: 5px;
}
.map-zoom button {
  min-width: 38px;
}
.map-zoom output {
  font-size: 11px;
  color: var(--muted);
  min-width: 40px;
  text-align: center;
}
.map-tools .expand-map {
  display: inline-flex;
  align-items: center;
  border-radius: 5px;
  background: #a51c30;
  color: white;
  padding: 10px 12px;
  text-decoration: none;
  font-weight: 650;
  margin-left: 0;
}
.map-tools .expand-map[hidden] {
  display: none;
}
.map-frame {
  max-height: 70vh;
  overflow: auto;
  cursor: grab;
}
.map-frame.dragging { cursor: grabbing; user-select: none; }
.map-zoom button:disabled {
  opacity: 0.45;
  cursor: default;
}
@media (max-width: 700px) {
  .map-tools .map-zoom {
    flex-wrap: nowrap;
  }
  .map-tools .expand-map {
    font-size: 12px;
  }
}

/* One connected map per volume. Chapter navigation preserves graph geometry. */
.volume-header {
  max-width: 900px;
  margin-bottom: 24px;
}
.volume-header h1 {
  font-size: clamp(29px, 3vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1.15;
  margin: 0 0 12px;
}
.volume-header > p:not(.eyebrow) {
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.volume-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.volume-buttons button {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
  padding: 16px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  min-width: 0;
}
.volume-buttons button[aria-pressed="true"] {
  border: 2px solid #a51c30;
  background: #fcebed;
  color: #26323b;
  padding: 15px;
}
.volume-buttons button span {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.volume-buttons button strong {
  font-size: 19px;
  font-weight: 650;
}
.volume-buttons button small {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}
.volume-buttons button[aria-pressed="true"] small {
  color: #5f6b76;
}
.volume-explorer .map-header h2 {
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.volume-explorer .map-header {
  max-width: 1100px;
}
.volume-map-workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(270px, 1fr);
  gap: 24px;
  align-items: start;
}
.volume-map-workspace .map-frame {
  height: 70vh;
  min-height: 420px;
  max-height: 900px;
  padding: 18px 10px;
}
.volume-concept-reader {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 18px;
  max-height: 76vh;
  overflow: auto;
}
.volume-concept-reader p {
  font-size: 13px;
  line-height: 1.65;
}
.volume-concept-reader h2 {
  font-size: 20px;
  line-height: 1.3;
}
.volume-concept-reader .statements {
  padding-left: 16px;
}
.volume-concept-reader .statements li {
  font-size: 12px;
}
.volume-explorer > .concept-index {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 20px;
}
.chapter-context {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px;
}
#concept-map .node.chapter-focus path,
#concept-map .node.chapter-focus polygon {
  stroke: #267d91;
  stroke-width: 3;
  fill: #e5f5f6;
}
#concept-map .node.selected path,
#concept-map .node.selected polygon {
  stroke: #a51c30;
  fill: #fcebed;
}
#focus-connections {
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 5px;
  padding: 10px;
  color: var(--ink);
  cursor: pointer;
  margin-top: 12px;
}
#focus-connections:disabled {
  opacity: 0.45;
  cursor: default;
}
#concept-map {
  min-height: 100%;
}
@media (max-width: 1000px) {
  .volume-map-workspace {
    grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr);
  }
}
@media (max-width: 700px) {
  .volume-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .volume-buttons button {
    padding: 12px;
  }
  .volume-buttons button[aria-pressed="true"] {
    padding: 11px;
  }
  .volume-buttons button strong {
    font-size: 16px;
  }
  .volume-map-workspace {
    grid-template-columns: minmax(0, 1fr);
  }
  .volume-map-workspace .map-frame {
    height: 55vh;
    min-height: 300px;
  }
  .volume-concept-reader {
    max-height: none;
  }
  .volume-explorer .map-header h2 {
    font-size: 21px;
  }
}
@media print {
  .volume-buttons,
  .volume-concept-reader {
    display: none;
  }
  .volume-map-workspace {
    display: block;
  }
  .volume-map-workspace .map-frame {
    height: auto;
    max-height: none;
  }
}
/* Embedded in a chapter (2026-10-22): the chapter page supplies the framing,
   so the viewer shows only the map, search, and zoom. Volume and map choice,
   the duplicate expand link, download, and the index below the map stay on
   the standalone page, which the chapter links to. */
.embedded-map .volume-header,
.embedded-map .volume-buttons,
.embedded-map .map-header,
.embedded-map .map-tools > label:has(#map-selector),
.embedded-map .map-tools > label:has(#chapter-selector),
.embedded-map #focus-chapter,
.embedded-map #expand-map,
.embedded-map #download-map,
.embedded-map .map-caption,
.embedded-map .map-coverage,
.embedded-map .concept-index,
.embedded-map .editorial-note {
  display: none !important;
}
.embedded-map .concept-explorer {
  padding: 0;
}
.embedded-map .map-tools input[type="search"] {
  min-width: 0;
  width: 14em;
}
/* In a chapter the map takes the full width. The reader appears only after a
   concept is selected, as a panel over the map's right side with a close
   button, so no empty placeholder takes a third of the width. */
.reader-close {
  display: none;
}
.embedded-map .volume-map-workspace {
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}
.embedded-map .volume-concept-reader {
  display: none;
}
.embedded-map.has-selection .volume-concept-reader {
  display: block;
  position: absolute;
  top: 8px;
  right: 8px;
  width: min(340px, 48%);
  max-height: calc(100% - 16px);
  overflow: auto;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--line, #d9e0e5);
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  padding: 12px 14px;
  z-index: 5;
}
.embedded-map.has-selection .reader-close {
  display: block;
  position: sticky;
  top: 0;
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted, #6c757d);
}
.embedded-map #focus-connections {
  display: none;
}
@media (max-width: 600px) {
  .embedded-map.has-selection .volume-concept-reader {
    left: 8px;
    width: auto;
  }
}
body.quarto-dark.embedded-map.has-selection .volume-concept-reader {
  background: #22262b;
}
.embedded-map .volume-concept-reader h2 {
  font-size: 1.05rem;
  margin-top: 0.4rem;
}
.embedded-map .volume-concept-reader p {
  font-size: 0.85rem;
}
/* Dark book page: the map canvas, controls, and reader follow the theme.
   The map is a pre-rendered light SVG, so it is inverted with its hues kept. */
body.quarto-dark.embedded-map .map-frame {
  background: transparent;
}
body.quarto-dark.embedded-map #concept-map svg {
  filter: invert(0.88) hue-rotate(180deg);
}
body.quarto-dark.embedded-map .map-tools input,
body.quarto-dark.embedded-map .map-tools button,
body.quarto-dark.embedded-map .volume-concept-reader button {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.embedded-map .map-tools {
  padding: 0 0 8px;
  gap: 8px;
  border: 0;
}
.embedded-map .volume-map-workspace .map-frame {
  height: 440px;
  min-height: 330px;
}
body.quarto-dark .concept-explorer .map-tools a:not(.expand-map),
body.quarto-dark .concept-explorer .read-link,
body.quarto-dark .concept-explorer .statements button,
body.quarto-dark .concept-explorer .relationship-evidence a {
  color: #f0a7b2;
}

#return-overview,
.volume-concept-reader button[data-detail-map] {
  color: var(--concept-accent, #a51c30);
  background: #fcebed;
  border: 1px solid #a51c30;
  border-radius: 6px;
  padding: .65rem .85rem;
  font: inherit;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  max-width: 100%;
  margin: .35rem 0;
}
.volume-concept-reader li > small { display: block; margin: .3rem 0 .7rem; }

#concept-map .chapter-reference polygon,
#concept-map .chapter-reference path {
  stroke: #276b87;
  stroke-width: 2.6px;
  stroke-dasharray: 6 3;
}
.map-coverage { margin: 1.2rem 0; border: 1px solid #d9e0e5; border-radius: 8px; padding: .8rem 1rem; }
.map-coverage summary { cursor: pointer; font-weight: 600; }
.map-coverage details details { margin: .6rem 0; padding-left: .5rem; }
.relationship-evidence blockquote { margin: .6rem 0; padding-left: .7rem; border-left: 3px solid #88949d; }
.volume-concept-reader > #focus-connections { margin-bottom: .8rem; }
@media (max-width: 700px) {
  .concept-explorer { padding: 18px 12px 32px; box-sizing: border-box; }
}
/* Let this tool use the screen grid while keeping ordinary site prose unchanged. */
.concept-explorer { box-sizing: border-box; width: 100%; }
#quarto-document-content:has(> .concept-explorer) { grid-column: screen-start / screen-end; }