/* ============================================================
   components/hint.css — .dd-hint
   One mark for "explain this in place" (#212).

   Two sessions built one of these at the same time and arrived at two: a
   15px circle with a text `?` in it revealed by hover (#207), and a sprite
   glyph in a pill opening a card on click (#198). A different glyph, a
   different shape, a different trigger. Neither was wrong; both on one page
   read as two unrelated systems.

   So: **one mark, two reveals**, and the split is real rather than a
   compromise. What is revealed decides which:

     the hint  `.dd-hint--tip`   a rule you need once. Pair with `.dd-tooltip`
                                 (`--wrap` for a sentence) — hover, focus, or a
                                 press on touch, and nothing to click inside it.
                                 A tooltip is `::after` content: it cannot hold
                                 a link, which is exactly what makes it right
                                 here and wrong below.

     the note  `.dd-hint--note`  a paragraph with places to go. A `<summary>`
                                 on a `<details>`, opening a card that can hold
                                 links and buttons, staying open while it is
                                 read. Works with the script dead, because that
                                 is what the element does.

   The glyph is the sprite's `help` (`{% icon "help" %}`) either way — the
   question mark the lyrics studio drew as a character in its own stylesheet,
   as an icon everything can reach. The mark never carries the words: `data-tip` +
   `aria-label` on a tip, the card's own text on a note, so the copy stays
   wherever its call site keeps it (a `{% trans %}` string, `tab_notes.py`).

   Geometry rides on two knobs, the kit's usual pair (cf. `.dd-choice`): the
   box lines the mark up with whatever else is in its row, the glyph is what
   makes it legible at that size. Set them at the call site; do not restate
   the rest of the mark there.
   ============================================================ */

.dd-hint {
  --dd-hint-size: 1.75rem;
  --dd-hint-glyph: 1.15rem;

  display: inline-flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--dd-hint-size);
  height: var(--dd-hint-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft);
}

.dd-hint > .dd-icon {
  width: var(--dd-hint-glyph);
  height: var(--dd-hint-glyph);
}

/* Open counts as hover: a note left open is the one being read, and the mark
   that opened it should not go quiet the moment the pointer leaves. */
.dd-hint:hover,
[open] > .dd-hint {
  color: var(--accent-strong);
  background: var(--surface-tint);
}

.dd-hint:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* `help` rather than `pointer`, because that is what it is — the press exists
   for touch, where there is no hover to have. */
.dd-hint--tip {
  cursor: help;
}

/* `list-style` and the WebKit pseudo both go: without both, Safari keeps the
   disclosure triangle a `<summary>` draws by default.

   `flex`, not the `inline-flex` above: this one is a `<summary>` inside a
   `<details>`, and an inline-level child would put the mark in a line box —
   whose strut makes the `<details>` taller than the mark and drops it out of
   line with the buttons it sits beside. A tip is a flex item in a bar, where
   the two blockify to the same thing. */
.dd-hint--note {
  display: flex;
  cursor: pointer;
  list-style: none;
}

.dd-hint--note::-webkit-details-marker {
  display: none;
}

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

/* The note's card, placed (#265). With `js/components.js` running, an open
   note's card goes into the browser's top layer and is placed the way the
   tooltip bubble is — under the mark where there is room, above it where there
   is not, 8px inside the viewport. The script sets `left` / `top` and the size
   caps and marks the card `.is-placed`; this takes it out of the row it would
   otherwise hang off, and scrolls it if the viewport is shorter than it is.
   A note the script never saw stays the plain `<details>` its own stylesheet
   draws. */
details[data-dd-note] > .dd-hint--note + .is-placed {
  position: fixed;
  inset: auto;
  margin: 0;
  overflow: auto;
  color: inherit;
  /* Only counts where there is no top layer. */
  z-index: calc(var(--z-toast) + 1);
}

/* `toggle` fires a task after the card opens, so for that one frame it is not
   placed yet: kept out of sight, rather than shown where the stylesheet would
   have dropped it and then moved. */
html.dd-tip-js details[data-dd-note][open] > .dd-hint--note + :not(.is-placed) {
  visibility: hidden;
}