/* ═══════════════════════════════════════════════════════════════════════════
   CAP10K — interactive & data sections  (owner: W3c)
   accordion · anchor_nav · table · table_inline · post_feed · share ·
   social_links · directory  +  the shared post card.

   Loaded only on documents that use one of those layouts (inc/data-sections.php).
   Colour comes from the :root tokens in style.css — nothing here hard-codes a hex
   that is not a neutral tint of one of them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The jump-target offset (`--c10k-anchor-offset`) and the whole provisional `:where(.section*)`
   shell that used to live here were removed in W13: the offset is now defined once in style.css
   (this file only loads on some pages, so defining it here moved the offset around the site) and
   the real section styles shipped with W1/W3a. */


/* ── Jump-target offset ──────────────────────────────────────────────────────
   Honoured by native fragment navigation AND by scrollIntoView(), so a link into a
   section lands below the sticky masthead even with JavaScript switched off. */
.section[id],
.c10k-dir-entry[id],
details.accordion-item[id] { scroll-margin-top: var(--c10k-anchor-offset); }

/* ═══════════════════════════════ ACCORDION ═══════════════════════════════ */

.c10k-acc { margin: 0; max-width: 62rem; }
.c10k-acc--inline { max-width: none; }
.c10k-acc-tools { display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }

.c10k-acc-all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0.5rem 0.95rem;
  border: 1px solid var(--c10k-line); border-radius: 9999px; background: #fff;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--c10k-ink-900); cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.c10k-acc-all:hover { background: var(--c10k-lime-500); border-color: var(--c10k-lime-500); }
.c10k-acc-all[aria-expanded="true"] .c10k-acc-all-chev { transform: rotate(180deg); }
.c10k-acc-all-chev { transition: transform 0.2s ease; }

/* W1's style.css suppresses the +/− marker for a summary that carries an <svg>, but its
   `details.accordion[open] > summary::after` rule (0,2,3) outranks that `:has()` rule (0,1,4),
   so an OPEN chevron accordion showed a chevron AND a lime "−". Re-assert it here at (0,2,4).
   Delete once W1 raises the specificity of its own rule. */
details.accordion > summary:has(svg.accordion-chev)::after,
details.accordion[open] > summary:has(svg.accordion-chev)::after { content: none; display: none; }

.c10k-acc-summary { position: relative; }
.c10k-acc-q { flex: 1 1 auto; min-width: 0; }
details.accordion > summary .accordion-chev {
  color: var(--c10k-ink-900); transition: transform 0.2s ease;
}
details.accordion > summary:focus-visible {
  outline: 3px solid var(--c10k-blue-500); outline-offset: -3px;
}
.c10k-acc--inline details.accordion { margin: 0.5rem 0 0; border-radius: 0.625rem; }
.c10k-acc--inline details.accordion > summary { font-size: 1rem; padding: 0.7rem 0.9rem; }
.c10k-acc--inline .accordion-body { padding: 0 0.9rem 0.9rem; font-size: 0.95rem; }

.accordion-body :where(p, ul, ol) { margin-top: 0.75rem; }
.accordion-body a { color: var(--c10k-blue-600); }

/* ═══════════════════════════════ CONTENTS / TOC ══════════════════════════ */

.c10k-toc-title {
  margin: 0 0 0.55rem;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--c10k-muted);
}
.c10k-toc-items { list-style: none; margin: 0; padding: 0; }

