/* ================================================================
   PoliceV — SHARED PROFILE WIDGET (all pages)
   Renders into #profile-area inside the department bar:
     signed in -> username + avatar circle + dropdown (Settings / Log Out)
     guest     -> Sign In button (goes to /shop, which forces its modal)
   Uses the Precinct Paperwork tokens defined on every page.
   ================================================================ */

.profile-area{
  display:flex;align-items:center;gap:10px;
  min-width:0;
}
.pa-name{
  font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;color:rgba(250,246,234,.75);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;
}
.pa-signin{
  font-family:var(--mono,'IBM Plex Mono',monospace);font-size:11px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--sheet,#faf6ea);text-decoration:none;
  background:rgba(250,246,234,.1);
  border:1.5px solid rgba(250,246,234,.4);
  padding:7px 14px;cursor:pointer;
  transition:all .15s;white-space:nowrap;
}
.pa-signin:hover{background:var(--sheet,#faf6ea);color:var(--ink,#181a1f)}

.profile-wrap{position:relative;flex:0 0 auto}
.avatar-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp,'Archivo Black',sans-serif);font-size:16px;line-height:1;
  background:var(--navy,#20398c);color:var(--sheet,#faf6ea);
  border:2px solid var(--ink,#181a1f);
  box-shadow:3px 3px 0 rgba(24,26,31,.35);
  cursor:pointer;padding:0;
  transition:transform .1s,box-shadow .1s,background .15s;
  text-transform:uppercase;
}
.avatar-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(24,26,31,.35);background:var(--navy-deep,#16255f)}
.avatar-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(24,26,31,.35)}

.profile-menu{
  display:none;position:absolute;top:calc(100% + 10px);right:0;z-index:960;
  min-width:196px;background:var(--sheet,#faf6ea);
  border:2px solid var(--ink,#181a1f);box-shadow:6px 6px 0 rgba(24,26,31,.3);
  padding:8px;
}
.profile-menu.open{display:block;animation:paMenuIn .16s ease}
@keyframes paMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.pm-item{
  display:flex;align-items:center;gap:10px;width:100%;
  font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:11px 12px;cursor:pointer;text-align:left;
  background:var(--sheet,#faf6ea);color:var(--ink,#181a1f);
  border:2px solid transparent;
  transition:all .12s;
}
.pm-item:hover{border-color:var(--ink,#181a1f);background:var(--sheet-2,#f3eddc)}
.pm-item.danger{color:var(--red,#b3202a)}
.pm-item.danger:hover{background:var(--red-soft,#f3dedd);border-color:var(--red,#b3202a)}
.pm-item svg{flex:0 0 auto}

/* ---- confirm modal (Log Out) ---- */
.pa-modal-overlay{
  display:none;align-items:center;justify-content:center;
  position:fixed;inset:0;z-index:9996;
  background:rgba(24,26,31,.55);
}
.pa-modal-overlay.open{display:flex}
.pa-modal-card{
  background:var(--sheet,#faf6ea);
  border:2.5px solid var(--ink,#181a1f);
  box-shadow:12px 12px 0 rgba(0,0,0,.35);
  padding:34px 34px 28px;
  text-align:center;
  position:relative;
  max-width:440px;width:90%;
  animation:paMenuIn .18s ease;
}
.pa-modal-card::before{
  content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;
  border:1px dashed var(--line,#c6bda2);pointer-events:none;
}
.pa-modal-stamp{
  display:inline-block;
  font-family:var(--disp,'Archivo Black',sans-serif);font-size:15px;letter-spacing:.12em;
  color:var(--red,#b3202a);border:3px double var(--red,#b3202a);
  padding:4px 14px;transform:rotate(-4deg);
  margin-bottom:16px;
}
.pa-modal-title{
  font-family:var(--disp,'Archivo Black',sans-serif);font-size:22px;letter-spacing:.01em;
  color:var(--ink,#181a1f);
}
.pa-modal-desc{
  font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12px;line-height:1.7;
  color:var(--muted,#6f6852);margin-top:12px;
}
.pa-modal-actions{
  display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap;
}
.pa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono,'IBM Plex Mono',monospace);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:13px 22px;cursor:pointer;
  border:2px solid var(--ink,#181a1f);
  background:var(--sheet,#faf6ea);color:var(--ink,#181a1f);
  box-shadow:4px 4px 0 var(--ink,#181a1f);
  transition:transform .1s,box-shadow .1s,background .15s;
}
.pa-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink,#181a1f)}
.pa-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink,#181a1f)}
.pa-btn.danger{background:var(--red,#b3202a);color:var(--sheet,#faf6ea)}
.pa-btn.danger:hover{background:#991b23}

@media(max-width:640px){
  .pa-name{display:none}
}