/* These pages use the app's own UI and palette. Scope editorial styles to the article. */
.entry-test-intro { margin: .5rem auto 1.25rem; max-width: 42rem; padding: 0 1rem; text-align: center; font-size: .85rem; line-height: 1.6; color: var(--sub-readable, var(--text-color)); }
.entry-article { width: min(100% - 3rem, 48rem); margin: 3rem auto; padding-top: 2rem; border-top: 1px solid var(--sub-alt-color); color: var(--text-color); font: 1rem/1.75 'Inter', system-ui, sans-serif; }
.entry-article h2 { font-size: 1.35rem; line-height: 1.3; margin: 2rem 0 .8rem; }
.entry-article h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; }
.entry-article p, .entry-article ul { margin: 0 0 1rem; }
.entry-article ul { padding-left: 1.25rem; }
.entry-article li { margin-bottom: .45rem; }
.entry-article a { color: var(--main-readable, var(--main-color)); text-decoration: underline; text-underline-offset: 3px; }
.entry-article a:focus-visible { outline: 2px solid var(--caret-color); outline-offset: 3px; }
.entry-article .scroll-x { overflow-x: auto; }
.entry-article table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .9rem; }
.entry-article th, .entry-article td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--sub-alt-color); }
.entry-article .wpm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin: 1rem 0; }
.entry-article .wpm-card, .entry-article .formula-box { padding: 1rem; border: 1px solid var(--sub-alt-color); border-radius: 10px; }
.entry-article .number { font: 1.5rem 'JetBrains Mono', monospace; margin-bottom: .4rem; }
.entry-article .desc, .entry-article .label { font-size: .8rem; }
.entry-article .formula { margin: .6rem 0; font-family: 'JetBrains Mono', monospace; overflow-wrap: anywhere; }
/* Join the app's focus mode without collapsing the article and moving the test. */
.entry-test-intro, .entry-article {
  transition: opacity calc(.5s * var(--motion-scale, 1)) var(--spring-smooth, ease-out), visibility 0s;
}
body.typing-active .entry-test-intro, body.typing-active .entry-article {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity calc(.5s * var(--motion-scale, 1)) var(--spring-smooth, ease-out), visibility 0s calc(.5s * var(--motion-scale, 1));
}
@media (prefers-reduced-motion: reduce) {
  .entry-test-intro, .entry-article { transition: none !important; }
}
@media (max-width: 34rem) { .entry-article { width: calc(100% - 2rem); } .entry-article .wpm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }