/* The search that finishes the word: a minimal journal search on a white page. One variable grotesque whose weight
   and width axes tell the letters written from the letters still to write, hairline rules, and blue only on the
   line under the word and on the caret. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the letters written, the topics */
  --ghost: #aaa59b;         /* the letters still to write */
  --muted: #8a867e;         /* the placeholder, the counts, the notes */
  --rule: #e6e3dc;          /* the hairline under the field */
  --band: #f5f3ef;          /* the band on the topic chosen */
  --accent: #2f45ff;        /* the line under the word, 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: 'Roboto Flex 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;
}

.finish {
  --fs: 34px;
  --row: 46px;
  position: relative;
  width: min(540px, 100%);
}

/* ---------------------------------------------------------------- the field */
.finish__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 76px;
  padding: 0 2px;
}

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

.finish__wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.finish__shake,
.finish__track {
  position: absolute;
  inset: 0;
}

.finish__track {
  display: flex;
  align-items: center;
  pointer-events: none;
}

/* the letters: one span each, kerning off, so a letter's width is only its own */
.finish__text {
  font-size: var(--fs);
  line-height: 1;
  white-space: pre;
  font-kerning: none;
  letter-spacing: 0;
}

.ch {
  display: inline-block;
  color: var(--ink);
  font-variation-settings: 'wght' 470, 'wdth' 100;
  transition: color 0.3s ease;
}

.ch.is-ghost {
  color: var(--ghost);
}

.ch.is-gone {
  position: absolute;
  font-size: var(--fs);
  line-height: 1;
  white-space: pre;
  pointer-events: none;
}

.finish__holder {
  position: absolute;
  left: 0;
  top: 50%;
  font-size: var(--fs);
  line-height: 1;
  font-variation-settings: 'wght' 260, 'wdth' 100;
  color: var(--muted);
  white-space: nowrap;
  transform: translateY(-50%);
  pointer-events: none;
}

/* the real field lies over the letters, its own text invisible: it gives the keyboard, the selection and the
   screen reader, the letters on screen are drawn by the script */
.finish__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: 470 var(--fs) / normal 'Roboto Flex Variable', 'Helvetica Neue', Arial, sans-serif;
  font-variation-settings: 'wght' 470, 'wdth' 100;
  font-kerning: none;
  letter-spacing: 0;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.finish__input::selection {
  color: transparent;
  background: rgba(47, 69, 255, 0.16);
}

.finish__caret {
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: calc(var(--fs) * 0.98);
  margin-top: calc(var(--fs) * -0.5);
  border-radius: 1px;
  background: var(--accent);
  opacity: 0;
}

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

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

/* the key that completes: a drawn Tab key, or an arrow on a touch screen */
.finish__key {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 26px;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--page);
  color: var(--muted);
  font: 450 12px / 1 'Roboto Flex Variable', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}

.key__arrow {
  display: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

@media (hover: hover) {
  .finish__key:hover {
    color: var(--ink);
    border-color: var(--ghost);
  }
}

@media (hover: none) {
  .finish__key {
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
  }

  .key__tab {
    display: none;
  }

  .key__arrow {
    display: block;
  }
}

/* the hairline under the field; over it the line under the word written, and the dotted line of what is left */
.finish__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
  pointer-events: none;
}

.rule__ink,
.rule__dots,
.rule__tick {
  position: absolute;
  left: 0;
  width: 0;
}

.rule__ink {
  top: -1px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  transition: background-color 0.35s ease;
}

.finish:not(.is-on) .rule__ink {
  background: var(--ink);
}

.finish.is-lost .rule__ink {
  background: var(--ghost);
}

.rule__dots {
  top: 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--ghost) 50%, transparent 0);
  background-size: 4px 1px;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.rule__tick {
  top: -4px;
  width: 1px;
  height: 9px;
  margin-left: -1px;
  background: var(--ghost);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.finish.has-ghost .rule__dots,
.finish.has-ghost .rule__tick {
  opacity: 1;
}

/* ---------------------------------------------------------------- the topics */
.finish__room {
  position: relative;
  margin-top: 10px;
}

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

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

.row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--row);
  padding: 0 2px 0 36px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

.row__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 1;
  white-space: pre;
  text-overflow: ellipsis;
}

.row__hit {
  color: var(--ink);
  font-variation-settings: 'wght' 560, 'wdth' 100;
}

.row__rest {
  color: var(--muted);
  font-variation-settings: 'wght' 330, 'wdth' 100;
  transition: color 0.25s ease;
}

.row.is-active .row__rest {
  color: var(--ink);
}

.row__count {
  flex: none;
  font-size: 13px;
  font-variation-settings: 'wght' 420, 'wdth' 100;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- the notes */
.finish__note {
  position: absolute;
  left: 36px;
  right: 0;
  top: 12px;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  font-variation-settings: 'wght' 380, 'wdth' 100;
  color: var(--muted);
}

.finish__note b {
  font-weight: inherit;
  font-variation-settings: 'wght' 600, 'wdth' 100;
  color: var(--ink);
}

.try {
  margin: 0 -3px;
  padding: 2px 3px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-variation-settings: 'wght' 480, 'wdth' 100;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

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

/* ---------------------------------------------------------------- the phone */
@media (max-width: 480px) {
  .finish {
    --fs: 27px;
  }

  .finish__field {
    gap: 12px;
    height: 66px;
  }

  .finish__lens {
    width: 20px;
    height: 20px;
  }

  .row {
    padding-left: 32px;
  }

  .row__name {
    font-size: 16px;
  }

  .finish__note {
    left: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ch,
  .row__rest {
    transition: color 0.2s ease;
  }
}