/* #5103 reusable help surface. AppShell owns shortcuts, preference and lifecycle. */
.nf-shell-shortcut-help.nf-shortcut-help {
  inline-size: min(42rem, calc(100vw - 24px));
  max-inline-size: calc(100vw - 24px);
  max-block-size: calc(100vh - 24px);
  max-block-size: calc(100dvh - 24px);
  margin: auto;
  --nf-shortcut-help-pad: var(--nf-t-space-5);
  padding: var(--nf-shortcut-help-pad);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
  background: var(--nf-shell-surface, var(--nf-t-overlay-bg));
  color: var(--nf-shell-text, var(--nf-t-text));
  box-shadow: var(--nf-t-elev-panel);
  font: inherit;
  font-size: var(--nf-shell-text-lg, var(--nf-t-text-lg));
  line-height: var(--nf-shell-leading-normal, var(--nf-t-leading-normal));
  overflow-wrap: anywhere;
  animation: none;
  transition: none;
}
.nf-shortcut-help,
.nf-shortcut-help *,
.nf-shortcut-help *::before,
.nf-shortcut-help *::after {
  box-sizing: border-box;
}
.nf-shortcut-help::backdrop {
  background: var(--nf-t-scrim);
}
/* #6016 -- this dialog is its own scroll region (598px of scroll at 1280x800
   with all shortcuts listed), and the header carrying the Close button was a
   normal block inside it, so reading down the list carried Close off the top:
   measured at scrollTop 599 the button sat at y=-561, 561px above the dialog.
   Esc still closes the dialog, so this was a reachability loss rather than a
   trap -- but the labelled control should not have to be scrolled back to.
   The band is pulled out to the dialog's edges and re-padded from
   --nf-shortcut-help-pad, the same variable the dialog's own padding reads, so
   it still spans the full width after the 440px breakpoint reduces that
   padding. Background uses the dialog's own token chain, which keeps the band
   matched to its surface on all four builders that ship this file. */
