/*
 * BJC book — the content vocabulary.
 *
 * The book's own markup: the box kinds (<box kind="…"> renders as
 * <div class="…">, or <details class="…"> for the collapsible kinds), the
 * asides, tasks, images, tables, reveals, video and the builder's prev/next
 * nav. This is bjc.scss's rules section (the fenced-div vocabulary of the
 * old Quarto site, verbatim as class names) merged by topic with the
 * additions the XML build needed. Colors come from tokens.css; the
 * box/aside kinds themselves are declared in config.ts (boxKinds /
 * asideKinds) — adding one means a rule here too.
 */

/* -- hidden authoring elements --------------------------------------------- */

.todo,
.comment,
.commentBig,
.ap-standard {
  display: none;
}

/* The builder's contents page emits a "Contents" heading; the old BJC root
   had none — the intro content leads directly. */
section.book > h1.ptx-toc-heading {
  display: none;
}

/* Unit/lab pages navigate via the sidebar, as the old site did — the
   builder's summary-links lists stay unrendered. */
#bjc-content nav.summary-links {
  display: none;
}

/* The builder's derived paragraphs (p-derived-*) wrap bare list-item runs
   that the old tight lists rendered without any <p>; keep them marginless
   so only authored paragraphs space out. */
#bjc-content p[id^="p-derived-"] {
  margin-top: 0;
  margin-bottom: 0;
}

/* -- boxes ----------------------------------------------------------------- */

/* The padded block boxes. */
.forYouToDo,
.ifTime,
.dialogue,
.takeItFurther,
.takeNote,
.endnote,
.narrower,
.narrowblue,
.narrowpurple,
.time,
.learn {
  margin-top: 0.5em;
  margin-bottom: 1em;
  padding: 1em;
}

/* The thick-left-bar boxes: the green For You To Do, the blue If There Is
   Time and the purple Take It Further family. */
.forYouToDo,
.ifTime,
.takeItFurther,
.takeItTeaser,
.takeItTeased {
  border-style: solid;
  border-width: 2px;
  border-left-width: 20px;
  border-radius: 0.5rem;
}

.forYouToDo {
  margin-bottom: 0.5em;
  border-color: var(--bjc-for-you-to-do);
}

.ifTime {
  margin-right: auto;
  margin-bottom: 0.5em;
  margin-left: auto;
  background-color: var(--bjc-if-time-bg);
  border-color: var(--bjc-if-time);
}

.takeItFurther,
.takeItTeaser,
.takeItTeased {
  margin-right: auto;
  margin-left: auto;
  background-color: var(--bjc-take-it-bg);
  border-color: var(--bjc-take-it);
}

/* A teaser (always-visible preview) over its teased collapsible: the two
   read as one box, so the seam between them has no border or rounding. */
.takeItTeaser {
  padding: 1em 1em 0;
  border-bottom-width: 0;
  border-radius: 0.5rem 0.5rem 0 0;
}

.takeItTeaser p {
  margin-bottom: 0;
}

.takeItTeased {
  padding: 1em;
  border-top-width: 0;
  border-radius: 0 0 0.5rem 0.5rem;
}

.takeItFurther ol ol li,
.takeItTeased ol ol li {
  list-style: lower-roman;
}

.learn {
  background-color: var(--bjc-learn-bg);
}

.takeNote {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  border: 10px solid var(--bjc-note);
}

/* Thinking Out Loud: a labelled dialogue whose turns (<div class="turn">)
   hang-indent like a script. */
.dialogue {
  border: 2px solid var(--bjc-dialogue);
}

.dialogue::before {
  content: "Thinking Out Loud";
}

.dialogue > div:not(.sidenote):not(.sidenoteBig):not(.comment):not(.commentBig):not(.todo):not(.endnote):not(.narrower):not(.narrowblue):not(.narrowpurple):not(.vocab) {
  padding: 5px 0 5px 6em;
  text-indent: -4em;
}

