/* Colours are sampled from glr.nl: #141414 ink, #f4f4f4 ground, #8fe507 green.
   Green is a fill only. It never carries text, the contrast is not there. */
:root {
  --bg: #f4f4f4;
  --bg-2: #e9e9e9;
  --ink: #141414;
  --ink-2: #5c5c5c;
  --rule: #d6d6d6;
  --green: #8fe507;
  --error: #b42318;

  --display: "Archivo Black", "Arial Black", Impact, sans-serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "Cascadia Mono", Consolas, monospace;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141414;
    --bg-2: #1f1f1f;
    --ink: #f4f4f4;
    --ink-2: #a4a4a4;
    --rule: #333333;
    --error: #ff7b6e;
  }
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  position: relative;
  margin: 0;
  padding-block: 0 5rem;
  padding-inline: clamp(16px, 5vw, 72px);
  color: var(--ink);
  background: var(--bg);
  font: 400 16px/1.5 var(--sans);
}

/* Film grain so the flat ground has some material to it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--grain);
  opacity: .06;
  pointer-events: none;
  z-index: 1;
}
@media (prefers-color-scheme: dark) { body::before { opacity: .09; } }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
a:active { opacity: .7; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

code { font-family: var(--mono); font-size: .9em; }

/* ---------- header ---------- */
.top {
  display: grid;
  padding: 3rem 0 1.5rem;
}

.top h1 {
  margin: 0;
  font: 400 clamp(2.4rem, 7vw, 5.5rem)/.92 var(--display);
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.top h1 span {
  display: inline-block;
  padding: 0 .12em;
  background: var(--green);
  color: #141414;
}


/* ---------- filters ---------- */
.filters {
  display: flex;
  align-items: center;
  gap: .75rem 1.5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  border-top: 2px solid var(--ink);
}

.filter-label { font: 600 .85rem var(--sans); }

#search {
  flex: 1 1 240px;
  max-width: 420px;
  padding: .55rem .7rem;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: var(--ink);
  font: 400 .95rem var(--sans);
}
#search::placeholder { color: var(--ink-2); }
#search:focus { outline: 3px solid var(--green); outline-offset: 0; }

.cats { display: flex; gap: .4rem; flex-wrap: wrap; }
.cat {
  padding: .45rem .75rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 500 .85rem var(--sans);
  cursor: pointer;
}
.cat small { font: 500 .75rem var(--mono); color: var(--ink-2); margin-left: .2rem; }
.cat:hover { background: var(--bg-2); }
.cat:active { background: var(--rule); }
.cat.is-active { background: var(--green); border-color: var(--green); color: #141414; }
.cat.is-active small { color: #141414; opacity: .7; }

/* ---------- listing ---------- */
.table-wrap { overflow-x: auto; }

.listing {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.listing th {
  text-align: left;
  padding: .75rem .75rem .6rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font: 600 .8rem var(--sans);
  white-space: nowrap;
}

.listing td {
  padding: 1rem .75rem 1rem 0;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
tr.row:hover td { background: var(--bg-2); }

.c-name { min-width: 18rem; }
.c-path, .c-lang, .c-push { font: 400 .85rem var(--mono); white-space: nowrap; }
.c-path, .c-push { color: var(--ink-2); }
.c-src { text-align: right; white-space: nowrap; }

.name { font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.name:hover { text-decoration: underline; }

.desc { margin-top: .2rem; color: var(--ink-2); max-width: 46ch; }
.err { margin-top: .2rem; font: 400 .8rem var(--mono); color: var(--error); }

.readme-toggle {
  margin-top: .5rem;
  padding: .2rem .5rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 500 .78rem var(--mono);
  cursor: pointer;
}
.readme-toggle:hover { background: var(--bg-2); }
.readme-toggle[aria-expanded="true"] { background: var(--ink); color: var(--bg); }

.readme-row td { padding: 0 0 1.5rem; border-bottom: 1px solid var(--rule); }
.readme {
  max-width: 72ch;
  padding: 1.25rem 1.5rem;
  border-left: 6px solid var(--green);
  background: var(--bg-2);
  font-size: .95rem;
  overflow-x: auto;
}
.readme > :first-child { margin-top: 0; }
.readme > :last-child { margin-bottom: 0; }
.readme img { max-width: 100%; }
.readme h1, .readme h2, .readme h3 { font-weight: 600; }
.readme pre, .readme code { font-family: var(--mono); font-size: .85em; }
.readme pre { padding: .75rem 1rem; background: var(--bg); overflow-x: auto; }

.empty { padding: 2rem 0; color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference) {
  .cat, .readme-toggle { transition: background-color .1s; }
}

@media (max-width: 700px) {
  .top { grid-template-columns: 1fr; align-items: start; }
  .c-lang, th.c-lang { display: none; }
  .c-name { min-width: 12rem; }
}