/* ensures anchored headings don’t hide under a fixed header */
    :target { scroll-margin-top: 80px; }

    /* Grade boxes (act like filters) */
    .grade-boxes a {
      border-radius: 999px;
      padding: .4rem .9rem;
      border: 1px solid rgba(0,0,0,.08);
      background: var(--secondary, #F2F1F8);
      margin-right: .5rem; margin-bottom: .5rem;
      display: inline-flex; align-items: center; gap:.4rem;
      text-decoration: none;
    }
    .grade-boxes a:hover { background: rgba(0,0,0,.05); text-decoration:none; }
    .grade-boxes a.active { background: var(--primary, #007bff); color: #fff; border-color: transparent; }

    .resource-meta small { display:block; opacity:.8; }
    .topic-badge { border-radius: 999px; padding:.15rem .5rem; background: var(--secondary,#F2F1F8); }
    .link-list a { display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; border-radius:8px; border:1px solid rgba(0,0,0,.05); }
    .link-list a:hover { text-decoration:none; background: rgba(0,0,0,.03); }
    .icon { font-style:normal; }

    /* Hide all grade sections by default; JS will reveal selected */
    section[id^="grade-"] { display: none; }
    section[id^="grade-"].visible { display: block; }