/* ============================================================
   pa-topbar.css — porcelain top bar placing & layout overlay.

   Canon v5: docs/design/PORCELAIN_FUTURISM_2026-08-16.md
   SUPER-FIRST-LOGIN owns porcelain-shell.css / os-porcelain.html /
   pa-apps.css. This sheet is additive, injected by pa-topbar.js
   when #psh is present.

   Placing Law:
     1. Three zones, no canyons:
        - LEFT: .psh-brand (hex mark + JUWEL OS wordmark, tight)
        - CENTER: #pshRecord (optically centered at 50% via transform)
        - RIGHT: .psh-top-right flex row (Upgrade · User · Moon · clock)
     2. Height: 56px, vertical align all 30px controls
     3. No raw text links (Connect / FS / Runtime / Notice) in the bar
     4. Flat ground, no backdrop-filter, no bloom, no serif, no italics
     5. Token-pure (juwel-ds.css)
   ============================================================ */

/* ── 1. Top bar container & grid row ── */
.psh{
  grid-template-rows:56px 1fr auto !important;
}

.psh-top{
  height:56px !important;
  min-height:56px !important;
  padding:0 24px !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:var(--surface) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-bottom:1px solid var(--line) !important;
  box-sizing:border-box !important;
  font-style:normal !important;
}

/* ── 2. Left zone: brand ── */
.psh-brand{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  z-index:2 !important;
  font-style:normal !important;
}

.psh-entity{
  width:20px !important;
  height:20px !important;
  object-fit:contain !important;
  display:block !important;
  flex:0 0 auto !important;
}

.psh-wordmark{
  font-family:var(--ff) !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:0.08em !important;
  white-space:nowrap !important;
  color:var(--ink) !important;
  font-style:normal !important;
}

/* ── 3. Center zone: on the record pill ── */
.psh-record{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
  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) !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;
  z-index:2 !important;
  transition:border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out) !important;
}

#pshRecord,
.psh-top .psh-record,
.psh-top #pshRecord{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  margin:0 !important;
}

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

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

.psh-dot{
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:var(--jade) !important;
  flex:0 0 auto !important;
  display:inline-block !important;
}

/* ── 4. Right zone: Upgrade · User · Moon · clock cluster ── */
.psh-top-right{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-left:auto !important;
  flex:0 0 auto !important;
  z-index:2 !important;
  font-style:normal !important;
  position:relative !important;
}

/* Upgrade control */
.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) !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;
  white-space:nowrap !important;
  flex:0 0 auto !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) !important;
  border-color:var(--focus-edge) !important;
}

/* User nav button / avatar */
.psh-user{
  width:30px !important;
  height:30px !important;
  min-width: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;
  flex:0 0 auto !important;
  position:relative !important;
  transition:background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out) !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) !important;
  border-color:var(--focus-edge) !important;
}

.psh-user svg{
  width:15px !important;
  height:15px !important;
  display:block !important;
  flex:0 0 auto !important;
}

/* User dropdown menu */
.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) !important;
  box-shadow:var(--shadow-2) !important;
  z-index:100 !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-head{
  padding:8px 10px 6px !important;
  border-bottom:1px solid var(--line-2) !important;
  margin-bottom:4px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
}

.psh-user-menu-name{
  font-size:12.5px !important;
  font-weight:600 !important;
  color:var(--ink) !important;
  line-height:1.3 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.psh-user-menu-email{
  font-size:11px !important;
  color:var(--ink-3) !important;
  line-height:1.3 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

.psh-user-menu-item{
  appearance:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:7px 10px !important;
  border-radius:var(--r-sm) !important;
  border:0 !important;
  background:transparent !important;
  color:var(--ink) !important;
  font-family:var(--ff) !important;
  font-size:12.5px !important;
  font-weight:500 !important;
  font-style:normal !important;
  text-align:left !important;
  text-decoration:none !important;
  cursor:pointer !important;
  line-height:1.3 !important;
  transition:background var(--dur-1) var(--ease-out) !important;
}

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

.psh-user-menu-item:focus-visible{
  outline:none !important;
  background:var(--surface-2) !important;
  box-shadow:0 0 0 1px var(--focus-edge) !important;
}

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

.psh-user-menu-item.is-danger:hover{
  background:var(--garnet-soft) !important;
}

.psh-user-menu-sep{
  height:1px !important;
  background:var(--line-2) !important;
  margin:4px 6px !important;
}

/* Theme toggle (moon / sun) */
.psh-theme{
  width:30px !important;
  height:30px !important;
  min-width: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;
  flex:0 0 auto !important;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out) !important;
}

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

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

.psh-theme svg{
  width:16px !important;
  height:16px !important;
  display:block !important;
}

/* Clock */
.psh-clock{
  font-family:var(--mono) !important;
  font-size:12px !important;
  font-weight:500 !important;
  font-style:normal !important;
  color:var(--ink-2) !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  line-height:30px !important;
  height:30px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding-left:2px !important;
  flex:0 0 auto !important;
}

/* ── 5. Hide intern text chips / extras from visible top bar ──
   Connect, FS, Runtime, Notice are removed from the visible top-bar word row.
   Access is via user menu and/or ⌘K. */
.psh-os-extras,
#pshOsExtras,
.psh-top .psh-os-extras,
.psh-top #pshOsExtras,
.psh-top-right .psh-os-extras,
.psh-top-right #pshOsExtras,
.psh-top-extras,
.psh-top-extra,
.psh-top [data-agent*="connect"],
.psh-top [data-agent*="runtime"],
.psh-top [data-agent*="fs"],
.psh-top [data-agent*="notify"],
.psh-top-right [data-agent*="connect"],
.psh-top-right [data-agent*="runtime"],
.psh-top-right [data-agent*="fs"],
.psh-top-right [data-agent*="notify"]{
  display:none !important;
}

/* Standard Shell01: Figma38:41 desktop dimensions; mobile unchanged. */
@media (min-width:768px) {
  .psh { grid-template-rows:64px 1fr auto !important; }
  .psh-top { height:64px !important; min-height:64px !important; padding:0 28px !important; }
}