/* ============================================================
   AI Animation Education Knowledge Base — prototype stylesheet
   ------------------------------------------------------------
   Theme: high-density scanner (Style 09 adopted as working theme).
   Shared across all prototype pages in site-content/prototypes/.
   Theme-agnostic: semantic CSS only, no framework dependency.
   ============================================================ */

/* ---------- filter visibility ----------
   filters.js hides non-matching rows by setting the [hidden] attribute.
   The list rows use display:grid/flex, which overrides the browser default
   [hidden]{display:none}. This rule must win so filtering actually hides rows. */
[hidden] { display: none !important; }

/* ---------- design tokens (OKLCH, no pure #000 / #fff) ---------- */
:root {
  --color-bg:          oklch(99% 0.002 250);
  --color-surface:     oklch(98% 0.004 250);
  --color-sunken:      oklch(96.5% 0.005 250);
  --color-text:        oklch(17% 0.012 250);
  --color-text-muted:  oklch(40% 0.010 250);
  --color-text-faint:  oklch(58% 0.008 250);
  --color-rule:        oklch(91% 0.006 250);
  --color-rule-strong: oklch(82% 0.008 250);
  --color-accent:      oklch(50% 0.12 145);
  --color-accent-deep: oklch(40% 0.13 145);
  --color-accent-soft: oklch(95% 0.025 145);
  --color-tag-bg:      oklch(96.5% 0.005 250);
  --color-focus:       oklch(58% 0.15 145);
  --color-warn-bg:     oklch(96% 0.040 85);
  --color-warn-text:   oklch(38% 0.080 70);

  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --measure:      66ch;
  --gutter:       1.5rem;
  --page-max:     1300px;
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

*, *::before, *::after { box-sizing: border-box; }

html { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* visually-hidden — skip links, off-screen labels */
.visually-hidden {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* reveal the skip link when it receives keyboard focus (WCAG 2.4.1) */
.visually-hidden:focus,
.visually-hidden:focus-within {
  position: fixed;
  left: var(--gutter);
  top: 0.5rem;
  width: auto;
  height: auto;
  overflow: visible;
  z-index: 100;
  background: var(--color-bg);
  color: var(--color-accent-deep);
  padding: 0.5rem 0.85rem;
  border-radius: 3px;
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-deep); }

/* ---------- top navigation ---------- */
.site-nav {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-surface);
}

.site-nav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.65rem var(--gutter);
  display: flex;
  align-items: baseline;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: 0.84rem;
}

.site-nav__brand {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  font-weight: 500;
}

.site-nav a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.2rem 0;
  transition: color 180ms var(--ease-out);
}

.site-nav a[aria-current="page"] {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-accent);
}

.site-nav a:hover { color: var(--color-accent); }

/* ---------- page header ---------- */
.page-header {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2.25rem var(--gutter) 1rem;
}

.page-header--tight { padding-top: 1.5rem; }

.breadcrumbs {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  margin: 0 0 0.85rem;
}

.breadcrumbs a {
  color: var(--color-text-faint);
  text-decoration: none;
}

.breadcrumbs a:hover { color: var(--color-accent); }

.page-header h1 {
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 3.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 0.65rem;
  color: var(--color-text);
}

.page-header .lede {
  max-width: 64ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}

/* ---------- search (inline within page-header) ---------- */
.search-inline {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 32rem;
  margin: 1rem 0 0;
  border: 1px solid var(--color-rule-strong);
  border-radius: 4px;
  background: var(--color-surface);
  transition: border-color 180ms var(--ease-out);
  overflow: hidden;
}

.search-inline:focus-within { border-color: var(--color-accent); }

.search-inline input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
}

.search-inline input::placeholder { color: var(--color-text-faint); }
.search-inline input:focus { outline: 0; }

.search-inline button {
  border: 0;
  border-left: 1px solid var(--color-rule);
  background: transparent;
  padding: 0 0.85rem;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.search-inline button:hover {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* ---------- search (full-width, used on Library) ---------- */
.search {
  max-width: var(--page-max);
  margin: 1.25rem auto 0;
  padding: 0 var(--gutter);
}

.search__form {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 34rem;
  border: 1px solid var(--color-rule-strong);
  border-radius: 4px;
  background: var(--color-surface);
  transition: border-color 180ms var(--ease-out);
  overflow: hidden;
}

.search__form:focus-within { border-color: var(--color-accent); }

.search__form input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
}

.search__form input::placeholder { color: var(--color-text-faint); }
.search__form input:focus { outline: 0; }

.search__form button {
  border: 0;
  border-left: 1px solid var(--color-rule);
  background: transparent;
  padding: 0 0.9rem;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 180ms var(--ease-out), background-color 180ms var(--ease-out);
}

.search__form button:hover {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* ---------- saved views (Library presets row) ---------- */
.saved-views {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 1.1rem;
  margin-top: 0.65rem;
  font-size: 0.82rem;
}

.saved-views__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
  margin-right: 0.2rem;
}

.saved-views a {
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.05rem 0;
  border-bottom: 1px solid transparent;
  font-weight: 500;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.saved-views a:hover,
.saved-views a:focus {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}

.saved-views__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-text-faint);
  margin-left: 0.15rem;
}

/* ---------- main layout (2-col with sidebar) ---------- */
.main-layout {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 3rem;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
}

.main-layout--single {
  grid-template-columns: 1fr;
  max-width: 920px;
}

@media (max-width: 880px) {
  .main-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ---------- filter sidebar ---------- */
.filters {
  position: sticky;
  top: 0.5rem;
  align-self: start;
  max-height: calc(100vh - 1rem);
  overflow-y: auto;
  padding-right: 0.4rem;
  font-size: 0.84rem;
}

@media (max-width: 880px) {
  .filters {
    position: static;
    max-height: none;
  }
}

.filters__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--color-rule);
}

.filters__header h2 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
  margin: 0;
}

.filters__clear {
  background: 0;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  cursor: pointer;
}

.filter-group { margin-bottom: 1.1rem; }

.filter-group h3 {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text);
  margin: 0 0 0.35rem;
}

.filter-group ul { list-style: none; padding: 0; margin: 0; }
.filter-group li { line-height: 1.5; }

.filter-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  padding: 0.12rem 0;
  transition: color 180ms var(--ease-out);
}

.filter-group label:hover { color: var(--color-text); }

.filter-group input[type="checkbox"],
.filter-group input[type="radio"] {
  accent-color: var(--color-accent);
  width: 12px;
  height: 12px;
  margin: 0;
}

.filter-group .count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-text-faint);
  margin-left: auto;
}

/* ---------- results pane ---------- */
.results__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-rule-strong);
}

.results__count {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0;
}

.results__count strong {
  color: var(--color-text);
  font-weight: 600;
}

.results__sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.results__sort label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
}

.results__sort select {
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 3px;
  padding: 0.18rem 0.45rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.results__sort select:hover { border-color: var(--color-accent); }

/* ---------- knowledge item (3-column row layout) ----------
   HTML pattern:
   <article class="kb-item" ...data-attrs...>
     <div class="kb-item__col-left">
       <span class="kb-item__type kb-item__type--policy">...</span>
       <span class="kb-item__juris">Australia</span>
     </div>
     <div class="kb-item__main">
       <h3>...</h3>
       <p class="kb-item__source">...</p>
       <ul class="kb-item__key-points">...</ul>
       <p class="kb-item__tags">...</p>
     </div>
     <div class="kb-item__col-right">
       <time>Pub. Sep 2025</time>
       [optional second date]
     </div>
   </article>
*/
.kb-item {
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 110px;
  gap: 1.5rem;
  align-items: start;
}

.kb-item:last-of-type { border-bottom: 0; }

.kb-item__col-left {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.55;
}

.kb-item__type {
  display: block;
  color: var(--color-accent);
  font-weight: 500;
  margin-bottom: 0.15rem;
}

/* per-type accent variants — retuned for cool palette.
   Open question per NEXT-ACTIONS: keep multi-accent or collapse to single. */
.kb-item__type--policy   { color: oklch(45% 0.13 30); }
.kb-item__type--research { color: oklch(46% 0.12 230); }
.kb-item__type--event    { color: oklch(48% 0.11 60); }
.kb-item__type--guide    { color: oklch(45% 0.13 285); }
.kb-item__type--tool     { color: oklch(45% 0.12 145); }
.kb-item__type--news     { color: oklch(48% 0.10 30); }

.kb-item__juris {
  display: block;
  color: var(--color-text-muted);
}

.kb-item__main { min-width: 0; }

.kb-item h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.005em;
  line-height: 1.28;
  margin: 0 0 0.25rem;
  max-width: 50ch;
}

.kb-item h3 a {
  color: var(--color-text);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 240ms var(--ease-out), color 180ms var(--ease-out);
}

.kb-item h3 a:hover,
.kb-item h3 a:focus {
  color: var(--color-accent-deep);
  background-size: 100% 1px;
}

.kb-item__source {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0 0 0.5rem;
}