.dialogue > div:not(.takeNote) > img.inline {
  height: 28px;
  padding-top: 0;
  padding-bottom: 0;
}

/* A stage direction in a dialogue. */
.stagedir {
  padding: 10px 0;
  font-style: italic;
  text-align: center;
  text-indent: 0;
}

/* The highlighted-important callout inside a box. */
.highlight-important {
  padding: 0.5em;
  font-weight: bold;
  background-color: var(--bjc-highlight-bg);
  border: 2px solid var(--bjc-highlight-border);
}

/* -- the collapsible boxes (ifTime, takeItFurther, takeItTeased) ----------- */

/* <details> with the box's class; the <summary> is the label the old
   Bootstrap-collapse toggle showed (bold, link-colored), no marker. */
details.ifTime > summary,
details.takeItFurther > summary,
details.takeItTeased > summary,
details.reveal > summary {
  cursor: pointer;
  list-style: none;
  font-weight: bold;
  color: var(--bjc-link);
}

details.ifTime > summary::-webkit-details-marker,
details.takeItFurther > summary::-webkit-details-marker,
details.takeItTeased > summary::-webkit-details-marker,
details.reveal > summary::-webkit-details-marker {
  display: none;
}

details[open] > summary {
  margin-bottom: 0.5rem;
}

/* -- reveals --------------------------------------------------------------- */

/* "Click for a video…": a <details class="reveal"> whose summary reads as
   prose; only the toggle text itself reads as a link (the summary can
   carry an icon pill and lead-in text on the same line). */
details.reveal > summary {
  font-weight: normal;
  color: inherit;
}

details.reveal .reveal-label {
  color: var(--bjc-link);
  text-decoration: underline;
}

/* -- asides ---------------------------------------------------------------- */

.endnote,
.sidenote,
.sidenoteBig,
.narrower,
.narrowblue,
.narrowpurple {
  border-style: solid;
  border-width: 0;
}

/* The yellow notes: sidenotes float right in the margin, endnotes sit
   full-width-ish under the step. */
.endnote,
.sidenote,
.sidenoteBig {
  background-color: var(--bjc-sidenote-bg);
  border-color: var(--bjc-sidenote);
}

.endnote,
.narrower,
.narrowblue,
.narrowpurple {
  margin-left: auto;
}

.narrower,
.narrowblue,
.narrowpurple {
  margin-right: auto;
}

.sidenote,
.sidenoteBig {
  float: right;
  clear: both;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 1em;
  padding: 10px;
  text-indent: 0;
}

.sidenote {
  width: 20%;
}

.sidenoteBig {
  width: 40%;
}

/* The colored-border narrow boxes. */
.narrower {
  border: 3px solid var(--bjc-for-you-to-do);
}

.narrowblue {
  border: 3px solid var(--bjc-if-time);
}

.narrowpurple {
  border: 3px solid var(--bjc-take-it);
}

/* The standards-map's note (Quarto's simple callout-note). */
.note {
  margin-bottom: 1rem;
  padding: 0.4em 0.7em;
  font-size: 0.9rem;
  border-top: 1px solid var(--bjc-border);
  border-right: 1px solid var(--bjc-border);
  border-bottom: 1px solid var(--bjc-border);
  border-left: 5px solid var(--bjc-blue);
}

/* -- vocabulary, exam and at-work boxes ------------------------------------ */

.atwork {
  background-color: var(--bjc-atwork-bg);
}

.atworkFullWidth {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 20px;
  background-color: var(--bjc-atwork-bg);
}

.vocab,
.vocabBig,
.exam,
.examBig,
.vocabFullWidth,
.examFullWidth,
.vocabSummary,
.examSummary {
  background-color: var(--bjc-define-bg);
}

/* The floating ones: a small or big gray box in the right margin. */
.vocab,
.vocabBig,
.exam,
.examBig,
.atwork {
  float: right;
  clear: both;
  margin-right: 1rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
  padding: 10px;
  font-size: 0.9em;
  text-indent: 0;
}

