/* Site footer (generated by scripts/build-chrome.mjs), linked from inside the
   footer chrome block so it never blocks the first paint. Same cascade layer as
   the other components in style.css. */
@layer components {
  /* ---------- footer: the back cover of the schrift ----------
     Name label (student's blue pen), contents on ruled lines, the times tables
     printed in the squares, the teacher's red paraaf. content-visibility keeps
     layout and the Caveat font off the critical path until the footer is near. */

  .site-footer {
    --hl: color-mix(in srgb, var(--info) 13%, transparent);
    margin-top: var(--s-9);
    padding: var(--s-8) 0 var(--s-5);
    border-top: 1px solid var(--line-strong);
    box-shadow: inset 0 3px 0 -2px var(--line);
    background-color: var(--sunk);
    background-image:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px);
    background-size: 24px 24px;
    content-visibility: auto;
    contain-intrinsic-size: auto 1100px;
  }

  .site-footer__inner {
    display: grid;
    grid-template-areas: "cover" "nav" "tafel" "meta";
    gap: var(--s-7);
    width: min(100% - 2 * var(--gutter), var(--w-wide));
    margin-inline: auto;
  }

  .site-footer__cover {
    grid-area: cover;
  }

  /* The name label: a sticker, slightly askew, ruled for handwriting. */
  .footer-label {
    max-width: 21rem;
    margin: 0;
    padding: var(--s-3) var(--s-5) var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 14px 24px -18px rgba(10, 14, 22, 0.5);
    rotate: -1.25deg;
  }

  .footer-label > div {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: end;
    min-height: 46px;
    border-bottom: 1px solid var(--line-strong);
  }

  .footer-label dt {
    padding-bottom: 7px;
    color: var(--ink-3);
    font-size: var(--fs-xs);
  }

  .footer-label dt::after {
    content: ":";
  }

  .footer-label dd {
    margin: 0;
    padding-bottom: 2px;
    color: var(--info);
    font-family: var(--font-note);
    font-size: 1.625rem;
    line-height: 1.15;
  }

  .footer-label dd a {
    display: inline-block;
    padding-block: 5px 3px;
    color: inherit;
    font-size: 2.125rem;
    line-height: 1;
    text-decoration: none;
  }

  .footer-label dd a:hover {
    text-decoration: underline;
    text-decoration-color: var(--pen);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 5px;
  }

  .site-footer__lead {
    max-width: 32ch;
    margin: var(--s-6) 0 0;
    color: var(--ink-2);
  }

  /* Contents, written on the ruled lines; headings underlined with a ruler. */
  .site-footer__nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    gap: var(--s-6) var(--s-5);
    align-content: start;
  }

  .site-footer h2 {
    margin: 0 0 var(--s-2);
    font-family: var(--font-display);
    font-size: var(--fs-base);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }

  .site-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__nav li {
    border-bottom: 1px solid var(--line);
  }

  .site-footer__nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: 1.3;
    text-decoration: none;
  }

  .site-footer__nav a:hover,
  .site-footer__nav a[aria-current="page"] {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--pen);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
  }

  .site-footer__nav a[aria-current="page"] {
    font-weight: 600;
  }

  /* Times tables, one number per square. Decorative (aria-hidden). */
  .footer-tafel {
    --sq: 24px;
    grid-area: tafel;
    justify-self: start;
    margin: 0;
  }

  .footer-tafel figcaption {
    margin-bottom: var(--s-3);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink);
  }

  .footer-tafel table {
    border-collapse: collapse;
    outline: 1px solid var(--line-strong);
    outline-offset: 3px;
    background: var(--surface);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    cursor: default;
    user-select: none;
  }

  .footer-tafel th,
  .footer-tafel td {
    position: relative;
    width: var(--sq);
    height: var(--sq);
    padding: 0;
    border: 1px solid var(--line);
    text-align: center;
    color: var(--ink-2);
  }

  .footer-tafel th {
    color: var(--ink);
    font-weight: 700;
  }

  .footer-tafel tr:first-child > * {
    border-bottom: 1.5px solid var(--ink-3);
  }

  .footer-tafel tr > :first-child {
    border-right: 1.5px solid var(--ink-3);
  }

  .footer-tafel tr:first-child > :first-child {
    color: var(--pen-strong);
  }

  /* Read a tafel like a ruler: the row and column shade, the pen circles it. */
  .footer-tafel tr:hover > *,
  .footer-tafel table:has(tr > :nth-child(2):hover) tr > :nth-child(2),
  .footer-tafel table:has(tr > :nth-child(3):hover) tr > :nth-child(3),
  .footer-tafel table:has(tr > :nth-child(4):hover) tr > :nth-child(4),
  .footer-tafel table:has(tr > :nth-child(5):hover) tr > :nth-child(5),
  .footer-tafel table:has(tr > :nth-child(6):hover) tr > :nth-child(6),
  .footer-tafel table:has(tr > :nth-child(7):hover) tr > :nth-child(7),
  .footer-tafel table:has(tr > :nth-child(8):hover) tr > :nth-child(8),
  .footer-tafel table:has(tr > :nth-child(9):hover) tr > :nth-child(9),
  .footer-tafel table:has(tr > :nth-child(10):hover) tr > :nth-child(10),
  .footer-tafel table:has(tr > :nth-child(11):hover) tr > :nth-child(11) {
    background: var(--hl);
  }

  .footer-tafel td:hover {
    color: var(--ink);
    font-weight: 700;
  }

  .footer-tafel td:hover::after {
    content: "";
    position: absolute;
    inset: -5px -7px;
    z-index: 1;
    pointer-events: none;
    background: var(--pen);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M31 5.5C25 1.5 10 2 5 8s-1.5 14 9.5 16 21.5-.5 23.5-8.5S34 3 25 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cpath d='M31 5.5C25 1.5 10 2 5 8s-1.5 14 9.5 16 21.5-.5 23.5-8.5S34 3 25 3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    animation: pen-circle var(--t-panel) var(--ease-out) both;
  }

  @keyframes pen-circle {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0);
    }
  }

  /* Byline with the teacher's paraaf; © and the other language. */
  .site-footer__meta {
    grid-area: meta;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0 var(--s-5);
    padding-top: var(--s-3);
    border-top: 1px solid var(--line-strong);
    color: var(--ink-3);
    font-size: var(--fs-sm);
  }

  .site-footer__meta p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--s-4);
    margin: 0;
  }

  .paraaf {
    width: 58px;
    height: 26px;
    margin-inline-start: calc(-1 * var(--s-2));
    color: var(--pen);
  }

  .site-footer__meta a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink-2);
  }

  @media (min-width: 768px) {
    .site-footer {
      contain-intrinsic-size: auto 760px;
    }

    .site-footer__inner {
      grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
      grid-template-areas: "cover nav" "tafel nav" "meta meta";
      gap: var(--s-7) var(--s-8);
    }

    /* Two balanced columns, like a contents page; groups never split. */
    .site-footer__nav {
      display: block;
      columns: 2;
      column-gap: var(--s-6);
    }

    .site-footer__nav > div {
      break-inside: avoid;
      margin-bottom: var(--s-6);
    }
  }

  @media (min-width: 768px) and (pointer: fine) {
    .site-footer__nav a {
      min-height: 34px;
    }
  }

  @media (min-width: 1200px) {
    .site-footer {
      contain-intrinsic-size: auto 560px;
    }

    .site-footer__inner {
      grid-template-columns: 18rem minmax(0, 1fr) auto;
      gap: var(--s-7);
      grid-template-areas: "cover nav tafel" "meta meta meta";
    }

    .footer-tafel {
      --sq: 27px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .footer-tafel td:hover::after {
      animation: none;
    }
  }
}