/* The search that weighs the letters: a minimal catalogue search on a white page. One variable grotesque, hairline
   rules, and vermilion only on the name picked with the arrows or the pointer. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the names and the letters found */
  --muted: #8a867e;         /* the class, the styles, the count */
  --dim: #77736b;           /* the letters not found, while searching */
  --faint: #c8c4bb;         /* the word that finds nothing */
  --rule: #e4e1da;          /* the hairline under the field */
  --band: #f5f3ef;          /* the band on the typeface picked */
  --accent: #e0442a;        /* the letters found in the typeface picked, the caret */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  padding: 32px 16px;
}

/* the field and the room the list lives in: always as tall as the longest list, so the field never moves */
.weigh {
  --row: 52px;
  --size: 22px;
  position: relative;
  width: min(520px, 100%);
}

/* ---------------------------------------------------------------- the field */
.weigh__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 2px;
}

.weigh__lens {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.weigh__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--ink);
  caret-color: var(--accent);
  font: 400 18px / normal 'Archivo Variable', 'Helvetica Neue', Arial, sans-serif;
  font-variation-settings: 'wdth' 100;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.weigh__input::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* the caret of the library's preview, which types without taking the focus */
.weigh__caret {
  position: absolute;
  top: 18px;
  left: 0;
  width: 1.5px;
  height: 21px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}

.weigh__caret.is-on {
  animation: blink 1.05s steps(1) infinite;
}

@keyframes blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* the count, in tabular figures: the digits roll, the width never changes */
.weigh__count {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  font-size: 13px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--muted);
  white-space: nowrap;
  transition: transform 0.5s cubic-bezier(0.25, 1.25, 0.4, 1);
}

/* with words in the field the count steps aside for the cross */
.weigh.has-words .weigh__count {
  transform: translateX(-34px);
}

.weigh__num {
  display: inline-flex;
  color: var(--ink);
}

.dg {
  position: relative;
  display: inline-block;
  height: 1.3em;
  line-height: 1.3em;
  overflow: hidden;
}

.dg__in {
  display: block;
}

.dg__in + .dg__in {
  position: absolute;
  left: 0;
  top: 0;
}

.weigh__clear {
  position: absolute;
  right: -6px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}

.weigh__clear svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.weigh__clear:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 1px;
}

@media (hover: hover) {
  .weigh__clear:hover {
    background: var(--band);
  }
}

/* the hairline under the field; with the focus an ink line draws over it from the lens */
.weigh__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}

.weigh__rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.weigh__field:focus-within .weigh__rule::after,
.weigh.is-pretend .weigh__rule::after {
  transform: scaleX(1);
}

/* ---------------------------------------------------------------- the list */
.weigh__room {
  position: relative;
  height: calc(var(--row) * 6 + 16px);
  margin-top: 8px;
}

.weigh__band {
  position: absolute;
  left: -10px;
  right: -10px;
  top: 0;
  height: var(--row);
  border-radius: 10px;
  background: var(--band);
  opacity: 0;
  pointer-events: none;
}

.weigh__list {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.row__in {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 0 2px;
}

.row.is-leaving {
  pointer-events: none;
}

/* the name: one span a letter, kerning off, so each letter's width is its own and can be held */
.row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--size);
  line-height: 1;
  white-space: pre;
  font-kerning: none;
  letter-spacing: 0;
  color: var(--ink);
}

.ch {
  font-variation-settings: 'wght' 300, 'wdth' 100;
  transition: color 0.3s ease;
}

.weigh.is-searching .ch {
  color: var(--dim);
}

.weigh.is-searching .ch.is-hit {
  color: var(--ink);
}

.row.is-active .ch.is-hit {
  color: var(--accent);
}

.row__meta {
  flex: none;
  transition: transform 0.5s cubic-bezier(0.25, 1.25, 0.4, 1);
  font-size: 13px;
  font-weight: 420;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* the Enter key, drawn: only on the typeface picked */
.row.is-active .row__meta {
  transform: translateX(-26px);
}

.row__enter {
  position: absolute;
  right: 2px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.25, 1);
}

.row.is-active .row__enter {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------- nothing found */
.weigh__none {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
}

.weigh__none[hidden] {
  display: none;
}

.none__word {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 0 0 14px;
  padding: 0 4px 0 2px;
  overflow: hidden;
  font-size: 44px;
  line-height: 1.1;
  white-space: pre;
  font-kerning: none;
  color: var(--faint);
}

.weigh .none__word .ch {
  color: var(--faint);
}

.none__strike {
  position: absolute;
  left: -2px;
  right: -4px;
  top: 53%;
  margin: 0 2px 0 0;
  height: 1.5px;
  background: var(--muted);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.none__what,
.none__try {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted);
}

.none__what {
  color: var(--ink);
}

.none__try {
  margin-top: 2px;
}

/* a word to try: it takes weight under the pointer, without growing */
.try {
  margin: 0;
  padding: 1px 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-kerning: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.try:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 0;
}

/* ---------------------------------------------------------------- the phone */
@media (max-width: 480px) {
  .weigh {
    --size: 20px;
  }

  .weigh__field {
    gap: 10px;
  }

  .weigh__input {
    font-size: 17px;
  }

  .row__in {
    gap: 10px;
  }

  .row__meta {
    font-size: 12px;
  }

  .row__enter {
    display: none;
  }

  .row.is-active .row__meta {
    transform: none;
  }

  .none__word {
    font-size: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .weigh__rule::after {
    transform: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .weigh__field:focus-within .weigh__rule::after,
  .weigh.is-pretend .weigh__rule::after {
    opacity: 1;
  }

  .row__enter,
  .row.is-active .row__meta,
  .weigh.has-words .weigh__count {
    transition: none;
  }
}