.vocab,
.exam {
  width: 20%;
}

.vocabBig,
.examBig,
.atwork {
  width: 40%;
}

/* The full-width ones: an indented gray block. */
.vocabFullWidth,
.examFullWidth,
.vocabSummary,
.examSummary {
  margin-top: 1rem;
  margin-bottom: 1rem;
  margin-left: auto;
  padding: 20px;
  text-indent: 0;
}

.vocabSummary,
.examSummary {
  margin-right: auto;
}

/* The boxes' labels. */
.vocab::before,
.vocabBig::before,
.vocabSummary::before {
  content: "Vocabulary";
  font-weight: bold;
  line-height: 1.5em;
}

/* vocabFullWidth renders the label inline with the vocab term, so it reads
   "Vocabulary: <term>" on one line rather than "Vocabulary" above the term. */
.vocabFullWidth::before {
  content: "Vocabulary: ";
  font-weight: bold;
  line-height: 1.5em;
}

.vocabFullWidth > p:first-child {
  display: inline;
}

.exam::before,
.examBig::before,
.examFullWidth::before,
.examSummary::before {
  content: "On the AP Exam...";
  font-weight: bold;
  line-height: 1.5em;
}

.atwork::before {
  content: "Computer Scientists @ Work";
  font-weight: bold;
  line-height: 1.5em;
}

/* -- tasks (the numbered "for you to do" steps) --------------------------- */

/* Each task is its own one-item ol (numbered via @start); adjacent tasks
   read as one continuous list. */
ol.tasks {
  margin-bottom: 0;
}

ol.tasks > li {
  margin-bottom: 1rem;
}

ol.horizontal {
  display: flex !important;
  flex-wrap: wrap;
}

ol.horizontal li {
  margin-right: 30px;
  list-style-type: lower-alpha;
}

/* The checklists (<ul checklist="yes">, the Create Task guide). */
ul.task-list {
  padding-left: 1em;
  list-style: none;
}

/* Pseudocode paragraphs (the cheat sheet's comparison tables). */
p,
div.pseudop {
  margin-top: 8px;
}

/* -- images ---------------------------------------------------------------- */

/* A Snap! block or icon in the run of text. */
img.inline {
  display: inline;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

/* placement="indent" (the old ms-4 utility). */
img.indent {
  margin-left: 1.5rem;
}

/* The stop-sign / green-flag button screenshots inline in prose. */
img.button {
  height: 1.6rem;
}

/* Gifffer's click-to-play animations (vendor/_static/gifffer). */
img[data-gifffer] {
  padding: 0 !important;
}

img.buffer {
  padding: 6px;
}

/* Unsized images cap at the column: the Quarto render stamped img-fluid on
   every markdown-authored image; the conversion's images carry no class.
   Give the same cap to any image without its own sizing (attributes or
   inline style), so full-resolution photos (the Difference Engine pair,
   the abacus) can't blow out the content column. Sized images are
   excluded so height/width attrs keep working (the art-gallery
   thumbnails). */
#bjc-content img:not([height]):not([width]):not([style]) {
  max-width: 100%;
  height: auto;
}

/* A captioned image floated into the margin. */
.captioned {
  float: right;
  width: 20%;
  margin: 0 20px 15px 15px;
}

/* -- image-map hotspots (Unit 6's labelled computer) ----------------------- */

/* Each numbered region is a .hoverinfo holding the <area> and a hidden
   <p> that pops up on hover. */
.hoverinfo {
  position: absolute;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  /* While a popup is open, its layout box (the p's unshifted
     position:relative box, which sizes the invisible absolute div) sits
     over the image's other numbered regions — so moving directly from one
     number to the next kept the first popup open and never reached the
     second area. Make the popup machinery mouse-transparent: hover state
     comes only from the image-map areas themselves. */
  pointer-events: none;
}

.hoverinfo area {
  pointer-events: auto;
}

