{#- Shared head and chrome for every dashboard page.

    The theme is resolved before first paint by the inline script below. Doing
    it in a deferred script instead produces a white flash on a dark page,
    which on a projector is the most noticeable thing on the slide. -#}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/theme.css">
<link rel="icon" href="data:image/svg+xml,
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
    <rect width='32' height='32' rx='8' fill='%234c35d4'/>
    <path d='M9 21l5-11 3 7 2-3 4 7z' fill='none' stroke='%23fff'
          stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'/>
  </svg>">
<style>
  /* Carried over from the accessibility pass: keyboard users had no visible
     focus anywhere on this dashboard, and these must hold on every page. */
  :where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
  }
  .skip-link {
    position: absolute; left: .5rem; top: -3rem; z-index: 50;
    background: var(--accent); color: var(--accent-ink); font-weight: 600;
    padding: .55rem .9rem; border-radius: 0 0 8px 8px;
    text-decoration: none; transition: top 120ms ease;
  }
  .skip-link:focus { top: 0; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
    .card:hover, a.card:hover { transform: none !important; }
  }
  /* Touch targets: the chips and switches were under 32px on a phone. */
  @media (pointer: coarse) { button, .chip, .view-switch button { min-height: 2.75rem; } }
</style>
<script>
  // Before paint: honour a remembered choice, else the system setting.
  try {
    var t = localStorage.getItem('auditor-theme');
    if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t;
  } catch (e) { /* private mode: the system setting still applies */ }

  // The switch itself, defined once for every page that includes this head.
  // Any page can place the markup; none of them needs its own copy of this,
  // which is how three pages ended up with three slightly different ones.
  document.addEventListener('DOMContentLoaded', function () {
    var buttons = Array.prototype.slice.call(document.querySelectorAll('[data-theme-set]'));
    if (!buttons.length) return;
    function current() {
      return document.documentElement.dataset.theme
        || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    }
    function paint() {
      var now = current();
      buttons.forEach(function (b) { b.setAttribute('aria-pressed', String(b.dataset.themeSet === now)); });
    }
    buttons.forEach(function (b) {
      b.addEventListener('click', function () {
        document.documentElement.dataset.theme = b.dataset.themeSet;
        try { localStorage.setItem('auditor-theme', b.dataset.themeSet); } catch (e) {}
        paint();
        // Charts bake their colours in, so they are told to redraw.
        document.dispatchEvent(new CustomEvent('themechange', { detail: b.dataset.themeSet }));
      });
    });
    paint();
  });
</script>