/* MUS 302 listening guides - shared styles
 * Typewriter aesthetic: Courier Prime, cooler off-white palette,
 * faded blue-grey accents. Two-size hierarchy: page title bold/uppercase
 * and slightly larger, everything else at 1em.
 */

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  --color-text: #1f2933;
  --color-text-soft: #5b6770;
  --color-bg: #f4f1ea;
  --color-accent: #36546f;
  --color-accent-soft: #e2e6eb;
  --color-border: #c5cdd6;
  --color-link: #36546f;
  --color-glossable: #7a4a3a;
  --color-glossable-soft: #ede4dc;
  --font-mono: "Courier Prime", "Courier New", Courier, monospace;
  --max-width: 820px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 17px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  color: var(--color-text-soft);
  background-color: var(--color-bg);
  line-height: 1.75;
  font-size: 0.9em;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 6rem;
}

/* Course header - same size as body */
.course-header {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
}

.course-header .course-id {
  color: var(--color-text);
  margin: 0 0 0.6rem;
}

.course-header .module-id {
  color: var(--color-text);
  margin: 0;
  font-size: 1.4em;
  line-height: 1.35;
}

/* Reading tips orientation box - shown on pages with glossary terms */
.reading-tips {
  margin: 0 0 2rem;
  padding: 0.9rem 1.1rem;
  background-color: var(--color-glossable-soft);
  border-left: 3px solid var(--color-glossable);
  border-radius: 0 2px 2px 0;
  color: var(--color-text-soft);
  line-height: 1.6;
}

.reading-tips p {
  margin: 0;
}

.reading-tips .tips-label {
  font-weight: 700;
  color: var(--color-glossable);
  margin-right: 0.4em;
}

.reading-tips .glossable-example {
  color: var(--color-glossable);
  border-bottom: 1px dotted var(--color-glossable);
}

/* Page title - the only larger, bolder element on the page */
h1.track-title {
  font-family: var(--font-mono);
  font-size: 1.4em;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0 0 0.5rem;
  color: var(--color-text);
}

h1.track-title .track-number {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: none;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

/* Section headings - same size as body, slate grey */
h2 {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text);
  margin: 3rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-border);
}

h3 {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--color-text);
  margin: 2rem 0 0.75rem;
}

/* Body paragraphs - kept at high-contrast for readability */
p {
  margin: 0 0 1.1rem;
}

/* Listen on YouTube (link instead of embed) */
.video-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
  padding: 1rem 1.25rem;
  background-color: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  text-decoration: none;
  color: var(--color-text-soft);
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.video-link:hover,
.video-link:focus {
  background-color: #d4dae2;
  outline: none;
}

.video-link:active {
  transform: translateY(1px);
}

.video-link .play-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.9rem;
}

.video-link .play-icon::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 0.55rem solid transparent;
  border-bottom: 0.55rem solid transparent;
  border-left: 0.85rem solid #fff;
  margin-left: 0.2rem;
}

.video-link .video-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.video-link .video-action {
  color: var(--color-text);
  font-weight: 700;
}

.video-link .video-title {
  color: var(--color-text-soft);
  margin-top: 0.2rem;
}

.video-link .video-host {
  color: var(--color-text);
  margin-top: 0.25rem;
}

/* Photos */
figure {
  margin: 2rem 0;
  padding: 0;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

figcaption {
  color: var(--color-text);
  margin-top: 0.6rem;
  line-height: 1.6;
}

/* A note sitting below a figcaption, used to flag a piece of cultural
   or historical context the diagram is making concrete. Visually
   distinct from the figcaption (warm-brown left border tied to the
   palette's --color-glossable family) so the reader sees it as the
   author speaking directly rather than as a description of the
   figure. */
.figure-note {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--color-glossable-soft);
  border-left: 3px solid var(--color-glossable);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 0.95em;
}

/* An in-prose callout, used between body paragraphs to flag an
   exception, a counter-example, or a piece of context that lifts
   out of the surrounding flow. Same visual treatment as
   .figure-note (warm-brown left border, soft fill); semantically
   distinct because it stands alone rather than commenting on a
   figure. The .callout-lead opening clause provides a soft heading. */
.callout {
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  background: var(--color-glossable-soft);
  border-left: 3px solid var(--color-glossable);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 0.95em;
}

.callout-lead {
  font-weight: bold;
}

/* Glossable terms */
.glossable {
  border-bottom: 1px dotted var(--color-glossable);
  cursor: pointer;
  color: var(--color-glossable);
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  font: inherit;
  padding: 0;
  display: inline;
  text-align: left;
}

.glossable:hover,
.glossable:focus {
  color: var(--color-glossable);
  border-bottom-color: var(--color-glossable);
  outline: none;
  background-color: var(--color-glossable-soft);
}

.glossable[aria-expanded="true"] {
  background-color: var(--color-glossable-soft);
  color: var(--color-glossable);
}

/* Glossary definition popup */
.gloss-definition {
  display: block;
  margin: 0.6rem 0 1.1rem;
  padding: 0.9rem 1.1rem;
  background-color: var(--color-glossable-soft);
  border-left: 3px solid var(--color-glossable);
  line-height: 1.7;
  border-radius: 0 2px 2px 0;
  color: var(--color-text-soft);
}

.gloss-definition .gloss-term {
  font-weight: 700;
  color: var(--color-glossable);
}

.gloss-definition .gloss-text {
  color: var(--color-text-soft);
}

/* Reflective question */
.reflective-question {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background-color: var(--color-accent-soft);
  border-radius: 2px;
}

