/* 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; }
}