/* Self-hosted fonts (latin subset, OFL, see assets/fonts/LICENSES.md). One @font-face set for
   both themes, so switching theme never reflows text. Atkinson is a variable file (400-700). */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lexend";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/lexend-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Type scale from the design tokens. */
h1,
.title {
  font-size: var(--fs-h1);
  line-height: 1.15;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.2;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
}

/* Navbar: page-coloured bar with a hairline; the active link is underlined, not only coloured. */
.navbar {
  border-bottom: 1px solid var(--c-border);
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 600;
}

.navbar-logo {
  height: 28px;
  width: auto;
  max-height: none;
}

.navbar .nav-link.active {
  text-decoration: underline;
  text-decoration-color: var(--c-primary);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.4em;
}

.navbar-toggler,
.navbar #quarto-search .aa-DetachedSearchButton,
.navbar .quarto-color-scheme-toggle {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 991.98px) {
  /* Toggler, brand, theme and search must share one row at 360 px with 44 px targets. */
  .navbar > .navbar-container {
    padding-inline: var(--sp-2);
  }

  .navbar-brand-container {
    flex: 1 1 0;
    min-width: 0;
  }

  .navbar-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
  }

  .navbar-brand .navbar-title {
    font-size: var(--fs-base);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar .nav-link {
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

/* Content images carry intrinsic width/height (lazy-images.lua) to reserve space; keep them
   fluid. */
main img[width][height] {
  max-width: 100%;
  height: auto;
}

/* Origin blocks: tinted background, 4 px border and a text badge (colour is never the only
   cue). The badge label comes from the data-origin-label attribute set by origin-filter.lua. */
.lic-d,
.uefa-c,
.info-utili {
  --origin-color: var(--origin-lic-d);
  --origin-tint: var(--origin-lic-d-tint);
  border-left: 4px solid var(--origin-color);
  background: var(--origin-tint);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  max-width: calc(var(--measure) + 2 * var(--sp-4) + 4px);
}

.uefa-c {
  --origin-color: var(--origin-uefa-c);
  --origin-tint: var(--origin-uefa-c-tint);
}

.info-utili {
  --origin-color: var(--origin-info-utili);
  --origin-tint: var(--origin-info-utili-tint);
}

/* Blocks holding tables or figures may use the whole body column. */
:is(.lic-d, .uefa-c, .info-utili):has(.table-scroll, img, math) {
  max-width: none;
}

.lic-d[data-origin-label]::before,
.uefa-c[data-origin-label]::before,
.info-utili[data-origin-label]::before {
  content: attr(data-origin-label);
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  padding: 0 var(--sp-2);
  margin-bottom: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--origin-color);
  color: var(--origin-badge-text);
}

:is(.lic-d, .uefa-c, .info-utili) > :last-child {
  margin-bottom: 0;
}

.lic-d img,
.uefa-c img,
.info-utili img {
  max-width: 100%;
  height: auto;
  /* Diagrams from the notes are transparent PNGs with dark lines: keep them legible in dark mode. */
  background: #fff;
}

/* Quarto derives caption colours from the theme; use the muted token so captions keep AA
   contrast on the origin tints too. */
.quarto-float-caption,
figcaption {
  color: var(--c-text-muted);
}

/* Tables scroll inside their wrapper (table-scroll.lua) instead of widening the page. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: var(--sp-4);
  border-radius: var(--r-sm);
}

.table-scroll > table {
  margin-bottom: 0;
}

.table-scroll:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

:is(.lic-d, .uefa-c, .info-utili) .table-scroll > table {
  background: var(--c-bg);
}

@media (max-width: 767.98px) {
  .table-scroll > table {
    font-size: var(--fs-sm);
  }
}

/* Wide formulas (native MathML) scroll on their own instead of widening the page. */
:is(.lic-d, .uefa-c, .info-utili) math {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  vertical-align: middle;
}

/* Exercise listing: one filter form shown three ways (exercise-filters.js).
   Without JS the filter UI is hidden and every card stays listed. */
html:not(.js) :is(.filters, .filters-bar, .filters-active) {
  display: none !important;
}

.exercise-layout {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 1200px) {
  .exercise-layout {
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: start;
  }
}

/* Shared UI buttons (filters, empty state). */
.btn-ui {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-md);
  border: 2px solid var(--c-primary);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur) ease-out, color var(--dur) ease-out;
}

