/* The one help affordance.

   Loaded from base.html rather than per page, because it appears on every
   screen and a component that half the pages style is not a component.

   Sized and coloured to sit beside a heading without competing with it: this
   is the mark you press when you want the explanation, not a thing that asks
   to be read. */

.help {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Beside the words it explains, never on its own line. */
  margin-left: var(--space-2);
  vertical-align: middle;
}

/* THE MARK IS 24px AND THE TARGET IS 44px, and they are different things.

   What this comment used to say was that 24px "is the smallest a touch target
   may be here and still be hit reliably by a thumb on a phone in a yard", which
   flatly contradicts tokens.css, where --tap is 44px for the same stated reason
   and eleven other rules honour it. One of the two had to be wrong and it was
   this one.

   But the mark itself must NOT become 44px, and this is the case the audit
   asked to have argued rather than obeyed. It sits inline, beside a heading and
   inside sentences, and .help sets vertical-align: middle to put it on the same
   line as the words. A 44px circle in the middle of a line of 15px text sets the
   line height of the paragraph it is in, pushes the sentence apart, and stops
   being a mark you can ignore until you want it, which is the whole design of
   the affordance.

   So the visible circle stays exactly where it was and the TARGET grows to the
   token behind it. The pseudo-element is centred on the mark and belongs to no
   layout: position absolute takes it out of flow, so the line box, the heading
   spacing and the paragraph measure are all untouched, and the 10px it reaches
   past the ring on each side is empty margin beside a mark rather than any
   neighbour's space.

   Nothing else on the page competes for it. A help mark is the last thing on its
   line, the panel it opens is absolutely positioned and the sentence beside it
   is text rather than a control, so there is nothing within 10px for the larger
   target to steal a tap from. Which is exactly why this technique is right here
   and wrong for .rows__drop in trips.css, where the same 10px would sit on top
   of the amount field. That one was raised outright instead. */
.help__ask {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  line-height: 1;
  cursor: pointer;
}

.help__ask::after {
  content: "";
  position: absolute;
  /* Centred on the 24px mark and grown to --tap in both axes. The token rather
     than the 44px, and rather than the 10px of reach it works out to, so the
     target follows the floor if the floor ever moves instead of quietly
     stopping short of it. Absolute, so it is not a flex item of the mark and
     the glyph inside stays centred. */
  width: var(--tap);
  height: var(--tap);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.help__ask:hover,
.help__ask[aria-expanded="true"] {
  opacity: 1;
}

.help__ask:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  opacity: 1;
}

/* What it says, when it has been asked.

   Absolutely positioned so opening one never moves the page under somebody's
   finger. A panel that pushed the form down would make the control they were
   reaching for jump away at the moment they asked what it was. */
.help__said {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  z-index: 40;
  width: max-content;
  /* Wide enough for a real sentence, never wider than a phone. */
  max-width: min(38ch, calc(100vw - var(--space-5) * 2));
  padding: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-1);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  text-align: left;
  /* Normal weight and case whatever it opened out of. These sit inside
     headings that are uppercase and letterspaced, and a sentence inheriting
     that is unreadable. */
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  /* The product's own token, not a hand rolled black. Pure neutrals are
     banned here and there is a test that says so: every surface in this
     palette is tinted, and an untinted shadow under a tinted panel reads as
     grey where everything around it reads as blue. */
  box-shadow: var(--shadow-2);
}

/* Closed. The attribute rather than a class, so the markup says what it is
   with no JavaScript loaded and a screen reader still reaches the text. */
.help__said[hidden] {
  display: none;
}

/* Near the right edge it opens leftwards, set by help.js when the panel would
   otherwise run off the screen. */
.help__said--left {
  left: auto;
  right: 0;
}