/* Page-header scope tooltip (ISH-606) and cross-portal link (ISH-1077).
 *
 * ⚠️ The filename is now narrower than the contents: this is the whole `.page-header-desc` row —
 * the description, the (i) tooltip, and as of ISH-1077 the counted link to the other portal. It was
 * not renamed because the two hosts, `js/scope-tip-parity.test.js` and three AGENT_GUIDE sections
 * all name it, and splitting the link into its own file would put two <link>s and two baselines
 * behind one line of prose — the three siblings share `.page-header-desc`'s baseline alignment and
 * have to move together.
 *
 * 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), and on `--red` from `css/tokens.css`, which both hosts link. 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;
}

/* Cross-portal link (ISH-1077) — "42 brokers are in the Sales Pipeline →", the third sibling in
   `.page-header-desc` after the description and the (i).

   Same 0.8125rem as the description so the header reads as one line of prose rather than a line
   with a control bolted on, but in the link colour rather than #666666: it is the only clickable
   thing in this row, and at description weight with no underline nothing else would say so. The
   arrow is a ::after rather than a character in the string because the string is composed in
   js/portal-xlink.js, which is tested — an arrow in there would be an untested glyph in every
   assertion about the sentence. */
.portal-xlink {
  /* `--red` comes from css/tokens.css, which both hosts link — unlike `--radius` above, which each
     host defines in its own :root. No fallback: a page that renders this without tokens.css has
     bigger problems than an unstyled link, and a hardcoded second copy of the brand red is exactly
     what the token exists to prevent. */
  color: var(--red);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-decoration: none;
  /* ⚠️ Deliberately NOT `white-space: nowrap`, which was the first draft. `.page-header-desc` is an
     inline-flex row that does not wrap, so a link that refuses to break cannot shrink either —
     measured at a 300px title block it pushed the row 21.5px past its container and put a
     horizontal scrollbar on the page. A sentence that wraps mid-phrase is cosmetic; a page that
     scrolls sideways is not. Above ~360px it stays on one line anyway. */
  border-bottom: 1px solid transparent;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.portal-xlink::after {
  content: " \2192";
}

.portal-xlink:hover,
.portal-xlink:focus-visible {
  border-bottom-color: currentColor;
}

/* The separator between the (i) and the link, so the two do not read as one control. A ::before on
   the link rather than a gap, because `.page-header-desc`'s gap is shared with the description and
   widening it would push the (i) off the sentence it annotates. */
.portal-xlink::before {
  content: "·";
  color: #b0b0b0;
  margin: 0 0.45rem 0 0.15rem;
}