@layer components {
  /* ---------- Окно ----------
     <dialog> через showModal() живёт в top layer: z-index, overflow и transform
     родителей на него не действуют. Display не задаём: закрытое окно скрывает браузер. */
  .sheet {
    position: fixed; inset: auto 0 var(--kb) 0;
    width: 100%; max-width: 100%;
    max-height: calc(100vh - var(--safe-t) - 16px - var(--kb));
    max-height: calc(100dvh - var(--safe-t) - 16px - var(--kb));
    margin: 0; padding: 0; border: 0;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background: var(--surface); color: var(--text);
    box-shadow: var(--sh-3);
    overflow: hidden;
  }
  .sheet[open] { display: flex; flex-direction: column; animation: sheet-up var(--t-slow) var(--ease); }
  .sheet::backdrop { background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .sheet[open]::backdrop { animation: fade-in var(--t-base) ease; }

  .sheet__head {
    position: relative; flex: none;
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 22px var(--sp-5) var(--sp-3);
  }
  .sheet__head::before {           /* ручка листа */
    content: ""; position: absolute; top: 8px; left: 50%; translate: -50% 0;
    width: 40px; height: 5px; border-radius: 3px; background: var(--text-3); opacity: .45;
  }
  .sheet__icon {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center;
    border-radius: var(--r-s); background: var(--brand-soft); color: var(--c-blue-ink);
  }
  .sheet__title {
    flex: 1; min-width: 0;
    font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .sheet__body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 4px var(--sp-5) calc(var(--sp-5) + var(--safe-b));
  }
  .sheet__body:has(.sheet__actions) { padding-bottom: 0; }
  .sheet__desc { margin-bottom: var(--sp-3); color: var(--text-2); }

  /* Кнопки окна прилипают к низу, видны и при открытой клавиатуре */
  .sheet__actions {
    position: sticky; bottom: 0;
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin: var(--sp-2) calc(-1 * var(--sp-5)) 0;
    padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + var(--safe-b));
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .sheet__actions > .btn { flex: 1 1 120px; }

  /* ПК: окно по центру */
  @media (min-width: 640px) {
    .sheet {
      inset: 0; margin: auto;
      width: min(calc(100% - 48px), 520px);
      max-height: min(86vh, 760px); max-height: min(86dvh, 760px);
      border-radius: var(--r-xl); box-shadow: var(--sh-2);
    }
    /* Размер окна задаёт макрос sheet(): md — ширина по умолчанию,
     * lg — широкий лист. Объявляем md явно, чтобы класс был настоящим. */
    .sheet--md { width: min(calc(100% - 48px), 520px); }
    .sheet--lg { width: min(calc(100% - 48px), 720px); }
    .sheet[open] { animation: pop-in .35s var(--spring); }
    .sheet__head { padding: var(--sp-6) var(--sp-6) var(--sp-3); }
    .sheet__head::before { display: none; }
    .sheet__body { padding: 4px var(--sp-6) var(--sp-6); }
    .sheet__actions { margin-inline: calc(-1 * var(--sp-6)); padding: var(--sp-4) var(--sp-6); }
  }

  /* Телефон лёжа: окно почти на весь экран */
  @media (orientation: landscape) and (max-height: 500px) {
    .sheet { max-height: calc(100dvh - 8px - var(--kb)); }
    .sheet__head { padding-top: 16px; padding-bottom: 8px; }
  }
}