/* #5103: host tokens for the unchanged shared shortcut-help component. */
.portal-shortcut-help {
  --nf-shell-border: var(--nf-border);
  --nf-shell-radius: var(--nf-radius-panel);
  --nf-shell-surface: var(--nf-surface);
  --nf-shell-text: var(--nf-fg);
  --nf-shell-focus: var(--nf-focus);
  /* #6016 — the shared overlay reads the portable --nf-shell-* spelling and
     falls back to the TENANT token, which does not exist here. Without these
     six the fallback resolves to nothing and the overlay renders at UA
     defaults on this surface. Colour already worked this way; type now does. */
  --nf-shell-leading-normal: var(--nf-leading-normal);
  --nf-shell-leading-snug: var(--nf-leading-snug);
  --nf-shell-text-3xl: var(--nf-text-3xl);
  --nf-shell-text-lg: var(--nf-text-lg);
  --nf-shell-text-xl: var(--nf-text-xl);
  --nf-shell-weight-bold: var(--nf-weight-bold);
  --nf-t-control-bg: var(--nf-band);
  --nf-t-input-bg: var(--nf-bg);
  --nf-t-elev-panel: var(--nf-shadow-lg);
  --nf-t-scrim: rgb(0 0 0 / 60%);
}
.portal-shortcut-trigger,
.portal-shortcut-help .nf-shortcut-help__close,
.portal-shortcut-help .nf-shortcut-help__search {
  min-height: 44px;
  max-width: 100%;
  border: 1px solid var(--nf-control-border);
  border-radius: var(--nf-radius-ctl);
  background: var(--nf-surface);
  color: var(--nf-fg);
  font: inherit;
  font-size: var(--nf-text-lg);
  padding: 8px 12px;
}
.portal-shortcut-trigger {
  /* One icon-only button, 44px square (owner, 2026-09-25: no visible
     "Keyboard Shortcuts" text). Its accessible name is the aria-label; the
     tooltip title comes from the shared component's refresh(). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border-color: color-mix(in srgb, currentColor 35%, transparent);
  background: transparent;
  color: var(--nf-footer-muted);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.portal-shortcut-trigger__icon {
  inline-size: 22px;
  block-size: 22px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.portal-shortcut-trigger,
.portal-shortcut-help .nf-shortcut-help__close {
  cursor: pointer;
  touch-action: manipulation;
}
.portal-shortcut-help .nf-shortcut-help__close:hover {
  background: var(--nf-band);
}
.portal-shortcut-trigger:hover {
  color: var(--nf-footer-link);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.portal-shortcut-trigger:disabled {
  cursor: not-allowed;
}
.portal-shortcut-trigger:focus-visible,
.portal-shortcut-help :focus-visible {
  outline: var(--nf-focus-ring-width) solid var(--nf-focus);
  outline-offset: var(--nf-focus-ring-offset);
  box-shadow: 0 0 0 8px var(--nf-focus-halo);
}
