/* The filters that rise into line: the filters of a recipe book as words on ruled lines, on a white page, in a
   minimal style. The chosen ones stand on the top line, heavier, above a rule in ink; the others sit light on the
   hairlines below. The words you see are drawn by the script over the real buttons (.ink), which keep their places
   in the layout but are invisible. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #141414;           /* the chosen words, the rule under them, the count */
  --soft: #55524c;          /* the words still on the lines */
  --muted: #a19d95;         /* the hint in the empty line, Clear with nothing to clear */
  --rule: #e7e4de;          /* the hairlines the words sit on */
  --accent: #e0462c;        /* the small cross of a chosen word, and the digits that have just changed */
}

* {
  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: 'Bricolage Grotesque Variable', 'Helvetica Neue', Arial, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

/* the component on its own in the middle of the page. In a real page it sits above the list of recipes, flush with
   its column: drop the stage and give .pantry the width of the column */
.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: center;
  padding: 40px 16px;
}

.pantry {
  --row: 40px;              /* the height of a line */
  --size: 17px;             /* the size of the words */
  --cross: 17px;            /* the room the cross takes after a chosen word (its gap and its width) */
  width: min(480px, 100%);
  padding: 8px 0 0;
}

/* ---------------------------------------------------------------- the ruled lines */
.sheet {
  position: relative;
}

.rules,
.ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rules span,
.rule-ink {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}

.rule-ink {
  top: 0;
  z-index: 1;
  background: var(--ink);
}

/* the two groups of buttons, one under the other: the chosen ones first. They are laid out wider than the lines by
   their padding, so that the first word of every line is flush with the start of the rules */
.picked,
.rest {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  margin: 0 -10px;
}

.picked {
  min-height: var(--row);
}

.f,
.g {
  height: var(--row);
  padding: 0 10px 11px;
  font-size: var(--size);
  line-height: 1;
  letter-spacing: -0.005em;
  white-space: nowrap;
}

/* the real buttons: invisible, but laid out with the weight and width of their place, so the drawn words know
   exactly where to go */
.f {
  display: inline-flex;
  align-items: flex-end;
  flex: none;
  border: 0;
  border-radius: 4px;
  margin: 0;
  background: none;
  color: transparent;
  font-family: inherit;
  font-variation-settings: 'wght' var(--w-rest, 330), 'wdth' var(--d-rest, 90);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.f[aria-pressed='true'] {
  padding-right: calc(10px + var(--cross));
  font-variation-settings: 'wght' var(--w-picked, 640), 'wdth' var(--d-picked, 100);
}

.hint {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  height: var(--row);
  margin: 0;
  padding-bottom: 11px;
  font-size: var(--size);
  line-height: 1;
  font-variation-settings: 'wght' 330, 'wdth' 90;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the drawn words */
.g {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  color: var(--soft);
  transition: color 0.35s ease;
  will-change: transform;
}

.g.is-picked {
  color: var(--ink);
}

.g.is-flying {
  z-index: 3;
}

/* the word and its cross sit in an inner box, which the CSS squeezes a hair while the finger is down */
.g__in {
  display: flex;
  align-items: flex-end;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.g.is-down .g__in {
  transform: scale(0.96);
}

.g__x {
  display: block;
  flex: none;
  height: 9px;
  margin-bottom: 1px;
  overflow: visible;
}

.g__x path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* the keyboard's ring travels with the drawn word */
.g.is-focus::after {
  content: '';
  position: absolute;
  inset: 7px 3px 5px;
  border: 1px solid var(--ink);
  border-radius: 4px;
}

/* ---------------------------------------------------------------- the foot: Clear and the count */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 40px;
  padding-bottom: 2px;
}

.clear {
  height: 34px;
  margin: 0 0 0 -10px;
  padding: 0 10px 7px;
  display: inline-flex;
  align-items: flex-end;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-variation-settings: 'wght' 480, 'wdth' 96;
  cursor: pointer;
  transition: color 0.25s ease, font-variation-settings 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.clear[aria-disabled='true'] {
  color: var(--muted);
  cursor: default;
}

@media (hover: hover) {
  .clear:not([aria-disabled='true']):hover {
    font-variation-settings: 'wght' 640, 'wdth' 100;
  }
}

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

.count {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin: 0;
  padding-bottom: 7px;
  font-size: 15px;
  line-height: 1;
  font-variation-settings: 'wght' 420, 'wdth' 96;
  color: var(--soft);
}

/* every digit is a window one digit high and one tabular figure wide, so a changing digit can drop in */
.count__n {
  display: inline-flex;
  color: var(--ink);
  font-variation-settings: 'wght' 640, 'wdth' 100;
  font-variant-numeric: tabular-nums;
}

.slot {
  position: relative;
  display: block;
  height: 1.25em;
  margin: -0.15em 0 -0.1em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

.slot span {
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  text-align: center;
}

.count__noun {
  display: inline-block;
}

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

@media (max-width: 600px) {
  .pantry {
    --row: 44px;
    --size: 16px;
  }

  .f,
  .g,
  .hint {
    padding-bottom: 13px;
  }
}