.hoverinfo p {
  position: relative;
  top: 30px;
  left: 400px;
  display: none;
  padding: 20px;
  color: var(--bjc-hoverinfo-color);
  border: 1px solid;
}

.hoverinfo:hover p {
  display: block;
  z-index: 1;
  max-width: 400px;
  background-color: var(--bjc-hoverinfo-bg);
}

/* -- saveAs boxes: the project name overlays the dialog screenshot -------- */

/* The name composites into the save-this-as.png screenshot's blank
   filename field. The conversion carries the name as <var>. */
div.saveAs img {
  position: relative;
  z-index: 1;
}

.saveAs var {
  position: absolute;
  z-index: 2;
  margin-left: 182px;
  padding-top: 1.05em;
  font-style: normal;
  color: var(--bjc-saveas-color);
}

div.newProject span.text {
  position: absolute;
  z-index: 2;
  margin-left: 323px;
  padding-top: 0.65em;
  color: var(--bjc-saveas-color);
}

/* -- tables ---------------------------------------------------------------- */

/* The old site's tables rendered with Bootstrap's .table (Quarto adds the
   class); the builder emits table.tabular, so give it the same basics. */
#bjc-content table.tabular {
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bjc-border);
  border-collapse: collapse;
  caption-side: top;
}

#bjc-content table.tabular > * > * > td,
#bjc-content table.tabular > * > * > th,
#bjc-content table.tabular > tr > td,
#bjc-content table.tabular > tr > th {
  padding: 0.5rem 0.5rem;
  vertical-align: top;
  border-bottom: 1px solid var(--bjc-border);
}

#bjc-content table.tabular > tr:first-child > th {
  border-bottom-width: 2px;
}

/* The emitter's per-cell alignment classes (halign c/r, valign m/b). */
#bjc-content table.tabular td.c,
#bjc-content table.tabular th.c {
  text-align: center;
}

#bjc-content table.tabular td.r,
#bjc-content table.tabular th.r {
  text-align: right;
}

#bjc-content table.tabular td.m,
#bjc-content table.tabular th.m {
  vertical-align: middle;
}

#bjc-content table.tabular td.b,
#bjc-content table.tabular th.b {
  vertical-align: bottom;
}

/* PreTeXt border classes on tabular cells (the emitter's b/r/l/t levels
   from the tabular's border attrs) — the snap-cheat-sheet's fully-ruled
   reference tables (the old .bordered-table grid look). */
#bjc-content table.tabular > * > tr > td.t1,
#bjc-content table.tabular > * > tr > th.t1,
#bjc-content table.tabular > tr > td.t1,
#bjc-content table.tabular > tr > th.t1 {
  border-top: 1px solid var(--bjc-border);
}

#bjc-content table.tabular > * > tr > td.l1,
#bjc-content table.tabular > * > tr > th.l1,
#bjc-content table.tabular > tr > td.l1,
#bjc-content table.tabular > tr > th.l1 {
  border-left: 1px solid var(--bjc-border);
}

#bjc-content table.tabular > * > tr > td.r1,
#bjc-content table.tabular > * > tr > th.r1,
#bjc-content table.tabular > tr > td.r1,
#bjc-content table.tabular > tr > th.r1 {
  border-right: 1px solid var(--bjc-border);
}

/* Inline code in table cells doesn't wrap mid-expression (the
   cheat-sheet's pseudocode column). */
#bjc-content table.tabular code {
  white-space: nowrap;
}

/* Snap!-vs-pseudocode comparison tables (a tabular inside an "On the AP
   Exam" box): the Snap! block images render at a uniform scale — the
   first column hugs them — and the pseudocode column takes the rest,
   wrapping its code instead of squeezing the images (auto table layout
   would otherwise shrink each block independently to make room for the
   unwrappable code, leaving the wide ones tiny). */
#bjc-content .examFullWidth table.tabular code {
  white-space: pre-wrap;
}