.kb-item__source cite {
  font-style: normal;
  color: var(--color-text);
  font-weight: 500;
}

.kb-item__key-points {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  max-width: 72ch;
}

.kb-item__key-points li {
  position: relative;
  padding-left: 0.95rem;
  margin-bottom: 0.18rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--color-text);
}

.kb-item__key-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
}

.kb-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
}

.kb-item__tags a,
.tag-chip {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0;
  background: transparent;
  border-radius: 0;
  transition: color 180ms var(--ease-out);
}

.kb-item__tags a:hover,
.kb-item__tags a:focus,
a.tag-chip:hover,
a.tag-chip:focus {
  color: var(--color-accent);
}

/* chip variant — kept for places that want a pill (digest, tool detail) */
.tag-chip {
  background: var(--color-tag-bg);
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
}

.kb-item__col-right {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-faint);
  text-align: right;
  line-height: 1.55;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kb-item__col-right b,
.kb-item__col-right strong {
  display: block;
  color: var(--color-text-muted);
  font-weight: 500;
}

.kb-item__col-right time {
  display: block;
  color: var(--color-text-muted);
  font-weight: 500;
}

@media (max-width: 780px) {
  .kb-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .kb-item__col-right { text-align: left; }
}

/* ---------- pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-rule);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pagination a,
.pagination span {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.pagination a:hover { color: var(--color-accent); }
.pagination__info { color: var(--color-text-faint); }

.pagination__page-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 0.2rem;
}

.pagination__page-list a,
.pagination__page-list span {
  padding: 0.18rem 0.45rem;
  color: var(--color-text-muted);
  display: block;
  border-radius: 3px;
}

.pagination__page-list a[aria-current="page"] {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 500;
}

/* ---------- prose article (single-item, About, etc.) ---------- */
.prose {
  max-width: var(--measure);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--color-text);
}

.prose p { margin: 0 0 1em; }

.prose h2 {
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  margin: 1.8rem 0 0.6rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color-rule);
}

.prose h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 1.5rem 0 0.4rem;
}

.prose blockquote {
  margin: 1.25rem 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 2px solid var(--color-accent);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Verified source link inside the Source citation blockquote */
.source-link {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-deep);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--color-accent);
  transition: color 180ms var(--ease-out);
}

.source-link:hover,
.source-link:focus { color: var(--color-accent); }

.prose ul, .prose ol { margin: 0 0 1em; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.35em; }

.prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-sunken);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

.prose a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ---------- item-detail header (single Knowledge / Policy page) ---------- */
.item-detail__header {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2.25rem var(--gutter) 1rem;
}

.item-detail__type {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-weight: 500;
  margin: 0 0 0.55rem;
}

.item-detail__title {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.16;
  max-width: 30ch;
  margin: 0 0 0.75rem;
}

.item-detail__source {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
  max-width: 60ch;
}

.item-detail__source cite {
  font-style: normal;
  color: var(--color-text);
  font-weight: 500;
}

.item-detail__source a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* ---------- item layout (body + meta column) ---------- */
.item-layout {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0.5rem var(--gutter) 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 880px) {
  .item-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.item-layout__main { min-width: 0; }

.item-layout__aside {
  position: sticky;
  top: 0.5rem;
  align-self: start;
  font-size: 0.84rem;
}

@media (max-width: 880px) {
  .item-layout__aside { position: static; }
}

/* metadata definition list */
.meta-dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 0.85rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-rule-strong);
  border-bottom: 1px solid var(--color-rule);
}

.meta-dl dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  align-self: baseline;
}

.meta-dl dd {
  margin: 0;
  color: var(--color-text);
  font-size: 0.86rem;
}

.meta-dl dd a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

/* policy structured panels (compliance deadlines, supersedes) */
.policy-panel {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 3px;
}

.policy-panel > h3 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
  margin: 0 0 0.55rem;
}

.policy-deadlines {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.policy-deadlines li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.85rem;
  align-items: baseline;
  font-size: 0.86rem;
}

.policy-deadlines time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent-deep);
  white-space: nowrap;
}

.policy-supersedes {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.policy-supersedes li {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--color-text);
}

.policy-supersedes li a {
  color: var(--color-accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.policy-supersedes__direction {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-right: 0.5rem;
}

/* related-items block (single Knowledge / Policy page) */
.related-items {
  margin: 2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-rule);
}

.related-items > h2 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
  margin: 0 0 0.75rem;
}

.related-items__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.related-items__list li {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.85rem;
  align-items: baseline;
}

