@layer components {
  /* The « Aa » sheet's options run the sheet's full width, as rows: each is drawn in the style it applies. */
  .visual-styles { margin: 0 calc(-1 * var(--gutter)); }
  .visual-styles-option {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 50px; padding: 0 var(--gutter);
    border: 0; border-radius: 0; background: none; color: var(--foreground); font: inherit; font-size: 16px;
    text-align: left; cursor: pointer;
  }
  .visual-styles-option + .visual-styles-option { border-top: 1px solid var(--border); }
  .visual-styles-option:is(:hover, :active) { background: var(--accent); }
  .visual-styles-option:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: -2px; }
  .visual-styles-option > svg { flex: none; color: var(--muted-foreground); }
  .visual-styles-option--heading2 { font-size: 20px; font-weight: 600; }
  .visual-styles-option--heading3 { font-size: 17px; font-weight: 600; }
  /* The tick carries the current style without colour; it is never drawn on the others. */
  .visual-styles-check { display: none; margin-left: auto; color: var(--jx-accent); }
  .visual-styles-option[aria-pressed="true"] { color: var(--jx-accent); font-weight: 600; }
  .visual-styles-option[aria-pressed="true"] .visual-styles-check { display: inline-flex; }
  .visual-styles-option[aria-disabled="true"] { color: var(--muted-foreground); cursor: not-allowed; }
  .visual-styles-option[aria-disabled="true"]:is(:hover, :active) { background: none; }
  .visual-styles-hint:not([hidden]) {
    margin: 0; padding: 0 var(--gutter) 8px; font-size: 13px; color: var(--muted-foreground);
  }
  /* The way out to raw Markdown stands apart from the styles. */
  .visual-styles-separator { height: 0; margin: 6px 0; border: 0; border-top: 1px solid var(--border); }
  /* The colors: rows of five 44 px swatches under a small heading; the pressed one has a ring and a tick. */
  .visual-styles-heading {
    margin: 0; padding: 14px var(--gutter) 6px; border-top: 1px solid var(--border); color: var(--muted-foreground);
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  }
  .visual-styles-swatches { display: grid; grid-template-columns: repeat(5, minmax(var(--tap), 1fr)); gap: 8px; padding: 0 var(--gutter) 8px; }
  .visual-styles-swatch {
    position: relative; display: flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap);
    padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
    color: var(--foreground); font: 700 16px/1 var(--font-sans); cursor: pointer;
  }
  .visual-styles-swatch > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; }
  .visual-styles-swatch:is(:hover, :active) { border-color: var(--foreground); }
  .visual-styles-swatch:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .visual-styles-swatch[aria-pressed="true"] { outline: 2px solid var(--jx-accent); outline-offset: 2px; }
  .visual-styles-swatch[aria-pressed="true"]::after {
    content: "✓" / ""; position: absolute; right: 2px; bottom: 1px; padding: 0 2px; border-radius: var(--radius-sm);
    background: var(--background); color: var(--foreground); font-size: 13px; line-height: 14px;
  }
  .visual-styles-swatch--background:first-of-type::before {
    content: "×" / ""; position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; color: var(--muted-foreground);
  }
}