/* What Quartz has no style for. Colours are Quartz's own variables, so dark mode follows. */

/* Quartz lists a folder's pages alphabetically under its index; the chapter pages list them in the book's order. */
.page-listing { display: none; }
.pm-meta { font-family: var(--headerFont); color: var(--darkgray); margin: 0 0 1rem; }
@media (max-width: 800px) { .page-title { font-size: 1.35rem; line-height: 1.15; } }
/* Phones: Quartz indents tables 1rem each side, sets 75px columns and 2rem rows, which pushes a 3-column table past the edge. */
@media (max-width: 800px) {
  .table-container > table { margin: 1rem 0; font-size: 0.9rem; }
  .table-container > table > * { line-height: 1.4rem; }
  .table-container > table th, .table-container > table td { min-width: 3.5rem; padding: 0.4rem 0.35rem; }
}
/* A table still too wide for the screen: physio.js marks it, and each row becomes a card. */
.table-container > .pm-stack, .pm-stack tbody, .pm-stack tr, .table-container > .pm-stack td { display: block; }
.table-container > .pm-stack { padding: 0; }
.pm-stack thead, .table-container > .pm-stack td:empty { display: none; }
.table-container > .pm-stack tr { margin: 0 0 0.75rem; padding: 0.4rem 0.75rem; border: 1px solid var(--lightgray); border-radius: 8px; }
.table-container > .pm-stack td { min-width: 0; padding: 0.15rem 0; }
.table-container > .pm-stack td:first-child { font-weight: 600; }
.pm-stack td[data-label]::before { content: attr(data-label) ": "; color: var(--darkgray); font-weight: 600; }
.search > .search-button > p { color: var(--darkgray); }

/* Diagrams: drawn in figures/, coloured here. */
.pm-fig { margin: 1.5rem 0; }
.pm-fig svg { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; }
.pm-fig path { fill: none; stroke-width: 2; }
.pm-fig .ax { stroke: var(--darkgray); stroke-width: 1.2; }
.pm-fig .c1 { stroke: var(--dark); }
.pm-fig .c2 { stroke: var(--secondary); }
.pm-fig .c3 { stroke: var(--tertiary); }
.pm-fig .dash { stroke: var(--gray); stroke-width: 1; stroke-dasharray: 4 3; }
.pm-fig circle { fill: var(--dark); }
.pm-fig text { fill: var(--darkgray); font-family: var(--headerFont); font-size: 11px; }
.pm-fig .t1 { fill: var(--dark); }
.pm-fig .t2 { fill: var(--secondary); }
.pm-fig .t3 { fill: var(--tertiary); }
.pm-fig figcaption { text-align: center; font-size: 0.9rem; color: var(--darkgray); }

/* Quizzes. min-width: 0, because a fieldset is otherwise as wide as its longest line and pushes a phone sideways. */
.pq-quiz fieldset { min-width: 0; margin: 0 0 1.25rem; padding: 0.5rem 0.75rem 0.75rem; border: 1px solid var(--lightgray); border-radius: 8px; }
.pq-quiz legend { padding: 0 0.25rem; font-weight: 600; }
.pq-quiz label { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; margin: 0.4rem 0 0; padding: 0.35rem 0.75rem; border: 1px solid var(--lightgray); border-radius: 6px; cursor: pointer; }
.pq-quiz label:has(input:checked) { border-color: var(--secondary); background: var(--highlight); }
.pq-quiz input { flex: none; margin: 0; accent-color: var(--secondary); }
.pq-quiz input:disabled, .pq-quiz label:has(input:disabled) { cursor: default; }
.pq-quiz button, .pq-reset { min-height: 44px; padding: 0 1.5rem; border: 1px solid var(--secondary); border-radius: 999px; background: var(--secondary); color: var(--light); font: inherit; font-weight: 600; cursor: pointer; }
.pq-reset { background: none; color: var(--secondary); }
.pq-saved { color: var(--secondary); font-weight: 600; }

.pq-prev { margin: 0 0 1.5rem; padding: 0 1rem; border: 1px solid var(--lightgray); border-radius: 8px; }
.pq-prev summary { padding: 0.75rem 0; font-family: var(--headerFont); font-weight: 600; cursor: pointer; }
.pq-prev ol { padding-left: 1.25rem; }
.pq-prev li { margin: 0 0 1rem; }
.pq-prev li p { margin: 0.2rem 0; }
.pq-qtext { font-weight: 600; }
.pq-right .pq-pick { color: var(--secondary); }
.pq-wrong .pq-pick { color: var(--tertiary); }
.pq-why { color: var(--darkgray); }
/* Full width, so without Quartz's 1rem table indent, which would push it 2rem past the column. */
.table-container > .pq-board { width: 100%; margin: 1rem 0; }