.related-items__provenance {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.related-items__provenance--pinned { color: var(--color-accent); }

.related-items__entry {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-text);
}

.related-items__entry a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.related-items__entry a:hover,
.related-items__entry a:focus {
  color: var(--color-accent-deep);
  border-bottom-color: var(--color-accent);
}

.related-items__entry .related-items__type {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-left: 0.5rem;
}

.related-items__entry .related-items__shared {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

/* key points block (used on single item pages) */
.key-points {
  margin: 0 0 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--color-accent-soft);
  border-radius: 3px;
}

.key-points h2 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-accent-deep);
  margin: 0 0 0.55rem;
}

.key-points ol {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.55;
}

.key-points li { margin-bottom: 0.3em; color: var(--color-text); }
.key-points li:last-child { margin-bottom: 0; }

/* ---------- generic content section ---------- */
.section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 2rem;
  border-top: 1px solid var(--color-rule);
}

.section:first-of-type { border-top: 0; padding-top: 0.5rem; }

.section h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
  margin: 0 0 1rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.section h2 a.see-all {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-muted);
  text-decoration: none;
}

.section h2 a.see-all:hover { color: var(--color-accent); }

/* ---------- tile grid (Home featured) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.5rem;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}

.tile:hover,
.tile:focus-within {
  border-color: var(--color-accent);
  background: var(--color-bg);
}

.tile__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin: 0;
}

.tile__title {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
  margin: 0;
  color: var(--color-text);
}

.tile__desc {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ---------- showcase gallery ---------- */
.showcase-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--color-rule-strong);
}

.showcase-bar__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.showcase-bar__tabs a {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.showcase-bar__tabs a[aria-current="page"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

.showcase-bar__tabs a:hover { color: var(--color-accent); }

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem 1rem;
}

.showcase-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms var(--ease-out);
}

.showcase-card:hover { transform: translateY(-2px); }

.showcase-card__cover {
  aspect-ratio: 16 / 10;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(135deg, oklch(86% 0.04 200), oklch(76% 0.06 200));
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(28% 0.06 200);
  margin-bottom: 0.6rem;
}

.showcase-card__cover--warm   { background: linear-gradient(135deg, oklch(88% 0.04 60),  oklch(78% 0.06 50)); color: oklch(30% 0.07 50); }
.showcase-card__cover--violet { background: linear-gradient(135deg, oklch(86% 0.04 290), oklch(76% 0.07 285)); color: oklch(28% 0.07 285); }
.showcase-card__cover--green  { background: linear-gradient(135deg, oklch(88% 0.04 145), oklch(78% 0.06 150)); color: oklch(28% 0.06 145); }
.showcase-card__cover--rose   { background: linear-gradient(135deg, oklch(88% 0.04 20),  oklch(78% 0.06 25));  color: oklch(30% 0.07 20);  }

.showcase-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin: 0 0 0.2rem;
}

.showcase-card__title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.28;
  color: var(--color-text);
  margin: 0 0 0.3rem;
}

.showcase-card:hover .showcase-card__title { color: var(--color-accent-deep); }

.showcase-card__meta {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
}

.showcase-card__institution {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  margin: 0.3rem 0 0;
}

/* ---------- data table ---------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-rule-strong);
  background: var(--color-sunken);
}

.data-table tbody td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
  color: var(--color-text);
}

.data-table tbody tr:hover { background: var(--color-sunken); }

.data-table .pricing-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.16rem 0.4rem;
  background: var(--color-tag-bg);
  border-radius: 999px;
  color: var(--color-text-muted);
}

.data-table .pricing-pill--free    { background: oklch(94% 0.030 145); color: oklch(36% 0.080 145); }
.data-table .pricing-pill--freemium{ background: oklch(94% 0.030 95);  color: oklch(38% 0.080 95);  }
.data-table .pricing-pill--paid    { background: oklch(94% 0.030 30);  color: oklch(38% 0.080 30);  }

.data-table a.tool-name {
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}

.data-table a.tool-name:hover { color: var(--color-accent); }

/* ---------- form (Contribute) ---------- */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 640px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.form-field > label,
.form-field legend {
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-field .help {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}

.form-field input[type="file"] {
  font: inherit;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  background: var(--color-sunken);
  border: 1px dashed var(--color-rule-strong);
  border-radius: 3px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  transition: border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}

.form-field input[type="file"]:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.form-field input[type="text"],
.form-field input[type="url"],
.form-field input[type="email"],
.form-field select,
.form-field textarea {
  font: inherit;
  font-size: 0.88rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-rule-strong);
  border-radius: 3px;
  padding: 0.45rem 0.55rem;
  transition: border-color 180ms var(--ease-out);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 0;
  border-color: var(--color-accent);
}

