/* Reuse the lesson components; corrections are scoped to this resource. */
/* A complete readable baseline does not depend on the CDN utility compiler or MathJax. */
.difference-squares-lesson [hidden] { display: none !important; }
.difference-squares-lesson .nav-link-btn { box-sizing: border-box; max-width: 100%; }
.difference-squares-lesson .dos-math-fallback { font-family: Georgia, serif; overflow-wrap: anywhere; }
.difference-squares-lesson .dos-math-fallback sup { font-size: .75em; }
.difference-squares-lesson #dos-math-status { padding: 12px; border: 1px solid #2e8b57; border-radius: 8px; margin-bottom: 16px; color: #0a2d57; background: #f8f9fa; }
.difference-squares-lesson #dos-math-retry { min-height: 44px; padding: 8px 16px; color: white; background: #0a2d57; border-radius: 6px; }
.difference-squares-lesson aside h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
/* No-JS: missing Tailwind leaves the intrinsic 512px logo in a fixed hit-testing layer.
   Restrict the repair to this exact lesson; keep navigation and CRM/footer intact. */
body:has(.difference-squares-lesson):not(.dos-lesson-js) #page-header.site-header { position: static !important; width: auto !important; max-width: 100%; }
body:has(.difference-squares-lesson):not(.dos-lesson-js) .site-header .site-branding img { width: 48px; height: 48px; }
body:has(.difference-squares-lesson):not(.dos-lesson-js) .site-header .site-branding > a { display: flex; align-items: center; gap: 12px; }
body:has(.difference-squares-lesson):not(.dos-lesson-js) .site-header .container { width: auto; max-width: 100%; padding: 12px; box-sizing: border-box; }
body:has(.difference-squares-lesson):not(.dos-lesson-js) .difference-squares-lesson { padding-top: 16px; }
body:has(.difference-squares-lesson):not(.dos-lesson-js) .difference-squares-lesson > .container { padding: 0 16px; }
body:has(.difference-squares-lesson):not(.dos-lesson-js) .difference-squares-lesson :is(#submit-quiz-btn, .redo-quiz-btn, #quiz-results, #dos-math-status) { display: none !important; }
body:has(.difference-squares-lesson):not(.dos-lesson-js) .difference-squares-lesson .quiz-option { cursor: default; }

.difference-squares-lesson .hero-content.no-image { background: linear-gradient(135deg, #166534, #065f46); }
.difference-squares-lesson .quiz-option { min-height: 44px; }
.difference-squares-lesson :is(a, button, summary, [role="radio"]):focus-visible { outline: 3px solid #0a2d57; outline-offset: 3px; }
.difference-squares-lesson [role="radio"][aria-disabled="true"] { cursor: default; }
.difference-squares-lesson #quiz-results { scroll-margin-top: 100px; }
.difference-squares-lesson .quiz-accessibility-note { color: #2c3e50; }
/* Native optional disclosure: the shared component expects a wrapper > details.
   Keep the native marker, closed default and keyboard/no-JS behaviour. */
.difference-squares-lesson details.collapsible-section > summary {
    box-sizing: border-box;
    min-height: 44px;
    padding: 16px 20px;
    background: #f8f9fa;
    color: #0a2d57;
    font-weight: 700;
    cursor: pointer;
}
.difference-squares-lesson details.collapsible-section > summary:focus-visible {
    outline-offset: -3px;
}
.difference-squares-lesson details.collapsible-section > .example-box {
    margin: 16px;
}
/* Misconception explanations are peers, not a final worked-answer line.
   Leave the shared last-child emphasis unchanged for genuine solutions. */
.difference-squares-lesson #quiz-section .answer-accordion .answer-content > p[data-misconception] {
    margin: 0 0 0.8rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
@media (max-width: 600px) {
 .difference-squares-lesson :is(.example-box, .takeaways) { padding: 16px; }
 .difference-squares-lesson .collapsible-section .content-wrapper { padding: 16px 12px; }
 .difference-squares-lesson .answer-content { padding: 8px; }
 .difference-squares-lesson .itm-content mjx-container.MathJax { font-size: 16px !important; }
 .difference-squares-lesson .itm-content .perfect-square-identity mjx-container.MathJax { font-size: 21px !important; }
 .difference-squares-lesson .quiz-option { padding: 12px; }
 .difference-squares-lesson .hero-title { overflow-wrap: normal; }
}
@media (min-width: 1024px) {
 .difference-squares-lesson .grid > aside { grid-column: 3; grid-row: 1; }
 .difference-squares-lesson .grid > .lg\:col-span-2 { grid-column: 1 / span 2; grid-row: 1; }
}
@media (max-width: 1023px) {
 .difference-squares-lesson .grid > aside { margin-bottom: 24px; }
 .difference-squares-lesson aside :is(.example-box, .takeaways).hidden { display: block !important; }
}
@media (prefers-reduced-motion: reduce) {
 .difference-squares-lesson *, .difference-squares-lesson *::before, .difference-squares-lesson *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}