@layer components {
  /* The phone's keys bar: 53 px with its border. The root owns the height so the toasts outside main can clear it. */
  :root:has(.visual-editor-keys) { --keys-pad: 4px; --keys-height: calc(var(--tap) + 2 * var(--keys-pad) + 1px); }
  /* Landscape with the keyboard up leaves a few lines: the bar gives up its margins to keep the text in view. */
  @media (max-width: 1099px) and (orientation: landscape) {
    :root[data-keyboard]:has(.visual-editor-keys) { --keys-pad: 0px; }
  }

  /* It does not exist from 1100 px, nor outside the visual mode of the editing page. */
  .visual-editor-keys { display: none; }

  @media (max-width: 1099px) {
    .document-editor--page[data-visual-editor-mode="visual"] .visual-editor-keys {
      flex: none; display: flex; align-items: center;
      /* No side padding: at 320 px the seven keys must stay wider than 45 px, the width a touch needs to miss its neighbour. */
      padding: var(--keys-pad) 0 calc(var(--keys-pad) + var(--safe-bottom));
      border-top: 1px solid var(--border); background: var(--surface);
    }
    /* With the keyboard up, the home indicator is under it. */
    html[data-keyboard] .document-editor--page[data-visual-editor-mode="visual"] .visual-editor-keys {
      padding-bottom: var(--keys-pad);
    }
    /* Square corners keep the whole 44 px target; the pressed state is drawn rounded behind the icon. */
    .visual-editor-key {
      position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; min-height: var(--tap);
      display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 0;
      background: none; color: var(--foreground); font: inherit; cursor: pointer;
    }
    .visual-editor-key::before {
      content: ""; position: absolute; inset: 4px 2px; z-index: -1; border-radius: 10px; background: transparent;
    }
    @media (hover: hover) { .visual-editor-key:hover::before { background: var(--accent); } }
    .visual-editor-key:active::before { background: var(--accent); }
    .visual-editor-key[aria-pressed="true"] { color: var(--jx-accent); }
    .visual-editor-key[aria-pressed="true"]::before { background: var(--jx-accent-soft); }
    /* The pressed state is also drawn, never the colour alone: a line under the icon, inside the pastille. */
    .visual-editor-key[aria-pressed="true"]::after {
      content: ""; position: absolute; bottom: 7px; left: calc(50% - 8px); width: 16px; height: 2px;
      border-radius: 1px; background: currentColor;
    }
    .visual-editor-key--styles { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
    .visual-editor-key--close { color: var(--muted-foreground); }
    .visual-editor-key:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
    .visual-editor-keys-separator { flex: none; width: 1px; height: 22px; margin: 0; background: var(--border); }

    /* The link field sits on the bar, full width, instead of under the caret where the keyboard would hide it. */
    .document-editor--page .visual-editor-link {
      position: sticky; bottom: 8px; order: 99; width: auto; max-width: none; margin: 0 var(--gutter);
    }
    .document-editor--page .visual-editor-link :is(input, select, .button) { min-height: var(--tap); }
  }
}