/* Diagram galleries: /revision-notes/macroeconomics-diagrams.html and
   /revision-notes/microeconomics-diagrams.html.

   Rewritten 2026-08-25 for the notes family consistency pass (D62): the two
   galleries left revision-notes-textbook.css for the shared notes sheet,
   css/pages/revision-notes-topic.css, and this file now holds only what a
   gallery needs that a topic page does not - the wide card grid. The design
   system (tokens, type, the one component grammar: 3px left rule,
   near-white tint, small-caps text-safe label, no gradients or shadows) is
   the shared sheet's; docs/audit/DECISIONS.md D61 ratified it and D62
   extends it here.

   TOKENS. The --nt-* custom properties are declared on :root in
   revision-notes-topic.css, which verify_css_load_order.py guarantees loads
   before this file on both pages, so rules here may use them. The
   exceptions are the colours scripts/verify_contrast.py pins, which are
   written as literal hex because that checker resolves var() only against
   the same file's own tokens.

   SCOPE. Every rule is scoped under the page class AND
   .revision-notes-content - one class more than the shared sheet uses - so
   an override here wins on specificity, not on load order. As before, each
   rule carries both page scopes rather than being duplicated per page;
   a grouped selector has exactly the specificity of either alone. */

/* The card grid needs the width a reading column gives up: the container
   stays a centred column below 1024px, and from 1024px the shared sheet's
   content-plus-rail grid applies with a wider content track. */
.revision-notes-content.macro-diagrams-page .notes-container,
.revision-notes-content.micro-diagrams-page .notes-container {
  max-width: 50em;
}

@media screen and (min-width: 1024px) {
  .revision-notes-content.macro-diagrams-page .notes-container,
  .revision-notes-content.micro-diagrams-page .notes-container {
    max-width: none;
    grid-template-columns: minmax(0, 50em) 14em;
  }

  /* The shared sheet starts the rail at grid row 3 (heading group, spec
     panel, then content). These pages carry an intro paragraph between the
     heading and the spec panel, so the first section is row 4. */
  .revision-notes-content.macro-diagrams-page .topic-contents,
  .revision-notes-content.micro-diagrams-page .topic-contents {
    grid-row: 4 / span 90;
  }
}

/* The subtitle under the h1: the galleries' hand-written equivalent of the
   topic pages' meta line, styled to match it. */
.revision-notes-content.macro-diagrams-page .notes-container > header.major .subtitle,
.revision-notes-content.micro-diagrams-page .notes-container > header.major .subtitle {
  margin: 0.5em 0 0;
  font-family: var(--nt-heading);
  font-size: 0.82em;
  font-weight: 600;
  line-height: 1.5;
  color: var(--nt-muted);
}

/* The intro keeps a reading measure even where the grid runs wider. */
.revision-notes-content.macro-diagrams-page .diagram-intro,
.revision-notes-content.micro-diagrams-page .diagram-intro {
  max-width: 38em;
  margin: 0 0 1.4em;
}

.revision-notes-content.macro-diagrams-page .diagram-topic,
.revision-notes-content.micro-diagrams-page .diagram-topic {
  scroll-margin-top: 1.2em;
}

.revision-notes-content.macro-diagrams-page .diagram-grid,
.revision-notes-content.micro-diagrams-page .diagram-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.25em;
  align-items: start;
}

/* A card: white ground, hairline, no shadow - the framed-diagram grammar. */
.revision-notes-content.macro-diagrams-page .diagram-card,
.revision-notes-content.micro-diagrams-page .diagram-card {
  background: var(--nt-paper);
  border: 1px solid var(--nt-line);
  border-radius: 8px;
  padding: 1.1em 1.2em;
  scroll-margin-top: 1.2em;
}

/* The theme/spec tags: quiet small-caps text, no boxes or pills. Literal
   hex (--nt-teal) for the verify_contrast.py pin. */
.revision-notes-content.macro-diagrams-page .diagram-card__meta,
.revision-notes-content.micro-diagrams-page .diagram-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em 0.9em;
  margin-bottom: 0.35em;
  font-family: var(--nt-heading);
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1f6b77;
}

.revision-notes-content.macro-diagrams-page .diagram-card h3,
.revision-notes-content.micro-diagrams-page .diagram-card h3 {
  margin: 0 0 0.6em;
  font-size: 1.05em;
}

.revision-notes-content.macro-diagrams-page .diagram-card p,
.revision-notes-content.micro-diagrams-page .diagram-card p {
  font-size: 0.95em;
  margin-bottom: 1em;
}

.revision-notes-content.macro-diagrams-page .diagram-card .diagram-figure,
.revision-notes-content.micro-diagrams-page .diagram-card .diagram-figure {
  margin: 0.9em 0 1em;
}

/* The exam prompt: the exam-tip grammar - green tint, 3px rule, and the
   card's own bold "Use in exams:" lead does the labelling. Hex for the
   verify_contrast.py pin. */
.revision-notes-content.macro-diagrams-page .exam-note,
.revision-notes-content.micro-diagrams-page .exam-note {
  padding: 0.8em 1em;
  background: #f2faf5;
  border: 1px solid var(--nt-line);
  border-left: 3px solid var(--nt-green-border);
  border-radius: 0 6px 6px 0;
  font-size: 0.92em;
}

.revision-notes-content.macro-diagrams-page .exam-note strong,
.revision-notes-content.micro-diagrams-page .exam-note strong {
  color: #1c7a42;
}

.revision-notes-content.macro-diagrams-page .source-link,
.revision-notes-content.micro-diagrams-page .source-link {
  margin-bottom: 0;
  font-family: var(--nt-heading);
  font-size: 0.92em;
  font-weight: 600;
}

/* Two next-step panels, not three, so the row splits evenly. */
@media screen and (min-width: 768px) {
  .revision-notes-content.macro-diagrams-page .topic-next__list,
  .revision-notes-content.micro-diagrams-page .topic-next__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media print {
  .revision-notes-content.macro-diagrams-page .diagram-card,
  .revision-notes-content.micro-diagrams-page .diagram-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}