/* The checker only (app.html, and inlined into the Pro file by build_pro.js after styles.css): the first-visit sample.
 * firstrun.js marks <html> "is-sample" before the first paint; app.js keeps it in step with the draft.
 * The sheet and the revision schedule reserve about the sample's rendered height (measured at each width, rounded
 * down), so nothing below them moves when the marks are drawn. */
.sample-stamp { margin: 0 0 var(--s3); padding: 6px 0 6px 12px; border-left: 2px solid var(--cyan); font-size: var(--fs-sm); color: var(--lead); max-width: 64ch; }
.sample-stamp b { color: var(--cyan); font-weight: 650; }
.is-sample .sample-stamp[hidden] { display: block !important; }
.is-sample .ed { min-height: 820px; }
@media (min-width: 340px) { .is-sample .ed { min-height: 700px; } }
@media (min-width: 370px) { .is-sample .ed { min-height: 660px; } }
@media (min-width: 400px) { .is-sample .ed { min-height: 560px; } }
@media (min-width: 500px) { .is-sample .ed { min-height: 380px; } }
@media (min-width: 700px) { .is-sample .ed { min-height: 310px; } }
@media (min-width: 1000px) { .is-sample .ed { min-height: 520px; } }
@media (min-width: 1200px) { .is-sample .ed { min-height: 430px; } }
@media (min-width: 1400px) { .is-sample .ed { min-height: 400px; } }
@media (min-width: 1000px) { .is-sample #issues { min-height: 400px; } }