.form-field textarea { min-height: 7rem; resize: vertical; }

.form-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.form-fieldset .options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
}

.form-fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--color-text);
  font-weight: 400;
}

.form-fieldset input[type="checkbox"],
.form-fieldset input[type="radio"] {
  accent-color: var(--color-accent);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-bg);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.button:hover,
.button:focus {
  background: var(--color-accent-deep);
  border-color: var(--color-accent-deep);
  color: var(--color-bg);
}

.button--ghost {
  color: var(--color-accent-deep);
  background: transparent;
  border-color: var(--color-rule-strong);
}

.button--ghost:hover,
.button--ghost:focus {
  color: var(--color-accent-deep);
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

/* ---------- callout / notice ---------- */
.callout {
  margin: 1.25rem 0;
  padding: 0.85rem 1.1rem;
  background: var(--color-warn-bg);
  border-radius: 3px;
  font-size: 0.86rem;
  color: var(--color-warn-text);
  max-width: var(--measure);
}

.callout strong { color: var(--color-warn-text); }

/* ---------- news digest ---------- */
.digest {
  padding: 1.25rem 0 1.5rem;
  border-bottom: 1px solid var(--color-rule);
}

.digest:last-of-type { border-bottom: 0; }

.digest__date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-faint);
  margin: 0 0 0.35rem;
}

.digest h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  line-height: 1.3;
  margin: 0 0 0.85rem;
  max-width: 60ch;
}

.digest h3 a {
  color: var(--color-text);
  text-decoration: none;
}

.digest h3 a:hover { color: var(--color-accent); }

.digest__items {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  max-width: 80ch;
}

.digest__items > li {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--color-rule);
  display: grid;
  grid-template-columns: 14ch 1fr;
  gap: 1.25rem;
  align-items: baseline;
}

.digest__items > li:last-child { border-bottom: 0; }

.digest__items .digest-headline {
  display: block;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: 0.15rem;
}

.digest__items .digest-headline:hover { color: var(--color-accent); }

.digest__items .digest-source {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}

.digest__items .digest-note {
  font-size: 0.84rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}

/* small "admitted" dot for digest items that have graduated to the Library */
.digest__items li.is-admitted .digest-headline { padding-right: 1.5rem; position: relative; }

.admitted-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 0.5rem;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.6;
  transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out);
}

.digest__items li.is-admitted:hover .admitted-dot { opacity: 1; transform: scale(1.15); }

.admitted-link {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-deep);
  text-decoration: none;
  margin-left: 0.55rem;
  padding-bottom: 1px;
  border-bottom: 1px solid var(--color-accent);
  opacity: 0;
  transition: opacity 180ms var(--ease-out);
}

.digest__items li.is-admitted:hover .admitted-link,
.digest__items li.is-admitted:focus-within .admitted-link,
.admitted-link:focus { opacity: 1; }


/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-rule);
  background: var(--color-surface);
  margin-top: 2rem;
}

.site-footer__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 1.75rem var(--gutter);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
  font-size: 0.86rem;
  color: var(--color-text-muted);
}

@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
  margin: 0 0 0.5rem;
}

.site-footer__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.site-footer__col a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.site-footer__col a:hover { color: var(--color-accent); }

.funder-acknowledgement {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  max-width: 48ch;
  margin: 0;
  line-height: 1.5;
}

.funder-logo-placeholder {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border: 1px dashed var(--color-rule-strong);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-top: 0.5rem;
}

/* funder logo (real artwork inside the former placeholder box) */
a.funder-logo-placeholder {
  padding: 0.5rem;
  border-style: solid;
  line-height: 0;
}

.funder-logo-placeholder img {
  display: block;
  width: auto;
  height: 40px;
  max-width: 160px;
}

/* ---------- prototype notes (per page) ---------- */
.proto-notes {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px dashed var(--color-rule-strong);
}

.proto-notes h2 {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-faint);
  margin: 0 0 0.65rem;
}

.proto-notes p,
.proto-notes li {
  max-width: 70ch;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}

.proto-notes ul { padding-left: 1.2rem; }
.proto-notes li { margin-bottom: 0.3rem; }
.proto-notes strong { color: var(--color-text); font-weight: 600; }

/* ---------- sample-data banner (always visible on prototypes) ---------- */
.sample-banner {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-warn-text);
  background: var(--color-warn-bg);
  text-align: center;
  padding: 0.35rem var(--gutter);
  border-bottom: 1px solid oklch(86% 0.040 85);
}

