@layer components {
  /* Hero framework-badge row (NIST, OWASP, ISO, EU AI Act, MCP/C2PA) */
  .glossary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-start: var(--space-3);
  }

  .glossary-tag {
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    color: var(--text-2);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-1);
    padding: 0.3em 0.6em;
    text-transform: uppercase;
  }

  /* Daily-update callout under the hero */
  .glossary-note {
    padding-block: var(--space-4);
  }

  .glossary-note__box {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    border-inline-start: 3px solid var(--secondary-500);
    padding: var(--space-4);
    box-shadow: var(--shadow-inset-highlight);
    font-size: var(--font-size-0);
    color: var(--text-1);
  }

  .glossary-note__box strong { color: var(--text-0); }

  /* Factual summary box (resumo factual) */
  .glossary-summary {
    padding-block: var(--space-4);
  }

  .glossary-summary__box {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    box-shadow: var(--shadow-inset-highlight);
  }

  .glossary-summary__box p { margin-block-start: var(--space-2); }

  .glossary-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
    margin-block-start: var(--space-3);
  }

  @media (min-width: 700px) {
    .glossary-facts { grid-template-columns: repeat(4, 1fr); }
  }

  .glossary-fact {
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-1);
    padding: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    color: var(--text-2);
  }

  /* Two-column layout: sticky TOC + content column (mirrors pages-radar.css) */
  .glossary-layout {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-4) var(--space-16);
  }

  @media (min-width: 900px) {
    .glossary-layout {
      grid-template-columns: 240px minmax(0, 1fr);
      align-items: start;
    }
  }

  .glossary-toc {
    border-inline-start: 1px solid var(--line-subtle);
    padding-inline-start: var(--space-4);
  }

  @media (min-width: 900px) {
    .glossary-toc {
      position: sticky;
      top: var(--space-10);
      max-height: calc(100vh - var(--space-10) - var(--space-4));
      overflow-y: auto;
    }
  }

  .glossary-toc__title {
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary-500);
  }

  .glossary-toc__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }

  @media (max-width: 899px) {
    .glossary-toc {
      border-inline-start: none;
      border-block-start: 1px solid var(--line-subtle);
      padding-inline-start: 0;
      padding-block-start: var(--space-4);
    }

    .glossary-toc__list {
      flex-direction: row;
      flex-wrap: wrap;
      gap: var(--space-3);
    }
  }

  .glossary-toc__list a {
    color: var(--text-2);
    font-size: var(--font-size-0);
    transition: color var(--duration-short) var(--ease-standard);
  }

  .glossary-toc__list a:hover { color: var(--text-0); }

  /* Content-column sections. Term-grid sections are intentionally NOT
     given [data-reveal] (see ADR-006): a glossary is a reference page
     people deep-link into and expect to read instantly, so its term
     cards render immediately instead of animating in on scroll. */
  .glossary-section {
    max-width: none;
    margin-inline: 0;
    padding-block: var(--space-8);
    border-block-start: 1px solid var(--line-subtle);
  }

  .glossary-section:first-child {
    padding-block-start: 0;
    border-block-start: none;
  }

  .glossary-section h2 {
    margin-block-end: var(--space-3);
  }

  .glossary-source-note {
    font-size: var(--font-size-0);
    color: var(--text-2);
    margin-block-start: var(--space-3);
  }

  /* Term grid + term card -- the core repeating unit of the page (43
     controlled terms across six sections, plus the daily-signal pair and
     the frameworks references, styled identically for consistency) */
  .glossary-term-grid {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  @media (min-width: 700px) {
    .glossary-term-grid { grid-template-columns: repeat(2, 1fr); }
  }

  @media (min-width: 1100px) {
    .glossary-term-grid { grid-template-columns: repeat(3, 1fr); }
  }

  .glossary-term {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    border-inline-start: 3px solid var(--secondary-500);
    padding: var(--space-4);
    box-shadow: var(--shadow-inset-highlight);
    transition: transform var(--duration-short) var(--ease-standard);
  }

  .glossary-term:hover { transform: translateY(-2px); }

  /* ADR-006: the `security` variant reuses the state-danger token (not accent-500, which is brand blue reserved for CTAs)
     established in ADR-005 for the radar's high-risk cards -- accent is
     reserved for conversion/critical signals, so a security-relevant term
     (attack, vulnerability, exploit) is the one legitimate non-CTA reuse
     of that color here too. */
  .glossary-term--security {
    border-inline-start-color: var(--state-danger);
    background: color-mix(in oklch, var(--state-danger) 5%, var(--surface-1));
  }

  .glossary-term__tagline {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--secondary-500);
    margin-block-end: var(--space-2);
  }

  .glossary-term--security .glossary-term__tagline { color: var(--state-danger); }

  .glossary-term h3 {
    font-size: var(--font-size-2);
    margin-block-end: var(--space-2);
  }

  .glossary-term h3 span { color: var(--secondary-500); }
  .glossary-term--security h3 span { color: var(--state-danger); }

  .glossary-term p {
    font-size: var(--font-size-0);
  }

  .glossary-term p + p {
    margin-block-start: var(--space-2);
  }

  /* Print / executive-summary panel. The production page filtered which
     sections to include in a generated PDF via checkboxes and page-specific
     script; that per-section toggle logic isn't carried into the shared
     component system (see ADR-006), so this is now a static description
     plus a single native print trigger -- everything prints by default. */
  .glossary-print {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    box-shadow: var(--shadow-inset-highlight);
  }

  .glossary-print p { margin-block-start: var(--space-2); }

  .glossary-print__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1) var(--space-3);
    margin-block: var(--space-3);
    font-size: var(--font-size-0);
    color: var(--text-2);
  }

  @media (min-width: 700px) {
    .glossary-print__list { grid-template-columns: repeat(3, 1fr); }
  }

  /* References grid */
  .glossary-refs {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  @media (min-width: 700px) {
    .glossary-refs { grid-template-columns: repeat(2, 1fr); }
  }

  .glossary-ref {
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    background: color-mix(in oklch, var(--secondary-500) 4%, transparent);
  }

  .glossary-ref a {
    font-family: var(--font-mono);
    font-size: var(--font-size-0);
    color: var(--secondary-500);
  }

  .glossary-ref a:hover { color: var(--text-0); }

  .glossary-ref p {
    margin-block-start: var(--space-2);
    font-size: var(--font-size-0);
    color: var(--text-2);
  }

  /* FAQ */
  .glossary-faq-list {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  @media (min-width: 700px) {
    .glossary-faq-list { grid-template-columns: repeat(2, 1fr); }
  }

  .glossary-faq {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    box-shadow: var(--shadow-inset-highlight);
  }

  .glossary-faq h3 {
    font-size: var(--font-size-2);
    margin-block-end: var(--space-2);
  }

  .glossary-faq p { font-size: var(--font-size-0); }
}