/* #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);
}
/* A heading keeps its "?" beside it at 375px: the heading wraps inside its
   own box instead of pushing the tip onto a line of its own. Rows led by a
   label or control keep wrapping, so a wide select never overflows. */
.nf-tip-row:has(> :is(h1, h2, h3, h4, h5, h6):first-child) {
  flex-wrap: nowrap;
}
.nf-tip-row > :is(h1, h2, h3, h4, h5, h6) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}
.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;
  }
}