#bjc-content .examFullWidth table.tabular td:first-child {
  width: 1%;
}

#bjc-content .examFullWidth table.tabular td:first-child img {
  max-width: none;
}

/* The content column alone is too narrow for the widest block plus a
   readable pseudocode column, so a box holding one of these tables
   bleeds into the empty sidenote/margin column to its right (~230px of
   room at every width from tablet up). */
@media (min-width: 768px) {
  #bjc-content .examFullWidth:has(table.tabular) {
    width: auto;
    margin-right: -180px;
  }
}

/* Where the box still isn't wide enough for the blocks at natural size,
   shrink them all by the same stepped factor — same size at any given
   window width — scrolling sideways only as a last resort. The step
   bounds come from the widest block (640px natural) plus the pseudocode
   column's minimum (~230px). */
#bjc-content .examFullWidth .tabular-box {
  overflow-x: auto;
  container-type: inline-size;
}

@container (max-width: 870px) {
  .examFullWidth table.tabular td:first-child img {
    zoom: 0.8;
  }
}

@container (max-width: 750px) {
  .examFullWidth table.tabular td:first-child img {
    zoom: 0.63;
  }
}

@container (max-width: 630px) {
  .examFullWidth table.tabular td:first-child img {
    zoom: 0.5;
  }
}

/* The hand-classed tables from the old site (truth tables, remainders,
   the grid tables). */
table.standard th {
  white-space: nowrap;
}

table.nowrap td {
  white-space: nowrap;
}

table.center td {
  text-align: center;
}

table.truth {
  display: inline-block;
  margin: 10px 0 10px 5%;
  background-color: var(--bjc-truth-bg);
}

table.truth tr th {
  font-weight: bold;
  text-align: center;
}

table.truth tr td {
  padding: 5px;
  text-align: center;
  border: 1px solid var(--bjc-truth-border);
}

table .pre {
  line-height: 1em;
}

table.remainders {
  float: left;
  margin-right: 100px;
}

.borderless-table,
.bordered-table {
  display: grid;
}

.borderless-table > .header,
.bordered-table > .header {
  font-weight: bold;
}

.borderless-table {
  border: 0;
}

.bordered-table {
  border: solid 1px var(--bjc-border);
}

.bordered-table > div {
  padding: 10px;
  border: solid 1px var(--bjc-border);
}

.bordered,
.bordered thead,
.bordered tbody,
.bordered tfoot,
.bordered tr,
.bordered td,
.bordered th {
  border-color: black;
  border-width: 2px;
}

.two-col {
  grid-template-columns: auto auto;
}

.three-col {
  grid-template-columns: auto auto auto;
}

.four-col {
  grid-template-columns: auto auto auto auto;
}

/* -- video ----------------------------------------------------------------- */

/* The builder's <video> renders a .video-box whose height comes from a
   padding-top percentage (the 16:9 aspect box); the iframe is absolutely
   positioned to fill it (without these the box has zero content height
   and the video collapses). */
#bjc-content .video-box {
  position: relative;
  height: 0;
  margin-bottom: 1rem;
}

#bjc-content .video-box > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -- links ----------------------------------------------------------------- */

/* An external link gets the box-arrow glyph after its text (bi-box-arrow-
   up-right), in the link's own color. */
a.external::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-left: 0.2em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/><path fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/><path fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/></svg>") center / contain no-repeat;
}

/* -- prev/next (the builder's tree buttons) -------------------------------- */

.bjc-page-navigation {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bjc-border);
}

.bjc-page-navigation .up-button {
  display: none;
}

.bjc-page-navigation a.button {
  text-decoration: none;
}

.bjc-page-navigation .button .icon {
  display: none; /* material-symbols codepoints; we don't ship that font */
}

.bjc-page-navigation .button.disabled {
  visibility: hidden;
}

.bjc-page-navigation .next-button .name::after {
  content: " →";
}

.bjc-page-navigation .previous-button .name::before {
  content: "← ";
}