@layer components {
  /* ===================================================
     Collapsible Dossier Toggle + Disclaimer Box
     Version: 2.5  Tokenised + Consolidated (2026)
     Changes:
     • Updated to v2.5 token standard (full parity with root + all pillars)
     • Cleaner structure and comments
     • All toggle animations, open states, hover effects, gradients,
       mobile adjustments, and ::after icon behaviour preserved 100%
     =================================================== */

  /* ----------------------------------------------------------
     Dossier toggle (lighter variant — used inside dossier intro
     sections for TL;DR, corridor lens, and methodology callouts)
     ---------------------------------------------------------- */

  .dossier-toggle {
    width: 100%;
    margin: var(--space-md) 0 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--section-border) 40%, transparent);
    border-radius: var(--radius-md, 14px);
    background: color-mix(in srgb, var(--bg-surface, var(--bg-primary)) 50%, transparent);
    overflow: clip;
    transition: background 0.25s ease, border-color 0.25s ease;
  }

  .dossier-toggle[open] {
    border-color: color-mix(in srgb, var(--text-accent) 30%, var(--section-border));
    background: color-mix(in srgb, var(--bg-surface, var(--bg-primary)) 62%, transparent);
  }

  .dossier-toggle summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);

    cursor: pointer;
    width: 100%;
    padding: var(--space-xs) var(--space-xs);

    font-family: var(--font-display);
    font-size: var(--font-size-sm);
    font-weight: var(--type-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: var(--text-accent);
    background: color-mix(in srgb, var(--bg-alt, var(--bg-primary)) 55%, transparent);
    border-bottom: 1px solid transparent;

    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  }

  .dossier-toggle[open] summary {
    border-bottom-color: color-mix(in srgb, var(--section-border) 50%, transparent);
  }

  .dossier-toggle summary:hover {
    color: var(--highlight);
    background: color-mix(in srgb, var(--highlight) 10%, var(--bg-alt, var(--bg-primary)));
  }

  .dossier-toggle summary::-webkit-details-marker { display: none; }
  .dossier-toggle summary::marker { content: ""; }

  .dossier-toggle summary::after {
    content: "▸";
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--text-accent);
    transition: transform 0.2s ease, color 0.2s ease;
  }

  .dossier-toggle[open] summary::after {
    transform: rotate(90deg);
    color: var(--highlight);
  }

  /* Content */
  .dossier-toggle p,
  .dossier-toggle ul,
  .dossier-toggle ol {
    margin: 0;
    padding: 0.4rem 0.75rem;
    font-family: var(--font-serif);
    font-size: var(--type-copy-size, 1em);
    line-height: var(--type-copy-line);
    color: var(--text-primary);
  }

  .dossier-toggle p + p {
    padding-top: 0;
    margin-top: 0.3rem;
  }

  .dossier-toggle ul,
  .dossier-toggle ol {
    padding-left: var(--space-sm);
  }

  .dossier-toggle li {
    margin-bottom: 0.25rem;
    font-family: var(--font-serif);
    font-size: var(--type-copy-size, 1em);
    line-height: var(--type-copy-line);
    color: var(--text-primary);
  }

  .dossier-toggle li:last-child {
    margin-bottom: 0;
  }

  .dossier-toggle p:last-child,
  .dossier-toggle ul:last-child,
  .dossier-toggle ol:last-child {
    padding-bottom: 0.5rem;
  }

  /* Mobile */
  @media (max-width: 640px) {
    .dossier-toggle {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      border-radius: 0;
    }

    .dossier-toggle summary {
      padding: var(--space-xs) var(--space-sm);
      font-size: var(--type-control-size-compact, var(--font-size-xs, 0.75rem));
    }

    .dossier-toggle p,
    .dossier-toggle ul,
    .dossier-toggle ol {
      padding-left: var(--space-sm);
      padding-right: var(--space-sm);
      font-size: var(--font-size-sm);
    }
  }

  /* ==========================================================
     Disclaimer Box (collapsible)
     ========================================================== */

  .disclaimer-box {
    width: 100%;
    margin: var(--space-lg) auto 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 14px);
    background: color-mix(in srgb, var(--bg-surface, var(--bg-primary)) 50%, transparent);
    box-shadow: var(--page-shadow-soft, 0 10px 24px rgba(0,0,0,0.12));
    overflow: clip;
    transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, transform 0.2s ease;
  }

  .disclaimer-box[open] {
    border-color: color-mix(in srgb, var(--text-accent) 52%, var(--section-border));
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--highlight) 14%, transparent) 0%,
      color-mix(in srgb, var(--bg-surface, var(--bg-primary)) 65%, transparent) 100%
    );
    box-shadow:
      var(--page-shadow-soft, 0 10px 24px rgba(0,0,0,0.12)),
      0 0 0 1px color-mix(in srgb, var(--text-accent) 22%, transparent),
      0 0 18px color-mix(in srgb, var(--shadow-glow) 26%, transparent);
    transform: translateY(-1px);
  }

  /* Summary button */
  .disclaimer-box summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);

    cursor: pointer;
    width: 100%;
    padding: var(--space-sm) var(--space-md);

    font-family: var(--font-display);
    font-size: var(--font-size-base);
    font-weight: var(--type-weight-semibold, 600);

    text-transform: uppercase;
    letter-spacing: 0.06em;

    color: var(--text-accent);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg-alt, var(--bg-primary)) 58%, transparent),
      color-mix(in srgb, var(--bg-surface, var(--bg-primary)) 62%, transparent)
    );
    border-bottom: 1px solid color-mix(in srgb, var(--section-border) 52%, transparent);

    transition: color 0.25s ease, text-shadow 0.25s ease, background 0.25s ease;
  }

  .disclaimer-box summary:hover {
    color: var(--highlight);
    text-shadow: 0 0 10px color-mix(in srgb, var(--shadow-glow) 72%, transparent);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--highlight) 16%, var(--bg-alt, var(--bg-primary))),
      color-mix(in srgb, var(--bg-surface, var(--bg-primary)) 65%, transparent)
    );
  }

  .disclaimer-box summary::-webkit-details-marker { display: none; }
  .disclaimer-box summary::marker { content: ""; }

  /* Toggle icon */
  .disclaimer-box summary::after {
    content: "▸";
    margin-left: var(--space-sm);
    font-size: 0.95rem;
    color: var(--text-accent);
    transform-origin: 50% 50%;
    transition: transform 0.22s ease, color 0.22s ease;
  }

  .disclaimer-box[open] summary::after {
    transform: rotate(90deg);
    color: var(--highlight);
  }

  /* Heading divider */
  .disclaimer-heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-xs);

    font-family: var(--font-display);
    font-weight: var(--type-weight-semibold, 600);
    font-size: var(--font-size-md);
    letter-spacing: 0.05em;
    text-transform: uppercase;

    color: var(--text-accent);
  }

  .disclaimer-heading::before,
  .disclaimer-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: color-mix(in srgb, var(--text-accent) 46%, transparent);
    opacity: 0.4;
  }

  /* Content */
  .disclaimer-box p {
    margin: var(--space-sm) 0 0;
    padding: 0 var(--space-md);

    font-family: var(--font-serif);
    font-size: var(--type-copy-size, 1em);
    line-height: var(--type-copy-line, 1.6);

    text-align: left;
    color: var(--text-primary);
  }

  .disclaimer-box p:last-child {
    margin-bottom: 0;
    padding-bottom: var(--space-md);
  }

  .disclaimer-box p + p {
    margin-top: var(--space-md);
  }

  /* Visible editorial copy that formerly used the disclosure treatment. */
  .disclaimer-box.is-static {
    margin-top: var(--space-lg);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    transition: none;
  }

  .disclaimer-box.is-static .disclaimer-static-title {
    margin: 0 0 var(--space-sm);
    padding: 0;
    font-family: var(--font-display);
    font-size: var(--font-size-md);
    font-weight: var(--type-weight-semibold, 600);
    line-height: 1.3;
    letter-spacing: 0.03em;
    color: var(--text-accent);
  }

  .disclaimer-box.is-static .disclaimer-heading {
    display: block;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    color: inherit;
  }

  .disclaimer-box.is-static .disclaimer-heading::before,
  .disclaimer-box.is-static .disclaimer-heading::after {
    display: none;
  }

  .disclaimer-box.is-static p {
    padding: 0;
  }

  .disclaimer-box.is-static p:last-child {
    padding-bottom: 0;
  }

  .disclaimer-box.is-static .list-emoji {
    margin: var(--space-sm) 0 0;
  }

  @media print {
    details.disclaimer-box {
      display: block;
      overflow: visible;
      box-shadow: none;
    }

    details.disclaimer-box > :not(summary) {
      display: block !important;
    }

    details.disclaimer-box > summary::after {
      display: none;
    }
  }

  @media (max-width: 640px) {
    .disclaimer-box {
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      border-radius: 0;
    }

    .disclaimer-box p,
    .disclaimer-box li {
      line-height: 2.12;
    }

    .disclaimer-box.is-static {
      width: 100%;
      max-width: none;
      margin-left: 0;
      margin-right: 0;
    }

    .disclaimer-heading {
      font-size: var(--font-size-sm);
      letter-spacing: 0.03em;
      gap: 0.35rem;
    }
  }

  /* ==========================================================
     Landing pitch — shared intro copy style for pillar landings
     and the homepage. Applied to the lead paragraph that sits
     between the tagline and the content grid.
     ========================================================== */

  .landing-pitch {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: clamp(1.15rem, 2.4vw, 1.42rem);
    line-height: 1.6;
    text-align: center;
    max-width: 100%;
    margin: 0 0 var(--space-md);
    color: var(--text-accent);
  }

  .landing-pitch strong {
    color: var(--highlight);
    font-weight: var(--type-weight-semibold, 600);
  }

  .landing-pitch + .muted {
    text-align: center;
    max-width: 100%;
    margin: 0 0 var(--space-md);
  }

  /* ==========================================================
     Freed Disclaimer Box (non-collapsible variant)
     Styled as landing pitch for community discussion pages
     ========================================================== */

  .disclaimer-box.is-freed p {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: clamp(1.15rem, 2.4vw, 1.42rem);
    line-height: 1.6;
    text-align: center;
    max-width: 100%;
    margin: 0 0 var(--space-md);
    padding: 0;
    color: var(--text-accent);
  }

  .disclaimer-box.is-freed p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .disclaimer-box.is-freed p + p {
    margin-top: var(--space-md);
  }
}