/* Pabbel's own four colours, taken off pabbel.com rather than invented. */
:root {
  --ink: #0d0d0c;
  --paper: #fbfbfa;
  --signal: #e0612a;
  --sage: #becdcb;
  --face: #141413;
  --edge: #24241f;
  --dim: #8a8a80;
  --radius: 14px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --ink: #f4f2ee; --paper: #0d0d0c; --face: #fff;
    /* Near-white cards on near-white paper read as one grey field, so the
       canvas is warmed off-white and the edges are given something to be. */
    --edge: #ddd9d0; --dim: #6c6a62;
    color-scheme: light;
  }
  .card { box-shadow: 0 1px 2px rgba(13, 13, 12, .05); }
  .grain { opacity: .02; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 16px/1.5 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* A warm bloom from the top left, so the page is not a flat slab. */
  background-image:
    radial-gradient(60rem 40rem at 8% -10%, color-mix(in oklab, var(--signal) 16%, transparent), transparent 70%),
    radial-gradient(48rem 34rem at 100% 0%, color-mix(in oklab, var(--sage) 10%, transparent), transparent 65%);
  background-attachment: fixed;
  padding: 0 max(1rem, env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom));
  overflow-wrap: anywhere;
}
/* Fine grain, so the gradients do not band on a cheap screen. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.top, main, .foot { position: relative; z-index: 1; max-width: 76rem; margin-inline: auto; }
.top {
  display: flex; align-items: center; gap: 1rem;
  padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(1rem, 3vw, 1.75rem);
  flex-wrap: wrap;
}
.mark { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 30px; flex: none; }
.mark i { width: 13px; height: 13px; border-radius: 50%; background: var(--sage); }
.mark i:first-child, .mark i:last-child { background: var(--signal); }
.titles { flex: 1 1 12rem; min-width: 0; }
h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.9rem, 7vw, 3rem);
  margin: 0; letter-spacing: -.03em; line-height: 1;
}
.sub { margin: .4rem 0 0; color: var(--dim); font-size: .8rem; }

.search {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: 0 .9rem;
  border: 1px solid var(--edge); border-radius: 999px;
  background: var(--face); color: var(--paper);
  font: inherit; font-size: .82rem; cursor: pointer;
  transition: border-color .18s, color .18s;
}
.search:hover, .search:focus-visible { border-color: color-mix(in oklab, var(--signal) 55%, transparent); color: var(--signal); }
.search svg, .field svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
kbd {
  font: inherit; font-size: .68rem; letter-spacing: .04em;
  padding: .15rem .4rem; border: 1px solid var(--edge); border-radius: 6px; color: var(--dim);
}

/* Groups */
section { margin-bottom: clamp(1.75rem, 5vw, 2.75rem); }
h2 {
  font: 500 .72rem/1 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: .18em; color: var(--signal);
  margin: 0 0 .85rem; display: flex; align-items: center; gap: .75rem;
}
h2::after { content: ''; flex: 1; height: 1px; background: var(--edge); }

.grid { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 58rem) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; align-items: center; gap: .85rem;
  min-height: 62px; padding: .8rem .9rem;
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--face); color: inherit; text-decoration: none;
  transition: border-color .18s, transform .18s, background .18s;
}
.card:hover, .card:focus-visible {
  border-color: color-mix(in oklab, var(--signal) 55%, transparent);
  transform: translateY(-2px);
  outline: none;
}
.card:active { transform: translateY(0); }
.tile {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 11px; background: color-mix(in oklab, var(--signal) 16%, transparent);
  color: var(--signal); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1rem;
}
.card .body { min-width: 0; display: flex; flex-direction: column; gap: .12rem; }
.card .name { font-weight: 500; font-size: .95rem; line-height: 1.25; }
.card .note,
.card .host {
  /* One line each, cut rather than wrapped: a card that grows with its
     description makes a ragged grid, and the host is the least important
     thing on it. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card .note { color: var(--dim); font-size: .74rem; }
.card .host { color: color-mix(in oklab, var(--sage) 70%, transparent); font-size: .68rem; }

.foot { padding: 1.5rem 0 0; color: var(--dim); font-size: .72rem; }
.foot p { margin: 0; }

/* Palette */
.palette {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in oklab, var(--ink) 72%, transparent);
  backdrop-filter: blur(7px);
  display: grid; align-items: start; justify-items: center;
  padding: max(3vh, env(safe-area-inset-top)) 1rem 1rem;
}
.palette[hidden] { display: none; }
.sheet {
  width: min(38rem, 100%); max-height: 84vh; display: flex; flex-direction: column;
  border: 1px solid var(--edge); border-radius: 16px; background: var(--face);
  box-shadow: 0 30px 70px -20px #000; overflow: hidden;
  animation: rise .16s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .sheet { animation: none; } .card { transition: none; } }
.field { display: flex; align-items: center; gap: .6rem; padding: .8rem .95rem; border-bottom: 1px solid var(--edge); }
.field input {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--paper);
  font: inherit; font-size: 1rem; outline: none;
}
.field input::-webkit-search-cancel-button { display: none; }
.field button { background: none; border: 1px solid var(--edge); border-radius: 6px; color: var(--dim); font: inherit; font-size: .68rem; padding: .2rem .45rem; cursor: pointer; }
.hits { list-style: none; margin: 0; padding: .35rem; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hits a {
  display: flex; align-items: center; gap: .75rem; min-height: 48px;
  padding: .5rem .6rem; border-radius: 10px; color: inherit; text-decoration: none;
}
.hits li[aria-selected="true"] a, .hits a:hover { background: color-mix(in oklab, var(--signal) 14%, transparent); }
.hits a > span { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.hits .name { font-size: .9rem; }
.hits .host { color: var(--dim); font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hits .tile { width: 30px; height: 30px; border-radius: 9px; font-size: .82rem; }
.none { margin: 0; padding: 1.4rem; text-align: center; color: var(--dim); font-size: .8rem; }
@media (max-width: 33rem) { .only-wide { display: none; } .search-label { display: none; } .search { padding: 0 .75rem; } }