@layer components {
  /* Summary / factual overview callout */
  .radar-summary {
    padding-block: var(--space-8);
  }

  .radar-summary__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);
  }

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

  .radar-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-block-start: var(--space-3);
  }

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

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

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

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

  @media (min-width: 900px) {
    .radar-toc {
      position: sticky;
      top: var(--space-10);
    }
  }

  .radar-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);
  }

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

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

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

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

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

  /* Nested topic sections inside the content column (override the generic
     `section` layout rule, since these live inside a grid column rather
     than as top-level centered sections) */
  .radar-topic {
    max-width: none;
    margin-inline: 0;
    padding-block: var(--space-8);
    border-block-start: 1px solid var(--line-subtle);
  }

  .radar-topic:first-child {
    padding-block-start: 0;
    border-block-start: none;
  }

  .radar-topic h2 {
    margin-block-end: var(--space-3);
  }

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

  /* Shared tactile card look reused across brief / framework / faq cards */
  .radar-card,
  .radar-brief,
  .radar-framework,
  .radar-faq {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    box-shadow: var(--shadow-inset-highlight);
    transition: border-color var(--duration-short) var(--ease-standard),
                transform var(--duration-short) var(--ease-standard);
    border: 1px solid transparent;
  }

  .radar-card:hover,
  .radar-brief:hover,
  .radar-framework:hover,
  .radar-faq:hover {
    border-color: var(--secondary-500);
    transform: translateY(-2px);
  }

  .radar-card h3,
  .radar-brief h3,
  .radar-framework h3,
  .radar-faq h3 {
    font-size: var(--font-size-2);
    margin-block-end: var(--space-2);
  }

  .radar-card p,
  .radar-brief p,
  .radar-framework p,
  .radar-faq p {
    font-size: var(--font-size-0);
  }

  .radar-framework h3 a {
    color: var(--secondary-500);
  }

  .radar-framework h3 a:hover {
    color: var(--text-0);
  }

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

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

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

  .radar-card {
    border-top: 3px solid var(--secondary-500);
  }

  /* ADR-005: severity signaled by an accent-colored top border + label
     color, not a neon glow — state-danger is used for critical/high-severity signaling (accent-500 is brand blue, reserved for CTAs)
     state per tokens.css, so "high" risk is the one legitimate non-CTA use */
  .radar-card--high {
    border-top-color: var(--state-danger);
    background: color-mix(in oklch, var(--state-danger) 6%, var(--surface-1));
  }

  .radar-risk {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-block-end: var(--space-2);
    color: var(--state-warning);
  }

  .radar-risk--high { color: var(--state-danger); }
  .radar-risk--monitor { color: var(--secondary-500); }

  .radar-card__control {
    margin-block-start: var(--space-3);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--line-subtle);
    font-family: var(--font-mono);
    font-size: var(--font-size-00);
    color: var(--text-2);
    line-height: var(--leading-normal);
  }

  /* Brief grid (reused for the daily-signal section and the threat-briefs section) */
  .radar-brief-grid {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

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

  /* Control room */
  .radar-control-room {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

  @media (min-width: 900px) {
    .radar-control-room { grid-template-columns: 0.9fr 1.1fr; }
  }

  .radar-control-panel {
    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);
  }

  .radar-control-panel strong { color: var(--text-0); }

  .radar-control-list {
    display: grid;
    gap: var(--space-2);
  }

  .radar-control-row {
    display: grid;
    gap: var(--space-2);
    background: var(--surface-1);
    border-radius: var(--radius-2);
    padding: var(--space-3);
  }

  @media (min-width: 560px) {
    .radar-control-row { grid-template-columns: 140px 1fr; }
  }

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

  .radar-control-row p { font-size: var(--font-size-0); }

  /* Framework grid */
  .radar-framework-grid {
    display: grid;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }

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

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

  /* AIMI cross-promotion panel — accent used deliberately here: this block
     exists purely to convert into the AIMI product, the case tokens.css
     carves out for --accent-500 */
  .radar-aimi {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-6);
    align-items: stretch;
  }

  @media (min-width: 900px) {
    .radar-aimi { grid-template-columns: 1.2fr 0.8fr; }
  }

  .radar-aimi-panel {
    background: color-mix(in oklch, var(--accent-500) 10%, var(--surface-1));
    border: 1px solid color-mix(in oklch, var(--accent-500) 30%, transparent);
    border-radius: var(--radius-2);
    padding: var(--space-6);
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .radar-aimi-panel .hero__actions { margin-block-start: 0; }

  .radar-aimi-list {
    background: var(--surface-1);
    border-radius: var(--radius-2);
    padding: var(--space-4);
    display: grid;
    gap: var(--space-2);
    align-content: start;
  }

  .radar-aimi-list li {
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--line-subtle);
    color: var(--text-1);
    font-size: var(--font-size-0);
    line-height: var(--leading-normal);
  }

  .radar-aimi-list li:first-child {
    padding-block-start: 0;
    border-block-start: none;
  }

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

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