/* =======================================================================
   composition: lessons stylesheet
   Student-facing handouts and browser tools for composition,
   orchestration, and notation.

   Identity: a typed analytical page. Soft near-white paper, cool steel-blue
   ink for marks and links, near-black ink for text, everything set in
   Courier Prime so the page reads like a composer's typed program note or
   score analysis rather than a screen.

   Shares the custom-property NAMES used across the csuebmusic repos
   (--bg, --ink, --accent, the ink and rule families) so diagrams and
   widgets ported from another repo re-skin themselves here with no edits.
   Two deliberate departures from the audio repos: this repo is mono-first,
   so --serif and --mono both resolve to Courier Prime, and the chrome is
   quiet and lowercase rather than the terminal styling of music-production.
   A ported widget that leaned on a sans body, or on caps for contrast, will
   read flatter here; weight, size, and color carry the hierarchy instead.

   Domain-specific diagram color families (instrument families for
   orchestration and register maps, section colors for form diagrams, voice
   colors for texture and process diagrams) are added to this file when the
   first diagram that needs them lands, the way the audio repos grew their
   meter and cable families. Always reference colors by variable name; never
   hardcode hex in a component.
   ======================================================================= */

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

:root {
  /* Core surface + ink. Soft near-white paper, cool near-black ink. */
  --bg:        #f7f7f4;   /* page background */
  --bg-alt:    #ecece7;   /* lifted panel: callouts, figures, tables */
  --ink:       #1d2127;   /* cool near-black, body text */
  --ink-soft:  #4c515a;   /* slate, secondary text */
  --ink-faint: #838994;   /* light slate, captions, footer, grid labels */
  --rule:      #d2d1cb;   /* panel borders, axes */
  --rule-soft: #e6e5e0;   /* faint grid lines, section rules */

  /* Steel blue: the one accent, a fountain-pen ink for marks and links. */
  --accent:      #345b7d;
  --accent-soft: #23415c;   /* darker steel for emphasis text on the page */

  /* Caution panel. */
  --warn-bg:  #f2ede3;
  --warn-ink: #6b4a22;

  /* Mono-first: both names resolve to the typewriter face so ported
     components render in this repo's identity. */
  --serif: 'Courier Prime', 'Courier New', Courier, monospace;
  --mono:  'Courier Prime', 'Courier New', Courier, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ----- Layout ---------------------------------------------------------- */

body {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

/* ----- Header: a typed slug line --------------------------------------- */

.handout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0 0.7rem;
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.handout-header .course { color: var(--accent); }

/* ----- Title block ----------------------------------------------------- */

.title-block { margin-bottom: 2rem; }

.module-tag {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

h1 {
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  color: var(--ink);
}

.subtitle {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.byline {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  margin-top: 0.7rem;
}

/* ----- Lede ------------------------------------------------------------ */

.lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 1.5rem auto 2rem;
}
.lede strong { color: var(--accent-soft); font-weight: 700; }

/* ----- Body type ------------------------------------------------------- */

p { margin: 1.15rem auto; }

/* Section head: a hairline rule stands in for a typed page break. */
h2 {
  font-weight: 700;
  font-size: 1.25rem;
  margin: 2.8rem auto 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-soft);
  color: var(--ink);
}

/* Sub-head / label, carried in the steel accent. */
h3 {
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin: 2rem auto 0.8rem;
  color: var(--accent);
}

strong { color: var(--accent-soft); font-weight: 700; }
em { color: var(--ink); font-style: italic; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent-soft); }

ol, ul { margin: 1.15rem auto; padding-left: 1.6rem; }
li { margin: 0.5rem 0; }
li::marker { color: var(--accent); }

/* Numbered step list: leading-zero counters in a boxed chip. */
ol.steps {
  list-style: none;
  counter-reset: step;
  padding-left: 0;
}
ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1rem;
  min-height: 1.6rem;
}
ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 0.1em 0.45em;
  border-radius: 2px;
  min-width: 2rem;
  text-align: center;
}

/* ----- Rules ----------------------------------------------------------- */

hr {
  border: none;
  border-top: 1px dashed var(--rule);
  margin: 2.5rem auto;
}
hr.dotted {
  border-top: 1px dotted var(--rule);
  margin: 2rem auto;
}

/* ----- Callout: a bracketed panel -------------------------------------- */

.callout {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.3rem;
  margin: 1.9rem auto;
}
.callout-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.callout-label::before { content: "[ "; }
.callout-label::after  { content: " ]"; }
.callout p { margin: 0.5rem 0; }
.callout p:first-of-type { margin-top: 0; }
.callout p:last-child { margin-bottom: 0; }

/* ----- Caution panel --------------------------------------------------- */

.warn {
  background: var(--warn-bg);
  border: 1px solid var(--warn-ink);
  border-left: 3px solid var(--warn-ink);
  color: var(--warn-ink);
  padding: 1.1rem 1.3rem;
  margin: 1.9rem auto;
}
.warn .callout-label,
.warn-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--warn-ink);
  margin-bottom: 0.55rem;
}
.warn .callout-label::before,
.warn-label::before { content: "[ ! "; }
.warn .callout-label::after,
.warn-label::after  { content: " ]"; }
.warn p { margin: 0.5rem 0; }
.warn p:last-child { margin-bottom: 0; }

/* ----- Vocab: definition list ------------------------------------------ */

dl.vocab {
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  padding: 1.3rem 1.4rem;
  margin: 2rem auto;
}
dl.vocab dt {
  font-weight: 700;
  color: var(--accent);
  margin-top: 1.1rem;
  font-size: 0.95rem;
}
dl.vocab dt:first-child { margin-top: 0; }
dl.vocab dd {
  margin: 0.35rem 0 0;
  padding-left: 1.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* ----- Figures and diagrams -------------------------------------------- */

figure {
  margin: 2.2rem auto;
  text-align: center;
}
figure svg {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
}
figcaption {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  margin-top: 0.75rem;
  line-height: 1.5;
}
figure.form-diagram { margin: 1.75rem auto; }

/* Score examples: an image you or the student supply. Sits on the page
   surface, not the panel tint, so staff lines and noteheads read cleanly.
   The notation is treated as given; materials analyze it, they do not
   typeset it. */
figure.score img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: var(--bg);
}

/* ----- Code / tokens --------------------------------------------------- */

code {
  font-size: 0.92em;
  color: var(--accent-soft);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05em 0.35em;
}
pre {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin: 1.8rem auto;
}
pre code { border: none; background: none; padding: 0; color: inherit; }

/* ----- Tables ---------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem auto;
  font-size: 0.95rem;
}
th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
th {
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  font-weight: 700;
  border-bottom: 1px solid var(--rule);
}

/* ----- Audio ----------------------------------------------------------- */

audio { width: 100%; }
.audio-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 1rem auto 0;
  line-height: 1.5;
}

/* ----- Footer ---------------------------------------------------------- */

.handout-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule);
  padding-top: 0.9rem;
  margin-top: 3.5rem;
}

/* ----- Selection ------------------------------------------------------- */

::selection { background: var(--accent); color: var(--bg); }

/* ----- Responsive ------------------------------------------------------ */

@media (max-width: 600px) {
  h1 { font-size: 1.6rem; }
  body { padding: 2rem 1.1rem 4rem; }
}