.reflective-question h3 {
  margin-top: 0;
}

.reflective-question p:last-child {
  margin-bottom: 0;
}

/* Worked example (used in the methodology reading) */
.worked-example {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background-color: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 2px 2px 0;
}

.worked-example p:last-child {
  margin-bottom: 0;
}

.worked-example .label {
  font-weight: 700;
  color: var(--color-text);
}

/* Inline diagrams (SVG figures). Two sizing variants depending on
   the diagram's aspect ratio:

   - .diagram (default) is for horizontal/landscape diagrams (wider
     than tall). Caps at 720px so 720-wide source SVGs render at
     native size and 600-wide source SVGs scale up to fill the column.
     Used in Modules 2 and 4 framing readings, the listening guides,
     and Module 1's how-to-listen demonstration figures.
   - .diagram-tall is for vertical/portrait diagrams (taller than
     wide). Caps at 440px so the diagram does not dominate the page
     when it is already long. Used in Module 5's four Thread diagrams
     and the Jacobson three-periods diagram. */
figure svg.diagram {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: 0 auto;
}

figure svg.diagram.diagram-tall {
  max-width: 440px;
}

/* One-off override for the Module 5 Track 4 'Where Switched-On Bach
   sits in Module 5' genealogy diagram. Marked .diagram-tall because
   it is overall taller than wide, but its content (four side-by-side
   head-row boxes plus several full-width rows below) needs more
   horizontal room than the .diagram-tall 440px cap allows. The
   diagram's source viewBox is 760 wide, so capping at 760px lets it
   render at its native width on desktop and scale down on narrow
   screens. Do not generalize this rule; it is specific to this one
   diagram. */
figure svg.diagram.diagram-tall.diagram-genealogy {
  max-width: 760px;
}

/* Module contents list (used on module landing pages) */
.module-contents {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2.5rem;
  counter-reset: module-item;
}

.module-contents > li {
  margin: 0 0 1.5rem;
  padding: 0;
}

.module-contents > li > a,
.module-contents > li > span {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 0.25rem;
}

.module-contents > li > a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

.module-contents > li > a:hover {
  background-color: var(--color-accent-soft);
}

.module-contents .item-label {
  font-weight: 700;
  color: var(--color-text);
  margin-right: 0.4em;
}

.module-contents > li > p {
  margin: 0.25rem 0 0;
  color: var(--color-text-soft);
}

/* Syllabus metadata block (units, breadth, etc.) */
.syllabus-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4em 1.2em;
  margin: 1.5rem 0 2.5rem;
  padding: 1rem 1.25rem;
  background-color: var(--color-accent-soft);
  border-radius: 2px;
}

.syllabus-meta dt {
  font-weight: 700;
  color: var(--color-text);
}

.syllabus-meta dd {
  margin: 0;
  color: var(--color-text-soft);
}

/* Project stages, grading, SLO, and materials lists (used in syllabus) */
.project-stages,
.grade-breakdown,
.slo-list,
.materials-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
}

.project-stages > li,
.grade-breakdown > li,
.slo-list > li,
.materials-list > li {
  margin: 0 0 0.6rem;
  padding-left: 1.5em;
  position: relative;
  color: var(--color-text-soft);
}

.project-stages > li::before,
.grade-breakdown > li::before,
.slo-list > li::before,
.materials-list > li::before {
  content: "·";
  position: absolute;
  left: 0.4em;
  color: var(--color-text);
  font-weight: 700;
}

.project-stages strong,
.grade-breakdown strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Schedule table (used in syllabus) */
.schedule {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
}

.schedule th,
.schedule td {
  text-align: left;
  padding: 0.6rem 1rem 0.6rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.schedule th {
  color: var(--color-text);
  font-weight: 700;
  border-bottom: 2px solid var(--color-text);
}

.schedule td {
  color: var(--color-text-soft);
}

.schedule td:first-child {
  white-space: nowrap;
  color: var(--color-text);
  font-weight: 700;
  width: max-content;
  padding-right: 2rem;
}

/* Labels-table variant (Module 2 and Module 3 record-label tables).
   The first column carries a label name plus a city/date metadata
   line; the metadata wraps into a smaller, lighter span. The
   first column is allowed to wrap and given a constrained width
   so the other two columns get more room. */
.schedule.labels-table td:first-child {
  white-space: normal;
  width: auto;
  max-width: 14rem;
}

.schedule.labels-table .meta {
  display: block;
  font-weight: 400;
  font-size: 0.85em;
  color: var(--color-text-soft);
  margin-top: 0.15rem;
}

/* Sources list at end */
.sources {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-soft);
}

.sources h2 {
  border: none;
  margin-bottom: 0.75rem;
}

.sources p {
  margin-bottom: 0.7rem;
}

/* Site footer - edge-to-edge dark band at the bottom of each page.
 * The .site-footer element is a sibling of <main>, not a child, so it can
 * span the full viewport. The .site-footer-inner wrapper holds it to the
 * column width so the text doesn't sprawl on wide screens. */
.site-footer {
  margin-top: 4rem;
  background-color: var(--color-text);
  color: var(--color-bg);
  padding: 2rem 1.5rem;
}

.site-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-footer p {
  margin: 0 0 0.4rem;
}

.site-footer p:last-child {
  margin-bottom: 0;
}

.site-footer a {
  color: var(--color-bg);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  html {
    font-size: 16px;
  }

  main {
    padding: 2rem 1.25rem 4rem;
  }

  h1.track-title {
    font-size: 1.25em;
  }

  .course-header .module-id {
    font-size: 1.25em;
  }
}