.btn-ui-primary {
  background: var(--c-primary);
  color: var(--c-on-primary);
}

.btn-ui-outline {
  background: var(--c-bg);
  color: var(--c-primary);
}

.btn-ui-outline:hover {
  background: var(--c-surface);
}

.btn-text {
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  border: 0;
  background: none;
  color: var(--c-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--c-text);
  cursor: pointer;
}

/* Results header: sticky under the navbar on small screens so the toggle stays in reach. */
.filters-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  background: var(--c-bg);
}

@media (max-width: 1199.98px) {
  .filters-bar {
    position: sticky;
    top: var(--filters-sticky-top, 0px);
    z-index: 5;
  }
}

@media (min-width: 1200px) {
  .btn-filters {
    display: none;
  }
}

.filters-count {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.filters-active {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.filters-active[hidden] {
  display: none;
}

/* On phones the active chips scroll sideways instead of pushing the results down. */
.active-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  min-width: 0;
}

@media (min-width: 768px) {
  .active-chips {
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* Toggle chips: the checkbox stays in the DOM (keyboard, form semantics) but is invisible;
   the chip shows state with colour AND a check icon. */
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: var(--tap);
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-pill);
  background: var(--c-bg);
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  /* Colour and background change together so text never flashes on a same-colour fill. */
  transition: background-color var(--dur) ease-out, color var(--dur) ease-out;
}

.chip-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip .icon {
  width: 18px;
  height: 18px;
  display: none;
}

.chip:has(.chip-input:checked) {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-on-primary);
}

.chip:has(.chip-input:checked) .icon {
  display: block;
}

.chip:has(.chip-input:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.chip-remove {
  background: var(--c-surface);
  border-color: var(--c-border-strong);
  font-family: inherit;
}

.chip-remove .icon {
  display: block;
  width: 16px;
  height: 16px;
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Filter form inside the dialog. */
.filters {
  padding: 0;
  border: 0;
  color: var(--c-text);
  background: var(--c-bg);
}

.filters .exercise-filters {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  height: 100%;
}

.filters-head,
.filters-foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.filters-head {
  justify-content: space-between;
  border-bottom: 1px solid var(--c-border);
}

.filters-head h2 {
  font-size: var(--fs-h3);
  margin: 0;
  border: 0;
  padding: 0;
}

.filters-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-4);
}

.filters-hint {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}

.filters fieldset {
  margin: 0 0 var(--sp-5);
}

.filters legend {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}

.filters-foot {
  border-top: 1px solid var(--c-border);
}

.filters-foot .btn-ui {
  flex: 1 1 0;
}

/* Below 1200 px: modal. Bottom sheet on phones, side drawer on tablets. */
.filters:modal {
  max-width: 100%;
  width: 100%;
  max-height: 85vh;
  margin: auto 0 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-2);
}

.filters::backdrop {
  background: rgb(16 24 20 / 0.5);
}

@media (min-width: 768px) {
  .filters:modal {
    width: min(420px, 90vw);
    height: 100%;
    max-height: 100%;
    margin: 0 0 0 auto;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
}

/* 1200 px and up: the same dialog, opened non-modally, is a sticky sidebar. */
.filters.is-sidebar {
  position: sticky;
  top: calc(var(--filters-sticky-top, 0px) + var(--sp-4));
  z-index: auto;
  width: auto;
  max-height: calc(100vh - var(--filters-sticky-top, 0px) - var(--sp-6));
  margin: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.filters.is-sidebar .filters-close,
.filters.is-sidebar [data-role="show"] {
  display: none;
}

.filters.is-sidebar .chip {
  white-space: normal;
}

/* Empty state. */
.exercise-empty {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  text-align: center;
}

.exercise-empty[hidden] {
  display: none;
}

.exercise-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .exercise-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .exercise-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Exercise card: one stretched link on the title, meta pinned to the bottom. */
.exercise-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) ease-out;
}

.exercise-card:hover,
.exercise-card:focus-within {
  box-shadow: var(--shadow-2);
}

.exercise-card:has(a:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.exercise-card[hidden] {
  display: none;
}

.exercise-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--c-surface);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-2);
}

.exercise-card-title {
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0;
}

.exercise-card-title a {
  color: inherit;
  text-decoration: none;
}

