/* Page-header scope tooltip (ISH-606).
 *
 * The small grey description under a list page's <h1>, plus the (i) button after it whose
 * hover/focus tip spells out which brokers reach that list. Extracted verbatim from
 * `brokers.html`'s inline <style>, where ISH-606's predecessor (AGENT_GUIDE §AP) built it,
 * when `sales-pipeline.html` became a second host — the same reason `css/process-cards.css`,
 * `css/sales-process-tab.css` and `css/broker-flags-rail.css` exist. Neither host may
 * redeclare these classes; `js/scope-tip-parity.test.js` asserts both halves.
 *
 * ⚠️ The two hosts' tips are deliberate mirrors of each other — Brokers names
 * Implementation/Service/Expand and points at the Sales Pipeline portal, the Broker Pipeline
 * board names Qualify/Pursue/Close and points back. Change the stage split in one and the
 * other is wrong.
 *
 * Depends on `--radius`, which every host page defines in its own :root (6px in both of
 * today's). Nothing else here is tokenised — the dark tip body is the app's tooltip
 * treatment (`.staff-tip`), which is hardcoded wherever it appears.
 *
 * NOT here: `.page-header-titles` and `.page-header` itself. Those are each host's own
 * header layout — brokers.html splits title block against `.page-header-actions`, the board
 * splits it against `.view-toggle-wrap` — so they stay in the hosts' inline styles.
 */

/* Puts the info button on the description's own line, immediately after the text, rather
   than out at the end of a full-width block. */
.page-header-desc {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  min-width: 0;
}

.page-header-desc p {
  /* Deliberately smaller and greyer than the 0.9rem var(--text-secondary) this started as:
     that token resolves to #1a1a1a in brokers.html — the same value as --text — so the
     description carried the same weight of colour as the title it sits under. */
  color: #666666;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Scope tooltip — explains which lifecycle stages reach this list, which the description
   can't spell out without becoming a paragraph. Same dark treatment as `.staff-tip`; the
   differences are deliberate: anchored left (it opens rightward from an icon near the start
   of the header, not inward from a card's right edge) and wrapping rather than nowrap, since
   this is a sentence and not a name. */
.scope-tip-wrap {
  position: relative;
  display: inline-flex;
  /* A 15px glyph centred on the description's line box, not sat on its baseline — on the
     baseline the circle hangs visibly low. */
  align-self: center;
}

.scope-tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: #b0b0b0;
  border-radius: 50%;
  cursor: help;
  transition: color 0.15s;
}

.scope-tip-btn:hover,
.scope-tip-btn:focus-visible {
  color: #666666;
}

.scope-tip {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  z-index: 30;
  width: max-content;
  max-width: 280px;
  background: #1f1f1f;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
  border-radius: var(--radius);
  padding: 0.5rem 0.65rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s;
  text-align: left;
  pointer-events: none;
}

/* :focus-within keeps the tip reachable by keyboard — the trigger is a real <button> for
   exactly this reason. */
.scope-tip-wrap:hover .scope-tip,
.scope-tip-wrap:focus-within .scope-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scope-tip::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 12px;
  width: 8px;
  height: 8px;
  background: #1f1f1f;
  transform: rotate(45deg);
}

.scope-tip-title {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9aa0a6;
  margin-bottom: 0.2rem;
}