/* Pills — horizontal, scrolls sideways on a phone. */
.c10k-toc--pills .c10k-toc-items {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.c10k-toc--pills a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0.5rem 1rem;
  border: 1px solid var(--c10k-line); border-radius: 9999px; background: #fff;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1.15; color: var(--c10k-ink-900); text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.c10k-toc--pills a:hover { border-color: var(--c10k-ink-900); background: var(--c10k-sand-100); }
.c10k-toc--pills a.is-active,
.c10k-toc--pills a[aria-current="location"] {
  background: var(--c10k-lime-500); border-color: var(--c10k-lime-500); color: var(--c10k-ink-900);
}

@media (max-width: 640px) {
  .c10k-toc--pills .c10k-toc-items {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem; scroll-snap-type: x proximity;
  }
  .c10k-toc--pills .c10k-toc-item { flex: 0 0 auto; scroll-snap-align: start; }
}

/* Vertical list — the sidebar shape W5 reuses. */
.c10k-toc--list .c10k-toc-items { display: block; }
.c10k-toc--list a {
  display: block; padding: 0.5rem 0.85rem; min-height: 44px;
  border-left: 3px solid transparent; line-height: 1.35;
  color: var(--c10k-body); text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.c10k-toc--list a:hover { background: #F6F7F7; color: var(--c10k-blue-600); }
.c10k-toc--list a.is-active,
.c10k-toc--list a[aria-current="location"] {
  border-left-color: var(--c10k-lime-500); background: #FCFDF2;
  color: var(--c10k-ink-900); font-weight: 600;
}
.c10k-toc--list .c10k-toc-item--sub a { padding-left: 1.7rem; font-size: 0.9rem; }

@media (min-width: 1024px) {
  .c10k-toc--sticky.c10k-toc--list {
    position: sticky; top: calc(var(--c10k-header-h-comp, 3.75rem) + 1rem);
    max-height: calc(100vh - var(--c10k-header-h-comp, 3.75rem) - 3rem); overflow-y: auto;
  }
  .section--anchor-sticky {
    position: sticky; top: var(--c10k-header-h-comp, 3.75rem); z-index: 20;
    padding-block: 0.75rem;
    background: rgba(255, 255, 255, 0.95); backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--c10k-line);
  }
  .section--anchor-sticky .c10k-toc-title { display: none; }
}

/* ═══════════════════════════════ TABLES ══════════════════════════════════ */

.c10k-table { position: relative; }
.c10k-table:focus-visible { outline: 3px solid var(--c10k-blue-500); outline-offset: 2px; }
.table-wrap--tall { max-height: min(70vh, 34rem); }
.table-wrap--tall thead th { position: sticky; top: 0; z-index: 2; }

.c10k-table-caption {
  caption-side: bottom; padding: 0.7rem 1rem 0.2rem;
  font-size: 0.85rem; line-height: 1.4; color: var(--c10k-muted); text-align: left;
}

/* TablePress passthrough — the plugin's own markup, wearing the theme's skin.
   TablePress 3.x wraps the table in DataTables 2's .dt-container at runtime, so every rule
   here is a descendant selector, never a child one. */
.table-wrap .tablepress { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.95rem; }
.table-wrap .dt-container { width: 100%; }
.table-wrap .tablepress th,
.table-wrap .tablepress td {
  padding: 0.65rem 1rem; text-align: left; vertical-align: top;
  border: 0; border-bottom: 1px solid var(--c10k-line); background: transparent;
  font-size: 0.95rem; line-height: 1.45; color: var(--c10k-body);
}
.table-wrap .tablepress thead th,
.table-wrap .tablepress tfoot th {
  background: var(--c10k-ink-900); color: #fff; white-space: nowrap;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem;
  border-bottom: 0;
}
.table-wrap .tablepress tbody tr.odd  > * { background: #fff; }
.table-wrap .tablepress tbody tr.even > * { background: #FBFAF7; }
.table-wrap .tablepress tbody tr:hover > * { background: #FCFDF2; }
.table-wrap .tablepress tbody tr:last-child td { border-bottom: 0; }
/* First column reads as a row label — but scope it to the BODY: unscoped it also matched
   `thead th.column-1`, painting the first header cell ink-on-ink so "Pace" / "Distance"
   vanished on every TablePress table. (W13) */
.table-wrap .tablepress tbody .column-1 { font-weight: 600; color: var(--c10k-ink-900); }
.table-wrap .tablepress thead .dt-column-order { color: rgba(255, 255, 255, 0.55); }
.table-wrap .tablepress thead th.dt-orderable-asc:hover .dt-column-order { color: var(--c10k-lime-500); }
.table-wrap .tablepress a { color: var(--c10k-blue-600); }
.table-wrap .tablepress caption {
  caption-side: bottom; padding: 0.7rem 1rem 0.2rem; text-align: left;
  font-size: 0.85rem; color: var(--c10k-muted);
}

/* DataTables 2 controls (length menu, search, pager) — TablePress ships them unstyled. */
.table-wrap .dt-layout-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem; padding: 0.7rem 1rem;
}
/* DataTables always emits a top and a bottom layout row, empty or not. */
.table-wrap .dt-layout-row:not(.dt-layout-table):not(:has(.dt-length, .dt-search, .dt-info, .dt-paging)) { display: none; }
.table-wrap .dt-layout-row:first-child:not(.dt-layout-table) { border-bottom: 1px solid var(--c10k-line); }
.table-wrap .dt-layout-row:last-child:not(.dt-layout-table)  { border-top: 1px solid var(--c10k-line); }
.table-wrap :is(.dt-length, .dt-search, .dt-info, .dt-paging) {
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c10k-muted);
}
.table-wrap :is(.dt-length, .dt-search) label { display: inline-flex; align-items: center; gap: 0.45rem; }
.table-wrap :is(.dt-length select, .dt-search input) {
  min-height: 40px; padding: 0.35rem 0.7rem;
  border: 1px solid var(--c10k-line); border-radius: 0.5rem; background: #fff;
  font-family: Barlow, sans-serif; font-size: 0.9rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--c10k-ink-900);
}
.table-wrap .dt-search input { min-width: 9rem; }
.table-wrap :is(.dt-length select, .dt-search input):focus-visible {
  outline: 3px solid var(--c10k-blue-500); outline-offset: 1px;
}
.table-wrap .dt-layout-row:has(> .dt-layout-cell > table),
.table-wrap .dt-layout-row:has(> table) { padding: 0; }
.table-wrap .dt-paging { margin-left: auto; }
.table-wrap .dt-container .dt-paging nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.table-wrap .dt-container .dt-paging .dt-paging-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0.35rem 0.7rem;
  border: 1px solid var(--c10k-line); border-radius: 9999px; background: #fff;
  color: var(--c10k-ink-900); text-decoration: none; cursor: pointer;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em;
}
.table-wrap .dt-container .dt-paging .dt-paging-button:hover {
  background: var(--c10k-sand-100); border-color: var(--c10k-ink-900); color: var(--c10k-ink-900);
}
.table-wrap .dt-container .dt-paging .dt-paging-button.current,
.table-wrap .dt-container .dt-paging .dt-paging-button.current:hover {
  background: var(--c10k-ink-900); border-color: var(--c10k-ink-900); color: #fff;
}
.table-wrap .dt-container .dt-paging .dt-paging-button.disabled { opacity: 0.45; cursor: default; }
.table-wrap .dt-container .dt-paging .ellipsis { padding: 0 0.35rem; align-self: center; }

/* A DataTables-paginated table already limits its own height — do not double up. */
.table-wrap--tall:has(.dt-paging) { max-height: none; }

.c10k-table-missing code { font-size: 0.9em; }

/* Simple table — stacks into cards on a phone. */
.c10k-table-inline { width: 100%; border-collapse: collapse; }
.c10k-table-inline th[scope="row"] { font-weight: 600; color: var(--c10k-ink-900); }

@media (max-width: 640px) {
  .c10k-table-inline--stack thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .c10k-table-inline--stack,
  .c10k-table-inline--stack tbody,
  .c10k-table-inline--stack tr,
  .c10k-table-inline--stack td,
  .c10k-table-inline--stack th { display: block; width: auto; }
  .c10k-table-inline--stack tr {
    padding: 0.35rem 0; border-bottom: 2px solid var(--c10k-line);
  }
  .c10k-table-inline--stack tr:last-child { border-bottom: 0; }
  .c10k-table-inline--stack td,
  .c10k-table-inline--stack th {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.42rem 1rem; border-bottom: 0; text-align: right;
  }
  .c10k-table-inline--stack td::before,
  .c10k-table-inline--stack th::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-family: 'Barlow Condensed', Barlow, sans-serif;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--c10k-muted);
  }
  .c10k-table-inline--stack th[scope="row"] {
    background: var(--c10k-ink-900); color: #fff; margin-bottom: 0.25rem;
  }
  .c10k-table-inline--stack th[scope="row"]::before { color: rgba(255, 255, 255, 0.72); }
  .c10k-table-inline--stack td:empty { display: none; }
  .c10k-table-inline--stack .c10k-table-caption { display: block; }
}