.exercise-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.exercise-card-title a:focus-visible {
  outline: none;
}

.exercise-card-desc {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.exercise-card-chips {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}

.exercise-card-meta {
  margin: auto 0 0;
  padding-top: var(--sp-2);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

/* Taxonomy chips on cards and exercise pages: age groups filled, types outlined. */
.tag {
  display: inline-block;
  font-size: var(--fs-xs);
  line-height: 1.4;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
}

.tag-age {
  background: var(--c-surface);
  color: var(--c-text);
}

.tag-type {
  border-color: var(--c-border-strong);
  color: var(--c-text);
}

/* Contributions: the frame shows a loading note until the form paints over it. */
.form-embed {
  position: relative;
  margin-bottom: var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}

.form-embed::before {
  content: "Caricamento del modulo…";
  position: absolute;
  inset: var(--sp-5) auto auto var(--sp-5);
  color: var(--c-text-muted);
}

.form-embed iframe {
  position: relative;
  display: block;
  width: 100%;
  min-height: 70vh;
  border: 0;
}

.form-fallback,
.form-unavailable {
  max-width: var(--measure);
}

.form-unavailable {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.privacy-panel {
  max-width: calc(var(--measure) + 2 * var(--sp-5));
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.privacy-panel h2 {
  margin-top: 0;
  font-size: var(--fs-h3);
}

.privacy-panel > :last-child {
  margin-bottom: 0;
}

/* Layout: full-width pages span the screen insets, capped at the 1320 px container of the
   reference desktop, so no empty sidebar column is reserved on the left. */
#quarto-content.page-layout-full > main.content {
  grid-column: screen-start-inset / screen-end-inset;
  justify-self: center;
  width: 100%;
  max-width: 1320px;
}

/* Running text is capped at the reading measure; tables, figures, listings and custom
   components (anything with a class) may use the whole body column. */
main.content :is(p, ul:not([class]), ol:not([class]), dl:not([class]), blockquote, h1, h2, h3, h4) {
  max-width: var(--measure);
}

/* Icons from assets/img/icons.svg, drawn with the current text colour. */
.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

.icon-32 {
  width: 32px;
  height: 32px;
}

/* The hero carries the only h1 of the home page. `title-block-style: none` only unstyles the
   title block (Quarto 1.10), so the block is removed here. */
.page-home #title-block-header {
  display: none;
}

/* Home hero: the band bleeds to the screen edges through border-image, which paints outside
   the box without widening the page (no 100vw scrollbar overflow). */
.hero {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
  padding-block: var(--sp-8);
  margin-bottom: var(--sp-7);
  color: #ffffff;
  /* The box's own background keeps contrast checkers (and forced-colours fallbacks) aware of
     the dark band that border-image paints. */
  background-color: var(--c-hero-bg);
  border-image: conic-gradient(var(--c-hero-bg) 0 0) fill 0 // 0 100vw;
}

.hero h1 {
  color: #ffffff;
  font-size: var(--fs-hero);
  line-height: 1.05;
  margin: 0 0 var(--sp-4);
  max-width: none;
}

.hero-kicker {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-hero-line);
  margin-bottom: var(--sp-3);
}

.hero-lead {
  font-size: var(--fs-lg);
  line-height: 1.5;
  margin-bottom: var(--sp-6);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.hero-art {
  width: 100%;
  height: auto;
  color: var(--c-hero-line);
}

@media (min-width: 768px) {
  .hero {
    grid-template-columns: 3fr 2fr;
  }

  .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 1200px) {
  .hero {
    padding-block: var(--sp-9);
  }
}

/* Call-to-action buttons on the hero band. */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-md);
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur) ease-out, color var(--dur) ease-out;
}

.btn-cta-primary {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.btn-cta-primary:hover {
  background: #d8ff5c;
  color: var(--c-on-accent);
}

.btn-cta-secondary {
  border-color: #ffffff;
  color: #ffffff;
}

.btn-cta-secondary:hover {
  background: #ffffff;
  color: var(--c-hero-bg);
}

.hero :focus-visible {
  outline-color: var(--c-accent);
}

/* Cards with one stretched link: the whole card is clickable, one tab stop. */
.entry-cards {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-7);
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .entry-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .entry-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.entry-card {
  position: relative;
  padding: var(--sp-5);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) ease-out;
}

