/* Official Owner Identity System — the OWNER name badge (blue check + OWNER
   pill), the Official content badge, tooltips, the Owner Profile variant and
   the Official Announcements section. Built only from style.css's existing
   tokens, deliberately understated: no neon, no heavy glow, no animation. */

.jo-owner-identity{ display:inline-flex; align-items:center; gap:4px; vertical-align:middle; }
.jo-owner-check{ display:inline-flex; line-height:0; cursor:default; border-radius:50%; }
.jo-owner-check svg{ display:block; }
.jo-owner-pill{
  display:inline-flex; align-items:center; padding:1px 7px; border-radius:5px;
  font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  background:rgba(255,255,255,.08); color:var(--text-0); border:1px solid var(--border-hi);
  cursor:default;
}
.jo-owner-identity-sm .jo-owner-pill{ font-size:9px; padding:1px 6px; }
.jo-msg-owner-tag{ margin-bottom:3px; }
.jo-owner-badge-inline{
  display:inline-flex; align-items:center; gap:3px; font-size:9.5px; font-weight:800; letter-spacing:.3px;
  padding:2px 7px; border-radius:5px; background:rgba(255,255,255,.08); color:var(--text-0); border:1px solid var(--border-hi);
}

/* Official content badge — visually distinct from the owner name badge: an
   outlined seal icon instead of the blue check, accent-tinted instead of
   white, so the two never get confused (spec section 5/35). */
.jo-official-badge{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px;
  font-size:9.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
  background:rgba(var(--accent-rgb),.12); color:var(--accent-2); border:1px solid rgba(var(--accent-rgb),.3);
}

/* Byline used in place of the plain developer name when content is official */
.jo-official-byline{ font-size:12.5px; }
.jo-official-byline a{ color:var(--text-0); text-decoration:none; }
.jo-official-byline-sub{ font-size:10.5px; color:var(--text-2); margin-top:1px; }

/* Simple CSS-only tooltip: shown on hover (desktop) AND focus (keyboard, and
   most mobile browsers on tap since the element is tabindex="0") — no JS
   popover machinery needed for a one-line hint. */
[data-tooltip]{ position:relative; }
[data-tooltip]::after{
  content:attr(data-tooltip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  background:#0c0d12; color:#fff; font-size:11px; font-weight:500; white-space:nowrap; letter-spacing:0;
  text-transform:none; padding:5px 9px; border-radius:6px; border:1px solid var(--border-hi);
  opacity:0; pointer-events:none; transition:opacity .12s ease; z-index:40;
}
[data-tooltip]:hover::after, [data-tooltip]:focus::after{ opacity:1; }
[dir="rtl"] [data-tooltip]::after{ direction:rtl; }

/* ---------------------------------------------------------- owner profile */
.jo-owner-profile-header{ border:1px solid rgba(var(--accent-rgb),.3); background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),var(--bg-1) 55%); border-radius:16px; }
.jo-owner-profile-label{ font-size:12px; color:var(--text-2); margin-top:4px; }

/* ------------------------------------------------------- official announcements */
.jo-announcement{
  border:1px solid var(--border); border-radius:14px; padding:20px 22px; background:var(--bg-1);
  display:flex; flex-direction:column; gap:8px; position:relative;
}
.jo-announcement.pinned{ border-color:rgba(var(--accent-rgb),.4); background:linear-gradient(180deg,rgba(var(--accent-rgb),.06),var(--bg-1) 50%); }
.jo-announcement-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.jo-announcement-pin{
  display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.4px; color:var(--accent-2); background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.3);
  padding:2px 8px; border-radius:999px;
}
.jo-announcement-title{ font-family:var(--font-display); font-size:17px; margin:0; }
.jo-announcement-date{ font-size:11px; color:var(--text-2); }
.jo-announcement-body{ font-size:13px; color:var(--text-1); line-height:1.6; white-space:pre-wrap; }
.jo-announcement img{ border-radius:10px; max-width:100%; margin-top:6px; }
.jo-announcements-section{ margin:40px 0; }
.jo-announcements-list{ display:flex; flex-direction:column; gap:14px; max-width:760px; margin:0 auto; }

@media (max-width: 520px){
  .jo-owner-pill{ font-size:8.5px; padding:1px 5px; }
  .jo-official-badge{ font-size:9px; padding:2px 6px; }
}