/* ---------- news digest — redesign 2026-06-06 (editorial bulletin) ---------- */
.nx { display: grid; grid-template-columns: minmax(0,1fr) 19rem; gap: 2.75rem; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); align-items: start; }
@media (max-width: 60rem){ .nx { grid-template-columns: 1fr; gap: 2rem; } }

.nx-masthead { margin-bottom: 0.5rem; }
.nx-masthead h2 { font-family: var(--font-sans); font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 0.5rem; }
.nx-meta { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-faint); margin: 0 0 0.9rem; }
.nx-meta span:not(:last-child)::after { content: "·"; margin: 0 0.55rem; color: var(--color-rule-strong); }
.nx-summary { font-family: var(--font-sans); font-size: 1.1rem; line-height: 1.55; color: var(--color-text); max-width: var(--measure); margin: 0; }

.nx-lead { display: grid; grid-template-columns: 19rem 1fr; gap: 1.5rem; align-items: start; padding: 1.5rem 0 1.75rem; border-top: 2px solid var(--color-text); margin-top: 1.5rem; }
@media (max-width: 38rem){ .nx-lead { grid-template-columns: 1fr; } }
.nx-lead__media { aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; }
.nx-kicker { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); margin: 0 0 0.4rem; }
.nx-lead__title { font-family: var(--font-sans); font-size: 1.4rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.55rem; }
.nx-lead__title a { color: var(--color-text); text-decoration: none; }
.nx-lead__title a:hover { color: var(--color-accent); }
.nx-lead__note { font-size: 0.95rem; line-height: 1.55; color: var(--color-text-muted); margin: 0; max-width: var(--measure); }

.nx-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 2rem; margin-top: 0.25rem; }
@media (max-width: 44rem){ .nx-list { grid-template-columns: 1fr; } }
.nx-item { display: grid; grid-template-columns: 3.75rem 1fr; gap: 0.85rem; padding: 0.95rem 0; border-top: 1px solid var(--color-rule); align-items: start; }
.nx-item__thumb { width: 3.75rem; height: 3.75rem; border-radius: 5px; overflow: hidden; }
.nx-item__title { font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem; line-height: 1.3; letter-spacing: -0.006em; color: var(--color-text); text-decoration: none; display: block; margin: 0 0 0.15rem; }
.nx-item__title:hover { color: var(--color-accent); }
.nx-item__note { font-size: 0.8rem; line-height: 1.45; color: var(--color-text-muted); margin: 0.15rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-deep); border: 1px solid var(--color-accent); border-radius: 999px; padding: 0.06rem 0.5rem; margin-top: 0.45rem; text-decoration: none; }
.nx-badge:hover { background: var(--color-accent-soft); }

.nx-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-sunken), var(--color-surface)); color: var(--color-text-faint); font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.12em; border: 1px solid var(--color-rule); }

.nx-actions { margin-top: 1.5rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.nx-actions a { color: var(--color-accent-deep); text-decoration: none; margin-right: 1.25rem; }
.nx-actions a:hover { text-decoration: underline; }

.nx-rail { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (max-width: 60rem){ .nx-rail { position: static; } }
.nx-box { border: 1px solid var(--color-rule); border-radius: 8px; padding: 1rem 1.1rem; background: var(--color-surface); }
.nx-box h3 { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--color-text-faint); margin: 0 0 0.7rem; }
.nx-recent { list-style: none; margin: 0; padding: 0; }
.nx-recent li { padding: 0.65rem 0; border-top: 1px solid var(--color-rule); }
.nx-recent li:first-child { border-top: 0; padding-top: 0; }
.nx-recent__date { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); display: block; margin-bottom: 0.2rem; }
.nx-recent a { color: var(--color-text); text-decoration: none; font-size: 0.85rem; line-height: 1.3; font-weight: 500; }
.nx-recent a:hover { color: var(--color-accent); }
.nx-rail__note { font-size: 0.8rem; line-height: 1.5; color: var(--color-text-muted); margin: 0; }
.nx-rail__note a { color: var(--color-accent-deep); }
.nx-rail__cta { display: block; margin-top: 0.55rem; font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-deep); text-decoration: none; }
.nx-rail__cta:hover { text-decoration: underline; }