.entry-card:hover,
.entry-card:focus-within {
  box-shadow: var(--shadow-2);
}

.entry-card .icon {
  color: var(--c-primary);
  margin-bottom: var(--sp-3);
}

.entry-card h2 {
  font-size: var(--fs-h3);
  margin: 0 0 var(--sp-2);
}

.entry-card h2 a {
  color: inherit;
  text-decoration: none;
}

.entry-card h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.entry-card h2 a:focus-visible {
  outline: none;
}

.entry-card:has(a:focus-visible) {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.entry-card p {
  margin: 0;
  color: var(--c-text-muted);
}

/* Inline origin chips reuse the block badge look. */
.origin-chip {
  display: inline-block;
  padding: 0 var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.6;
  color: var(--origin-badge-text);
  background: var(--origin-lic-d);
}

.origin-chip-uefa-c {
  background: var(--origin-uefa-c);
}

.origin-chip-info-utili {
  background: var(--origin-info-utili);
}

/* Exercise page: back link sits above the title (positioned: it comes after the title block in
   the DOM), then chips, then diagram and details side by side from 992 px. */
.page-exercise main#quarto-document-content {
  position: relative;
  padding-top: calc(var(--tap) + var(--sp-2));
}

.exercise-back {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  font-weight: 700;
  text-decoration: none;
}

.exercise-back:hover span {
  text-decoration: underline;
}

.exercise-chips {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.exercise-chips .tag {
  font-size: var(--fs-sm);
  padding: var(--sp-1) var(--sp-3);
}

.exercise-top {
  display: grid;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}

@media (min-width: 992px) {
  .exercise-top {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
  }

  .exercise-top:not(:has(.exercise-diagram)) {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--measure);
  }
}

.exercise-diagram img {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
  /* Diagrams are drawn for a white page: keep them legible in dark mode. */
  background: #ffffff;
}

.exercise-diagram figure,
.exercise-diagram .quarto-figure {
  margin: 0;
}

.exercise-details {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.exercise-details ul {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-4);
  max-width: none;
}

.exercise-details li {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
}

.exercise-details li:last-child {
  border-bottom: 0;
}

.exercise-details li strong:first-child {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-muted);
}

.btn-download {
  width: 100%;
  text-decoration: none;
}

.btn-download:hover {
  color: var(--c-on-primary);
  filter: brightness(1.08);
}

.btn-ui-outline.btn-download:hover {
  color: var(--c-primary);
}

/* Download page: full course first and emphasised, then a grid of subject cards. Buttons
   stack on phones and sit in a row when there is room. */
.download-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.download-buttons .btn-download {
  justify-content: flex-start;
  text-align: left;
}

.download-course {
  padding: var(--sp-5);
  margin-bottom: var(--sp-7);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.download-course h2 {
  margin-top: 0;
  border: 0;
}

@media (min-width: 768px) {
  .download-course .download-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .download-course .btn-download {
    width: auto;
    flex: 1 1 0;
  }
}

.download-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .download-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .download-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.download-card {
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-bg);
  box-shadow: var(--shadow-1);
}

.download-card h3 {
  margin-top: 0;
}

/* Subject pages: PDF bar under the title. */
.subject-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

.subject-bar-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  flex: 1 0 100%;
}

.subject-bar .download-buttons {
  flex: 1 1 100%;
}

@media (min-width: 768px) {
  .subject-bar .download-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .subject-bar .btn-download {
    width: auto;
  }
}

.subject-bar-slot:empty {
  display: none;
}

/* Collapsed section list for screens where Quarto hides the left TOC. */
.toc-mobile {
  margin-bottom: var(--sp-6);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
}

.toc-mobile summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  font-family: var(--font-display);
  font-weight: 600;
  cursor: pointer;
}

.toc-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-3);
}

.toc-mobile li a {
  display: block;
  padding: var(--sp-2) 0;
}

.toc-mobile .toc-mobile-l3 {
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
}

@media (min-width: 992px) {
  .toc-mobile {
    display: none;
  }
}

/* Subject index cards (reuse .entry-card). */
.subject-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.subject-cards .entry-card {
  display: flex;
  flex-direction: column;
}

.card-cta {
  margin-top: auto;
  padding-top: var(--sp-3);
  color: var(--c-primary);
  font-family: var(--font-display);
  font-weight: 600;
}

.card-cta::after {
  content: " →";
}