/* Help mark: a small "i" button beside a heading or a field label
 * (spec 19, Part B; see `_help.html` for the markup it styles).
 *
 * Reads the "Kiln" tokens that `style.css` defines. This file loads
 * after `style.css`, so it may add rules but never needs to repeat a
 * token value.
 *
 * `.has-help` marks the block a person hovers to see the text: the
 * heading block, or the field label, or the table header cell. On a
 * `<div>` wrapper around a heading, it also lays the heading and the
 * mark out side by side; on a label, a legend, or a table header
 * cell, the mark already sits inline after the existing text, so no
 * layout change is needed there.
 */

div.has-help {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.help {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-inline-start: var(--space-2);
}

div.has-help > .help {
  margin-inline-start: 0;
}

.help-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--vf-border-strong);
  border-radius: var(--radius-pill);
  background: var(--vf-surface-subtle);
  color: var(--vf-text-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

/* A 24px circle reads as too small to tap reliably. The pseudo-element
 * grows the hit target to the 44px minimum of standard 10.2 without
 * changing the visible size of the button (standard 4.6, "Icons").
 */
.help-button::before {
  content: "";
  position: absolute;
  inset: -10px;
}

.help-button:hover {
  border-color: var(--vf-accent);
  color: var(--vf-accent);
}

.help-button:focus-visible {
  outline: 2px solid var(--vf-accent);
  outline-offset: 2px;
}

.help-text {
  position: absolute;
  z-index: 40;
  top: calc(100% + var(--space-2));
  left: 0;
  width: max-content;
  max-width: min(32ch, calc(100vw - var(--space-8)));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--vf-surface);
  color: var(--vf-text);
  box-shadow: var(--shadow-subtle);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
  letter-spacing: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-fast) ease-out, visibility 0s linear var(--motion-fast);
}

/* A `.table-wrap` scrolls sideways so a wide table fits a small
 * screen (see Tables in `style.css`). A help mark on a table header
 * cell sits inside that scroll box, so a panel positioned against the
 * header would be cut by the scrollbar at some scroll positions. Pin
 * it to the viewport instead: its containing block then becomes the
 * viewport, and the scroll box's own overflow cannot cut it.
 */
.table-wrap .help-text {
  position: fixed;
  top: auto;
  bottom: var(--space-4);
  left: var(--space-4);
  right: var(--space-4);
  width: auto;
  max-width: 360px;
  margin: 0 auto;
}

/* Found while fixing spec 23's C2 (a hard-fail sideways scroll of the
 * cycle's charges page at phone width): `.help-text` is absolutely
 * positioned against its own "i" button, so a mark late in a wide
 * label (such as "Eskom bulk kWh" beside a phone-width field) can
 * push its closed, invisible panel past the right edge of the
 * screen. `visibility: hidden` still reserves that box's own layout
 * space, so the page then scrolls sideways to reach it, with nothing
 * to see there. Below 759px every panel pins to the viewport
 * instead, the same fix `.table-wrap .help-text` already uses above.
 */
@media (max-width: 759px) {
  .help-text {
    position: fixed;
    top: auto;
    bottom: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    width: auto;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* The three ways to show the text: pointer, keyboard focus on the
 * button, and a tap or click (the "i" button toggles `is-open` on
 * `.help`; see `help.js`). No script is needed for the first two.
 *
 * On a heading, the pointer opens the text anywhere over the whole
 * `div.has-help` block, because GP asked for that. On a label, a
 * legend, or a table header cell, the block also holds the field or
 * column text, so a wider hover rule there opens the panel while the
 * pointer is only passing through on its way to the input; it opens
 * by hover over the "i" button only (spec 19 review, L1).
 */
div.has-help:hover .help-text,
.help-button:hover ~ .help-text,
.help-button:focus-visible ~ .help-text,
.help.is-open .help-text {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .help-text {
    transition: none;
  }
}