/* =========================================================================
   XML Formatter — page layer
   -------------------------------------------------------------------------
   The whole two-pane design lives in editor-bench.css, shared with the JSON
   formatter, so the two pages are identical by construction rather than by
   two people remembering to keep them in step.

   Only what is genuinely specific to XML belongs here: the attribute colour
   and the attribute chips shown on tree rows.
   ========================================================================= */

.xmlfmt-page{
  --sx-attr: #7a4bbd;   /* attribute names */
  --sx-pi:   #6b7484;   /* <?xml ... ?> and comments */
}
html[data-theme="dark"] .xmlfmt-page{
  --sx-attr: #c9a5f5;
  --sx-pi:   #798395;
}

/* syntax colours unique to XML — elements reuse the shared --sx-key */
.xmlfmt-page .x-attr{ color: var(--sx-attr); }
.xmlfmt-page .x-com,
.xmlfmt-page .x-pi{ color: var(--sx-pi); font-style: italic; }

/* Attributes ride along on the tree row, so an element's identifying values
   are readable without expanding it. */
.xmlfmt-page .x-attr-chip{
  display: inline-flex; align-items: baseline; gap: 4px;
  max-width: 26ch;
  padding: 1px 7px;
  border: 1px solid var(--rule-2); border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.xmlfmt-page .x-attr-chip b{ color: var(--sx-attr); font-weight: 500; }