/*
 * Mobile bottom action sheet (M-02, M-05): the page's primary action pinned to the bottom of the
 * screen on a surface panel with a 28px top radius and a 52px full-width button. Pages fill it with
 * `content_for :mobile_sheet`; while it is present the tab bar is not shown. Hidden >= 768.
 */
@layer layout {
  .sheet {
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 18px max(30px, env(safe-area-inset-bottom));
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    background: var(--color-surface);
    box-shadow: var(--shadow-sheet);
  }

  @media (min-width: 768px) {
    .app > .sheet { display: none; }
  }

  .sheet__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .sheet__text {
    font-size: 13.5px;
    line-height: 1.5;
  }
}