/* news image variants + no-image fallbacks (2026-06-06) */
.nx-lead__media img, .nx-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-lead--noimg { grid-template-columns: 1fr; }
.nx-item--noimg { grid-template-columns: 1fr; }
.nx-item--noimg .nx-item__title { font-size: 0.95rem; }
.nx-drynote { font-size: 0.78rem; line-height: 1.5; color: var(--color-text-muted); font-style: italic; margin: 0.4rem 0 0; max-width: var(--measure); }
.nx-srcless { display: inline-block; font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); border: 1px dashed var(--color-rule-strong); border-radius: 4px; padding: 0.05rem 0.4rem; margin-bottom: 0.35rem; }

/* tools table cell helpers (data-driven 2026-06-06) */
.tool-cell-note { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0.25rem 0 0; }
.tool-status { display: inline-block; font-family: var(--font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.03rem 0.4rem; border-radius: 4px; margin-left: 0.4rem; vertical-align: 1px; border: 1px solid var(--color-rule-strong); color: var(--color-text-faint); }
.tool-status--deprecated { color: var(--color-warn-text); border-color: var(--color-warn-text); background: var(--color-warn-bg); }
.tool-vendor { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); display: block; margin-top: 0.3rem; }

/* tools expandable detail rows (2026-06-06) */
.tool-expand { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-deep); background: none; border: 0; padding: 0.25rem 0; margin-top: 0.35rem; cursor: pointer; display: inline-block; }
.tool-expand:hover { text-decoration: underline; }
.tool-detail-row > td { background: var(--color-sunken); padding: 0.85rem 1rem 1rem; }
.tool-detail__notes { font-size: 0.85rem; line-height: 1.55; color: var(--color-text); margin: 0 0 0.7rem; max-width: var(--measure); }
.tool-detail-row dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; font-size: 0.8rem; }
.tool-detail-row dt { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); }
.tool-detail-row dd { margin: 0; color: var(--color-text-muted); }

/* tools version history (in expandable detail) */
.tool-versions { margin-top: 0.9rem; }
.tool-versions h4 { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); margin: 0 0 0.5rem; }
.tool-versions ul { list-style: none; margin: 0; padding: 0; }
.tool-versions li { padding: 0.4rem 0; border-top: 1px solid var(--color-rule); font-size: 0.82rem; line-height: 1.45; }
.tool-versions li:first-child { border-top: 0; }
.tool-ver__name { font-weight: 600; color: var(--color-text); }
.tool-ver__status { font-family: var(--font-mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.05em; border: 1px solid var(--color-rule-strong); border-radius: 4px; padding: 0.02rem 0.35rem; margin-left: 0.4rem; color: var(--color-text-faint); }
.tool-ver__status--current { color: var(--color-accent-deep); border-color: var(--color-accent); }
.tool-ver__status--deprecated { color: var(--color-warn-text); border-color: var(--color-warn-text); }
.tool-ver__note { display: block; color: var(--color-text-muted); margin-top: 0.15rem; }

/* --- release dates + detail-page additions (2026-06-08) --- */
.tool-released { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: 0.86rem; }
.tool-ver__date { font-variant-numeric: tabular-nums; color: var(--color-text-muted); font-size: 0.8rem; margin-left: 0.4rem; }

/* --- Cite this item panel (2026-06-11) --- */
.cite-panel {
  margin-top: 2.5rem;
  padding: 1.25rem 1.4rem 1.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 4px;
}
.cite-panel h2 {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--color-text-faint);
  font-family: var(--font-mono); margin: 0 0 0.75rem;
}
.cite-ref {
  font-family: var(--font-serif);
  font-size: 0.95rem; line-height: 1.55; color: var(--color-text);
  margin: 0 0 1rem; padding: 0.75rem 0.9rem;
  background: var(--color-bg); border-left: 2px solid var(--color-rule-strong);
  border-radius: 2px; word-break: break-word;
}
.cite-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.cite-actions .button { font-size: 0.82rem; }
.cite-note { font-size: 0.82rem; line-height: 1.5; color: var(--color-text-muted); margin: 0; }
.cite-note a { white-space: nowrap; }
.policy-deadline__date { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: 0.4rem; }
.item-detail__tags a { color: var(--color-text-muted); text-decoration: none; }
.item-detail__tags a:hover { text-decoration: underline; }

