/* ══════════════════════════════════════════════════════════════════════
   FMC dashboard "back" affordance — shared styles.
   Two forms, both referrer-aware (upgraded by fmc-dash-back.js):
     • .dash-back  — full "Back to X" chevron in the TrendViewer header.
     • .brand-crumb — a compact breadcrumb crumb folded into the
       BuildingPulse / BuildingLabs header lockup (see below), so the
       way-back costs no standalone row above the wordmark.
   Reads over the portal-light surface; colors lean on the portal --p-*
   tokens with literal fallbacks so it renders even off a portal base.
   ══════════════════════════════════════════════════════════════════════ */
.dash-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  letter-spacing: -0.004em; line-height: 1;
  color: var(--p-ink-3, #5b6b68);
  text-decoration: none;
  padding: 5px 10px 5px 7px; border-radius: 8px;
  border: 0.5px solid transparent;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background .15s ease,
              border-color .15s ease, transform .12s ease;
}
.dash-back svg {
  width: 15px; height: 15px; flex: 0 0 auto;
  transition: transform .15s ease;
}
.dash-back:hover {
  color: var(--p-teal-deep, #0a6b60);
  background: var(--p-teal-tint, rgba(0,125,113,0.08));
  border-color: var(--p-teal-ring, rgba(0,125,113,0.22));
}
.dash-back:hover svg { transform: translateX(-2px); }
.dash-back:active { transform: scale(0.985); }
.dash-back:focus-visible {
  outline: 2px solid var(--p-teal, #0a6b60); outline-offset: 2px;
}

/* ── Breadcrumb crumb (BuildingPulse / BuildingLabs banners) ──────────
   The dashboards fold the way-back INTO the header lockup instead of a
   standalone row: a quiet path crumb ("‹ Location") tucked directly above
   the wordmark, so it costs no dedicated vertical row. .brand-head is the
   column that stacks the crumb over the existing wordmark | divider | site
   cluster. Accent is teal by default and brand-tunable via --brand-crumb-*
   (BuildingLabs maps it to its purple). Same referrer-aware target and
   fmc-dash-back.js upgrade as the full .dash-back form. */
.brand-head {
  display: flex; flex-direction: column;
  align-items: flex-start; gap: 1px; min-width: 0;
}
.brand-crumb {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 3px;
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.003em; line-height: 1;
  color: var(--p-ink-3, #5b6b68);
  text-decoration: none;
  margin-left: -3px;                 /* optical: chevron aligns under the wordmark */
  padding: 1px 8px 2px 4px; border-radius: 8px;
  border: 0.5px solid transparent;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s ease, background .15s ease,
              border-color .15s ease, transform .12s ease;
}
.brand-crumb svg { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .15s ease; }
.brand-crumb-lbl { white-space: nowrap; }
.brand-crumb:hover {
  color: var(--brand-crumb-ink, var(--p-teal-deep, #006A60));
  background: var(--brand-crumb-tint, var(--p-teal-tint, rgba(10,107,96,0.10)));
  border-color: var(--brand-crumb-ring, var(--p-teal-ring, rgba(10,107,96,0.22)));
}
.brand-crumb:hover svg { transform: translateX(-2px); }
.brand-crumb:active { transform: scale(0.98); }
.brand-crumb:focus-visible {
  outline: 2px solid var(--brand-crumb-ink, var(--p-teal, #0a6b60)); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .dash-back, .dash-back svg,
  .brand-crumb, .brand-crumb svg { transition: none; }
}