/* ═══════════════════════════════ NEWS FEED ═══════════════════════════════ */

.c10k-feed--cards {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.c10k-feed--list { display: flex; flex-direction: column; gap: 0; }

.c10k-pcard { min-width: 0; }
.c10k-pcard--grid {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c10k-line); border-radius: var(--c10k-radius-card, 1rem);
  overflow: hidden; transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.c10k-pcard--grid:hover {
  border-color: var(--c10k-ink-900); box-shadow: 0 14px 34px -22px rgba(30, 32, 34, 0.55);
}
.c10k-pcard-media { display: block; overflow: hidden; background: var(--c10k-sand-100); }
.c10k-pcard--grid .c10k-pcard-media { aspect-ratio: 4 / 3; }
.c10k-pcard-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c10k-pcard-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.05rem 1.15rem 1.25rem; }

.c10k-pcard-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0; font-size: 0.8rem; color: var(--c10k-muted);
}
.c10k-pcard-badge {
  display: inline-block; padding: 0.16rem 0.55rem; border-radius: 9999px;
  background: var(--c10k-lime-500); color: var(--c10k-ink-900);
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
}
.c10k-pcard-title {
  margin: 0;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.15;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.005em;
}
.c10k-pcard-title a { color: var(--c10k-ink-900); text-decoration: none; }
.c10k-pcard-title a:hover { color: var(--c10k-blue-600); text-decoration: underline; }
.c10k-pcard-excerpt { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--c10k-body); }

