/* pn-update-pill-20260927.css — the build-refresh pill, rebuilt (CEO, 27 Sep 2026).
   ═══════════════════════════════════════════════════════════════════════════════════════════════
   CEO: "Updated build ready — tap to reload": you need a more elegant and stable (it glitches on
   rollover) button that pops up top left of Browser when this happens — design it beautifully.

   ROOT CAUSE OF THE ROLLOVER GLITCH: the old pill was a bare `document.createElement("button")`
   with only its own inline `cssText`. style-01.css carries a broad, unscoped office-view law —
   `body[data-view="office"] button:not(.primary):not(.hub-tab)…:hover{ background:…!important;
   border-color:var(--pn-border-hi)!important }` (line ~6900) — that targets EVERY <button> under
   body[data-view="office"] not named in its own exclusion list. The old pill's id ("pn-fresh")
   was never in that list, so on hover, during gameplay, its deliberate dark-glass fill and accent
   border were `!important`-overridden mid-hover by an unrelated law, flashing it to a different
   palette. Two more generic rules (`button{…}` / `button:hover{…transform:translateY(-1px)…}`,
   also style-01.css) stack transitions on top of the same bare tag. A pill built as a plain
   <button> is permanently exposed to every current and future button law in this file.

   THE FIX, STRUCTURALLY: the two interactive controls below are real <button> elements (for
   semantics/keyboard/AA) but every rule that matters is re-declared here on class selectors
   compounded with the #pn-update-pill id, so this stylesheet's specificity (id + class) beats
   any bare `button`/`button:hover` selector and any `:not()`-chain law regardless of load order —
   and every property that law touches (background, border-color, color, transform) is pinned
   `!important` too, so an `!important` rule elsewhere cannot win on specificity alone. Hover is
   INERT for anything but the two effects this file defines on purpose: a border/shadow bloom and
   a one-shot glyph rotation. No layout, size or position ever changes on hover — nothing to glitch.

   MOUNT POINT: appended to document.documentElement, not document.body, in script-01.js — the
   same trick pn-feedback.js uses for its dock tab. body.pn-folio carries `transform` inside the
   cased iPad shell (pn-ipad-shell.css), which makes body the containing block for its `position:
   fixed` descendants, so a fixed child of body resolves against the DEVICE frame, not the real
   browser window. document.documentElement is never transformed, so a fixed child of it always
   pins to the actual browser viewport — top-left, every width, outside the iPad glass. */

#pn-update-pill{
  position: fixed !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2147483000; /* above the iPad case, above every in-game overlay */
  display: flex !important;
  align-items: stretch !important;
  max-width: calc(100vw - 32px);
  border-radius: 999px !important;
  background: rgba(10, 12, 16, .92) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(249, 115, 22, .34) !important;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
  overflow: hidden;
  isolation: isolate;
  /* one-shot entrance — never repeats, never re-triggers on hover (opacity/transform are only
     ever set by this animation and by .pnup-x's removal; hover touches neither). */
  opacity: 0;
  transform: translateY(-10px);
  animation: pnup-in .38s cubic-bezier(.22, .7, .3, 1) .05s forwards;
}
@keyframes pnup-in{
  to{ opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  #pn-update-pill{ animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── the reload control — all:unset hard-escapes every bare `button{…}` / `button:hover{…}` /
   `body[data-view="office"] button:not(…):hover{…!important}` law in style-01.css/pn-btn-law.css;
   everything the control needs is declared explicitly below. ───────────────────────────────── */
#pn-update-pill .pnup-main{
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-height: 44px !important;
  padding: 12px 14px 12px 16px !important;
  cursor: pointer !important;
  color: #f4ede4 !important;
  background: transparent !important;
  border: none !important;
  font: 800 11.5px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
  letter-spacing: .05em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  transform: none !important;
  transition: color .16s ease !important;
}
/* hover: a border/shadow bloom on the whole pill only — no colour flip, no transform, no
   background swap. This is the entire "rollover" effect, and it is stable by construction.
   `:hover`/`:focus-within` on the wrapper fire whenever the pointer/focus is on a descendant
   (the main button) — no `:has()` needed, so this works on every evergreen engine. */
#pn-update-pill:hover,
#pn-update-pill:focus-within{
  border-color: rgba(249, 115, 22, .68) !important;
  box-shadow: 0 16px 38px -10px rgba(0, 0, 0, .62), 0 0 0 1px rgba(249, 115, 22, .2),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
#pn-update-pill .pnup-main:hover,
#pn-update-pill .pnup-main:active,
#pn-update-pill .pnup-main:focus-visible{
  background: transparent !important;
  color: #f4ede4 !important;
  transform: none !important;
}
#pn-update-pill .pnup-main:focus-visible{
  outline: 2px solid #f97316 !important;
  outline-offset: 3px !important;
  border-radius: 999px !important;
}

#pn-update-pill .pnup-glyph{
  width: 15px; height: 15px; flex: none; display: block;
  color: #f97316 !important;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* the "subtle refresh glyph that rotates once on hover" — a single 360°, not a spin loop */
#pn-update-pill .pnup-main:hover .pnup-glyph,
#pn-update-pill .pnup-main:focus-visible .pnup-glyph{
  transform: rotate(360deg);
}
@media (prefers-reduced-motion: reduce){
  #pn-update-pill .pnup-glyph{ transition: none; }
  #pn-update-pill .pnup-main:hover .pnup-glyph,
  #pn-update-pill .pnup-main:focus-visible .pnup-glyph{ transform: none; }
}

#pn-update-pill .pnup-txt{ color: #f4ede4 !important; }
#pn-update-pill .pnup-txt b{ color: #ffb98a !important; font-weight: 900 !important; }

/* ── dismiss — a second real <button>, same hard-escape, ≥44px hit target via padding not bulk */
#pn-update-pill .pnup-x{
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  min-height: 44px !important;
  cursor: pointer !important;
  color: rgba(244, 237, 228, .5) !important;
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255, 255, 255, .1) !important;
  font: 400 17px/1 ui-monospace, monospace !important;
  transform: none !important;
  transition: color .15s ease, background-color .15s ease !important;
}
#pn-update-pill .pnup-x:hover,
#pn-update-pill .pnup-x:focus-visible{
  color: #f4ede4 !important;
  background: rgba(255, 255, 255, .06) !important;
  transform: none !important;
}
#pn-update-pill .pnup-x:focus-visible{
  outline: 2px solid #f97316 !important;
  outline-offset: -3px !important;
}

@media (max-width: 480px){
  #pn-update-pill .pnup-txt{ font-size: 10.5px !important; }
  #pn-update-pill .pnup-main{ padding: 11px 12px 11px 13px !important; gap: 7px !important; }
}