/*
 * "Go to full report" — the cross-portal jump link (ISH-1023).
 *
 * Hydrated by js/report-jumplink.js, which resolves each placeholder's href through
 * ReportDescribe.reportUrl() and removes the ones that cannot resolve. This file styles only what
 * survives that.
 *
 * ⚠️ **Only the tokens css/tokens.css actually owns are used bare.** That file declares seven:
 * --red, --red-hover, --nav-bg, --page-bg, --card-bg, --text-secondary, --max-width. Everything
 * else here (--border, --radius, --text) is declared per page, so each var() carries a literal
 * fallback — a shared component cannot assume a token its next host happens not to declare, and a
 * missing one resolves to `unset` rather than to something visible. js/tokens-parity.test.js is the
 * guard on the other half of this rule: a page may not redeclare a token tokens.css owns.
 *
 * Two variants, and the difference is emphasis rather than behaviour:
 *   .report-jumplink            — the quiet one, at the foot of a section
 *   .report-jumplink.is-primary — the page header's, where the reader is likeliest to want it
 */

.jumplink-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}

.report-jumplink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  /* ⚠️ ISH-1145: SMALLER text in a TALLER box, which is the opposite of how a button usually
     grows. With the verb and the portal gone the label is a proper noun rather than a sentence,
     so it wants less weight in the header — but it is still the page's only way out, so the
     target itself grows: ~32px tall before, ~40px after, comfortably over the 24px AA minimum
     and closer to the 44px touch target. */
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 8px);
  background: var(--card-bg);
  color: var(--text-secondary);
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}

/* The arrow is CSS rather than an inline SVG per link, so a page that renders six of them ships
   one rule instead of six copies of the same path. */
.report-jumplink::after {
  content: "→";
  font-size: 0.9375rem;
  line-height: 1;
}

.report-jumplink:hover {
  border-color: var(--red);
  color: var(--red);
}

.report-jumplink:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.report-jumplink.is-primary {
  background: var(--red);
  border-color: var(--red);
  color: #ffffff;
}

.report-jumplink.is-primary:hover {
  background: var(--red-hover);
  border-color: var(--red-hover);
  color: #ffffff;
}

/* The header variant sits beside the page title on a wide screen and under it on a narrow one.
   No max-width guard is needed on the row itself — .jumplink-row already wraps. */
.page-header .jumplink-row {
  margin-top: 0.85rem;
}