/* One stylesheet, no framework, no build step.

   The palette is taken from the application icon: a white three-node mesh on
   an indigo gradient, #7B7FEC to #4A4EB0. The accent is the deep end of that
   gradient in light mode and the light end in dark, so the site and the icon
   in the taskbar next to it read as one product. The greys are tinted the
   same hue rather than neutral — a truly neutral grey beside this indigo
   looks faintly green.

   Colours are tokens on :root, redefined once for dark mode, so the site
   follows the reader's system setting without a second palette to maintain.
   Setting `accent` in the admin overrides the token in both modes; leaving it
   blank keeps what is here. */

:root {
  --bg: #ffffff;
  --panel: #f5f6fb;
  --ink: #191a24;
  --muted: #5b5e75;
  --line: #e0e2f0;
  --accent: #4a4eb0;          /* the deep end of the icon gradient */
  --accent-lift: #7b7fec;     /* the light end of the icon, for washes only */
  /* The button gradient's other end. It goes DEEPER than the accent, not
     lighter: white on the accent is 6.98:1 and on this 9.16:1, so every part
     of a button clears AAA. An earlier version ran towards the icon's light
     #7b7fec, where white is 3.45:1 — legal at large sizes, and hard to read,
     which is exactly what it was reported as. */
  --accent-hi: #3c3f8e;
  --accent-ink: #ffffff;
  --warn: #9a5b12;
  --bad: #a33232;
  --ok: #2f7d3f;
  --radius: 10px;
  --wrap: 62rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14151f;
    --panel: #1c1e2b;
    --ink: #e7e8f4;
    --muted: #9a9db8;
    --line: #2d3044;
    --accent: #8b8ff0;        /* the light end, which needs the dark ground */
    --accent-lift: #a8abf7;
    /* Dark mode puts dark ink on the accent, so "further from the ink" means
       lighter here. 8.40:1 against 6.22:1 for the accent alone. */
    --accent-hi: #a8abf7;
    --accent-ink: #14152a;
    --warn: #d9a05b;
    --bad: #e08080;
    --ok: #7fd39a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus { left: 1rem; top: 1rem; background: var(--accent); color: var(--accent-ink); padding: .5rem .75rem; border-radius: 6px; z-index: 10; }

/* --- header --- */

.top { border-bottom: 1px solid var(--line); background: var(--panel); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 650; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.mark { width: 1.5rem; height: 1.5rem; display: block; border-radius: 6px; }
.top nav { display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }
.top nav a { color: var(--muted); text-decoration: none; font-size: .94rem; }
.top nav a:hover { color: var(--ink); }
.top nav a.cta { background: linear-gradient(135deg, var(--accent), var(--accent-hi)); color: var(--accent-ink); padding: .38rem .85rem; border-radius: 999px; font-weight: 600; }
.top nav a.cta:hover { color: var(--accent-ink); filter: brightness(1.07); }

/* --- hero --- */

.hero {
  padding: 3.5rem 0 2.5rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(60rem 22rem at 15% -20%,
      color-mix(in srgb, var(--accent-lift) 16%, transparent), transparent 70%),
    radial-gradient(45rem 20rem at 95% 0%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
/* With no screenshot set, the icon carries the hero rather than a blank column. */
.heromark { display: grid; place-items: center; }
.heromark img { width: min(14rem, 60vw); height: auto; filter: drop-shadow(0 12px 32px color-mix(in srgb, var(--accent) 35%, transparent)); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
@media (max-width: 46rem) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 .6rem; }
.lede { font-size: 1.2rem; color: var(--muted); margin: 0 0 .8rem; }
.intro { margin: 0 0 1.4rem; max-width: 34rem; }
.actions { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.2rem 0 .8rem; }

.button { display: inline-block; background: linear-gradient(135deg, var(--accent), var(--accent-hi)); color: var(--accent-ink); padding: .6rem 1.2rem; border-radius: var(--radius); text-decoration: none; font-weight: 600; border: 1px solid transparent; }
.button { font-weight: 650; letter-spacing: .005em; }
.button:hover { filter: brightness(1.12); }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.button.danger { background: var(--bad); }
.button.small { padding: .3rem .7rem; font-size: .85rem; }

.shot { margin: 0; }
.shot img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); display: block; }
.shot.wide { margin: 1.5rem 0; }

/* --- prose --- */

.prose { padding: 2.5rem 1.25rem 4rem; }
.prose h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); letter-spacing: -0.022em; margin: 0 0 .8rem; }
.prose h2 { font-size: 1.35rem; letter-spacing: -0.015em; margin: 2.2rem 0 .6rem; }
.prose h3 { font-size: 1.1rem; margin: 1.6rem 0 .4rem; }
.prose p, .prose li { max-width: 44rem; }
.prose img { max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.prose a { color: var(--accent); }
.prose code { background: var(--panel); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }
.prose pre { background: var(--panel); padding: 1rem; border-radius: var(--radius); overflow-x: auto; border: 1px solid var(--line); }
.prose pre code { background: none; padding: 0; }
.prose blockquote { border-left: 3px solid var(--line); margin: 1rem 0; padding: .2rem 0 .2rem 1rem; color: var(--muted); }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .5rem .6rem; text-align: left; }

.quiet { color: var(--muted); font-size: .9rem; }
.empty { color: var(--muted); font-style: italic; }

/* --- downloads --- */

.release-block { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 1.5rem 0; background: var(--panel); }
.release-block h2 { margin-top: 0; }
.files { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .9rem; }
.files li { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; align-items: center; }
.files .meta { color: var(--muted); font-size: .88rem; }
.digest { grid-column: 1 / -1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: var(--muted); word-break: break-all; }
.older { list-style: none; padding: 0; }
.older li { padding: .35rem 0; border-bottom: 1px solid var(--line); display: flex; gap: .8rem; justify-content: space-between; }

/* --- chips, tags, entries --- */

.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1.2rem 0 1.8rem; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: .25rem .75rem; font-size: .85rem; text-decoration: none; color: var(--muted); text-transform: capitalize; }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

.tag { display: inline-block; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
.tag.beta, .tag.confirmed { border-color: var(--warn); color: var(--warn); }
.tag.alpha, .tag.open, .tag.sev-blocker, .tag.sev-high { border-color: var(--bad); color: var(--bad); }
.tag.fixed { border-color: var(--ok); color: var(--ok); }

.entry { border-top: 1px solid var(--line); padding: 1.6rem 0 .6rem; }
.entry h2 a { color: inherit; text-decoration: none; }

.bug { border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.bug.status-open { border-left-color: var(--bad); }
.bug.status-confirmed { border-left-color: var(--warn); }
.bug.status-fixed { border-left-color: var(--ok); }
.bug h2 { margin: 0 0 .4rem; font-size: 1.12rem; }
.bug h2 a { color: var(--muted); text-decoration: none; font-family: ui-monospace, monospace; font-size: .9rem; }
.badges { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0 0 .6rem; }
.workaround { background: var(--panel); border-radius: 8px; padding: .6rem .9rem; margin-top: .8rem; font-size: .93rem; }
.workaround p { margin: .3rem 0; }

/* --- footer --- */

.foot { border-top: 1px solid var(--line); background: var(--panel); padding: 1.5rem 0; margin-top: 3rem; }
.foot .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot p { margin: 0; color: var(--muted); font-size: .9rem; }
.foot a { color: var(--muted); }