/* Shared by the summary page (/) and the details page (/details). */
  :root {
    --bg: #f6f7f9; --surface: #fff; --surface-2: #f0f2f5; --border: #e2e5ea;
    --text: #15171a; --muted: #5f6672; --faint: #8a919c;
    --ok: #1f9d55; --ok-bg: #e6f5ec;
    --minor: #b7791f; --minor-bg: #fdf3e1;
    --major: #d03a3a; --major-bg: #fbe9e9;
    --info: #3b6fd8; --info-bg: #e8effc;
    --radius: 10px;
    color-scheme: light;
  }
  /* Dark palette applies for the explicit "dark" choice and, with no explicit choice ("system"),
     when the OS prefers dark. An explicit "light" always wins. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #111316; --surface: #1a1d21; --surface-2: #22262b; --border: #2e333a;
      --text: #e8eaed; --muted: #a1a8b3; --faint: #737b86;
      --ok: #4cc283; --ok-bg: #173325;
      --minor: #e3a64a; --minor-bg: #3a2e17;
      --major: #f06b6b; --major-bg: #3d1d1d;
      --info: #78a0f0; --info-bg: #1c2a45;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #111316; --surface: #1a1d21; --surface-2: #22262b; --border: #2e333a;
    --text: #e8eaed; --muted: #a1a8b3; --faint: #737b86;
    --ok: #4cc283; --ok-bg: #173325;
    --minor: #e3a64a; --minor-bg: #3a2e17;
    --major: #f06b6b; --major-bg: #3d1d1d;
    --info: #78a0f0; --info-bg: #1c2a45;
    color-scheme: dark;
  }
  .theme { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
  .theme button { font: inherit; font-size: 12px; line-height: 1; padding: 4px 9px; border: 0; background: none;
    color: var(--muted); cursor: pointer; }
  .theme button + button { border-left: 1px solid var(--border); }
  .theme button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--text);
    font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
  a { color: inherit; }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 20px 16px 48px; }
  header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
  h1 { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
  h2 { font-size: 16px; margin: 0; }
  .meta { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
  [hidden] { display: none !important; }
  #site-links { display: inline-flex; gap: 10px; }
  #site-links a { color: var(--info); text-decoration: none; }
  #site-links a:hover { text-decoration: underline; }
  .live { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); display: inline-block; }
  .live.on { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulse 2s infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

  .banner { border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; font-weight: 600;
    display: flex; align-items: center; gap: 10px; border: 1px solid transparent; }
  .banner.ok { background: var(--ok-bg); color: var(--ok); }
  .banner.minor { background: var(--minor-bg); color: var(--minor); }
  .banner.major { background: var(--major-bg); color: var(--major); }
  .banner small { font-weight: 400; color: var(--muted); }
  a.back { text-decoration: none; color: var(--muted); margin-right: 4px; }
  a.back:hover { color: var(--text); }