/* ================================================================
   /wat-is-nieuw — the public update log (ADR-0163).
   Loaded via a per-page <link> in templates/wat_is_nieuw.html,
   never bundled into main.css (ADR-0101).
   Rule: tokens only — no literal hex / px-radius / shadow.

   The three "kind" badges are distinguished by LABEL first. Their
   tints differ in luminance, not only hue, so the set stays
   readable for a red-colourblind reader — the badge never carries
   meaning that its text does not already carry.
   ================================================================ */

@layer components {

  .subpage--updates {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 var(--space-5) var(--space-24);
  }

  /* ── Surface filter ── */

  .updates-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
  }

  .updates-filter__tab {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
    transition: border-color 120ms ease, color 120ms ease;
  }

  .updates-filter__tab:hover {
    border-color: var(--color-border-strong);
    color: var(--color-text);
  }

  .updates-filter__tab.is-active {
    border-color: var(--color-text);
    background: var(--color-surface-sunken);
    color: var(--color-text);
  }

  .updates-filter__count {
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
  }

  .updates-filter__tab.is-active .updates-filter__count {
    color: var(--color-text-secondary);
  }

  .updates-blurb {
    margin: var(--space-5) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
  }

  /* ── The list ── */

  .updates-list {
    margin: var(--space-10) 0 0;
    padding: 0;
    list-style: none;
  }

  .updates-item {
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: var(--space-16);
  }

  .updates-item:first-child {
    padding-top: 0;
  }

  .updates-item:target .updates-item__title {
    text-decoration-color: var(--color-accent);
  }

  .updates-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .updates-item__date {
    color: var(--color-text-tertiary);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    letter-spacing: 0.02em;
  }

  .updates-item__kind {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  /* Luminance ladder, lightest to darkest. The label does the work. */
  .updates-item__kind--nieuw {
    background: var(--color-accent-light);
    color: var(--color-accent-ink);
  }

  .updates-item__kind--verbeterd {
    background: var(--color-surface-sunken);
    color: var(--color-text-secondary);
  }

  .updates-item__kind--opgelost {
    background: var(--color-surface-raised);
    color: var(--color-text-tertiary);
    border: 1px solid var(--color-border);
  }

  .updates-item__surface {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    text-decoration: none;
    border-bottom: 1px solid var(--color-border);
  }

  .updates-item__surface:hover {
    color: var(--color-text-secondary);
    border-bottom-color: var(--color-border-strong);
  }

  .updates-item__title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-snug);
  }

  .updates-item__title a {
    color: var(--color-text);
    text-decoration: none;
  }

  .updates-item__title a:hover {
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .updates-item__summary {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
  }

  .updates-item__body {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }

  .updates-item__body p {
    margin: 0 0 var(--space-4);
  }

  .updates-item__body p:last-child {
    margin-bottom: 0;
  }

  /* ── Empty state and footer ── */

  .updates-empty {
    margin: var(--space-12) 0;
    padding: var(--space-8);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
    text-align: center;
    line-height: var(--line-height-relaxed);
  }

  .updates-foot {
    margin-top: var(--space-10);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
  }

  .updates-foot__feed {
    color: var(--color-text);
  }

  .updates-foot__note {
    margin-top: var(--space-3);
    color: var(--color-text-tertiary);
  }

  @media (max-width: 40rem) {
    .updates-item__title {
      font-size: var(--font-size-lg);
    }

    .updates-item__summary {
      font-size: var(--font-size-base);
    }
  }

}