/* Topic-only CSS for smoothing. Loaded after dev_basic/style.css. Tokens only.
   This is the SECOND topic to need the .how-to / .post rules below - they
   were written once already in topics/interpolation/interpolation_style.css.
   CLAUDE.md says extract on second use, but this build stayed inside
   scientific_cal/topics/smoothing/ on purpose (a task boundary set for this
   build kept dev_basic/ and interpolation's own files out of scope, since
   another agent was working in the same tree at the same time). Moving both
   copies into dev_basic/style.css and deleting this file is the next
   opportunity to actually follow that rule - flagged, not done here. */

.how-to {
  flex: none;
  position: relative;
}
.how-to > summary {
  cursor: pointer;
  width: fit-content;
  padding: 2px 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--label-fg);
}
.how-to > summary:hover,
.how-to[open] > summary {
  color: var(--accent);
}

.how-to-body {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: min(760px, calc(100vw - 60px));
  max-height: min(60vh, 520px);
  overflow-y: auto;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--active-bg);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  font-size: 13px;
  line-height: 1.6;
  color: var(--header-fg);
}
.how-to-intro {
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--cell-fg);
}

.how-to-body ol {
  margin: 0 0 10px;
  padding-left: 20px;
}
.how-to-body li { margin: 4px 0; }
.how-to-body p { margin: 8px 0 0; }
.how-to-body strong { color: var(--cell-fg); font-weight: 600; }

/* ---- Blog article: elements dev_basic/style.css does not cover ---- */

.post img {
  width: 100%;
  height: auto;
  display: block;
  margin: 24px auto;
}

.post table {
  border-collapse: collapse;
  width: 100%;
  margin: 20px 0;
  font-size: 14px;
}
.post th,
.post td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  color: var(--header-fg);
}
.post th {
  background: var(--header-bg);
  color: var(--cell-fg);
  font-weight: 600;
}

/* Display formula block. Plain text/monospace, not MathJax - this topic's
   formulas (a moving average, an EWMA recursion) read fine typeset that way,
   and pulling in the 2.1MB vendored MathJax build was out of this build's
   scope (see the note above). Same shaded-box treatment as a code fence so a
   formula still reads as a block, not as prose. */
.post .eq {
  background: var(--header-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 20px 0;
  overflow-x: auto;
  text-align: center;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--cell-fg);
}