/* Shared reading layout and the multiplication reference workspace. */
:root { --primary: #176c59; --primary-dark: #105443; --accent: #286da8; --text: #202a30; --muted: #58666c; --border: #dce3e1; --radius-lg: 8px; --radius-md: 8px; --radius-sm: 6px; }
body { background: #fafcfb; letter-spacing: 0; }
header { background: #fff; backdrop-filter: none; box-shadow: none; }
.logo { letter-spacing: 0; color: #176c59; white-space: nowrap; }
.navbar { max-width: 1280px; gap: 16px; }
.nav-links { gap: 2px; }
.nav-links a { padding: 8px 10px; border-radius: 4px; }
.container { max-width: 1240px; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; }
.container > :only-child { grid-column: 1 / -1; }
.main-content { min-width: 0; }
.main-content p, .main-content li { font-size: 16px; line-height: 1.85; }
.main-content article { gap: 20px; }
.main-content h1 { font-size: 30px; line-height: 1.4; overflow-wrap: anywhere; }
.main-content h2, .main-content h3 { line-height: 1.5; }
.main-content > article > h2 { margin-top: 20px; }
.main-content article > p a, .main-content article > li a { color: #176c59; text-underline-offset: 3px; }
.content-card, .page-section, .sidebar-panel, .intro-card, .cta-box { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.page-section, .content-card { padding: 24px 0; border-top: 1px solid var(--border); }
.sidebar-panel { padding: 0 0 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.sidebar-panel h3 { font-size: 18px; }
.sidebar-panel ul, .sidebar-panel ol { padding-left: 20px; }
.sidebar-panel li { margin: 8px 0; }
.sidebar .nav-button-list { padding: 0; }
.sidebar .nav-button-list a { background: transparent; border-radius: 0; box-shadow: none; padding: 10px 0; border: 0; border-bottom: 1px solid var(--border); }
.download-card, .worksheet-card, .resource-card { border-radius: 8px; box-shadow: none; background: #fff; }
.download-card:hover, .worksheet-card:hover { transform: none; box-shadow: none; }
.main-content .download-card { gap: 12px; }
.download-card .preview-box { margin-bottom: 0; border-radius: 4px; }
.download-card .image-meta { font-size: 13px; line-height: 1.6; }
.first-visit-guide a { color: #176c59; }
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-light { border-radius: 6px; box-shadow: none; }
.btn-primary, .btn-success { background: #176c59; color: #fff; }
.tool-shell, .quiz-shell { border-radius: 8px; box-shadow: none; background: #fff; }
.tool-shell { max-width: none; padding: 0; border: 0; background: transparent; }
.tool-controls { background: #f1f6f4; border-radius: 6px; }
.tool-controls label:has(input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.tool-controls select { border-radius: 4px; }
.worksheet-preview { border-radius: 8px; box-shadow: none; }
.site-footer { background: #edf3f0; color: #384e44; border-top: 1px solid #d2dfd7; }
.footer-brand strong, .site-footer a { color: #244639; }
.footer-brand p, .footer-note { color: #53695e; }
.site-footer a:hover { color: #105443; }
.footer-note { border-color: #cfdbd3; }
.footer-brand { flex: 0 1 410px; }
.footer-links { flex: 1; max-width: 650px; }
:focus-visible { outline: 3px solid #b95b32; outline-offset: 3px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 2000; padding: 10px 16px; background: #fff; color: #176c59; }
.skip-link:focus { top: 12px; }
.article-toc { padding: 16px 0; border-block: 1px solid var(--border); }
.article-toc ol { display: flex; flex-wrap: wrap; gap: 8px 26px; padding-left: 24px; margin: 8px 0 0; }
.article-toc a { color: #176c59; font-size: 14px; }
[id] { scroll-margin-top: 110px; }
.home-main { width: min(1200px, calc(100% - 48px)); margin: 32px auto 0; }
.home-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.home-title h1 { font-size: 36px; line-height: 1.3; margin: 8px 0; }
.eyebrow { color: #176c59; font-size: 13px; font-weight: 700; }
.home-title p { color: #58666c; }
.home-actions { display: flex; gap: 10px; flex-shrink: 0; }
.reference-layout { display: grid; grid-template-columns: minmax(0, 1fr) 245px; gap: 30px; }
.reference-heading { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 14px; }
.reference-heading h2 { font-size: 21px; }
.reference-heading a { font-size: 14px; color: #176c59; }
.multiplication-reference { border: 1px solid #cbd9d2; background: #fff; border-radius: 6px; padding: 12px; }
.reference-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; border-bottom: 1px solid #e3ebe6; }
.reference-row:last-child { border-bottom: 0; }
.row-number { align-self: stretch; background: #e9f2ed; color: #176c59; font-size: 15px; display: grid; place-items: center; }
.reference-cells { display: flex; flex-wrap: wrap; padding: 4px; gap: 2px; }
.reference-cell { min-width: 78px; min-height: 52px; display: flex; flex-direction: column; justify-content: center; padding: 3px 7px; }
.reference-cell strong { font-size: 15px; font-weight: 600; }
.reference-cell span { font-size: 11px; color: #65736b; }
.reference-row:nth-child(3n+2) { background: #f2f7fb; }
.reference-row:nth-child(3n) { background: #fcf8ed; }
.reference-note { font-size: 13px; color: #58666c; margin-top: 10px; }
.quick-choice { padding: 18px 0; border-bottom: 1px solid var(--border); }
.quick-choice:first-child { padding-top: 0; }
.quick-choice .step { color: #176c59; font-size: 12px; font-weight: 700; }
.quick-choice h3 { font-size: 18px; margin: 6px 0; }
.quick-choice p { font-size: 14px; color: #58666c; margin-bottom: 8px; }
.quick-choice a { color: #176c59; font-weight: 600; font-size: 14px; }
.home-section { padding: 36px 0; border-bottom: 1px solid var(--border); }
.section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.section-heading h2 { font-size: 24px; }
.section-heading a { color: #176c59; }
.print-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.print-pick img { width: 100%; aspect-ratio: 1.414; object-fit: contain; background: #fff; border: 1px solid #dce3e1; }
.print-pick h3 { margin-top: 12px; font-size: 18px; }
.print-pick p { font-size: 14px; color: #58666c; margin-top: 4px; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.guide-grid h3 { font-size: 18px; margin-bottom: 10px; }
.guide-grid ul { padding-left: 18px; }
.guide-grid li { margin: 8px 0; font-size: 15px; }
.guide-grid a { color: #176c59; }
.home-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.home-faq h3 { font-size: 17px; margin-bottom: 8px; }
.home-faq p { font-size: 15px; line-height: 1.8; color: #58666c; }
.example-table { width: 100%; border-collapse: collapse; }
.example-table th, .example-table td { text-align: left; padding: 12px; border: 1px solid var(--border); }
.example-table th { background: #f0f5f2; }
.practice-sheet { padding: 24px 0; break-inside: avoid; }
.practice-sheet h2 { margin-bottom: 12px; }
.fixed-problems { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style-position: inside; padding: 0; }
.fixed-problems li { font-size: 16px; white-space: nowrap; padding: 8px 0; }
.answer-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 16px; padding-left: 24px; }
.answer-list li { font-size: 14px; }
.answer-key summary { cursor: pointer; font-weight: 700; padding: 12px 0; }
.worksheet-page { padding: 24px 0; }
.worksheet-page + .worksheet-page { border-top: 1px solid var(--border); }
.worksheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.quiz-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.quiz-actions button { padding: 8px 16px; }
.option-btn:disabled { cursor: default; opacity: .65; }
.option-btn.is-correct { background: #d8efdf; border-color: #176c59; color: #164c35; opacity: 1; }
.option-btn.is-wrong { background: #f9e5e1; border-color: #ac4937; color: #8b3021; opacity: 1; }
.feedback { min-height: 34px; }
.missed-questions { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
@media (max-width: 1000px) {
 .container { grid-template-columns: minmax(0, 1fr); }
 .reference-layout { grid-template-columns: minmax(0, 1fr); }
 .reference-aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
 .quick-choice:first-child { padding-top: 18px; }
 .home-title { align-items: start; flex-direction: column; }
 .fixed-problems { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
 .home-main { width: calc(100% - 32px); margin-top: 24px; }
 .home-title h1 { font-size: 28px; }
 .home-title p { font-size: 14px; }
 .home-actions { flex-wrap: wrap; }
 .reference-cell { min-width: 80px; }
 .reference-aside, .print-picks, .guide-grid, .home-faq { grid-template-columns: 1fr; }
 .reference-aside { gap: 0; }
 .print-picks { gap: 28px; }
 .section-heading h2 { font-size: 21px; }
 .section-heading { flex-wrap: wrap; }
 .main-content h1 { font-size: 26px; }
 .footer-brand { flex-basis: auto; }
 .fixed-problems, .answer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .worksheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 17px; }
 .example-table th, .example-table td { padding: 8px; font-size: 13px; overflow-wrap: anywhere; }
}
@media print {
 .skip-link, .breadcrumb, .article-toc, .home-actions, .reference-aside, .no-print { display: none !important; }
 .container { display: block; }
 .worksheet-page { break-after: page; padding: 0; }
 .worksheet-page:last-child { break-after: auto; }
 .worksheet-page + .worksheet-page { border: 0; }
 .worksheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px 16px; font-size: 16px; }
 .problem { padding: 7px 0; break-inside: avoid; }
 .worksheet-preview { min-height: 0; }
 body.print-fixed .main-content > article > :not(.fixed-worksheet) { display: none !important; }
 body.print-fixed .fixed-worksheet .no-print { display: none !important; }
 .fixed-problems { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 .fixed-problems li { font-size: 13px; }
 .practice-sheet { break-after: page; padding: 0; }
 .practice-sheet:last-child { break-after: auto; }
 @page { size: A4; margin: 14mm; }
}