/* /css/oink-pop.css — OINK-POP-2026-09-08. The platform's ONE non-modal overlay primitive (OLR 2026-09-08 §5/§6/§7).
   HTML owns the element (any <dialog> or <div> with the popover attribute); CSS owns placement, entry and dismissal
   affordances; JS (oink-pop.js) owns only what CSS cannot know: the anchor rectangle and the promise a confirmation
   resolves with. Nothing here blocks the page: no backdrop dim, no inert, no focus trap, no forced dismissal. */
[popover].oink-pop, dialog.oink-pop {
  position: fixed; inset: auto; left: var(--pop-x, 8px); top: var(--pop-y, 8px);
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  width: min(var(--pop-w, 360px), calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: visible;
}
[popover].oink-pop:not(:popover-open), dialog.oink-pop[hidden] { display: none; }
[popover].oink-pop::backdrop, dialog.oink-pop::backdrop { background: transparent; }   /* never dim the page (OLR §7) */
.oink-pop-card {
  background: var(--oink-pop-bg, var(--s1, #16121c)); color: var(--oink-pop-ink, var(--ink, #f4f0f7));
  border: 1px solid var(--oink-pop-line, rgba(255,255,255,.12)); border-radius: var(--oink-pop-r, 18px);
  padding: 14px; max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35);
  transform-origin: var(--pop-ox, 50%) 0; opacity: 1; transform: translate3d(0,0,0) scale(1);
  transition: opacity .18s ease-out, transform .22s cubic-bezier(.2,.9,.3,1.18);
}
.oink-pop[data-place="above"] .oink-pop-card { transform-origin: var(--pop-ox, 50%) 100%; }
@starting-style {
  .oink-pop:popover-open .oink-pop-card { opacity: 0; transform: translate3d(0,-6px,0) scale(.94); }
  .oink-pop[data-place="above"]:popover-open .oink-pop-card { opacity: 0; transform: translate3d(0,6px,0) scale(.94); }
}
.oink-pop-title { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
.oink-pop-text  { font-size: 14px; line-height: 1.45; margin: 0 0 12px; color: var(--oink-pop-ink-2, var(--ink-2, #b9b2c4)); }
.oink-pop-row   { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.oink-pop-btn {
  min-height: 44px; min-width: 88px; padding: 0 16px; border-radius: 12px; font: inherit; font-weight: 700;
  border: 1px solid var(--oink-pop-line, rgba(255,255,255,.12)); background: var(--oink-pop-btn, rgba(255,255,255,.06)); color: inherit;
}
.oink-pop-btn.danger  { background: var(--oink-pop-danger, #d33a3a); border-color: var(--oink-pop-danger, #d33a3a); color: #fff; }
.oink-pop-btn.primary { background: var(--oink-pop-primary, #ff49b7); border-color: var(--oink-pop-primary, #ff49b7); color: #fff; }
.oink-pop-btn:focus-visible { outline: 2px solid var(--oink-pop-focus, #00d6de); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .oink-pop-card { transition: opacity .12s linear; transform: none !important; } }

/* An existing <dialog> migrated to non-modal (OLR §25): the page keeps its own geometry; only the modal leftovers go.
   A non-modal dialog paints no backdrop at all — the rule below covers the case where a page opened it modally before
   this script ran — and it is lifted above the dock so a panel is never half-hidden behind fixed chrome. */
dialog.oink-pop-panel::backdrop { background: transparent !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.oink-pop-panel[open] { z-index: 2147483000; }

/* note(): the replacement for window.alert() — a live-region status line, never a blocker (OLR §5). */
.oink-note-wrap { position: fixed; left: 50%; translate: -50% 0; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--oink-note-bottom, 96px)); z-index: 2147483001; display: grid; gap: 8px; width: min(420px, calc(100vw - 24px)); pointer-events: none; }
.oink-note {
  background: var(--oink-pop-bg, #16121c); color: var(--oink-pop-ink, #f4f0f7); border: 1px solid var(--oink-pop-line, rgba(255,255,255,.12));
  border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.4; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  opacity: 1; translate: 0 0; transition: opacity .22s ease-out, translate .22s cubic-bezier(.2,.9,.3,1.1);
}
.oink-note.bad  { border-color: var(--oink-pop-danger, #d33a3a); }
.oink-note.good { border-color: var(--oink-pop-primary, #ff49b7); }
.oink-note.out  { opacity: 0; translate: 0 8px; }
@starting-style { .oink-note { opacity: 0; translate: 0 10px; } }
.oink-pop-form { display: block; }
.oink-pop-input { width: 100%; min-height: 44px; box-sizing: border-box; margin: 0 0 12px; padding: 0 12px; border-radius: 12px; font: inherit; color: inherit; background: var(--oink-pop-btn, rgba(255,255,255,.06)); border: 1px solid var(--oink-pop-line, rgba(255,255,255,.12)); }
.oink-pop-input:focus-visible { outline: 2px solid var(--oink-pop-focus, #00d6de); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .oink-note { transition: opacity .12s linear; translate: none !important; } }