/* ============================================================================
   BitcoinPuzzles — the emoji panel

   One panel per surface, opened by anything that wants one: the composer's own
   button, and the button in the margin of every line in the transcript. It is
   its own sheet for the reason `mentions.css` is — it is a widget rather than
   a surface, it is mounted by more than one control already, and the next
   composer to want it must not have to reach into an alliance's stylesheet.

   It is laid out in the viewport, not against a parent. The controls that open
   it live inside a transcript that scrolls and clips its overflow, and a panel
   positioned in there would be cut in half by the second line from the top.
   `position: fixed`, measured against the trigger and clamped by the emoji
   controller, which is also the only thing that writes `top` and `left` here.

   The grid is eight columns, stated here and again in that controller, because
   the arrow keys have to move the way the reader sees the grid laid out.
   Neither number may be changed alone.

   Emoji are set in --font-emoji throughout. They are content — somebody picked
   one and the room stored it — and the UI face carries no emoji codepoints at
   all, so leaving them to inherit would hand each platform's default a
   decision about how big they are.

   Depends on tokens.css and base.css, and consumes their primitives (.input,
   .label, .sr-only) rather than restating them.
   ========================================================================= */

.emoji {
  position: fixed;
  z-index: var(--z-flash);
  /* Eight columns of 34px, the gaps between them, and the panel's own inset.
     Capped at the viewport so a narrow phone gets a panel it can see rather
     than one that has been clamped to an edge. */
  width: min(336px, calc(100vw - var(--sp-4)));
  display: flex;
  flex-direction: column;
  background: var(--ink-850);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  overflow: hidden;
}

.emoji[hidden] {
  display: none;
}

/* --- Narrowing the list --------------------------------------------------
   By shortcode, and only by shortcode: that is the emoji's one name in this
   app — see the Emoji module for why it is not six names.
   ------------------------------------------------------------------------ */

.emoji__search {
  position: relative;
  flex: none;
  padding: var(--sp-2);
  border-block-end: 1px solid var(--line);
}

.emoji__search-mark {
  position: absolute;
  inset-inline-start: calc(var(--sp-2) + var(--sp-3));
  inset-block-start: 50%;
  transform: translateY(-50%);
  color: var(--ink-400);
  pointer-events: none;
}

/* Fill, border, hover and focus all come from .input; what is bespoke is the
   room made for the mark sitting in it. */
.emoji__field {
  width: 100%;
  padding-inline-start: calc(var(--sp-3) * 2 + 14px);
  font-size: var(--fs-field-sm);
}

/* --- The category strip --------------------------------------------------
   Each category drawn as its own first emoji rather than as a word: nine words
   across 336px is a paragraph, and the face of a category is what the eye is
   hunting for anyway. The word is the button's accessible name.
   ------------------------------------------------------------------------ */

.emoji__cats {
  flex: none;
  display: flex;
  gap: 2px;
  padding: var(--sp-1) var(--sp-2);
  border-block-end: 1px solid var(--line);
}

.emoji__cat {
  flex: 1;
  min-width: 0;
  padding: var(--sp-1) 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-emoji);
  font-size: var(--fs-md);
  line-height: 1.2;
  /* The strip is a way of getting about, not the thing being read: at full
     strength nine faces in a row outshout the two hundred below them. */
  opacity: 0.6;
  cursor: pointer;
  transition: opacity var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}

.emoji__cat:hover {
  background: var(--ink-800);
  opacity: 1;
}

.emoji__cat:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-color: var(--accent);
  opacity: 1;
}

/* --- The list ------------------------------------------------------------ */

.emoji__body {
  flex: 1;
  min-height: 0;
  /* Around nine rows: enough that a category is a scroll rather than a hunt,
     short enough that the panel still opens above a composer on a laptop. */
  max-height: 288px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-2);
}

.emoji__block[hidden] {
  display: none;
}

/* Sticky, so the heading names whatever the reader has scrolled to rather than
   only whatever they started at. */
.emoji__heading {
  position: sticky;
  inset-block-start: calc(var(--sp-2) * -1);
  z-index: 1;
  margin: 0;
  padding: var(--sp-2) var(--sp-1) var(--sp-1);
  background: var(--ink-850);
}

.emoji__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 1px;
}

.emoji__pick {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  font-family: var(--font-emoji);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}

.emoji__pick[hidden] {
  display: none;
}

.emoji__pick:hover {
  background: var(--ink-750);
}

/* The ring rather than the shared --ring: inside a panel this dense a two-step
   ring bleeds into the eight emoji around it. */
.emoji__pick:focus-visible {
  outline: none;
  background: var(--ink-750);
  border-color: var(--accent);
}

.emoji__none {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-400);
  text-align: center;
}

.emoji__none[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .emoji__cat,
  .emoji__pick {
    transition: none;
  }
}

/* A thumb is wider than a pointer, and a panel it cannot hit accurately sends
   the wrong emoji. The grid keeps its eight columns — the controller's arrow
   keys are counted in them — so the room is found by widening the panel and by
   giving the strip above it a thumb's height. At 368px a cell is 44px square,
   which is the floor for anything hit with a finger. */
@media (hover: none) {
  .emoji {
    width: min(368px, calc(100vw - var(--sp-4)));
  }

  .emoji__cat {
    padding-block: var(--sp-2);
  }
}