@layer components {
  /* A document on the phone: a back row on top, which stays while reading. Hidden from 1100 px, where the header
     carries the way back. */
  .document-topbar { display: none; }

  @media (max-width: 1099px) {
    .document-topbar {
      position: sticky; top: 0; z-index: 3; display: flex; align-items: center;
      min-height: calc(48px + var(--safe-top)); margin-inline: calc(-1 * var(--gutter));
      padding: var(--safe-top) var(--gutter) 0; border-bottom: 1px solid var(--border); background: var(--background);
    }
    .document-topbar-back {
      display: inline-flex; align-items: center; gap: 2px; min-width: 0; min-height: var(--tap);
      margin-left: -8px; padding: 0 12px 0 4px; border-radius: var(--radius-md);
      color: var(--foreground); font-size: var(--text-body); font-weight: 500; text-decoration: none;
    }
    .document-topbar-back:is(:hover, :active) { background: var(--accent); text-decoration: none; }
    .document-topbar-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .document-view--page .document-header-top { display: none; }
  }

  /* The phone's gestures bar. The header's own buttons stay in the page for the desktop. */
  .document-bar { display: none; }
  .document-bar [hidden] { display: none; }

  @media (max-width: 1099px) {
    .document-bar {
      position: fixed; inset: auto 0 0; z-index: 4; display: block;
      padding: 8px calc(var(--gutter) + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(var(--gutter) + var(--safe-left));
      border-top: 1px solid var(--border);
      background: color-mix(in oklch, var(--background) 94%, transparent); backdrop-filter: blur(12px);
    }
    .document-bar-main { display: flex; gap: 8px; max-width: 640px; margin-inline: auto; }
    .document-bar-form { display: flex; flex: 1; min-width: 0; margin: 0; }
    /* The label wraps rather than touch the edges: a longer one or a larger system text stays inside the button. */
    .document-bar-primary {
      flex: 1; width: 100%; min-width: 0; height: auto; min-height: var(--tap); padding-block: 6px;
      font-size: var(--text-body); line-height: 1.2; white-space: normal;
    }
    .document-bar-more { flex: none; width: var(--tap); min-height: var(--tap); padding: 0; }
    .document-view--page .document-gestures { display: none; }

    /* The « ⋯ » sheet: one row per gesture, a finger tall. */
    .document-sheet-rows { display: flex; flex-direction: column; padding: 4px 0; }
    .document-sheet-rows > form { display: block; margin: 0; }
    .document-sheet-row {
      display: flex; align-items: center; gap: 14px; width: 100%; min-height: 52px; padding: 0 8px; border: 0;
      border-radius: var(--radius-md); background: none; color: var(--foreground);
      font: inherit; font-size: 1rem; text-align: left; text-decoration: none; cursor: pointer;
    }
    .document-sheet-row[hidden] { display: none; }
    .document-sheet-row:is(:hover, :active) { background: var(--accent); text-decoration: none; }
    .document-sheet-row:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
    .document-sheet-row svg { flex: none; color: var(--muted-foreground); }
    .document-sheet-row[data-document-action="archive"],
    .document-sheet-row[data-document-action="archive"] svg { color: var(--jx-no); }
  }
}