/* Comparison tables and timelines for the fourth grade-2 lesson. */
.foundation-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0 40px; }
.foundation-nav a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; min-height: 56px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); color: var(--primary-dark); font-weight: 700; text-decoration: none; }
.foundation-nav a span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; font-family: Arial, sans-serif; font-size: 18px; line-height: 1; letter-spacing: 0; border-radius: 50%; background: var(--primary-dark); color: #fff; }
.foundation-nav small { display: block; flex-basis: 100%; font-size: 14px; font-weight: 400; }
.foundation-nav a:hover { background: #e5efe8; }
.foundation-nav a:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.prose .foundation-table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 24px 0; font-size: 17px; line-height: 1.7; }
.foundation-table caption { text-align: left; padding: 0 0 10px; font-weight: 700; color: var(--primary-dark); }
.foundation-table th, .foundation-table td { padding: 14px 16px; border: 1px solid var(--line); vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.foundation-table thead th { background: #eaf3ee; color: var(--primary-dark); }
.foundation-table thead th:first-child { width: 34%; }
.foundation-table tbody th { background: #f7faf8; font-weight: 600; }
.prose .foundation-timeline { list-style: none; padding: 0; margin: 28px 0; }
.prose .foundation-timeline li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; margin: 0; padding: 18px 0; border-bottom: 1px solid var(--line); }
.foundation-year { color: var(--primary-dark); font-weight: 700; }
.prose .foundation-timeline p { margin: 6px 0 0; font-size: 16px; line-height: 1.7; color: var(--muted); }
@media (max-width: 600px) {
  .foundation-nav { grid-template-columns: 1fr; gap: 8px; }
  .foundation-nav a { padding: 12px 16px; }
  .foundation-nav small { flex-basis: auto; margin-left: auto; }
  .prose .foundation-table { font-size: 16px; }
  .foundation-table th, .foundation-table td { padding: 12px 10px; }
  .foundation-table thead th:first-child { width: 37%; }
  .prose .foundation-timeline li { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
}