@layer layout {
  /* ---------- Шапка ----------
     Полоса стоит absolute в зарезервированном padding-top.
     При [data-scrolled] она становится fixed, высота шапки не меняется.
     У шапки НЕТ z-index/transform/filter: иначе fixed-полоса сломается. */
  .header-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 8px; pointer-events: none; }

  .app-header {
    position: relative; overflow: hidden;
    padding: calc(var(--safe-t) + var(--bar-h)) var(--pad-r) var(--sp-6) var(--pad-l);
    color: #fff;
    background:
      radial-gradient(circle at calc(100% + 40px) -40px, transparent 150px, rgb(255 255 255 / .07) 151px 190px, transparent 191px),
      radial-gradient(80% 120% at 0% 0%, #3B82F6 0%, transparent 60%),
      radial-gradient(70% 110% at 100% 0%, #6366F1 0%, transparent 55%),
      radial-gradient(60% 90% at 85% 100%, #0EA5E9 0%, transparent 60%),
      var(--brand-deep);
    border-radius: 0 0 32px 32px;
  }
  [data-theme="dark"] .app-header {
    background:
      radial-gradient(circle at calc(100% + 40px) -40px, transparent 150px, rgb(255 255 255 / .05) 151px 190px, transparent 191px),
      radial-gradient(80% 120% at 0% 0%, #1E40AF 0%, transparent 60%),
      radial-gradient(70% 110% at 100% 0%, #3730A3 0%, transparent 55%),
      var(--brand-deep);
  }

  .app-header__bar {
    position: absolute; top: 0; left: 0; right: 0;
    height: calc(var(--safe-t) + var(--bar-h));
    padding: var(--safe-t) max(var(--pad-r), calc((100% - var(--page)) / 2)) 0 max(var(--pad-l), calc((100% - var(--page)) / 2));
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    transition: background var(--t-base), box-shadow var(--t-base);
  }
  .app-header[data-scrolled] .app-header__bar {
    position: fixed; z-index: var(--z-bar);
    background: color-mix(in srgb, var(--brand-deep) 88%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    border-radius: 0 0 20px 20px;
    box-shadow: 0 12px 30px -14px rgb(29 78 216 / .65);
  }

  .brand { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .brand__logo {
    width: 42px; height: 42px; flex: none; display: grid; place-items: center;
    border-radius: var(--r-s); background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .28);
    font-weight: var(--fw-heavy); font-size: var(--fs-m);
  }
  .brand__text { display: grid; min-width: 0; }
  .brand__name { font-weight: var(--fw-heavy); font-size: var(--fs-input); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand__sub { font-size: var(--fs-xs); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .app-header[data-scrolled] .brand__sub { display: none; }

  .app-header__actions { display: flex; align-items: center; gap: 6px; flex: none; }
  .app-header__actions > form { display: contents; }

  /* 320–359: оставляем только логотип */
  @media (max-width: 359.98px) { .brand__text { display: none; } }
  /* < 480: выход из шапки уходит вниз страницы, освобождая место */
  @media (max-width: 479.98px) { .app-header__actions > .app-header__logout { display: none; } }

  .profile {
    max-width: var(--page); margin: var(--sp-2) auto 0;
    display: flex; align-items: center; gap: 14px;
    padding: 14px; border-radius: var(--r-card);
    background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .2);
  }
  .profile__ava {
    width: 56px; height: 56px; flex: none; display: grid; place-items: center;
    border-radius: 18px; background: #fff; color: var(--brand);
    font-size: 22px; font-weight: var(--fw-heavy);
    box-shadow: 0 8px 20px -8px rgb(0 0 0 / .4);
  }
  .profile__info { min-width: 0; }
  .profile__name { font-size: var(--fs-l); font-weight: var(--fw-heavy); overflow-wrap: anywhere; }
  .profile__role { font-size: var(--fs-s); opacity: .8; }
  .profile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .profile__tag {
    display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 4px 11px;
    border: 0; border-radius: var(--r-full); background: rgb(255 255 255 / .16);
    color: inherit; font-family: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium);
    line-height: 1.2;
  }
  button.profile__tag { cursor: pointer; }
  @media (max-width: 359.98px) {
    .profile { padding: 12px; gap: 12px; }
    .profile__ava { width: 48px; height: 48px; border-radius: 16px; font-size: 20px; }
  }
  @media (orientation: landscape) and (max-height: 500px) {
    .app-header { padding-bottom: var(--sp-4); }
    .profile { padding: 10px; }
  }

  /* ---------- Страница ---------- */
  .page {
    display: grid; gap: var(--sp-7);
    max-width: calc(var(--page) + 2 * var(--sp-4));
    margin-inline: auto;
    padding: var(--sp-6) var(--pad-r) calc(40px + var(--safe-b)) var(--pad-l);
  }
  .page > * { min-width: 0; }

  /* Новый каркас: .app-header стоит в потоке и сам резервирует место под
     фиксированную полосу. Отступ body из legacy (его ждал старый
     .cabinet-header) давал пустую полосу над шапкой. Класс ставит
     ui/layouts/cabinet.html — на случай браузеров без :has(). */
  body.has-app-header { padding-top: 0; }
  body:has(> .app-header) { padding-top: 0; }

  /* ---------- Секция ---------- */
  /* Без fill-mode: с `both` финальный кадр оставлял transform (matrix),
     секция становилась containing block, и position:fixed внутри неё
     (модальные окна календаря) считался от секции, а не от окна. */
  .sec { display: grid; gap: var(--sp-3); min-width: 0; animation: fade-up .45s var(--ease); }
  .sec__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--sp-2) var(--sp-3); padding-inline: 4px;
  }
  .sec__title {
    flex: 1 1 12rem; min-width: 0;
    font-size: var(--fs-xl); font-weight: var(--fw-heavy); letter-spacing: -.02em; line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .sec__actions { display: flex; flex-wrap: wrap; gap: 6px; }

  /* ---------- Подложка и список ----------
     container-type нужен контейнерным запросам карточек (components/card.css),
     но он же делает элемент контейнером и для position: fixed внутри себя:
     окно кабинета обязано быть <dialog> (top layer), иначе оно жмётся к панели.
     Скругление — var(--r-card): общий токен всех карточек-подложек кабинета
     (.panel, .stat, .tile, .action-tile, .card, блок профиля в шапке). При 28px
     углы подламывали первый ряд панели (кнопка навигации календаря лежала
     в зоне скругления). */
  .panel {
    container-type: inline-size;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-card); box-shadow: var(--sh-1);
  }
  .panel--list { padding: 6px; }
  .panel--md { padding: var(--sp-4); }
  /* Соседние блоки внутри карточки не слипаются */
  .panel--md > * + * { margin-top: var(--sp-3); }
  @media (min-width: 640px) { .panel--md { padding: var(--sp-5); } }

  .list { display: grid; min-width: 0; }

  .page-actions .btn-row > * { flex: 1 1 140px; }
}