@layer components {

  /* "What's new" since the last visit (shared/_news): bottom centre, over the page or the 3D view,
     clear of the designer's panel; long lists scroll inside. */
  .news {
    position: fixed;
    left: 50%;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 15;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 10px;
    width: min(520px, calc(100vw - 32px));
    max-height: min(60vh, 520px);
    padding: 14px 16px;
    font-size: 13px;
    translate: -50% 0;
    box-shadow: 0 10px 30px color-mix(in oklch, var(--black) 45%, transparent);
  }

  /* In the designer the panel takes the right: centre over the 3D view instead. */
  .viewer~.news {
    left: calc((100vw - var(--panel-width)) / 2);
  }

  .news__title {
    font-size: 14px;
    font-weight: 600;
  }

  .news__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    overflow-y: auto;
    line-height: 1.45;
    color: var(--color-ink);

    & code {
      font: 12px ui-monospace, monospace;
      color: var(--color-ink-muted);
    }
  }

  /* The whole history on the left, "Зрозуміло" on the right. */
  .news__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .news__history {
    font-size: 12px;
    color: var(--color-ink-muted);

    &:hover {
      color: var(--color-ink);
    }
  }

  /* The whole changelog (news/show): a release per section. */
  .history {
    margin-bottom: 20px;
  }

  .history__title {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .history__list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;

    & code {
      font: 12px ui-monospace, monospace;
      color: var(--color-ink-muted);
    }
  }

  @media (max-width: 760px) {
    .viewer~.news {
      left: 50%;
    }
  }

  @media print {
    .news {
      display: none;
    }
  }
}