.nf-shortcut-help .nf-shortcut-help__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--nf-t-space-3);
  margin-block-end: var(--nf-t-space-4);
  position: sticky;
  inset-block-start: calc(var(--nf-shortcut-help-pad) * -1);
  z-index: 1;
  margin-block-start: calc(var(--nf-shortcut-help-pad) * -1);
  margin-inline: calc(var(--nf-shortcut-help-pad) * -1);
  padding-block: var(--nf-shortcut-help-pad) var(--nf-t-space-3);
  padding-inline: var(--nf-shortcut-help-pad);
  background: var(--nf-shell-surface, var(--nf-t-overlay-bg));
}
.nf-shortcut-help .nf-shortcut-help__title {
  flex: 1 1 12rem;
  min-inline-size: 0;
  margin: 0;
  font-size: var(--nf-shell-text-3xl, var(--nf-t-text-3xl));
  line-height: var(--nf-shell-leading-snug, var(--nf-t-leading-snug));
  text-wrap: balance;
}
.nf-shortcut-help .nf-shortcut-help__close {
  flex: 0 1 auto;
  min-inline-size: 44px;
  min-block-size: var(--nf-t-control-min);
  max-inline-size: 100%;
  padding: var(--nf-t-space-2) var(--nf-t-space-3);
  white-space: normal;
  cursor: pointer;
  touch-action: manipulation;
}
.nf-shortcut-help .nf-shortcut-help__context {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--nf-t-space-2) var(--nf-t-space-4);
  margin-block: var(--nf-t-space-4);
}
.nf-shortcut-help .nf-shortcut-help__settings {
  margin-block: var(--nf-t-space-3);
  padding-inline: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
}
.nf-shortcut-help .nf-shortcut-help__settings-summary {
  min-block-size: 44px;
  padding-block: var(--nf-t-space-3);
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
  cursor: pointer;
  touch-action: manipulation;
}
.nf-shortcut-help .nf-shortcut-help__context > div {
  min-inline-size: 0;
}
.nf-shortcut-help .nf-shortcut-help__context dt {
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__context dd {
  margin: 0;
}
.nf-shortcut-help .nf-shortcut-help__preferences {
  margin-block: var(--nf-t-space-4);
  padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
  background: var(--nf-t-control-bg);
}
.nf-shortcut-help .nf-shortcut-help__toggle {
  display: flex;
  align-items: center;
  gap: var(--nf-t-space-3);
  min-block-size: var(--nf-t-control-min);
  margin: 0;
  cursor: pointer;
}
.nf-shortcut-help .nf-shortcut-help__toggle > span {
  min-inline-size: 0;
}
.nf-shortcut-help .nf-shortcut-help__checkbox {
  flex: 0 0 auto;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  accent-color: var(--nf-shell-focus, var(--nf-t-focus));
}
.nf-shortcut-help .nf-shortcut-help__checkbox:disabled {
  cursor: not-allowed;
}
.nf-shortcut-help .nf-shortcut-help__preference-status {
  margin-block: var(--nf-t-space-3) var(--nf-t-space-2);
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__note,
.nf-shortcut-help .nf-shortcut-help__description,
.nf-shortcut-help .nf-shortcut-help__reason {
  margin-block: var(--nf-t-space-2);
  max-inline-size: 70ch;
  color: var(--nf-shell-text, var(--nf-t-text));
}
.nf-shortcut-help .nf-shortcut-help__notice {
  margin-block: var(--nf-t-space-3);
  color: var(--nf-shell-text, var(--nf-t-text));
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__notice:empty {
  margin: 0;
}
.nf-shortcut-help .nf-shortcut-help__search-label {
  display: block;
  margin-block: var(--nf-t-space-4) var(--nf-t-space-2);
}
.nf-shortcut-help .nf-shortcut-help__search {
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--nf-t-control-min);
  font-size: var(--nf-shell-text-lg, var(--nf-t-text-lg));
}
.nf-shortcut-help .nf-shortcut-help__search-status {
  margin-block: var(--nf-t-space-3);
}
.nf-shortcut-help .nf-shortcut-help__list {
  display: grid;
  gap: var(--nf-t-space-3);
  min-inline-size: 0;
  margin: var(--nf-t-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.nf-shortcut-help .nf-shortcut-help__action {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--nf-t-space-2);
  min-inline-size: 0;
  padding: var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
}
.nf-shortcut-help .nf-shortcut-help__action[data-state="disabled"] {
  border-style: dashed;
}
.nf-shortcut-help .nf-shortcut-help__action-label {
  min-inline-size: 0;
  margin: 0;
  color: var(--nf-shell-text, var(--nf-t-text));
  font-size: var(--nf-shell-text-xl, var(--nf-t-text-xl));
  line-height: var(--nf-shell-leading-snug, var(--nf-t-leading-snug));
  text-wrap: balance;
}
.nf-shortcut-help .nf-shortcut-help__keys {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--nf-t-space-2);
  min-inline-size: 0;
}
.nf-shortcut-help .nf-shortcut-help__keys kbd {
  display: inline-block;
  min-inline-size: 2rem;
  max-inline-size: 100%;
  padding: var(--nf-t-space-1) var(--nf-t-space-2);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: 4px;
  background: var(--nf-t-input-bg);
  color: var(--nf-shell-text, var(--nf-t-text));
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: var(--nf-shell-text-lg, var(--nf-t-text-lg));
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.nf-shortcut-help .nf-shortcut-help__action .nf-shortcut-help__description,
.nf-shortcut-help .nf-shortcut-help__action .nf-shortcut-help__reason,
.nf-shortcut-help .nf-shortcut-help__availability {
  margin: 0;
}
.nf-shortcut-help .nf-shortcut-help__availability {
  font-weight: var(--nf-shell-weight-bold, var(--nf-t-weight-bold));
}
.nf-shortcut-help .nf-shortcut-help__empty {
  padding: var(--nf-t-space-3);
  border: 1px dashed var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
}
.nf-shortcut-help [hidden] {
  display: none !important;
}
/* #959 tip: optional detail behind a keyboard/touch "?" disclosure. The
   shared NFPopover closes it on Escape or an outside press. Used by this
   dialog and by tenant rows marked .nf-tip-row. */
.nf-tip-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nf-t-space-2);
}
.nf-tip-row .nf-tip > summary {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: var(--nf-t-control-min);
  block-size: var(--nf-t-control-min);
  color: var(--nf-t-text-muted);
  font-size: var(--nf-shell-text-sm, var(--nf-t-text-sm));
  font-weight: var(--nf-shell-weight-semibold, var(--nf-t-weight-semibold));
  line-height: var(--nf-shell-leading-none, var(--nf-t-leading-none));
  list-style: none;
  cursor: pointer;
  touch-action: manipulation;
}
.nf-tip-row .nf-tip > summary::-webkit-details-marker {
  display: none;
}
.nf-tip-row .nf-tip > summary::marker {
  content: "";
}
.nf-tip-row .nf-tip > summary::before {
  content: none;
  display: none;
}
.nf-tip-row .nf-tip > summary::after {
  content: "";
  position: absolute;
  inset: 0;
  inline-size: 1.75em;
  block-size: 1.75em;
  margin: auto;
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: 50%;
}
.nf-tip-row .nf-tip[open] > summary {
  color: var(--nf-shell-text, var(--nf-t-text));
}
.nf-tip-row .nf-tip[open] > summary::after {
  border-color: var(--nf-shell-focus, var(--nf-t-focus));
}
.nf-tip-row .nf-tip > summary:focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-shell-focus, var(--nf-t-focus));
  outline-offset: var(--nf-t-focus-ring-offset);
}
.nf-tip-row .nf-tip > p {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--nf-t-space-1));
  z-index: 1;
  margin: 0;
  padding: var(--nf-t-space-2) var(--nf-t-space-3);
  border: 1px solid var(--nf-shell-border, var(--nf-t-control-border));
  border-radius: var(--nf-shell-radius, var(--nf-t-radius));
  background: var(--nf-t-surface-raised);
  color: var(--nf-shell-text, var(--nf-t-text));
  font-size: var(--nf-shell-text-sm, var(--nf-t-text-sm));
  line-height: var(--nf-shell-leading-snug, var(--nf-t-leading-snug));
  box-shadow: var(--nf-t-elev-panel);
}
.nf-shortcut-help :focus-visible {
  outline: var(--nf-t-focus-ring-width) solid var(--nf-shell-focus, var(--nf-t-focus));
  outline-offset: var(--nf-t-focus-ring-offset);
  scroll-margin-block: var(--nf-t-space-3);
}
.nf-shortcut-help button,
.nf-shortcut-help input,
.nf-shortcut-help label {
  animation: none;
  transition: none;
}
@media (min-width: 600px) {
  .nf-shortcut-help .nf-shortcut-help__action {
    grid-template-columns: minmax(0, 1fr) minmax(0, 10rem);
    column-gap: var(--nf-t-space-4);
  }
  .nf-shortcut-help .nf-shortcut-help__keys {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-content: start;
    justify-content: flex-end;
  }
  .nf-shortcut-help .nf-shortcut-help__description,
  .nf-shortcut-help .nf-shortcut-help__availability,
  .nf-shortcut-help .nf-shortcut-help__reason {
    grid-column: 1;
  }
}
@media (max-width: 440px) {
  .nf-shell-shortcut-help.nf-shortcut-help {
    --nf-shortcut-help-pad: var(--nf-t-space-4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .nf-shell-shortcut-help.nf-shortcut-help,
  .nf-shortcut-help *,
  .nf-shortcut-help::backdrop {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}
@media (forced-colors: active) {
  .nf-shell-shortcut-help.nf-shortcut-help,
  .nf-shortcut-help .nf-shortcut-help__preferences,
  .nf-shortcut-help .nf-shortcut-help__action,
  .nf-shortcut-help .nf-shortcut-help__keys kbd,
  .nf-shortcut-help .nf-shortcut-help__empty {
    border-color: CanvasText;
  }
  .nf-shortcut-help :focus-visible {
    outline-color: Highlight;
  }
}