/* Styling for the "i" (see help.js).
 *
 * Every colour, typeface and corner from a token (D25). The size is fixed on
 * purpose and is the whole point of this file existing: left to render at
 * whatever size its own character wants, the "i" comes out bigger than the
 * text beside it. That was a real finding on the reference, and one shared
 * piece is what stops it coming back per screen.
 *
 * TWO ELEMENTS, AND IT HAS TO BE TWO. The button below is the area a thumb
 * has to hit and draws nothing at all. The circle inside it is what is seen
 * and is not what is pressed.
 *
 * The reason is the one thing to understand before editing this file: a
 * border is painted around the padding, not around the text. So padding put
 * on a bordered button to reach the 40px a phone needs makes the circle 40px
 * too -- the target and the circle become the same ring. That is how this was
 * built at first, and shrinking the letter inside it changed nothing anyone
 * could see. Never put the border and the tap padding on the same element.
 */

/* ------------------------------------------------------------- the target */

.k-help {
  /* **THE SIZE COMES FROM `k-icon` NOW, not from here (his decision,
   * 2026-08-31).** It used to say 40px, on the reasoning that a phone needs
   * that much. The top bar's marks said 32px and a column heading's funnel said
   * 24px, on their own reasoning. Three marks, three numbers, and every one of
   * them argued for on its own page -- which is how a product ends up looking
   * assembled rather than designed. One number now, in one file.
   *
   * WHAT IS STILL TRUE AND STILL NOT LOOKED AT: the ring is drawn inside the
   * button rather than around it, so a smaller button means a tighter ring. It
   * is 32px now instead of 40px and that has not been seen on a real screen. */
  padding: 0;
  border: 0;
}

/* The ring is drawn INSIDE the 40px button, not around it. Outside, it is cut
 * off by the sideways-scrolling box the first column heading sits in. The
 * corner is here only to round that ring -- the button has no border and no
 * background of its own, so nothing else in this rule has a corner to take. */
.k-help:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -6px;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------- the circle */

.k-help__mark {
  /* Drawn small. 14px across in total -- everything included, because this is
   * the element the border is actually painted on -- against the 14px text it
   * sits beside. border-box is deliberate here for exactly that reason: the
   * number written is the number seen. */
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  /* Never stretched or squashed by whatever it is sitting inside. */
  flex: 0 0 auto;
}

/* The circle answers to the cursor, but the button is what is hovered -- the
 * circle is only 14px of the 40px being pointed at. */
.k-help:hover .k-help__mark {
  color: var(--brand);
  border-color: var(--brand);
}