@layer components {
  /* Белая карточка в боковой колонке: оглавление, «Записаться» (.box в макетах) */
  .box {
    padding: 20px;
    background: var(--surface);
    border-radius: var(--r-box);
    box-shadow: var(--shadow);
  }
  .box__title { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink-3); }
  .box--cta { display: flex; flex-direction: column; gap: 12px; }
  .box--cta .phone-link { font-size: 16px; }
  .box__heading { font-size: 17px; line-height: 1.35; font-weight: 600; }

  /* Оглавление справа от статьи, подсветка — Stimulus toc (aria-current на ссылке) */
  .toc {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .toc__list { display: flex; flex-direction: column; gap: 2px; }
  .toc__link {
    display: block;
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--ink-2);
    font-size: 15.5px;
    line-height: 1.35;
    text-decoration: none;
  }
  .toc__link:hover { background: var(--soft-2); }
  .toc__link[aria-current] { background: var(--soft); color: var(--accent-ink); font-weight: 600; }

  /* Мобильное оглавление: <details> над статьёй */
  .toc-mobile { display: none; }
  .toc-mobile > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 0 18px;
    background: var(--surface);
    border-radius: 16px;
    box-shadow: var(--shadow);
    list-style: none;
    font-weight: 600;
  }
  .toc-mobile > summary::-webkit-details-marker { display: none; }
  .toc-mobile[open] > summary .icon { transform: rotate(180deg); }
  .toc-mobile ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0 0;
    padding: 12px 18px 12px 38px;
    background: var(--surface);
    border-radius: 16px;
    font-size: 17px;
  }
  .toc-mobile a { display: block; padding-block: 6px; }

  @media (max-width: 820px) {
    .toc { display: none; }
    .toc-mobile { display: block; }
  }
}