/* --- News digest rendering (2026-06-11) --- */
.dg-draft { border: 1px solid var(--color-warn-text, oklch(45% 0.10 85)); background: var(--color-warn-bg); border-radius: 6px; padding: 0.75rem 0.95rem; font-size: 0.85rem; line-height: 1.5; color: var(--color-text); margin: 0 0 1.5rem; }
.dg-note { font-size: 0.85rem; line-height: 1.55; color: var(--color-text-muted); border-left: 2px solid var(--color-rule-strong); padding: 0.4rem 0 0.4rem 0.9rem; margin: 0 0 1.75rem; max-width: var(--measure); }
.dg-section { margin: 2rem 0; }
.dg-section__h { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 2px solid var(--color-text); }
.dg-section__intro { font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted); margin: 0 0 0.5rem; max-width: var(--measure); }
.dg-block__h { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); margin: 1.1rem 0 0.25rem; }
.dg-items { list-style: none; margin: 0; padding: 0; }
.dg-item { font-size: 0.92rem; line-height: 1.5; color: var(--color-text); padding: 0.7rem 0; border-top: 1px solid var(--color-rule); max-width: var(--measure); }
.dg-item:first-child { border-top: 0; }
.dg-item strong { font-weight: 600; }
.dg-links { display: inline; white-space: nowrap; }
.dg-link { font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-accent-deep); text-decoration: none; margin-left: 0.4rem; }
.dg-link:hover { text-decoration: underline; }
.dg-flag { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-warn-text, oklch(40% 0.12 85)); border: 1px solid currentColor; border-radius: 999px; padding: 0.02rem 0.45rem; vertical-align: 0.08em; }
.dg-recent { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.dg-recent li { padding: 0.4rem 0; border-top: 1px solid var(--color-rule); font-size: 0.85rem; }
.dg-recent li:first-child { border-top: 0; }
.dg-recent a { color: var(--color-text); text-decoration: none; font-weight: 500; }
.dg-recent a:hover { color: var(--color-accent); }
.dg-alist { list-style: none; margin: 0; padding: 0; }
.dg-arow { padding: 1rem 0; border-top: 1px solid var(--color-rule); }
.dg-arow:first-child { border-top: 0; }
.dg-arow a, .dg-arow > span { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; color: var(--color-text); text-decoration: none; }
.dg-arow a:hover { color: var(--color-accent); }
.dg-arow__tag { font-family: var(--font-mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-faint); margin-left: 0.5rem; }
.dg-arow__sum { font-size: 0.88rem; line-height: 1.5; color: var(--color-text-muted); margin: 0.3rem 0 0; max-width: var(--measure); }

/* --- News thumbnails + rollout + sponsor logo (2026-06-11) --- */
.dg-item { display: grid; grid-template-columns: 76px 1fr; gap: 0.9rem; align-items: start; max-width: none; }
.dg-item__body { max-width: var(--measure); }
.dg-thumb { width: 76px; height: 52px; border-radius: 4px; overflow: hidden; background: var(--color-sunken); display: block; flex-shrink: 0; }
.dg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dg-thumb--ph { background: linear-gradient(135deg, var(--color-sunken), var(--color-accent-soft)); border: 1px solid var(--color-rule); }
.dg-thumb--logo { background: var(--color-surface); border: 1px solid var(--color-rule); display: flex; align-items: center; justify-content: center; }
.dg-thumb--logo img { width: auto; height: auto; max-width: 56%; max-height: 64%; object-fit: contain; }
@media (max-width: 32rem) { .dg-item { grid-template-columns: 60px 1fr; gap: 0.65rem; } .dg-thumb { width: 60px; height: 44px; } }
.dg-rollout { margin: 0.5rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-accent-deep); background: none; border: 1px solid var(--color-rule-strong); border-radius: 999px; padding: 0.25rem 0.85rem; cursor: pointer; }
.dg-rollout:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
.dg-section.is-collapsed .dg-item--extra { display: none; }
.funder-logo-img { height: 40px; width: auto; display: block; border-radius: 3px; }
.funder-logo-img--lg { height: 56px; }
/* footer sponsor row: logo left of the acknowledgement text, no border, logo matches text height */
.funder-row { display: flex; align-items: stretch; gap: 0.85rem; margin-top: 0.6rem; }
.funder-row .funder-acknowledgement { margin: 0; }
.funder-logo { display: flex; align-items: center; flex-shrink: 0; border: 0; padding: 0; line-height: 0; }
.funder-logo img { max-height: 100%; width: auto; max-width: 150px; display: block; border-radius: 3px; }

/* --- Case study card + detail thumbnails (2026-06-11) --- */
.cs-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--color-sunken); display: block; margin-bottom: 0.9rem; }
.cs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-thumb--ph { background: linear-gradient(135deg, var(--color-sunken), var(--color-accent-soft)); }
.cs-detail-thumb { width: 100%; max-height: 320px; object-fit: cover; border-radius: 8px; margin: 0 0 1.5rem; display: block; }