.c10k-pcard--list {
  display: grid; grid-template-columns: 1fr; gap: 0.9rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--c10k-line);
}
.c10k-feed--list .c10k-pcard--list:first-child { padding-top: 0; }
@media (min-width: 640px) {
  .c10k-pcard--list { grid-template-columns: 12rem 1fr; gap: 1.4rem; align-items: start; }
  .c10k-pcard--list .c10k-pcard-media { aspect-ratio: 16 / 10; border-radius: 0.7rem; }
}
.c10k-pcard--list .c10k-pcard-body { padding: 0; }

/* Pagination */
.c10k-pagination { margin-top: 2rem; }
.c10k-pagination ul {
  display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0;
}
.c10k-pagination a,
.c10k-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0.5rem 0.9rem;
  border: 1px solid var(--c10k-line); border-radius: 9999px; background: #fff;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--c10k-ink-900); text-decoration: none;
}
.c10k-pagination a:hover { background: var(--c10k-sand-100); border-color: var(--c10k-ink-900); }
.c10k-pagination .current {
  background: var(--c10k-ink-900); border-color: var(--c10k-ink-900); color: #fff;
}
.c10k-pagination .dots { border-color: transparent; background: transparent; min-width: 2rem; padding: 0.5rem 0.2rem; }
.c10k-pagination-status { margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--c10k-muted); }
.c10k-feed-all { margin: 1.75rem 0 0; }

/* ═══════════════════════════════ SHARE ═══════════════════════════════════ */

.c10k-share {
  display: flex; flex-wrap: wrap; gap: 0.55rem; list-style: none; margin: 0; padding: 0;
}
.c10k-share-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.55rem 1.05rem;
  border: 1px solid var(--c10k-line); border-radius: 9999px; background: #fff;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c10k-ink-900); text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.c10k-share-btn:hover { background: var(--c10k-ink-900); border-color: var(--c10k-ink-900); color: #fff; }
.c10k-share-btn.is-copied {
  background: var(--c10k-lime-500); border-color: var(--c10k-lime-500); color: var(--c10k-ink-900);
}
.c10k-share-status { margin: 0.6rem 0 0; min-height: 1.2em; font-size: 0.85rem; color: var(--c10k-lime-900); }

/* ═══════════════════════════════ SOCIAL ROW ══════════════════════════════ */

.c10k-social-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  list-style: none; margin: 0; padding: 0;
}
.c10k-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 9999px;
  border: 1px solid var(--c10k-line); background: #fff; color: var(--c10k-ink-900);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.c10k-social-link:hover {
  background: var(--c10k-ink-900); border-color: var(--c10k-ink-900); color: #fff;
}
.c10k-social-row--lg .c10k-social-link { width: 52px; height: 52px; }
.c10k-social-row--sm .c10k-social-link { border-color: transparent; background: var(--c10k-sand-100); }

