/* ============================================================
   pa-ui-clicks.css — Chrome control hit targets & click reliability.

   Canon v5: docs/design/PORCELAIN_FUTURISM_2026-08-16.md
   Fixes every chrome control click:
     - Upgrade: min 30px height, adequate padding, cursor pointer
     - User menu: 30x30 circle, z-index 10001, not clipped by topbar
     - Moon (Theme): 30x30 touch target, pointer cursor, clean toggle
     - Record: optically centered at 50% via transform, min 30px height
     - Tidy: 38x38 hex mark, pointer cursor, z-index 50
     - Window close X: min 28x28 hit target, pointer-events auto on all panes
     - Request spawn: cursor pointer, clear click feedback, refuses REGISTRY-ONLY
     - Sign in pills: min 30px height, cursor pointer, no dead clicks

   Token-pure (juwel-ds.css). Flat grounds. No wash, bloom, halo.
   No emoji. No serif. Normal font-style only.
   ============================================================ */

/* ── 1. Top bar stacking & overflow clearance (menus not clipped) ── */
.psh-top{
  z-index:10000 !important;
  overflow:visible !important;
}

.psh-top-right{
  position:relative !important;
  overflow:visible !important;
  z-index:10000 !important;
}

.psh-brand{
  cursor:pointer !important;
  user-select:none !important;
  z-index:10000 !important;
}

