/*
 * tooltips.css
 * Tooltip — the last term in the vocabulary to get CSS. All 29 now ship.
 *
 * A Tooltip is a <span role="tooltip"> rather than an <article>, because it
 * is an *attachment* to a control, not a self-contained unit you could lift
 * out (Principle 2, and the article-vs-div test).
 *
 * A span rather than a div because .tooltip is chip lineage — inline — and
 * .tooltip-anchor is an inline-flex <span>. A <div> inside a <span> is not
 * phrasing content, so the one element the vocabulary named was the one
 * element the anatomy below could not legally contain.
 *
 * Anatomy — the anchor owns the positioning context:
 *
 *   <span class="tooltip-anchor">
 *     <button class="btn square" aria-label="Delete" aria-describedby="tip-del">
 *       <svg aria-hidden="true">…</svg>
 *     </button>
 *     <span class="tooltip" role="tooltip" id="tip-del">Delete invoice</span>
 *   </span>
 *
 * ── The three rules that make a tooltip accessible ───────────────────
 *
 * 1. `aria-describedby` on the trigger, pointing at the tooltip's id. This
 *    is what actually announces it. A tooltip that is only a hover style is
 *    invisible to a screen reader.
 *
 * 2. Show on focus, not only hover. The CSS below uses `:focus-within`, so
 *    a keyboard user gets the tooltip by tabbing to the control.
 *
 * 3. Never put essential information only in a tooltip. Touch devices have
 *    no hover at all, so anything a user must know to proceed belongs in a
 *    label, a .field-hint, or visible copy.
 *
 * ── What the CSS does not do (Principle 6) ───────────────────────────
 *
 * Dismissing on Escape is behavior and needs a key handler. For a
 * JS-controlled tooltip, drive `[hidden]` instead of relying on hover —
 * the rule below keeps `[hidden]` authoritative either way.
 */

.tooltip-anchor {
  position:    relative;
  display:     inline-flex;
  align-items: center;
}

/*
 * .tooltip is in the chip lineage (chip.css), so it gets centered inline-flex
 * layout and the auto-contrast machinery — a toned tooltip keeps readable
 * text without anyone choosing a color.
 */
.tooltip {
  --tone-fill: var(--bg-mix, var(--color-secondary));

  position:  absolute;
  z-index:   60;
  inset-block-end:   calc(100% + 0.5rem);
  inset-inline-start: 50%;
  translate: -50% 0;

  padding:       var(--space-xs) var(--space-sm);
  border-radius: var(--btn-radius);
  background:    var(--fill, var(--tone-fill));
  color:         var(--on-fill, white);
  font-family:   var(--font-primary);
  font-size:     var(--text-xs);
  line-height:   1.35;
  white-space:   nowrap;
  box-shadow:    var(--shadow-md);

  /* Invisible but still resolvable by aria-describedby. */
  opacity:        0;
  pointer-events: none;
  transition:     opacity var(--motion-fast) var(--motion-ease);
}

/* The arrow inherits the fill, so tones and auto-contrast carry over. */
.tooltip::after {
  content:      "";
  position:     absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  translate:    -50% 0;
  border:       4px solid transparent;
  border-block-start-color: var(--fill, var(--tone-fill));
}

.tooltip-anchor:hover > .tooltip,
.tooltip-anchor:focus-within > .tooltip {
  opacity: 1;
}

/*
 * [hidden] wins over hover. A UA sets display:none for [hidden], but any
 * `display` declaration beats that — and .tooltip inherits inline-flex from
 * the chip lineage — so restate it, the same way .view does in frame.css.
 */
.tooltip[hidden] {
  display: none;
}

/* ── Sides ──────────────────────────────────────────────────────────── */
.tooltip.bottom {
  inset-block-end:   auto;
  inset-block-start: calc(100% + 0.5rem);
}
.tooltip.bottom::after {
  inset-block-start: auto;
  inset-block-end:   100%;
  border-block-start-color: transparent;
  border-block-end-color:   var(--fill, var(--tone-fill));
}

.tooltip.start,
.tooltip.end {
  inset-block-end:    auto;
  inset-block-start:  50%;
  inset-inline-start: auto;
}
.tooltip.start {
  inset-inline-end: calc(100% + 0.5rem);
  translate:        0 -50%;
}
.tooltip.end {
  inset-inline-start: calc(100% + 0.5rem);
  translate:          0 -50%;
}
.tooltip.start::after,
.tooltip.end::after {
  inset-block-start:  50%;
  inset-inline-start: auto;
  border-block-start-color: transparent;
}
.tooltip.start::after {
  inset-inline-start: 100%;
  translate:          0 -50%;
  border-inline-start-color: var(--fill, var(--tone-fill));
}
.tooltip.end::after {
  inset-inline-end: 100%;
  translate:        0 -50%;
  border-inline-end-color: var(--fill, var(--tone-fill));
}

/* Long tooltips wrap instead of running off the viewport. */
.tooltip.wrap {
  white-space:     normal;
  max-inline-size: 16rem;
  text-align:      center;
}