/* docs/3-supported_commands.php - every command fxTeX supports, as a grid of examples.
   Each example is a button: the equation fxTeX made, and the LaTeX it came from beneath it.
   Clicking one opens its MathML under the grid row (supported-commands.ts). The colours are
   ui.css's documentation tokens. */

body.docs .cmd-search {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 18px 0 8px; padding: 12px 14px;
  background: var(--d-panel); border: 1px solid var(--d-rule); border-radius: 6px;
}
body.docs .cmd-search label { font-weight: 600; color: var(--d-ink-strong); }
body.docs .cmd-search input {
  flex: 1 1 14rem; min-width: 0; font: inherit; padding: 4px 10px;
  border: 1px solid var(--d-rule); border-radius: 4px; background: var(--d-bg); color: var(--d-ink);
}
body.docs .cmd-search input:focus { outline: 2px solid var(--d-accent); outline-offset: 1px; }
body.docs #cmd-filter-count { font-size: 14px; color: var(--d-ink-soft); }

body.docs .cmd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 6px;
  margin: 10px 0 26px;
}
body.docs .cmd {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 6px;
  min-width: 0; padding: 10px 8px 8px; font: inherit; color: var(--d-ink); text-align: center; cursor: pointer;
  /* The site's buttons are set in capitals with wide tracking; LaTeX has to read exactly as typed. */
  text-transform: none; letter-spacing: normal; font-weight: 400; box-shadow: none; height: auto; line-height: 1.4;
  background: var(--d-bg); border: 1px solid var(--d-rule); border-radius: 6px;
}
body.docs .cmd:hover { border-color: var(--d-ink-faint); }
body.docs .cmd:focus-visible { outline: 2px solid var(--d-accent); outline-offset: 1px; }
body.docs .cmd[aria-expanded="true"] { border-color: var(--d-accent); background: var(--d-accent-wash); }
/* Display examples (align, gather, tags) take a whole row. */
body.docs .cmd.cmd-wide { grid-column: 1 / -1; }

/* Long examples take two cells (a whole row when there is only room for one); and whatever
   still does not fit scrolls inside its cell rather than widening the page. */
body.docs .cmd.cmd-long { grid-column: span 2; }
@media (max-width: 30rem) { body.docs .cmd.cmd-long { grid-column: 1 / -1; } }

body.docs .cmd-out {
  display: flex; align-items: center; justify-content: safe center;
  width: 100%; min-width: 0; min-height: 2.6em; overflow-x: auto; overflow-y: hidden; font-size: 1.35em;
  /* A display fraction's or a \Huge glyph's ink reaches a few pixels past its MathML box, which
     overflow-y: hidden (the price of overflow-x: auto) would cut off: room above and below for it,
     taken back by the margins so the cell is no taller. */
  padding: 16px 0; margin: -14px 0;
}
body.docs .cmd code {
  max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 13px; color: var(--d-ink-soft);
  background: none; padding: 0;
}

/* The MathML of the example last clicked, under its row. */
body.docs .cmd-mathml {
  grid-column: 1 / -1; position: relative; margin: 0; padding: 10px 12px; max-height: 18rem; overflow: auto;
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--d-panel); border: 1px solid var(--d-rule); border-radius: 6px; color: var(--d-ink);
}
body.docs .cmd-mathml .code-copy { position: sticky; float: right; top: 0; }

body.docs .cmd-hidden { display: none !important; }