/* ── CHAPTER ACCENT ── */
:root {
  --chapter-accent: var(--accent-forest);
  --chapter-accent-fill: var(--accent-forest-fill);
}

      /* ── PAGE WATERMARKS ── */
      header::before {
        content: "Summary";
      }

      .reminder-box::before {
        content: "Conceptual";
      }

      /* ─────────────────────────────────────────
         FOUR EXAMPLES — STANDARDISED FORMAT
      ───────────────────────────────────────── */

      .example-card-head {
        background: var(--surface);
        padding: var(--space-3) var(--space-6);
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-wrap: wrap;
      }

      .example-card-head h4 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-base);
        flex: 1;
        min-width: 200px;
      }

      .etcol {
        padding: var(--space-5) var(--space-5);
      }
      .etcol:last-child {
        border-right: none;
      }
      .etcol.raw-col {
        background: var(--tint-false);
      }
      .etcol.summary-col {
        background: var(--tint-true);
      }
      .etcol .etcol-label {
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        display: block;
        margin-bottom: var(--space-2);
        padding-bottom: var(--space-2);
        border-bottom: 1px solid var(--border);
      }
      .etcol.raw-col .etcol-label {
        color: var(--text-primary);
      }

      .etcol.summary-col {
        box-shadow: none;
      }
      .etcol.summary-col .etcol-label {
        color: var(--text-primary);
      }
      .etcol.dx-col .etcol-label {
        color: var(--text-primary);
      }
      .etcol p {
        font-size: var(--fs-sm);
        line-height: 1.65;
      }
      .etcol.raw-col p {
        color: var(--primary);
        font-style: italic;
      }
      .etcol.summary-col p {
        color: var(--primary);
        font-style: italic;
      }
      .etcol.dx-col p {
        color: var(--primary);
        font-size: var(--fs-sm);
      }

      .raw-bullets {
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .raw-bullets li {
        font-size: var(--fs-sm);
        padding: var(--space-1) 0;
        border-bottom: 1px solid var(--border-light);
        display: flex;
        align-items: baseline;
        gap: var(--space-2);
        color: var(--primary);
        font-style: italic;
        line-height: 1.4;
      }
      .raw-bullets li:last-child {
        border-bottom: none;
      }
      .raw-bullets li::before {
        content: "·";
        color: var(--primary);
        flex-shrink: 0;
      }

      /* ─────────────────────────────────────────
         FOUR-LEVEL PROGRESSION
      ───────────────────────────────────────── */
      .level-header {
        display: flex;
        align-items: baseline;
        gap: var(--space-3);
        margin-bottom: var(--space-2);
        flex-wrap: wrap;
      }

      .level-header h3 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-md);
        color: var(--primary);
      }
      .level-content p {
        font-size: var(--fs-sm);
        color: var(--primary);
        line-height: 1.65;
      }
      .level-content p strong {
        color: var(--primary);
      }
      .level-example {
        margin-top: var(--space-2);
        padding: var(--space-2) var(--space-4);
        background: var(--background);
        border-radius: var(--radius-sm);
        font-size: var(--fs-xs);
        color: var(--primary);
        line-height: 1.5;
        font-style: italic;
        box-shadow: var(--bs-medium);
      }
      .level-example strong {
        color: var(--primary);
        font-style: normal;
      }
      .level-target {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
        font-size: var(--fs-sm);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        color: var(--accent-forest);
        font-style: normal;
        font-weight: 500;
        margin-top: var(--space-3);
      }
      .level-target::before {
        content: "★";
        font-size: var(--fs-xs);
      }

      /* ─────────────────────────────────────────
         SUMMARY STRUCTURE — ANNOTATED
      ───────────────────────────────────────── */
      .summary-structure {
        box-shadow: var(--bs-medium);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: var(--space-12);
      }
      .ss-head {
        background: var(--surface);
        padding: var(--space-5) var(--space-7);
      }
      .ss-head .ssh-label {
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: var(--space-1);
      }
      .ss-head h3 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-md);
      }
      .ss-rows {
        background: var(--paper);
      }
      .ss-row {
        display: grid;
        grid-template-columns: 3rem 1fr 2fr;
        align-items: start;

        transition: background 0.15s;
      }
      .ss-row:last-child {
        border-bottom: none;
      }
      .ss-row:hover {
        background: var(--background);
      }
      .ssr-num {
        padding: var(--space-4) var(--space-3) var(--space-4) var(--space-5);
        font-family: var(--font-display);
        font-size: var(--fs-base);
        font-weight: 300;
        color: var (--muted);
        padding-top: var(--space-5);
      }
      .ssr-name {
        padding: var(--space-4) var(--space-4);
      }
      .ssr-name h4 {
        font-weight: 500;
        font-size: var(--fs-base);
        color: var(--primary);
        margin-bottom: var(--space-1);
      }
      .ssr-name .sn-optional {
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        color: var(--primary);
      }
      .ssr-content {
        padding: var(--space-4) var(--space-6);
      }
      .ssr-content p {
        font-size: var(--fs-sm);
        color: var(--primary);
        line-height: 1.65;
        margin-bottom: var(--space-1);
      }
      .ssr-content p strong {
        color: var(--primary);
      }
      .ssr-example {
        font-size: var(--fs-xs);
        color: var(--primary);
        font-style: italic;
        border-left: 2px solid var(--accent-navy);
        padding-left: var(--space-2);
        margin-top: var(--space-2);
      }
      .ss-worked {
        padding: var(--space-5) var(--space-7);
      }
      .ss-worked .sw-label {
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: var(--space-2);
      }
      .ss-worked p {
        font-family: var(--font-display);
        font-weight: 300;
        font-style: italic;
        font-size: var(--fs-xs);
        color: var(--primary);
        line-height: 1.6;
      }

      /* ─────────────────────────────────────────
         SUMMARY ≠ DIAGNOSIS
      ───────────────────────────────────────── */
      .not-dx-block {
        box-shadow: var(--bs-medium);
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin-bottom: var(--space-12);
      }
      .ndx-head {
        background: var(--surface);
        padding: var(--space-5) var(--space-7);
      }
      .ndx-head .nh-label {
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        color: var(--primary);
        margin-bottom: var(--space-1);
      }
      .ndx-head h3 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-md);
      }
      .ndx-compare {
        display: grid;
        grid-template-columns: 1fr auto 1fr auto 1fr;
        background: var(--paper);
      }
      .ndx-col {
        padding: var(--space-6) var(--space-7);
        display: flex;
        flex-direction: column;
      }
      .ndx-col .nc-label {
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        margin-bottom: var(--space-3);
        padding-bottom: var(--space-2);
        border-bottom: 1px dashed var(--border);
        display: block;
      }
      .ndx-col:first-child .nc-label {
        color: var(--primary);
      }
      .ndx-col:last-child .nc-label {
        color: var(--primary);
      }
      .ndx-col--mid .nc-label {
        color: var(--accent-terracotta);
      }
      .ndx-col--mid {
        background: var(--background);
      }
      .ndx-col h4 {
        font-family: var(--font-display);
        font-weight: 500;
        font-size: var(--fs-base);
        margin-bottom: var(--space-2);
      }
      .ndx-col h4 {
        color: var(--primary);
      }
      .ndx-col p {
        font-size: var(--fs-sm);
        color: var(--primary);
        line-height: 1.7;
      }
      .ndx-col p strong {
        color: var(--primary);
      }
      .ndx-col .nc-example {
        margin-top: auto;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-sm);
        font-size: var(--fs-sm);
        font-style: italic;
        line-height: 1.5;
      }
      .ndx-col:first-child .nc-example {
        background: var(--background);
        color: var(--primary);
      }
      .ndx-col:last-child .nc-example {
        background: var(--background);
        color: var(--primary);
      }
      .ndx-col--mid .nc-example {
        background: var(--paper);
        color: var(--primary);
      }
      .ndx-seq-col {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-4) var(--space-3);
        flex-direction: column;
        gap: var(--space-2);
      }
      .ndx-seq-col .ns-arrow {
        font-size: var(--fs-xl);
        color: var(--primary);
      }
      .ndx-seq-col .ns-label {
        font-size: var(--fs-xs);
        letter-spacing: var(--ls-widest);
        text-transform: uppercase;
        color: var(--primary);
        text-align: center;
        line-height: 1.4;
      }
      @media (max-width: 700px) {
        .ss-row {
          grid-template-columns: 2rem 1fr;
        }
        .ssr-content {
          grid-column: 1 / -1;
          padding-top: 0;
        }
        .ndx-compare {
          grid-template-columns: 1fr;
        }
        .ndx-seq-col {
          display: none;
        }
        /* MOBILE SPACING TIGHTEN — trim this page's generous
           desktop-sized block gaps so a long page scrolls less on a
           phone. */
        .summary-structure,
        .not-dx-block {
          margin-bottom: var(--space-7);
        }
      }

    </style>