.fn-pop {
  position: fixed;

  z-index: 210;

  width: min(26rem, calc(100vw - 24px));
  max-height: min(19rem, calc(100vh - 24px));
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  background: var(--bg, #FAFAF8);
  color: var(--text, #211d1a);
  border: 1px solid var(--border, rgba(0, 0, 0, .12));
  border-radius: 12px;
  padding: .75rem .95rem;
  font-size: .9rem;
  line-height: 1.55;
  box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .45);

  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.fn-pop:hover { scrollbar-color: var(--border, rgba(0, 0, 0, .2)) transparent; }
.fn-pop::-webkit-scrollbar { width: 10px; background: transparent; }
.fn-pop::-webkit-scrollbar-thumb {
  background-color: transparent; background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px;
}
.fn-pop:hover::-webkit-scrollbar-thumb { background-color: var(--border, rgba(0, 0, 0, .2)); }
.fn-pop[hidden] { display: none; }
.fn-pop:focus { outline: none; }

.fn-pop:focus-visible { outline: 2px solid var(--orange, #F7931A); outline-offset: 2px; }
.fn-pop[data-mode="sheet"]:focus-visible { outline: none; }
.fn-pop-n { color: var(--orange, #F7931A); font-weight: 600; font-variant-numeric: lining-nums; }
.fn-pop a { color: var(--orange-text, #B96C00); text-underline-offset: 2px; }

.fn-pop[data-mode="sheet"] {
  left: 50%;
  top: auto;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  width: min(40rem, calc(100vw - 16px));
  border-radius: 14px;
  box-shadow: 0 -12px 40px -12px rgba(0, 0, 0, .5);
}

@media print {
  .fn-pop { display: none !important; }
}