@layer components {
  /* Лист «Позвонить в клинику» (A_CallSheet) на нативном <dialog> снизу экрана, Stimulus call-sheet.
     Есть, только когда номеров «В шапке» больше одного. */
  .call-sheet {
    width: min(520px, 100%);
    max-width: 100%;
    max-height: 90dvh;
    margin: auto auto 0;
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 -10px 40px rgb(15 40 48 / 0.2);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .call-sheet[open] { display: flex; flex-direction: column; gap: 12px; }
  .call-sheet::backdrop { background: rgb(15 40 48 / 0.42); }
  .call-sheet__grab { align-self: center; width: 40px; height: 4px; margin: 6px 0; border-radius: 2px; background: var(--line); }
  .call-sheet__head { display: flex; align-items: center; gap: 12px; }
  .call-sheet__head .h3 { flex: 1; margin: 0; }
  .call-sheet__phone {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 0 18px;
    border-radius: 16px;
    background: var(--soft-2);
    color: var(--ink);
    text-decoration: none;
  }
  .call-sheet__phone .icon { flex: none; width: 22px; height: 22px; color: var(--accent-ink); }
  .call-sheet__phone b { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .call-sheet__phone small { display: block; font-size: 14px; color: var(--ink-3); }
  .call-sheet__address {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 2px 0;
    color: var(--ink-2);
    font-size: 16px;
    text-decoration: none;
  }
  .call-sheet__address .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-ink); }
  .call-sheet__address .muted { display: block; font-size: 14px; }
  .call-sheet .btn--secondary { margin-top: 6px; }

  body:has(.call-sheet[open]) { overflow: hidden; }
}