/* The Packages pages (pages/6-packages): the editor at the top of each, and the examples - the
   LaTeX as typed, what fxTeX Pro makes of it, and a line on what it shows. The editor and the
   click-to-open behaviour are package-demo.ts; the MathML is written in by
   tools/fxtex-commands/packages.mjs. The colours are ui.css's documentation tokens. */

body.docs .pkg-editor {
  margin: 18px 0 26px; padding: 12px;
  background: var(--d-panel); border: 1px solid var(--d-rule); border-radius: 8px;
}
body.docs .pkg-editor .CCMathViewHost { margin-top: 8px; background: var(--d-bg); }
body.docs .pkg-editor .CCLatexInput { margin-top: 6px; }

body.docs .pkg-examples { margin: 12px 0 26px; border-top: 1px solid var(--d-rule); }
body.docs .pkg-ex {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center; gap: 6px 18px; padding: 10px 6px;
  border-bottom: 1px solid var(--d-rule); cursor: pointer;
}
body.docs .pkg-ex:hover { background: var(--d-accent-wash); }
body.docs .pkg-ex:focus-visible { outline: 2px solid var(--d-accent); outline-offset: -2px; }
body.docs .pkg-ex > code {
  white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; background: none; padding: 0;
}
body.docs .pkg-out {
  display: block; min-width: 0; overflow-x: auto; overflow-y: hidden; font-size: 1.25em;
  /* Room for ink that reaches past the MathML box, which overflow-y: hidden would cut off. */
  padding: 8px 0; margin: -6px 0;
}
body.docs .pkg-out math { margin: 0; }
body.docs .pkg-ex > p { margin: 0; font-size: 14.5px; color: var(--d-ink-soft); }

/* A wide example - a scheme, a long equation - puts its output under its code. */
body.docs .pkg-ex.pkg-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.docs .pkg-ex.pkg-wide > code { grid-column: 1 / -1; }

@media (max-width: 44rem) {
  body.docs .pkg-ex, body.docs .pkg-ex.pkg-wide { grid-template-columns: minmax(0, 1fr); }
}

body.docs table.pkg-table { width: 100%; margin: 10px 0 22px; }
body.docs table.pkg-table td:first-child { white-space: nowrap; }