/* ==========================================================================
   11 Plus Blocks: /11-plus-practice-papers/ only
   --------------------------------------------------------------------------
   Loaded by that one page. Two things live here that exist nowhere else: the
   printable sheet, and the print stylesheet that strips the site around it so
   Save as PDF produces the worksheet and nothing else.

   Screen colours are tokens, so the page follows the three-state theme. The
   print block is the one place with literal black and white, because a page
   printed from a dark-mode browser should still come out as paper.
   ========================================================================== */

/* --- The plan card, beside the hero --------------------------------------- */
.sheet-plan { width: min(420px, 100%); }
.sheet-plan__title {
  font-size: var(--step-2);
  margin-bottom: var(--space-s);
}
.sheet-plan__list {
  margin: 0 0 var(--space-s);
  padding-left: 1.2em;
  color: var(--ink-soft);
  font-size: var(--step-0);
}
.sheet-plan__list li { margin-bottom: 0.6em; }
.sheet-plan__note {
  margin: 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--hairline);
  font-size: var(--step--1);
  color: var(--ink-faint);
}

/* --- The sheet ------------------------------------------------------------
   Paper, but made of tokens: on screen it is a card like any other, and it
   only becomes literal black on white in the print block below. */
.sheet {
  padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}

.sheet__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: var(--space-s);
  margin-bottom: var(--space-m);
  border-bottom: 2px solid var(--hairline-2);
}
.sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--deep);
}
.sheet__meta {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.sheet__fields { display: flex; gap: var(--space-m); }
.sheet__fields span {
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  font-family: var(--font-label);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.sheet__fields span::after {
  content: "";
  display: block;
  width: 6.5rem;
  border-bottom: 1px solid var(--hairline-2);
}

.sheet__questions {
  margin: 0;
  padding-left: 1.6em;
}
.sheet__questions > li {
  margin-bottom: var(--space-m);
  break-inside: avoid;
}
.sheet__questions > li::marker {
  font-family: var(--font-label);
  font-weight: 700;
  color: var(--purple);
}
.sheet__prompt {
  margin: 0;
  font-size: var(--step-0);
  color: var(--ink);
}
/* The line the answer is written on. Decorative, so it is aria-hidden in the
   markup and empty here. */
.sheet__rule {
  height: 0;
  margin: 1.7rem 0 0.35rem;
  border-bottom: 1px dashed var(--hairline-2);
}
.sheet__tag {
  margin: 0;
  font-family: var(--font-label);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.sheet__answers {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 2px solid var(--hairline-2);
  break-inside: avoid;
}
.sheet__answers h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-2xs);
}
.sheet__answers ol {
  margin: 0;
  padding-left: 1.6em;
  columns: 2;
  column-gap: var(--space-m);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.sheet__answers li { break-inside: avoid; }
@media (max-width: 560px) {
  .sheet__answers ol { columns: 1; }
}

.sheet__foot {
  margin: var(--space-m) 0 0;
  padding-top: var(--space-s);
  border-top: 1px solid var(--hairline);
  font-family: var(--font-label);
  font-size: 0.7rem;
  color: var(--ink-faint);
}

/* The button does nothing without JavaScript, so it is not shown without it.
   The hint underneath covers that case and is always visible. */
.sheet__actions {
  display: none;
  justify-content: center;
  margin-top: var(--space-m);
}
.js .sheet__actions { display: flex; }

.sheet__hint {
  margin-top: var(--space-s);
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.sheet__hint kbd {
  padding: 0.15em 0.45em;
  border-radius: 6px;
  background: var(--wash-strong);
  border: 1px solid var(--hairline);
  font-size: 0.85em;
}

/* --- The topic menu -------------------------------------------------------- */
.topic-heading {
  font-family: var(--font-label);
  font-size: var(--step--1);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--course-accent, var(--purple));
  margin-bottom: var(--space-s);
}
.topic-grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.topic-group {
  padding: var(--space-s);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-row);
}
.topic-group__name {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--deep);
}
.topic-group__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topic-group__list li { margin: 0; }
.topic-group__list .pill { font-size: 0.78rem; white-space: normal; }

/* ==========================================================================
   Print
   --------------------------------------------------------------------------
   The page claims that printing takes the sheet and nothing else, so this is
   the part that has to be true. Everything outside the sheet section is
   removed, including the breadcrumb, which sits in a bare .wrap directly
   under <body> rather than inside <main>.
   ========================================================================== */
@media print {
  @page { margin: 14mm; }

  body { background: #fff !important; }

  .site-header,
  .site-footer,
  .sticky-cta,
  .skip-link,
  body > .wrap { display: none !important; }

  main > *:not(#sheet) { display: none !important; }

  #sheet { padding: 0 !important; background: #fff !important; }
  #sheet .wrap { max-width: none !important; padding: 0 !important; }
  #sheet .section-head,
  .sheet__actions,
  .sheet__hint { display: none !important; }

  .sheet {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  .sheet,
  .sheet h3,
  .sheet p,
  .sheet li,
  .sheet__questions > li::marker { color: #000 !important; }

  .sheet__head { border-bottom-color: #000 !important; }
  .sheet__answers { border-top-color: #000 !important; }
  .sheet__fields span::after,
  .sheet__rule { border-bottom-color: #777 !important; }
  .sheet__foot { border-top-color: #bbb !important; }
  .sheet__tag,
  .sheet__meta,
  .sheet__foot,
  .sheet__fields span { color: #666 !important; }
}