@layer components {
  /* The reader's own block, with its bar laid over the top right corner: nothing moves when the bar shows. */
  .visual-janus { position: relative; margin: 0; }
  .visual-janus-bar {
    position: absolute; top: 4px; right: 4px; z-index: 1; display: flex; opacity: 0; pointer-events: none; align-items: center; gap: 6px; padding: 4px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover);
    color: var(--popover-foreground); box-shadow: var(--shadow-sm); font-size: 13px;
  }
  /* Hidden by opacity, not display: its buttons stay in the tab order, and focus shows the bar. */
  .visual-janus:is(:focus-within, .ProseMirror-selectednode) > .visual-janus-bar { opacity: 1; pointer-events: auto; }
  /* A tap hovers too, and iOS Safari drops the click of a tap whose hover reveals content: a real hover only. */
  @media (hover: hover) { .visual-janus:hover > .visual-janus-bar { opacity: 1; pointer-events: auto; } }
  .visual-janus[data-bar-dismissed] > .visual-janus-bar { opacity: 0; pointer-events: none; }
  .visual-janus-label { color: var(--muted-foreground); }
  .visual-janus.ProseMirror-selectednode, .visual-original.ProseMirror-selectednode {
    outline: 2px solid var(--jx-accent); outline-offset: 2px;
  }
  .visual-janus-panel, .visual-original-edit {
    display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 12px; border: 1px solid var(--border);
    border-radius: var(--radius-md); background: var(--card); color: var(--card-foreground);
  }
  .visual-janus-panel-title { margin: 0; font-weight: 600; }
  .visual-janus-field { display: block; }
  .visual-janus-source { width: 100%; min-height: 8lh; font: 13px/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
  .visual-janus-reason { margin: 0; color: var(--destructive); font-size: 14px; }
  .visual-janus-reason[hidden] { display: none; }
  /* A sign before the text, so the error is not told by its colour alone. */
  .visual-janus-reason::before { content: "⚠ " / ""; }
  .visual-janus-actions { display: flex; gap: 8px; }

  /* What the editor cannot show, kept as it was written. */
  .visual-original {
    margin: 8px 0; padding: 8px 12px; border: 1px dashed var(--border); border-radius: var(--radius-md);
    background: var(--muted);
  }
  .visual-original-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
  .visual-original-label { margin-right: auto; color: var(--muted-foreground); }
  .visual-original-text { margin: 0; overflow-x: auto; font: 13px/1.5 var(--font-mono); white-space: pre-wrap; }

  /* Placed over the table by the script, like the link field. */
  .visual-table-bar {
    position: absolute; z-index: 20; display: flex; align-items: center; gap: 2px; padding: 4px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--popover);
    color: var(--popover-foreground); box-shadow: var(--shadow-sm); font-size: 13px;
  }
  .visual-table-bar[hidden] { display: none; }
  .visual-table-tool {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 8px; border: 0;
    border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer;
  }
  .visual-table-tool:is(:hover, :active) { background: var(--muted); }
  .visual-table-tool:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 1px; }
  /* Touch: 44 px tools, and a bar that wraps inside the surface instead of leaving the screen. */
  @media (pointer: coarse) {
    .visual-table-bar { flex-wrap: wrap; max-width: 100%; }
    .visual-table-tool {
      position: relative; justify-content: center; min-width: var(--tap); min-height: var(--tap);
    }
    .visual-table-tool::before { content: ""; position: absolute; inset: -1px; }
  }
}