@layer components {
  /* The Markdown bar of the phone's editor. It does not exist from 1100 px. */
  .markdown-bar { display: none; }

  @media (max-width: 1099px) {
    .markdown-bar:not([hidden]) {
      flex: none; display: flex; gap: 2px; padding: 4px var(--gutter) calc(4px + var(--safe-bottom));
      border-top: 1px solid var(--border); background: var(--surface);
    }
    /* The visual editor has its own tools: the symbols bar is for raw Markdown. Outweighs the rule above (0,2,0). */
    .document-editor--page:is([data-visual-editor-mode="visual"], [data-visual-editor-mode="loading"]) .markdown-bar {
      display: none;
    }
    /* With the keyboard up, the home indicator is under it. */
    html[data-keyboard] .markdown-bar { padding-bottom: 4px; }
    /* Square corners keep the whole 44 px target; the pressed state is drawn rounded behind the icon. */
    .markdown-bar-button {
      position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; min-height: var(--tap);
      display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 0;
      background: none; color: var(--foreground); cursor: pointer;
    }
    .markdown-bar-button::before {
      content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 12px; background: transparent;
    }
    .markdown-bar-button:is(:hover, :active)::before { background: var(--accent); }
    .markdown-bar-button:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
    /* The link and the keyboard tools are set apart from the text formatting. */
    .markdown-bar-group { margin-left: 4px; border-left: 1px solid var(--border); }
    .markdown-bar-group ~ .markdown-bar-button { color: var(--muted-foreground); }
  }
}