init commit (base extensions: notes)

notes/calc-notes.css

@@ -0,0 +1,90 @@
+/* calc-notes — HTML layout for the calc / calc* environments */
+
+.calc {
+  display: grid;
+  /* lhs | rhs | notes */
+  grid-template-columns: max-content max-content minmax(8rem, 1fr);
+  column-gap: 0.35rem;
+  row-gap: 0.6rem;
+  align-items: baseline;
+  margin: 1rem 0 1.4rem;
+  /* allow horizontal scrolling for very wide equations, but never show a
+     vertical bar (Firefox computes phantom vertical overflow otherwise) */
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-bottom: 0.4em; /* keep descenders clear of a horizontal bar */
+}
+
+.calc-row { display: contents; }
+
+.calc-lhs  { grid-column: 1; justify-self: end; }
+.calc-rhs  { grid-column: 2; justify-self: start; }
+.calc-full { grid-column: 1 / 3; justify-self: start; }
+
+/* ---- notes ------------------------------------------------------- */
+
+.calc-notes {
+  grid-column: 3;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.75rem;
+  align-items: baseline;
+  min-width: 0;
+  padding-left: 0.9rem;
+}
+
+.calc-note {
+  color: var(--calc-notecolor, #B45309);
+  font-size: 0.85em;
+  line-height: 1.35;
+}
+
+.calc-note > summary {
+  cursor: pointer;
+  list-style: none;          /* remove the default triangle ... */
+  user-select: none;
+  opacity: 0.7;
+  font-style: italic;
+}
+.calc-note > summary::-webkit-details-marker { display: none; }
+.calc-note > summary::before { content: "▸ "; font-style: normal; }
+.calc-note[open] > summary::before { content: "▾ "; }
+.calc-note > summary:hover { opacity: 1; }
+
+.calc-note[open] {
+  background: color-mix(in srgb, var(--calc-notecolor, #B45309) 8%, transparent);
+  border-left: 2px solid var(--calc-notecolor, #B45309);
+  border-radius: 0.25rem;
+  padding: 0.15rem 0.45rem;
+}
+
+.calc-note-body { margin-top: 0.1rem; }
+.calc-note-body p { margin: 0; }
+
+/* \mnote: math note (no extra styling needed — body is typeset math) */
+.calc-note-math .calc-note-body { padding: 0.1rem 0; }
+
+/* ---- calc*: boxed final result ----------------------------------- */
+
+.calc-box {
+  display: inline-block;
+  border: 1.5px solid currentColor;
+  border-radius: 0.3em;
+  padding: 0.3em 0.65em;
+  margin-top: 0.15em;
+  background: color-mix(in srgb, currentColor 4%, transparent);
+}
+
+/* ---- printing: show notes unfolded, like the PDF ------------------ */
+
+@media print {
+  .calc-note > summary { display: none; }
+  .calc-note[open] { background: none; border: none; padding: 0; }
+}
+
+/* small screens: notes drop under the equation line */
+@media (max-width: 560px) {
+  .calc { grid-template-columns: max-content 1fr; }
+  .calc-notes { grid-column: 1 / 3; padding-left: 1.5rem; }
+  .calc-full { grid-column: 1 / 3; }
+}