/* UX batch 2026-10-26, area: code (one file per area so parallel work does not collide) */

/* «So funktioniert's»: one short line per button */
.howto p { margin: 0.2rem 2rem 0.3rem 0; }
.howto .howto-buttons { margin: 0.3rem 0 0.2rem; padding-left: 1.1rem; }
.howto .howto-buttons li { margin: 0.15rem 0; }

/* German one-liner under an English Python error or a failed test */
.code-explain { margin: 0.3rem 0 0; font-size: 0.85rem; line-height: 1.4; color: var(--ink);
  padding: 0.3rem 0.55rem; border-left: 3px solid var(--warn); background: var(--warn-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.code-explain strong { font-family: var(--mono, ui-monospace, monospace); font-weight: 600; font-size: 0.8rem; }
.test-list li > .code-explain { grid-column: 2 / -1; }
pre + .code-explain { margin-bottom: 0.4rem; }

/* run output from before the last edit */
.code-output.is-stale pre, .code-output.is-stale .test-list { opacity: 0.55; }
.code-output .stale-tag { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }
.code-output { scroll-margin-bottom: 1rem; }

/* course Spickzettel built from the topic cards: show the code in full, also when printed */
.formulas .ref-card-body pre { max-height: none; }
.ref-card-body table { border-collapse: collapse; margin: 0.5rem 0; }
.ref-card-body th, .ref-card-body td { border: 1px solid var(--line); padding: 0.2rem 0.6rem; text-align: center; }
.staged-hint:focus { outline: none; }