/* ═══════════════════════════════ DIRECTORY ═══════════════════════════════ */

.c10k-quick {
  margin: 0 0 2rem; padding: 1rem 1.15rem;
  background: var(--c10k-sand-100); border-radius: var(--c10k-radius-card, 1rem);
}
.c10k-quick-title {
  margin: 0 0 0.6rem;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--c10k-muted);
}
.c10k-quick-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  list-style: none; margin: 0; padding: 0;
}
.c10k-quick-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; margin-left: 0.35rem;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.95rem; font-weight: 800; color: var(--c10k-lime-900);
}
.c10k-quick-list li:first-child .c10k-quick-letter,
.c10k-quick-letter:first-child { margin-left: 0; }
.c10k-quick-list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.85rem;
  border-radius: 9999px; background: #fff; border: 1px solid transparent;
  font-size: 0.9rem; line-height: 1.2; color: var(--c10k-body); text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.c10k-quick-list a:hover { border-color: var(--c10k-ink-900); color: var(--c10k-ink-900); }

.c10k-dir { display: flex; flex-direction: column; }
.c10k-dir-entry {
  display: grid; grid-template-columns: 1fr; gap: 0.9rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--c10k-line);
}
.c10k-dir-entry:first-child { padding-top: 0; }
.c10k-dir-entry:last-child { border-bottom: 0; }
@media (min-width: 768px) {
  /* The media column is kept even when an entry has no image, so a long list keeps one
     left edge for every name. */
  .c10k-dir-entry { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.6rem; align-items: start; }
  .c10k-dir-entry--noimg::before { content: ""; }
}
.c10k-dir-media { max-width: 9.5rem; }
.c10k-dir-img {
  width: 100%; height: auto; display: block;
  border-radius: 0.75rem; background: var(--c10k-sand-100);
}
.c10k-dir-body { min-width: 0; }
.c10k-dir-title {
  margin: 0;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.12;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; color: var(--c10k-ink-900);
}
.c10k-dir-sub { margin: 0.2rem 0 0; font-size: 0.95rem; color: var(--c10k-muted); }
.c10k-dir-meta {
  margin: 0.35rem 0 0;
  font-family: 'Barlow Condensed', Barlow, sans-serif;
  font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--c10k-lime-900);
}
.c10k-dir-text { margin-top: 0.6rem; max-width: 62ch; font-size: 0.98rem; line-height: 1.6; }
.c10k-dir-text p:last-child { margin-bottom: 0; }
.c10k-dir-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.9rem;
}
.c10k-dir-links {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0;
}

/* Small button variant used by directory link rows. */
.c10k-btn-sm { padding-left: 1.1rem; padding-right: 1.1rem; font-size: 0.82rem; }

/* ── Dark tones: keep W3c components legible on ink / blue / red bands ────── */
:where(.section--ink, .section--blue, .section--red) :is(.c10k-toc-title, .c10k-quick-title, .c10k-pcard-meta, .c10k-pagination-status, .c10k-dir-sub) { color: rgba(255, 255, 255, 0.78); }
:where(.section--ink, .section--blue, .section--red) :is(.c10k-dir-title, .c10k-dir-text) { color: #fff; }
:where(.section--ink, .section--blue, .section--red) .c10k-dir-meta { color: var(--c10k-lime-500); }
:where(.section--ink, .section--blue, .section--red) .c10k-dir-entry { border-color: rgba(255, 255, 255, 0.24); }
:where(.section--ink, .section--blue, .section--red) .c10k-quick { background: rgba(255, 255, 255, 0.08); }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .c10k-acc-all-chev,
  details.accordion > summary .accordion-chev,
  .c10k-pcard--grid { transition: none !important; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .c10k-toc, .c10k-share, .c10k-pagination, .c10k-acc-tools, .c10k-quick { display: none !important; }
  .table-wrap, .table-wrap--tall { overflow: visible !important; max-height: none !important; }
  details.accordion { break-inside: avoid; }
  details.accordion > summary { list-style: none; }
  details.accordion .accordion-body { display: block !important; }
}