/* ── 2. Top bar Record pill: precise optical centering ── */
.psh-record{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
  height:30px !important;
  min-height:30px !important;
  box-sizing:border-box !important;
  padding:0 12px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border-radius:var(--r-full, 9999px) !important;
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  color:var(--ink-2) !important;
  font-family:var(--ff) !important;
  font-size:12px !important;
  font-weight:500 !important;
  font-style:normal !important;
  line-height:28px !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  z-index:2 !important;
  transition:border-color var(--dur-1, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
             color var(--dur-1, 120ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) !important;
}

.psh-record:hover{
  border-color:var(--ink-4) !important;
  color:var(--ink) !important;
}

.psh-record:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 1px var(--focus-edge, #8e7cff) !important;
  border-color:var(--focus-edge, #8e7cff) !important;
}

/* ── 3. Top bar Upgrade button ── */
.psh-upgrade{
  height:30px !important;
  min-height:30px !important;
  box-sizing:border-box !important;
  padding:0 12px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:var(--r-full, 9999px) !important;
  border:1px solid var(--ink) !important;
  background:var(--ink) !important;
  color:var(--surface) !important;
  font-family:var(--ff) !important;
  font-size:12px !important;
  font-weight:600 !important;
  font-style:normal !important;
  letter-spacing:0.04em !important;
  line-height:28px !important;
  text-decoration:none !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  user-select:none !important;
}

.psh-upgrade:hover{
  filter:brightness(0.85) !important;
}

.psh-upgrade.is-current{
  background:var(--surface) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
  font-weight:550 !important;
  filter:none !important;
}

.psh-upgrade.is-current:hover{
  background:var(--surface-2) !important;
  border-color:var(--ink-4) !important;
}

.psh-upgrade:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 1px var(--focus-edge, #8e7cff) !important;
  border-color:var(--focus-edge, #8e7cff) !important;
}

/* ── 4. Top bar User button & dropdown menu ── */
.psh-user{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid var(--line) !important;
  background:var(--surface) !important;
  color:var(--ink-2) !important;
  font-family:var(--ff) !important;
  font-size:12px !important;
  font-style:normal !important;
  text-decoration:none !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  flex:0 0 auto !important;
  position:relative !important;
  user-select:none !important;
}

.psh-user:hover{
  background:var(--surface-2) !important;
  border-color:var(--ink-4) !important;
  color:var(--ink) !important;
}

.psh-user:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 1px var(--focus-edge, #8e7cff) !important;
  border-color:var(--focus-edge, #8e7cff) !important;
}

.psh-user svg{
  width:15px !important;
  height:15px !important;
  pointer-events:none !important;
}

.psh-user-menu{
  position:absolute !important;
  top:calc(100% + 8px) !important;
  right:0 !important;
  min-width:200px !important;
  box-sizing:border-box !important;
  padding:6px !important;
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--r-md, 12px) !important;
  box-shadow:var(--shadow-2, 0 8px 24px rgba(0,0,0,.08)) !important;
  z-index:10001 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  font-style:normal !important;
}

.psh-user-menu[hidden]{
  display:none !important;
}

.psh-user-menu-item{
  min-height:32px !important;
  padding:6px 10px !important;
  font-size:12.5px !important;
  font-family:var(--ff) !important;
  font-style:normal !important;
  color:var(--ink) !important;
  background:transparent !important;
  border:0 !important;
  border-radius:var(--r-sm, 6px) !important;
  text-align:left !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  box-sizing:border-box !important;
}

.psh-user-menu-item:hover{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
}

.psh-user-menu-item.is-danger{
  color:var(--ink-2) !important;
}

.psh-user-menu-item.is-danger:hover{
  background:color-mix(in srgb, var(--coral, #ff6b6b) 12%, transparent) !important;
  color:var(--coral, #ff6b6b) !important;
}

/* ── 5. Moon / Theme control ── */
.psh-theme{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;
  box-sizing:border-box !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid transparent !important;
  background:transparent !important;
  color:var(--ink-3) !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  flex:0 0 auto !important;
}

.psh-theme:hover{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
  border-color:var(--line) !important;
}

.psh-theme:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 1px var(--focus-edge, #8e7cff) !important;
  border-color:var(--focus-edge, #8e7cff) !important;
}

.psh-theme svg{
  pointer-events:none !important;
}

/* ── 6. Tidy (#pshJuju) button ── */
.psh-juju{
  width:38px !important;
  height:38px !important;
  min-width:38px !important;
  min-height:38px !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  z-index:50 !important;
  display:grid !important;
  place-items:center !important;
}

.psh-juju img,
.psh-juju svg{
  pointer-events:none !important;
}

.psh-juju:hover{
  filter:brightness(0.92) !important;
}

.psh-juju:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 2px var(--focus-edge, #8e7cff) !important;
}

/* ── 7. Window close X buttons across all panes ── */
.psh-surface-x,
.pa-chat-x,
.pa-sammy-close,
.pa-vext-about-x,
button[data-win-action="close"],
button[data-close],
.fwc.close{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  pointer-events:auto !important;
  border-radius:var(--r-sm, 6px) !important;
  color:var(--ink-3) !important;
  background:transparent !important;
  border:0 !important;
  transition:background var(--dur-1, 120ms) var(--ease-out), color var(--dur-1, 120ms) var(--ease-out) !important;
}

.psh-surface-x:hover,
.pa-chat-x:hover,
.pa-sammy-close:hover,
.pa-vext-about-x:hover{
  background:var(--surface-2) !important;
  color:var(--ink) !important;
}

.psh-surface-x svg,
.pa-chat-x svg,
.pa-sammy-close svg{
  pointer-events:none !important;
}

/* Unraised desk surfaces allow clicking all interactive controls (no dead clicks) */
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) button,
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) a,
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) input,
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) select,
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) textarea,
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) [role="button"],
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) [data-agent],
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) .psh-surface-x,
#pshDesk.jdb-desk.jdb-has-raised .psh-surface:not([data-jdb-raised="1"]) .pa-chat-x{
  pointer-events:auto !important;
}

/* ── 8. Request spawn button in Factory pane ── */
[data-agent="os:factory:spawn"],
button.pa-btn[data-agent="os:factory:spawn"]{
  min-height:32px !important;
  padding:6px 14px !important;
  font-family:var(--ff) !important;
  font-size:12px !important;
  font-weight:600 !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
  pointer-events:auto !important;
}

[data-agent="os:factory:spawn"]:disabled{
  cursor:not-allowed !important;
  opacity:0.6 !important;
}

/* ── 9. Sign in pills & buttons ── */
.pa-sammy-signin,
[data-agent="os:sammy:signin"],
[data-agent="os:apps:connect-guest"],
.pa-signin-btn,
.jui-pill-signin,
a.psh-user[data-auth-dest="guest"]{
  cursor:pointer !important;
  touch-action:manipulation !important;
  pointer-events:auto !important;
}

.pa-btn,
.jui-btn{
  min-height:30px !important;
  cursor:pointer !important;
  touch-action:manipulation !important;
}