/* thinglaunch.com: the index of every thing. The landing shell (land.css)
   is the page's look; this is the copper accent and what only this page
   has: the launcher, the stack of layers, the filters and the cards. The
   spacing names below map the old kit's scale onto the shell's values. */

:root {
  --accent: #d29856;
  --accent-bright: #e8b27a;
  --surface: #111111;
  --surface-up: #161616;
  --lit: rgb(255 255 255 / 0.05);
  --r: 0.875rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s8: 3.5rem;
  --max: var(--wrap);
}

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  padding: 0 0.3em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  font: 500 0.75em/1 var(--mono);
  color: var(--muted);
}

.count {
  color: var(--dim);
  font: 0.8125rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
}

.count span {
  color: var(--ink);
}

.js .nojs-only {
  display: none;
}

/* -------------------------------------------------------------- launcher -- */

/* A command palette: type a name, pick with the arrows, Enter opens it. The
   hit list is a fixed number of rows, so typing never moves the page. */
.launcher {
  --rows: 4;
  --row: 3.5rem;
  width: min(100%, 38rem);
  margin-top: 2.5rem;
  text-align: left;
  background: linear-gradient(var(--surface-up), var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: calc(var(--r) + 2px);
  box-shadow: 0 1px 0 var(--lit) inset, 0 2.5rem 5rem -1.5rem rgb(0 0 0 / 0.9);
  overflow: hidden;
}

html:not(.js) .launcher {
  display: none;
}

.launcher-field {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s5);
  height: 3.75rem;
  border-bottom: 1px solid var(--line);
  font: 1.0625rem var(--mono);
}

.launcher-p {
  color: var(--accent);
  white-space: nowrap;
}

.launcher-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  caret-color: var(--accent);
}

.launcher-field input::placeholder {
  color: var(--dim);
}

.launcher-field input:focus {
  outline: none;
}

.launcher:focus-within {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

.hits {
  height: calc(var(--rows) * var(--row) + var(--s2) * 2);
  padding: var(--s2);
  overflow: hidden;
}

.hit {
  --c: var(--accent);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--s3);
  height: var(--row);
  padding: 0 var(--s3);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}

.hit img {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.hit-text {
  display: grid;
  min-width: 0;
}

.hit-name {
  font: 600 0.9375rem/1.3 var(--mono);
}

.hit-name mark {
  background: none;
  color: var(--c);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.hit-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--dim);
  font-size: 0.8125rem;
}

.hit-go {
  color: var(--dim);
  font: 0.75rem var(--mono);
  white-space: nowrap;
}

.hit[aria-selected="true"] {
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: inset 2px 0 0 var(--c);
}

.hit[aria-selected="true"] .hit-go {
  color: var(--ink);
}

.hits-none {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--dim);
  font-size: 0.9375rem;
}

.launcher-foot {
  display: flex;
  gap: var(--s5);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.75rem;
}

.launcher-foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

@media (max-width: 47.99rem) {
  .launcher {
    --rows: 3;
  }

  .thing {
    padding: var(--s4);
    gap: var(--s2) var(--s3);
  }

  .thing-desc {
    font-size: 0.9rem;
  }

  .launcher-field {
    padding: 0 var(--s4);
    font-size: 1rem;
  }

  .launcher-field kbd,
  .launcher-foot,
  .hit-go {
    display: none;
  }
}

/* ------------------------------------------------------------------- set -- */

/* the stack: every layer as one row, its things as dots in their colours */
.stack {
  margin: 3.5rem 0 0;
  display: grid;
  gap: var(--s2);
}

.stack a {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.stack a:hover {
  background: var(--surface-up);
  border-color: var(--line-strong);
}

.stack-name {
  font-weight: 600;
}

.stack-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stack-dots i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
}

.stack-n {
  font: 600 0.8125rem var(--mono);
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 35.99rem) {
  .stack a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .stack-dots {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.filters {
  margin: var(--s8) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

html:not(.js) .filters {
  display: none;
}

.filters button {
  min-height: 2.25rem;
  padding: 0 var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 0.875rem var(--sans);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.filters button:hover {
  color: var(--ink);
  border-color: rgb(255 255 255 / 0.24);
}

.filters button[aria-pressed="true"] {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.layer {
  margin-top: var(--s8);
}

.layer[hidden] {
  display: none;
}

.layer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s5);
  padding-bottom: var(--s4);
  margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

.layer-head h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}

.layer-head p {
  color: var(--muted);
}

.things {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--s4);
}

.things li[hidden] {
  display: none;
}

/* a card carries its own site's colour: the icon, the hover edge and glow */
.thing {
  --c: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon name name"
    "desc desc desc"
    "go go st";
  align-items: center;
  gap: var(--s3) var(--s3);
  height: 100%;
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 0 var(--lit) inset;
  color: var(--ink);
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  transition: border-color 0.15s;
}

.thing::before {
  content: "";
  position: absolute;
  inset: 0 15% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}

a.thing:hover {
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
}

a.thing:hover::before {
  opacity: 1;
}

.thing img {
  grid-area: icon;
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.thing-name {
  grid-area: name;
  font: 600 1.0625rem var(--mono);
  letter-spacing: -0.01em;
}

.thing-desc {
  grid-area: desc;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.thing-go {
  grid-area: go;
  align-self: end;
  font: 0.8125rem var(--mono);
  color: var(--dim);
  transition: color 0.2s;
}

a.thing:hover .thing-go {
  color: var(--c);
}

.st {
  grid-area: st;
  align-self: end;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font: 500 0.6875rem/1.2 var(--mono);
  color: var(--muted);
  white-space: nowrap;
}

.st-use {
  color: var(--ok);
  border-color: rgb(95 224 140 / 0.3);
  background: rgb(95 224 140 / 0.06);
}

.st-build {
  color: var(--accent-bright);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.st-use::before,
.st-build::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 0.08em;
}

.count {
  margin-top: 1.25rem;
}