/* 1401px and up — Full Desktop (also covers 1440 Laptop L, 1920, and 4K 2560): the base styles in this file are the Full Desktop CSS. Narrower sizes are overridden in the RESPONSIVE TIERS section at the bottom of this file. */
@import url("avatars.css");
@import url("../../../../../global_includes/theme/assets/css/persona_theme_switch.css?v=20261014");

/* Micro row and badge base (moved from new_base_aesthetics.css; kept first so this file's own rules still win ties) */
/* her request: ONE compact Persona row for the chat popout participant list, the Make a Call dropdown and the... */
.persona_micro_row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 2px 0;
}

.persona_micro_avatar {
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
}

.persona_micro_avatar img {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    object-fit: cover;
}

.persona_micro_avatar .persona_presence_marker {
    left: 0; /* Oct 19 2026 - #812: the shared marker offsets by the avatar wrapper's 1rem side padding, which the 22px micro avatar does not have, so it sat at the bottom RIGHT; flush to the bottom-left corner */
    width: 8px;
    max-width: 8px;
    height: 8px;
    max-height: 8px;
}

.persona_micro_name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The dropdown made from those rows (persona_micro_select.js). The native select stays in the form, invisible... */
.persona_micro_select {
    position: relative;
    display: block;
    min-width: 0;
}

.persona_micro_select.is_enhanced > .persona_micro_select_native {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.persona_micro_select_trigger {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-block: 0 3px;
    padding-inline: .75rem;
    text-align: left;
    cursor: pointer;
}

.persona_micro_select_trigger:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.persona_micro_select_current {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.persona_micro_placeholder {
    opacity: .8;
}

.persona_micro_select_caret {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-inline: 5px solid transparent;
    border-top: 6px solid currentColor;
}

.persona_micro_select_list {
    position: absolute;
    z-index: 50;
    inset-inline: 0;
    top: 100%;
    box-sizing: border-box;
    max-height: 14rem;
    overflow-y: auto;
    padding: 2px 0;
    color: var(--primary-font-color);
    background: var(--primary-color);
    border: 1px solid var(--primary-accent-color);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-backdrop);
}

.persona_micro_select_list[hidden] {
    display: none;
}

.persona_micro_select_item {
    padding: 0 .75rem;
    cursor: pointer;
}

.persona_micro_select_item:is(:hover, :focus-visible) {
    background: var(--secondary-accent-color);
    outline: 0;
}

.persona_micro_select_item.is_selected {
    background: var(--primary-accent-color);
}

.persona_micro_select_item.is_placeholder {
    padding-block: 2px;
    opacity: .8;
}

.persona_badge {
    --zone-t: calc(10px * var(--layout-theme-zone-scale, 1));
    --zone-top-left-corner-img: var(--theme-zone-badge-top-left-corner-background-image, none);
    --zone-top-left-corner-clr: var(--theme-zone-badge-top-left-corner-background-color, transparent);
    --zone-top-left-corner-img-opacity: var(--theme-zone-badge-top-left-corner-background-image-opacity, 1);
    --zone-top-left-corner-clr-opacity: var(--theme-zone-badge-top-left-corner-background-color-opacity, 1);
    --zone-top-left-corner-inner-glow: var(--theme-zone-badge-top-left-corner-inner-glow, none);
    --zone-top-left-corner-outer-glow: var(--theme-zone-badge-top-left-corner-outer-glow, none);
    --zone-top-left-corner-shadow: var(--theme-zone-badge-top-left-corner-shadow, none);
    --zone-top-right-corner-img: var(--theme-zone-badge-top-right-corner-background-image, none);
    --zone-top-right-corner-clr: var(--theme-zone-badge-top-right-corner-background-color, transparent);
    --zone-top-right-corner-img-opacity: var(--theme-zone-badge-top-right-corner-background-image-opacity, 1);
    --zone-top-right-corner-clr-opacity: var(--theme-zone-badge-top-right-corner-background-color-opacity, 1);
    --zone-top-right-corner-inner-glow: var(--theme-zone-badge-top-right-corner-inner-glow, none);
    --zone-top-right-corner-outer-glow: var(--theme-zone-badge-top-right-corner-outer-glow, none);
    --zone-top-right-corner-shadow: var(--theme-zone-badge-top-right-corner-shadow, none);
    --zone-bottom-left-corner-img: var(--theme-zone-badge-bottom-left-corner-background-image, none);
    --zone-bottom-left-corner-clr: var(--theme-zone-badge-bottom-left-corner-background-color, transparent);
    --zone-bottom-left-corner-img-opacity: var(--theme-zone-badge-bottom-left-corner-background-image-opacity, 1);
    --zone-bottom-left-corner-clr-opacity: var(--theme-zone-badge-bottom-left-corner-background-color-opacity, 1);
    --zone-bottom-left-corner-inner-glow: var(--theme-zone-badge-bottom-left-corner-inner-glow, none);
    --zone-bottom-left-corner-outer-glow: var(--theme-zone-badge-bottom-left-corner-outer-glow, none);
    --zone-bottom-left-corner-shadow: var(--theme-zone-badge-bottom-left-corner-shadow, none);
    --zone-bottom-right-corner-img: var(--theme-zone-badge-bottom-right-corner-background-image, none);
    --zone-bottom-right-corner-clr: var(--theme-zone-badge-bottom-right-corner-background-color, transparent);
    --zone-bottom-right-corner-img-opacity: var(--theme-zone-badge-bottom-right-corner-background-image-opacity, 1);
    --zone-bottom-right-corner-clr-opacity: var(--theme-zone-badge-bottom-right-corner-background-color-opacity, 1);
    --zone-bottom-right-corner-inner-glow: var(--theme-zone-badge-bottom-right-corner-inner-glow, none);
    --zone-bottom-right-corner-outer-glow: var(--theme-zone-badge-bottom-right-corner-outer-glow, none);
    --zone-bottom-right-corner-shadow: var(--theme-zone-badge-bottom-right-corner-shadow, none);
    --zone-top-border-img: var(--theme-zone-badge-top-border-background-image, none);
    --zone-top-border-clr: var(--theme-zone-badge-top-border-background-color, transparent);
    --zone-top-border-img-opacity: var(--theme-zone-badge-top-border-background-image-opacity, 1);
    --zone-top-border-clr-opacity: var(--theme-zone-badge-top-border-background-color-opacity, 1);
    --zone-top-border-inner-glow: var(--theme-zone-badge-top-border-inner-glow, none);
    --zone-top-border-outer-glow: var(--theme-zone-badge-top-border-outer-glow, none);
    --zone-top-border-shadow: var(--theme-zone-badge-top-border-shadow, none);
    --zone-right-border-img: var(--theme-zone-badge-right-border-background-image, none);
    --zone-right-border-clr: var(--theme-zone-badge-right-border-background-color, transparent);
    --zone-right-border-img-opacity: var(--theme-zone-badge-right-border-background-image-opacity, 1);
    --zone-right-border-clr-opacity: var(--theme-zone-badge-right-border-background-color-opacity, 1);
    --zone-right-border-inner-glow: var(--theme-zone-badge-right-border-inner-glow, none);
    --zone-right-border-outer-glow: var(--theme-zone-badge-right-border-outer-glow, none);
    --zone-right-border-shadow: var(--theme-zone-badge-right-border-shadow, none);
    --zone-bottom-border-img: var(--theme-zone-badge-bottom-border-background-image, none);
    --zone-bottom-border-clr: var(--theme-zone-badge-bottom-border-background-color, transparent);
    --zone-bottom-border-img-opacity: var(--theme-zone-badge-bottom-border-background-image-opacity, 1);
    --zone-bottom-border-clr-opacity: var(--theme-zone-badge-bottom-border-background-color-opacity, 1);
    --zone-bottom-border-inner-glow: var(--theme-zone-badge-bottom-border-inner-glow, none);
    --zone-bottom-border-outer-glow: var(--theme-zone-badge-bottom-border-outer-glow, none);
    --zone-bottom-border-shadow: var(--theme-zone-badge-bottom-border-shadow, none);
    --zone-left-border-img: var(--theme-zone-badge-left-border-background-image, none);
    --zone-left-border-clr: var(--theme-zone-badge-left-border-background-color, transparent);
    --zone-left-border-img-opacity: var(--theme-zone-badge-left-border-background-image-opacity, 1);
    --zone-left-border-clr-opacity: var(--theme-zone-badge-left-border-background-color-opacity, 1);
    --zone-left-border-inner-glow: var(--theme-zone-badge-left-border-inner-glow, none);
    --zone-left-border-outer-glow: var(--theme-zone-badge-left-border-outer-glow, none);
    --zone-left-border-shadow: var(--theme-zone-badge-left-border-shadow, none);
}


/** Yusaso Teal persona badge presentation. Runtime-consumer distilled. */
.follow_star {
  color: var(--persona-badge-follow-star-text-color) !important;}
.follow_star.is_followed { color: var(--yusaso-orange) !important; }

/* UNUSED - disabled
.follow_star_glyph {
  display: grid;
  width: 1.55rem;
  height: 1.55rem;
  place-items: center;}
*/

.persona_list_grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.persona_list_grid > *,
.persona_list_badge {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
}

.persona_list_grid > .persona_compact_list_row {
  margin: 0;
  padding: 0;
  border: 0;
}
/* One authoritative badge row for Circles, Connections, Participants, and
   My Connections. Page and feature styles must not restyle these rows. */
.persona_list_grid > .persona_compact_list_row > .persona_list_badge,
.persona_list_grid > .persona_compact_list_row > .persona_list_badge:is(button, div) {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-large);
  box-shadow: none;
}

.persona_list_grid > .persona_compact_list_row {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0.1rem;
  border: 0;
  box-shadow: none;
}

.persona_list_grid > .persona_compact_list_row > .persona_list_badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 3px 0;
  color: inherit;
  background-color: transparent;
  text-align: left;
}

.persona_list_grid > .persona_compact_list_row > .persona_list_badge {
  width: 100%;
  text-align: left;
}

.persona_list_badge {
  position: relative;
  isolation: isolate;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.5rem;
  padding: 0.45rem 0.7rem;
  overflow: visible;
  color: var(--persona-compact-text, var(--page-card-text));
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-large);
}

.persona_list_badge::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  /* Sept 26 2026 - was --persona-compact-background-color, a token that
     nothing ever wires to a persona owner's colors (only the resting
     default in css_visual_catalog.css). --persona-compact-background is the
     one THE SWITCH (below in this file, relocated from
     css_root_key_catalog.css Sept 27 2026) actually overrides when
     viewing another persona, so this badge's own idle-state background
     was silently frozen on the viewer's own default forever. Falling
     back to the old name preserves today's resting appearance exactly
     if --persona-compact-background is ever unset. */
  background-color: var(--persona-compact-background, var(--persona-compact-background-color));
  background-image: var(--persona-compact-background-image);
  background-repeat: var(--persona-compact-background-repeat, no-repeat);
  background-position: center;
  background-size: cover;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.persona_list_badge:is(:hover, :focus-visible, :focus-within) {
  border-color: color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
}

.persona_list_badge:is(:hover, :focus-visible, :focus-within)::before {
  opacity: 100;
}

/* Private Chat uses Compact badge identity without a card surface. */
/* Oct 8 2026 - raised to three classes: persona.css's .persona_switcher_item.persona_list_badge padding (0.7rem sides) was winning over this rule, pushing the chat username ~11px right of the message text and media. */
.persona_switcher_item.persona_list_badge.persona_list_badge_chat {
  min-height: 0;
  padding: 3px 0;
  color: inherit;
  background: transparent;
  background-image: none;
  border: 1px solid transparent; /* Oct 7 2026 - #215: width is a token so the content indent can include it */
  box-shadow: none;
}

.persona_list_badge.persona_list_badge_chat:is(:hover, :focus-visible, :focus-within) {
  border-color: color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
}

.persona_list_badge_chat .persona_list_badge_identity,
.persona_list_badge_chat .persona_list_badge_identity .persona_avatar_identity {
  /* gap: 0.35rem; - Oct 7 2026 #215: her request, 8px between avatar and username (token, shared with the content indent) */
  gap: calc(1.125rem + 5px); /* Oct 7 2026 #215: larger chat username */
  overflow: visible;}

.persona_list_badge_chat .persona_list_badge_identity .persona_badge_preview_link {
  min-height: 2rem;
}

.persona_list_badge_chat .persona_list_badge_identity .persona_avatar_frame {
  flex-basis: 2rem;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
}

.persona_list_badge_identity,
.persona_list_badge_identity .persona_avatar_identity {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  /* Frame clearance belongs to the shared avatar | identity contract. Oct 9 2026 - 5px more (--badge-avatar-name-gap-extra), her report: the name touched the frame. */
  gap: calc(1rem + 5px);
  overflow: hidden;
}

.persona_list_badge_identity .persona_badge_preview_link,
.persona_list_badge_names,
.persona_list_badge_identity .persona_switcher_identity_line {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

/* Oct 9 2026 - her report: the participant avatar is cut off on its left side again. The shared avatar frame art bleeds 8% of the avatar (about 2.6px) beyond the avatar box and the avatar | identity row clips overflow, so the row's clip box extends 0.2rem past the avatar on the left, top and bottom (padding offset by a matching negative margin, so nothing moves); this applies to every list badge (Participants, Add to Chat, etc.). */
.persona_list_badge_identity,
.persona_list_badge_identity .persona_avatar_identity {
  padding: var(--badge-frame-clearance) 0 var(--badge-frame-clearance) var(--badge-frame-clearance);
  margin: calc(-1 * var(--badge-frame-clearance)) 0 calc(-1 * var(--badge-frame-clearance)) calc(-1 * var(--badge-frame-clearance)); /* the clip box grows, the avatar and the row height stay exactly where they were */
  box-sizing: border-box;
}

.persona_list_badge_identity .persona_badge_preview_link,
.persona_list_badge_names,
.persona_list_badge_identity .persona_switcher_identity_line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  /* Oct 9 2026 - her request: less gap between the name line and the persona type line on every two-row list badge (Participants, Add to Chat, etc.): line-height 1.15 -> 1.1; the row gap is the token --badge-name-type-gap (#366). */
  gap: 2px;}

.persona_list_badge_names > :is(strong, span),
.persona_list_badge_identity .persona_switcher_identity_line > :is(strong, span) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona_list_badge_names > .persona_compact_secondary {
  display: block; /* Oct 5 2026 - Issue #54: caption sits on its own line under the name */
  color: var(--person-text-muted);}

.persona_list_badge_identity {
  flex: 1 1 auto;
  width: auto;
}

.persona_compact_type {
  flex: 0 0 auto;
  max-width: 6rem;
  overflow: hidden;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  text-overflow: ellipsis;
  white-space: nowrap;}

.persona_list_badge_identity > .persona_identity_preview {
  display: flex;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  align-self: stretch;
  overflow: hidden;
}

.persona_list_badge_identity .persona_badge_preview_link {
  min-height: 2.5rem;
  justify-content: center;
}

/* Oct 9 2026 - #366 her report: too much gap between the name and the account type under it on the list badge variant (Participants, Add to Chat, etc.). Cause: the name's link kept a 2.5rem minimum height, so the name sat in the middle of a 40px box with the type line below it (about 11px of air). In a two-row name column the link is only as tall as the name; the gap is the token --badge-name-type-gap (2px, css_visual_catalog.css). */
.persona_list_badge_names .persona_badge_preview_link {
  min-height: 0;
}

.persona_list_badge_identity .persona_avatar_frame {
  flex: 0 0 2rem;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
  max-width: 2rem;
  max-height: 2rem;
  aspect-ratio: 1 / 1;
}

.persona_list_badge_identity .persona_avatar_shape,
.persona_list_badge_identity .persona_switcher_avatar,
.messaging_group_header_v2 .persona_avatar_shape,
.messaging_group_header_v2 .persona_switcher_avatar {
  width: 100%;
  height: 100%;
}
.persona_list_badge_identity .persona_compact_glyph_avatar,
.messaging_group_header_v2 .persona_compact_glyph_avatar {
  display: grid;
  place-items: center;
  color: var(--button-full-text);
  background: var(--button-full-background);}

/* UNUSED - disabled
.persona_list_badge_identity .persona_avatar_identity_separator {
  display: none;
}
*/

.persona_list_badge_identity .persona_avatar_identity_text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;}

.persona_list_badge_identity .persona_avatar_identity_private_nickname {
  overflow: hidden;
  color: var(--page-muted-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Retired count presentation. Circle member totals now receive the canonical
   Theme-owned .counts presentation; placement remains Module-owned.
.persona_list_badge > .persona_switcher_name_suffix {
  display: inline-grid;
  flex: 0 0 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  overflow: hidden;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: var(--font-sm);
  line-height: 1;
  white-space: nowrap;
}
*/

/* UNUSED - disabled
.persona_badge_safety_actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:.35rem!important}
*/
/* UNUSED - disabled
.persona_badge_safety_actions form{display:contents}
*/
/* UNUSED - disabled
.persona_popup_action_status{margin:.4rem 0 0;text-align:right;}
*/
/* UNUSED - disabled
.persona_safety_dialog {
  box-sizing: border-box;
  width: min(34rem, calc(100vw - 2rem));
  padding: 0;
  color: var(--page-card-text);
  background: var(--page-card-background);
  border: 1px solid var(--page-card-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-backdrop);
}
*/
/* UNUSED - disabled
.persona_safety_dialog::backdrop {
  background: var(--persona-badge-persona-safety-dialog-backdrop-background-color);
}
*/
/* UNUSED - disabled
.persona_safety_dialog form {
  position: relative;
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
}
*/
/* UNUSED - disabled
.persona_safety_dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
*/
/* UNUSED - disabled
.persona_safety_dialog header h2 {
  margin: 0;
}
*/
/* UNUSED - disabled
.persona_safety_tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
}
*/
/* UNUSED - disabled
.persona_safety_tabs button {
  width: 100% !important;
  min-width: 0 !important;
}
*/
/* UNUSED - disabled
.persona_safety_tabs button[aria-selected="true"] {
  background: var(--button-full-hover-background);
}
*/
/* UNUSED - disabled
.persona_safety_dialog section {
  min-height: 7rem;
  padding: 0.75rem;
  border: 1px solid var(--page-card-border);
  border-radius: var(--radius-large);
}
*/
/* UNUSED - disabled
.persona_safety_dialog section h3 {
  margin-top: 0;
}
*/
/* UNUSED - disabled
.persona_safety_dialog .bottom_action_bar {
  padding: 0;
}
*/
/* UNUSED - disabled
.persona_profile_bottom_actions {
  width: 100%;
  margin-top: 1rem;
}
*/
/* UNUSED - disabled
.persona_profile_bottom_actions .persona_safety_menu_trigger {
  margin-left: auto !important;
}
*/
[data-ui-button-role="safety_menu"] [data-ui-role-icon] {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
}
[data-ui-button-role="safety_menu"] [data-ui-role-icon]::after {
  position: absolute;
  inset: 0;
  display: grid;
  content: "!";
  place-items: center;
  color: var(--persona-badge-data-ui-role-icon-after-text-color);
  text-shadow:var(--shadow-text-soft);}
@media (max-width: 520px) {
  /* UNUSED - disabled
.persona_safety_tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
*/
}
/* Sept 26 2026 - moved to css_root_key_catalog.css so persona theme
   resolution lives in ONE place (her explicit instruction - that file is
   now the single source for both the default --person-* or --persona-owner-*
   values and the .persona_badge:hover/:focus-within switch that re-derives
   one from the other). The version there is a superset of what was here
   (adds the 5 lines - --content-surface-background-color and friends -
   that were missing and causing the cross-persona theme bug), so this
   copy is removed rather than kept as a second, now-incomplete copy. */
.persona_badge::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: var(--persona-badge-background);
  /* Oct 6 2026 - image layer only: the color is not a valid second background-image layer and voided the whole value, so the owner's bg image never showed. The color is the background shorthand just above. */
  /* Oct 6 2026 - plus the owner's gradient overlay (--gradient-mix-header) so hover matches FULL */
  background-image: var(--persona-owner-background-image), var(--gradient-mix-header, none);
  background-repeat: var(--persona-owner-background-repeat, no-repeat), repeat;
  background-position: center;
  background-size: cover;
  border-radius: inherit;
  opacity: var(--persona-badge-background-opacity);
  pointer-events: none;
}
.persona_badge:hover::before,
.persona_badge:focus-within::before {
  opacity: var(--persona-badge-background-opacity);
}
.persona_badge_primary {
  position: relative;
  z-index: 1;
}

/* Oct 2 2026 - THE SWITCH consolidated into ONE shared file to end the
   duplicate-copy drift that kept causing "missing token" bugs (found
   missing/fixed independently in this file's copy vs persona.css's copy,
   more than once). See the @import at the top of this file and
   global_includes/theme/assets/css/persona_theme_switch.css for the
   actual rule (selectors: .persona_full_view_dialog,
   .persona_full_view_content, .persona_badge:hover,
   .persona_badge:focus-within, .persona_mini_dialog - all in that one
   file now). Add any new viewed-persona-following token there, once,
   not here. */

.persona_badge:hover,
.persona_badge:focus-within {
    border-color: color-mix(in srgb, var(--primary-accent-color) 20%, transparent);
}
/* UNUSED - disabled
.connections_header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
*/

/* UNUSED - disabled
.connections_header h2 {
  margin: 0;
}
*/

.connections_filter {
  padding: 1rem;
  color: var(--page-card-text);
  background: var(--page-card-background);
  border: var(--border-1) solid var(--page-card-border);
  border-radius: var(--radius-large);
}

.connections_filter {
  display: flex;
  box-sizing: border-box;
  align-items: flex-start;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 0.65rem;
  margin: 0;
}
@media (min-width: 641px) {
  .connections_filter > button,
  .connections_filter > .connections_clear_filter {
    width: 9rem;
  }
}

.connections_filter label {
  display: block;
  margin-bottom: 0.35rem;}

.connections_filter input[type="search"] {
  width: 100%;
  max-width: none;
  min-height: 44px;
  margin: 0;
  padding-block: .75rem;
  padding-inline: .75rem;}

.connections_filter input[type="search"]::placeholder {
  color: var(--form-placeholder-color);
  opacity: 1;
}

.connections_filter input[type="search"]:hover {
  border-color: var(--form-field-hover-border);
}

.connections_filter input[type="search"]:focus-visible {
  border-color: var(--form-field-focus-border);
  box-shadow: var(--shadow-backdrop);
}

.connections_filter button,
.connections_clear_filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0.65rem 1rem;
  text-decoration: none;
}

/* OLD COUNT SELECTOR retired 2026-08-27: .connection_count.
   Canonical count presentation is now .counts. */
.counts {
  display: inline-flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--primary-font-color);
  background: var(--primary-color);
  border: 1px solid var(--person-border);
  border-radius: 999px;}

.persona_badge_list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  grid-auto-rows: auto;
  justify-content: start;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
}

/* Sept 27 2026 - her explicit instruction: the full badge (Manage
   Personas, the login Persona Select page) must share the exact same
   colors and hover/border behavior as the compact/micro badge used
   everywhere else (messages, connections, post headers) - not its own
   separate look. Previously this had an ALWAYS-ON background/border
   (var(--person-surface)/var(--person-border)), which is why it showed
   a permanent tealish-grey box that the compact badge never shows -
   the compact badge has no background/border color at rest at all,
   only on hover (see .persona_switcher_item.persona_list_badge:hover
   in persona.css). Matched that here exactly: transparent at rest,
   and the hover rule right below reads the SAME --persona-compact-*
   tokens the compact badge reads, so the two can't drift apart again. */
.persona_badge {
  position: relative;
  width: 100%;
  min-width: 0;
  color: var(--persona-compact-text, var(--page-card-text));
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-large);
  height: auto;
}

.persona_badge:is(:hover, :focus-visible, :focus-within) {
  background: var(--persona-compact-background);
  border-color: var(--persona-compact-border);
}

.persona_badge_primary {
  display: flex;
  flex-wrap: wrap; /* Oct 14 2026 - her request (true scale): in a rail-width badge the status and action controls drop under the name instead of squeezing the name and @name into a thin column */
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  /* Sept 27 2026 - was "3px 0" (no left/right room at all). Added left
     padding per her request, plus this is also half of the avatar-frame
     fix below: the frame image bleeds -8% beyond the avatar's own box
     (.persona_avatar_frame.avatar::after in avatars.css), and with zero
     left padding here that bleed had nowhere to go before hitting the
     badge's own edge. First-pass value - I can't see the live page, so
     tell me if this needs to be bigger or smaller. */
  padding: max(3px, var(--layout-theme-zone-pad, 0px)) max(0.75rem, var(--layout-theme-zone-pad, 0px)) max(3px, var(--layout-theme-zone-pad, 0px)) max(1.1rem, var(--layout-theme-zone-pad, 0px));
  min-height: 52px;
  height: auto;
}

/* Sept 27 2026 - her report: avatars on the full badge (rendered at
   size 'medium', 4.5rem/72px per avatars.css) are scaled too large,
   leaving no room for the avatar-frame art that bleeds -8% beyond the
   avatar's own box. Scoped to .persona_badge_avatar_link only, so
   .avatar_medium's own size is untouched everywhere else it's used.
   First-pass numbers - I can't see the live page, tell me if this
   needs adjusting. */
/* Oct 9 2026 - her request: the avatar frame art must never be cut off or overlap the badge's theme zone ring (the ring is drawn outside the badge edge). Frame art overhangs the avatar by (scale - 1) / 2 of the avatar size on every side, so the margin is at least that overhang plus a little, which keeps the art inside the badge. */
.persona_badge_avatar_link {
  --persona-badge-avatar-size: 3.5rem;
  flex: 0 0 auto;
  border-radius: var(--radius-none);
  margin: max(0.4rem, calc((var(--persona-avatar-frame-scale, 1.16) - 1) / 2 * var(--persona-badge-avatar-size) + 0.2rem));
}

.persona_badge_avatar_link.avatar_medium {
  width: var(--persona-badge-avatar-size) !important;
  min-width: var(--persona-badge-avatar-size) !important;
  height: var(--persona-badge-avatar-size) !important;
  min-height: var(--persona-badge-avatar-size) !important;
}

.persona_badge_avatar {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--persona-badge-avatar-background-color);
  border: 0;
    border-radius: var(--radius-none);
}

.persona_badge_avatar_link > .persona_avatar_shape {
  border: 1px solid var(--person-border);
}

.persona_badge_content {
  flex: 1 1 9rem; /* Oct 14 2026 - the name column keeps at least 9rem; the controls wrap below it when the badge is narrower than avatar + 9rem + controls */
  min-width: 0;
}

.persona_badge_controls {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: var(--control-gap, 4px);
  margin-left: auto;
}

.persona_badge_controls > .persona_action_menu {
  order: 999;
  margin-left: auto;
}

.persona_badge_heading {
  display: grid;
  grid-template-columns: minmax(0, max-content) auto;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}

/* UNUSED - disabled
.persona_badge_name {
  color: var(--persona-name-text);
  overflow-wrap: anywhere;
  text-shadow: 0 0 6px var(--persona-name-glow);}
*/

.persona_badge_username {
  margin-top: 0.15rem;
  color: var(--person-text-muted);
  overflow-wrap: anywhere;}

.persona_badge_username_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.persona_badge_status {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.15rem 0.55rem;
  margin-top: 0.15rem;
  color: var(--connection-status-text);
  background: var(--connection-status-background);
  border: 1px solid var(--connection-status-border);
  border-radius: 999px;}

.persona_badge_meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0.55rem 0 0;
  padding: 0;
  color: var(--person-text-muted);
  list-style: none;}

.persona_badge_meta li + li::before {
  content: none;
}

.persona_badge_request_message {
  padding: 0.75rem 1rem;
  margin: 0.75rem 0 0;
  color: var(--person-text);
  background: var(--person-surface-muted);
  border-left: 4px solid var(--person-accent);
  border-radius: var(--radius-none) var(--radius-large) var(--radius-large) var(--radius-none);
  overflow-wrap: anywhere;
}

.persona_badge_preview_link {
  display: inline-flex;
  align-items: center;
  color: var(--primary-link-color);
  background: transparent;
  border: 0;
  cursor: pointer;
  list-style: none;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;}

.persona_badge_preview_link:hover,
.persona_badge_preview_link:focus-visible {
  color: var(--primary-link-hover-color);
  text-decoration-thickness: 0.14em;
}
.persona_badge_preview_link:active {
  color: var(--primary-link-active-color);
}

.persona_identity_preview {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

.persona_identity_preview > .persona_badge_preview_link {
  min-width: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;}

.persona_identity_preview > .persona_badge_preview_link:hover,
.persona_identity_preview > .persona_badge_preview_link:focus-visible {
  color: inherit;
  text-decoration: none;
}

.persona_identity_preview .persona_switcher_identity_line {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3em;
  white-space: nowrap;
}

.persona_badge_heading .persona_switcher_identity_line > strong,
.persona_list_badge_names > strong,
.persona_switcher_nickname {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.persona_compact_actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  align-self: center;
  gap: .35rem;
  margin-left: auto;
}
.persona_compact_actions .persona_badge_nickname_editor {
  margin: 0;
}

/* UNUSED - disabled
.persona_switcher_compact_text {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0.2em 0.35em;
}
*/

/* UNUSED - disabled
.persona_switcher_private_nickname {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
*/

.post_card_header > .post_identity_badge {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  /* Oct 10 2026 - her request: the extra height above the name is trimmed to match the space below the persona type, so the avatar and the two lines (name + type) are vertically centered in the badge box (visible on hover). Top and bottom padding are now both 0 (was .45rem above, 0 below); the badge keeps its min-height, so it is centered inside it. */
  padding-block: 0;
}

.post_identity_badge {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  gap: 0.45rem;
  max-width: none;
  padding: 0.45rem 3.35rem 0.45rem 0.55rem;
}

.post_identity_badge .persona_switcher_avatar {
  width: 2.25rem;
  height: 2.25rem;
}
.post_identity_badge > .post_identity_avatar_link {
  grid-column: 1;
  width: 2.25rem;
  height: 2.25rem;
  min-width: 2.25rem;
}
.post_identity_badge > .post_identity_avatar_link > .persona_avatar_shape {
  width: 100%;
  height: 100%;
}
/* UNUSED - disabled
.post_identity_badge > .persona_switcher_compact_text {
  grid-column: 2;
  min-width: 0;
}
*/

/* UNUSED - disabled
.persona_badge_safety_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
  margin-top: 1rem;
}
*/

/* UNUSED - disabled
.persona_badge_safety_actions form {
  margin: 0;
}
*/

/* UNUSED - disabled
.persona_badge_safety_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: auto !important;
  min-width: 0 !important;
  min-height: 2.15rem;
  padding: 0.35rem 0.65rem;
  text-decoration: none;
  color: var(--button-decline-text) !important;
  background: var(--button-decline-background) !important;
  border: 1px solid var(--button-decline-border) !important;
}
*/

.persona_identity_preview {
  overflow: visible !important;
}

/* ==========================================================================
   Mini Persona
   Shared identity preview opened by badge names, usernames, and avatars.
   ========================================================================== */

.persona_mini_dialog {
  /* Sept 28 2026 - explicit position, added after hover-opened MINI
     switched to dialog.show() (non-modal). A MODAL dialog gets
     `position: fixed` from the browser's own UA stylesheet automatically
     (top-layer promotion); a NON-MODAL dialog defaults to
     `position: absolute` instead, which centers against the whole
     document rather than the viewport - on any page taller than the
     viewport, `margin: auto` then centers it in the page's full height,
     landing it far down (her report: "flashes at the bottom of the page
     below the footer then disappears"). This rule was relying entirely
     on that UA default and never had its own - fine while MINI only ever
     opened modally, broken the moment a non-modal open path existed.
     Same fix .persona_full_view_dialog already has (persona.css).

     Sept 29 2026 - commented out, not deleted. persona_badge.js reverted
     to click-only/always-modal (her instruction), so the browser's own
     UA stylesheet centers this again via position:fixed/inset/margin the
     same way it always did before Sept 28 - confirmed with a headless
     browser test (real showModal() call, no custom position/inset/margin
     CSS at all): the dialog centers correctly in the viewport. Restore
     these 2 lines if a non-modal open path ever comes back. */
  /* position: fixed;
  inset: 0; */
  --persona-popup-frame-clearance: clamp(
    0px,
    18px,
    18px
  );
  /* Oct 1 2026 - her report: MINI's theme-zone frames (the .popup_zone_frame
     8-span frame and the older .theme_surface_frame) were painting over
     real content because they lived INSIDE .persona_mini_content, the
     actual visible card. Both are now appended here, to this dialog,
     instead (persona_badge.js's openPersonaMini()) - which means this
     dialog, not content, is now the thing they wrap around. For that to
     actually clear content (not just relocate the same overlap one level
     up - dialog and content are otherwise the same size, content being
     width:100%), this dialog reserves padding equal to the larger of the
     two frames' corner sizes, so content sits inset and the frames paint
     only in the ring outside it. Duplicated from cards.css's
     .theme_surface_frame and this file's own .popup_zone_frame - a custom
     property declared on a child isn't visible to this (ancestor) rule,
     so the corner-size values need their own copy here too. Keep in sync
     if either source value ever changes. */
  --theme-zone-popup-mini-frame-corner-size: 1.5rem;
  padding: 0; /* Oct 9 2026 - the inside frames are gone (Q172), so no corner clearance is reserved; the outer ring is painted outside this box */
  box-sizing: border-box;
  z-index: 2147483006;
  /* Oct 1 2026 - her direct instruction, paired with persona_badge.js's
     positionPersonaMini(): cap MINI's width at 340px (mobile's lowest
     width) instead of the old 24rem (~384px), so it never reads as a
     full-width panel on desktop now that it's tethered under the badge
     instead of centered in the viewport. */
  width: min(340px, calc(100vw - 1rem));
  max-width: 340px;
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  overflow: visible;
}

.persona_mini_dialog::backdrop {
  background: var(--persona-badge-persona-mini-dialog-backdrop-background-color);
}

/* Keep this dialog's frame-clearance padding in step with
   cards.css's .theme_surface_frame mobile override, since
   .persona_mini_dialog's --theme-zone-surface-frame-corner-size above is its own
   duplicate copy of that value, not an inherited one. */

/* Sept 21 2026 - "I want popups with (x) top right corner moved into the
   popup wrapper so it does not get cropped off anymore (use same
   positioning we have for persona full." The (x) itself already uses the
   identical .persona_popup_controls corner-positioning group persona_full
   uses (both share persona_popup_surface + persona_popup_controls) - the
   real difference was this element's own overflow handling: plain
   `overflow: auto` on both axes means ANY horizontal overflow (even the
   corner-positioned controls group sitting fractionally past the padding
   box) shows a horizontal scrollbar and can clip the corner it's
   supposed to overlap. persona_full_view_content never has this problem
   because it explicitly hides x-overflow and only scrolls vertically
   (overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable) -
   reused verbatim here, same geometry, not the same window size. */
.persona_mini_content {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  /* Oct 17 2026 - her report: MINI showed a vertical scrollbar it does not need. scrollbar-gutter: stable reserved an always-visible track; the scrollbar now appears only when the content really is taller than the screen. */
  padding: 1rem;
  /* Background is resolved after the shared persona_popup_surface contract. */
}

.persona_mini_persona {
  display: grid;
  gap: 1rem;
  min-width: 0;
  background-color: transparent;
  background-image: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.persona_mini_header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  padding-right: 0;
}

.persona_mini_header > .persona_avatar_wrapper {
  margin-block: var(--persona-popup-frame-clearance);
  margin-inline: calc(var(--persona-popup-frame-clearance) - 1rem);
}
.persona_mini_header > .persona_avatar_wrapper > .persona_avatar_frame {
  width: 4rem;
  height: 4rem;
  min-width: 4rem;
}

/* Reserve the complete frame footprint without adding a visible fallback.
   When no frame asset exists, this surrounding area remains transparent. */
.persona_mini_header > .persona_avatar_wrapper > .persona_avatar_frame::after {
  inset: calc(-1 * var(--persona-popup-frame-clearance));
}

.persona_mini_identity {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.persona_mini_identity > strong {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;}

.persona_mini_identity > span {
  color: var(--page-muted-text);
  overflow-wrap: anywhere;
}

/* Oct 4 2026 - Issue #60: this group is no longer a floating corner badge
   (position:absolute; top/right) - every popup header is now the CANON
   content_action_bar, and this wrapper (persona FULL's and MINI's action
   menu + close button group) is an ordinary in-flow flex child of that
   bar, pushed right by .standard_right's margin-left:auto. */
.persona_popup_controls {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.persona_popup_controls > .persona_action_menu {
  display: block;
  flex: 0 0 auto;
}

.persona_popup_controls > :is(.persona_action_menu, .popup_corner_close),
.persona_popup_controls > .popup_corner_close {
  position: relative;
  inset: auto;
  margin: 0;
  transform: none;
}

.persona_popup_controls > .popup_corner_close {
  place-content: center;
  place-items: center;}

/* Oct 4 2026 - Issue #60: the old shared .popup_header / .popup_header_title
   rules lived here; no popup renders that header anymore (every popup uses the
   CANON content_action_bar), so they are retired. */

.persona_mini_details {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
}

.persona_mini_details > h2,
.persona_mini_details > p {
  margin: 0;
}

.persona_mini_interests {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.45rem;
}

.persona_mini_interests > strong {
  flex-basis: 100%;
}

@media (max-width: 32rem) {
  .persona_mini_header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  }

/* Compact and full Persona viewers share one frame-ready popup family. */
:is(.persona_popup_surface, .persona_popup_surface.persona_full_view_content) {
  --persona-popup-background-color: var(--page-outer-background);
  position: relative;
  isolation: isolate;
  color: var(--popup-text-color);
  /* Background is owned by the shared Widget and Persona Viewer surface in cards.css. */
  border: var(--border-1) solid var(--popup-border-color);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-backdrop);}

.persona_popup_surface::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  background-image: var(--persona-owner-popup-frame-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

/* Mini Persona is a profile surface, not a command popup. It follows the
   Persona owner's page background color/gradient or uploaded page image. */
.persona_popup_surface.persona_mini_content {
  /* Mini inherits the shared Widget and Persona Viewer surface. */
  position: relative;
  isolation: isolate;
}

/* Oct 1 2026 - removed the "> :not(.popup_zone_frame)" z-index rule that
   used to live here: it existed only to keep this element's other
   children above .popup_zone_frame when the frame was (wrongly) a child
   of this element too. The frame is no longer appended here at all
   (persona_badge.js's openPersonaMini() now appends it to the dialog
   instead - see .persona_mini_dialog's padding above), so this element
   has nothing left to out-stack. */

/* Sept 28 2026 - her ask, after the composer popup got its own 8-area
   Popup Mini zone frame this session ("ensure [Persona MINI] has all of
   our new zones for themes. The new theme zones should be applied as
   part of the permanent architecture."): Persona MINI now consumes the
   SAME reusable .popup_zone_frame component and the SAME --popup-mini-*
   catalog tokens composer's post_create_popup_dialog uses - not a
   separate token set. Reasoning: the catalog only has two zones of this
   shape today (Popup Mini and Popup Full, css_visual_catalog.css's own
   comments), and "Popup Mini" was never composer-specific - composer
   was just the first real consumer wired up. Persona MINI is the more
   literal owner of that name, so it gets the same tokens rather than a
   third set (e.g. --popup-small-*) being invented for it. Flagged to
   her, not asked as a blocking question: if she wants Persona MINI and
   composer's popup themed independently later, that's a rename/split of
   this token group, not a re-architecture - the .popup_zone_frame
   component itself stays the same either way.

   This is a DIFFERENT, newer mechanism than the .theme_surface_frame
   this element's template already renders via renderUiTemplate('components',
   'surface_frame') (persona_identity_preview_template.php) - that older
   component only supports 3 distinct images total (one corner image
   rotated 4 ways, one horizontal side image mirrored, one vertical side
   image mirrored), which is exactly what composer's request needed to
   get past ("I may not want all sides to use the same image"). Both
   coexist harmlessly here: .theme_surface_frame stays transparent/no-op
   until its own tokens are painted, same as this new one, so nothing
   currently visible changes - she now has both a simple whole-frame
   option and a per-area option available on Persona MINI and can use
   either (or leave both off).

   The JS side (persona_badge.js's openPersonaMini()) appends the same
   8-span .popup_zone_frame markup composer's popup gets, on every Mini
   popup it builds. Oct 1 2026 - appended to the <dialog> now, not this
   element (see .persona_mini_dialog's padding, above, for why) - this
   file only owns the appearance either way.

   Structural rules + --popup-mini-* bindings below are an intentional,
   byte-for-byte duplicate of composer.css's copy (composer.css's own
   comment cross-references this one). Page-level CSS loading for this
   project is DB-registry-driven (platform_assets), not fixed per-file
   includes, so there's no way to confirm from the codebase alone that
   composer.css and persona_badge.css are always loaded together on
   every page a Mini popup can open from - duplicating this small,
   purely-additive, unscoped-class block is the safe choice until that's
   confirmed, rather than risking Persona MINI's frame silently not
   rendering on some page. If she confirms the two files always load
   together, this can be consolidated into one shared definition (cards.css
   is the natural home - it already owns the shared Widget/Persona Viewer
   surface and .theme_surface_frame). Keep both copies identical if the
   corner size / border thickness ever changes. */

/* Persona safety and relationship commands form one full-width stack. */
.persona_action_menu_items > :is(a, form),
.persona_action_menu_form > button {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  justify-self: stretch;
}

.persona_action_menu_items .persona_action_menu_command {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  justify-content: center;
  text-align: center;
}

/* Sept 27 2026 - "buttons have escaped its wrapper" / "(x) may be broken
   position too... cropped off" on both MINI and FULL. Root cause: `inset:
   auto` on a `position: fixed` [popover] leaves ALL FOUR sides
   unresolved, so the browser falls back to the "static position"
   algorithm instead of the native popover default (`inset: 0; margin:
   auto`, the same absolute-centering trick <dialog> itself uses) - that
   fallback is inconsistently implemented for top-layer-promoted elements
   across browsers, and in practice renders this menu pinned near the
   viewport's top-left/top-right instead of centered, at whatever width it
   ends up computing (the declared `width` isn't itself wrong, but with no
   anchored box to size the auto margins against, spacing collapses and
   it can look/behave like it's spanning full width). Fix: keep the same
   `inset: 0; margin: auto` centering formula every other unstyled
   [popover] on the site gets for free instead of overriding it away. */
.persona_action_menu_items[popover] {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(18rem, calc(100vw - 1rem));
  max-width: 18rem;
  gap: 0.35rem;
}

.persona_action_menu_items[popover]:not(:popover-open) {
  display: none;
}

.persona_action_menu_items:popover-open {
  display: grid;
}

.persona_action_menu_form {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
}

.persona_badge_account_type {
  color: var(--person-text-muted);}
.persona_badge_private_nickname {
  grid-column: 1 / -1;
  min-width: 0;
  max-width: 100%;
  margin-top: 0.2rem;
  overflow: hidden;
  color: var(--person-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;}
.persona_badge_nickname_editor {
  display: grid;
  justify-items: end;
  margin-left: 0.35rem;
}
.persona_badge_nickname_edit_button {
  justify-self: end;
  color: var(--persona-nickname-icon-color);
}
/* Sept 27 2026 - same latent inset:auto/margin:0 positioning bug as
   .persona_action_menu_items[popover] above (not independently reported,
   fixed alongside it since it's the identical pattern) - centers via the
   same inset:0/margin:auto formula instead of leaving position
   unresolved. */
.persona_badge_nickname_editor form[popover] {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(20rem, calc(100vw - 2rem));
  max-width: 20rem;
  margin: auto;
  padding: 0.75rem;
  color: var(--person-text);
  background: var(--person-surface);
  border: 1px solid var(--person-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-backdrop);
}
.persona_badge_nickname_editor label {
  display: block;
  margin-bottom: 0.35rem;}
.persona_badge_nickname_editor input {
  width: 100%;
  margin: 0;
}
.persona_badge_nickname_editor p {
  margin: 0.5rem 0;
  color: var(--person-text-muted);}

/* UNUSED - disabled
.persona_role_icon {
  display: flex;
  align-items: center;
  gap: 0.4rem;}
*/

/* UNUSED - disabled
.persona_badge_persona_type {
  margin-top: 0.3rem;
  
  color: var(--persona-type-text);}
*/

/* UNUSED - disabled
.persona_badge_about {
  margin: 0.85rem 0;
  overflow-wrap: anywhere;
}
*/

/* UNUSED - disabled
.persona_badge_about_empty {
  color: var(--person-text-muted);}
*/

.persona_badge_view_action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  margin: 0;
  padding: 0.55rem;
  text-decoration: none;}

/* UNUSED - disabled
.persona_badge_view_action {
  width: auto;
  min-width: 0;
}
*/

.persona_badge a:hover,
.persona_badge a:focus-visible {
  color: var(--primary-link-hover-color);
}

.persona_badge a.button:hover,
.persona_badge a.button:focus-visible,
.persona_badge a.button:active {
  border-color: var(--primary-border-color);
}

.persona_badge a.persona_badge_view_action:hover,
.persona_badge a.persona_badge_view_action:focus-visible,
.persona_badge a.persona_badge_view_action:active {
  color: var(--primary-font-color);
  -webkit-text-fill-color: var(--primary-font-color);
}

/* UNUSED - disabled
.persona_badge_future_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--control-gap, 4px);
  flex: 0 0 auto;
}
*/

/* UNUSED - disabled
.persona_badge_future_actions button:disabled {
  color: var(--person-text-muted);
  cursor: not-allowed;
  opacity: 0.75;
}
*/

.persona_badge_actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--control-gap, 4px);
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-none);
}

.persona_badge_action_form {
  display: inline-flex;
  margin: 0 0 0 auto;
}

.persona_badge_action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  text-decoration: none;
}

.persona_badge_action:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.persona_badge a:not(.button),
.persona_list_badge a:not(.button) {
  color: var(--primary-link-color);
  text-decoration: none;
}
.persona_badge a:not(.button):is(:hover, :focus-visible),
.persona_list_badge a:not(.button):is(:hover, :focus-visible) {
  color: var(--primary-link-hover-color);
  text-decoration: none;
}

.persona_badge a:focus-visible,
.persona_badge button:focus-visible,
.persona_badge summary:focus-visible {
  outline: 3px solid var(--focus-ring-color);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .connections_filter {
    flex-basis: 100%;
  }

  .connections_filter button,
  .connections_clear_filter {
    width: 100%;
  }

  .persona_badge_list {
    grid-template-columns: minmax(0, 1fr);
  }

  .persona_badge_primary {
    gap: 0.75rem;
    padding: 0.85rem;
  }

  .persona_badge_heading {
    align-items: flex-start;
    grid-template-columns: minmax(0, max-content) auto;
  }

  .persona_badge_preview_link {
    min-height: 44px;
  }

  .persona_badge_action,
  .persona_badge_view_action {
    min-height: 2.25rem; /* Oct 5 2026 - Issue #78: was 44px, taller than every other button; 2.25rem is the shared standard button height (new_base_aesthetics.css) */
  }
}

/* ==========================================================================
   Mobile Compact Persona Badges
   Give identity and right-aligned badge functions separate rows.
   ========================================================================== */

@media (max-width: 480px) {
  .persona_list_badge {
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
  }

  .persona_list_badge_identity {
    flex: 1 1 100%;
    width: 100%;
  }

  .persona_list_badge_identity .persona_avatar_identity {
    gap: 0.4rem;
  }

  .persona_compact_type {
    max-width: 4rem;
    padding: 0.08rem 0.25rem;}

  .persona_compact_actions {
    flex: 1 1 100%;
    width: 100%;
    gap: 0.2rem;
    justify-content: flex-end;
    margin-left: 0;
  }

  .persona_compact_actions .persona_badge_action {
    width: auto;
    min-width: 0;
    max-width: 6.5rem;
    padding-inline: 0.4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;}
}
.connections_filter.connections_filter_compact input[type="search"] {
  flex: 0 1 var(--search-input-maximum-width, 32rem);
  width: min(100%, var(--search-input-maximum-width, 32rem));
  max-width: var(--search-input-maximum-width, 32rem);
  min-height: 2.5rem;
}
.connections_filter.connections_filter_compact select {
  flex: 0 1 var(--search-type-width, 14rem);
  width: min(100%, var(--search-type-width, 14rem));
  max-width: var(--search-type-width, 14rem);
  min-height: 2.5rem;
}
.connections_filter.connections_filter_compact .connections_search_button {
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  height: 2.5rem !important;
  padding: 0 !important;
  color: var(--search-icon-color);
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--radius-none) !important;
  box-shadow: none !important;
}
@media (max-width: 640px) {
  .connections_filter.connections_filter_compact input[type="search"],
  .connections_filter.connections_filter_compact select {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }
}
form[role="search"] input[type="search"] {
  width: min(100%, var(--search-input-maximum-width, 32rem));
  max-width: var(--search-input-maximum-width, 32rem);
  min-height: 2.5rem;
}
form[role="search"] select {
  width: min(100%, var(--search-type-width, 14rem));
  max-width: var(--search-type-width, 14rem);
  min-height: 2.5rem;
}
@media (max-width: 640px) {
  form[role="search"] input[type="search"],
  form[role="search"] select {
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .persona_badge,
  .persona_badge_preview_link {
    scroll-behavior: auto;
    transition: none;
  }
}
.connections_filter.connections_filter_compact.connections_filter_inline {
  display: grid !important;
  width: 100%;
  max-width: none;
  grid-template-columns: minmax(0, 32rem) minmax(10rem, 14rem) 2.5rem auto;
  gap: 0.45rem;
  align-items: center;
  justify-content: start;
}
/* UNUSED - disabled
.connections_filter_inline input[type="search"],
.connections_filter_inline select {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}
*/
/* UNUSED - disabled
.connections_filter_inline .connections_search_button {
  width: 2.5rem !important;
  min-width: 2.5rem !important;
  margin: 0 !important;
}
*/
/* UNUSED - disabled
.connections_filter_inline .connections_clear_filter {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}
*/
@media (max-width: 640px) {
  .connections_filter.connections_filter_compact.connections_filter_inline {
    grid-template-columns: minmax(0, 1fr) 2.5rem;
  }
  /* UNUSED - disabled
.connections_filter_inline input[type="search"] {
    grid-column: 1/-1;
  }
*/
  /* UNUSED - disabled
.connections_filter_inline select {
    grid-column: 1;
  }
*/
  /* UNUSED - disabled
.connections_filter_inline .connections_search_button {
    grid-column: 2;
  }
*/
  /* UNUSED - disabled
.connections_filter_inline .connections_clear_filter {
    grid-column: 1/-1;
  }
*/
}

/* ==========================================================================
   Oct 8 2026 - badge frame clearance + list badge variant (her request)
   ========================================================================== */

/* Post badges: the identity box is overflow:hidden for long names, which also cut the left/top of an avatar frame (frames extend past the avatar).
   Frames now show in full, and the name sits further from the frame. */
.post_identity_badge.persona_list_badge {
  padding-left: 1rem;
}

.post_identity_badge .persona_list_badge_identity {
  gap: calc(1.375rem + 5px);
  overflow: visible;
}

/* List badge variant (messages.php Add to Chat and Participants): avatar and frame about 8% smaller (token in css_visual_catalog.css), account type under the name. */
.persona_list_badge_compact .persona_list_badge_identity,
.persona_list_badge_compact .persona_list_badge_identity .persona_avatar_identity {
  overflow: visible; /* Oct 9 2026 - #364: the inner avatar | name row clipped the frame on the left, top and bottom; the name box clips its own long text */
}

.persona_list_badge_compact .persona_list_badge_identity .persona_avatar_frame {
  flex-basis: 1.84rem;
  width: 1.84rem;
  min-width: 1.84rem;
  max-width: 1.84rem;
  height: 1.84rem;
  min-height: 1.84rem;
  max-height: 1.84rem;
}

/* ==========================================================================
   Oct 9 2026 - #367 her report: badges cut off the bottom (and sides) of the avatar frame. Frame art is wider than the avatar by its own scale (--persona-avatar-frame-scale, set on the avatar itself), and sits 2.4% lower (--persona-avatar-frame-shift), so a big frame needs more room than the badge row gave it.
   Fix inside the badge: the row keeps --badge-frame-clearance of clear room above, below and left of the avatar (the clip box above grows by that much without moving anything), and the avatar shrinks only as far as needed for its frame to fit that room: size = min(base, (base + 2 x clearance) / (scale x 1.048), 2 x clearance / (scale - 1)) (height, then the left side). Frames at or below about 1.4x keep the normal size; bigger frames get a smaller avatar.
   ========================================================================== */
.persona_list_badge:not(.persona_list_badge_chat) .persona_avatar_frame.avatar {
  --badge-avatar-base: 2rem;
  /* Oct 15 2026 - her ruling (Q1198/Q1199): the avatar always keeps its full size; a big frame is made to OVERLAP the row, so the avatar is never shrunk to fit it (this replaces the Oct 9 shrink-to-fit formula). Every avatar is the same size, so every name starts at the same x. */
  --badge-avatar-size: var(--badge-avatar-base);
  flex: 0 0 var(--badge-avatar-size) !important;
  width: var(--badge-avatar-size) !important;
  min-width: var(--badge-avatar-size) !important;
  max-width: var(--badge-avatar-size) !important;
  height: var(--badge-avatar-size) !important;
  min-height: var(--badge-avatar-size) !important;
  max-height: var(--badge-avatar-size) !important;
}

/* Oct 15 2026 - the avatar | name row must not clip the overlapping frame; the name box (.persona_list_badge_names) still clips its own long text with an ellipsis. */
.persona_list_badge:not(.persona_list_badge_chat) .persona_list_badge_identity,
.persona_list_badge:not(.persona_list_badge_chat) .persona_list_badge_identity .persona_avatar_identity {
  overflow: visible;
}

/* Oct 10 2026 #377/#378 - Leave Community / Disconnect expand in place inside the MINI menu: the summary is a normal .standard pill, with the widget-header chevron aligned right. */
.persona_action_menu_expand > summary {
  list-style: none;
  cursor: pointer;
}

.persona_action_menu_expand > summary::-webkit-details-marker {
  display: none;
}

.persona_action_menu_items .persona_action_menu_expand > summary.persona_action_menu_command {
  position: relative;
  justify-content: center;
}

.persona_action_menu_expand_glyph {
  position: absolute;
  right: 0.75rem;
}

.persona_action_menu_expand[open] .persona_action_menu_expand_glyph_closed,
.persona_action_menu_expand:not([open]) .persona_action_menu_expand_glyph_open {
  display: none;
}

.persona_action_menu_expand_panel {
  padding-top: 0.35rem;
}

/* ==========================================================================
   Oct 11 2026 - her request: the Following star sits on the BOTTOM-LEFT corner of the badge's avatar FRAME (not the avatar photo), on every badge variant. The avatar and the star share .persona_avatar_wrapper (built by renderPersonaAvatar), whose box is exactly the avatar's box; the frame art overhangs the avatar by (scale - 1) / 2 on every side, so the star is pulled out by that same amount. Star size and nudge are tokens.
   ========================================================================== */
.persona_avatar_wrapper:has(> .persona_badge_avatar_link) {
  margin: max(0.4rem, calc((var(--persona-avatar-frame-scale, 1.16) - 1) / 2 * var(--persona-badge-avatar-size, 3.5rem) + 0.2rem));
}
.persona_avatar_wrapper > .persona_badge_avatar_link {
  margin: 0;
}
.persona_avatar_wrapper > .persona_badge_follow_control {
  position: absolute;
  z-index: 4;
  /* Oct 12 2026 - her report (#504): the star sat out past the frame art. It is the exact mirror of the status box (.persona_presence_marker: right/bottom -1px): same corner distance, on the bottom LEFT of the avatar box, with or without a frame. */
  right: calc(1rem - (var(--persona-avatar-frame-scale, 1) * (1 - var(--persona-avatar-frame-x, 0.5)) - 0.5) * (100% - 2rem));
  bottom: calc(-100% * ((var(--persona-avatar-frame-scale, 1) * (1 - var(--persona-avatar-frame-y, 0.5)) - 0.5) + var(--persona-avatar-frame-scale, 1) * var(--persona-avatar-frame-shift, 0)));
  left: auto;
  width: max-content; /* Oct 18 2026 #788 - a generic form width stretched the star's form across the whole wrapper, so the star sat at the left on top of the status box; it is now only as wide as the star */
  max-width: none;
  margin: 0;
  padding: 0;
}
.persona_avatar_wrapper_xs > .persona_badge_follow_control {
  right: calc(0.5rem - (var(--persona-avatar-frame-scale, 1) * (1 - var(--persona-avatar-frame-x, 0.5)) - 0.5) * (100% - 1rem));
}
.persona_avatar_wrapper > .persona_badge_follow_control > .follow_star {
  display: grid;
  width: 1rem;
  min-width: 0;
  height: 1rem;
  min-height: 0;
  padding: 0;
  place-items: center;
  background: transparent;
  border: 0;
}
/* UNUSED - disabled
.persona_avatar_wrapper > .persona_badge_follow_control .follow_star_glyph {
  width: 1rem;
  height: 1rem;
  text-shadow:var(--glow-text-soft);}
*/

/* ==========================================================================
   RESPONSIVE TIERS (Oct 11 2026)
   Mobile-first hardening for every device size in the canon (see the DevTools
   preset list). Everything above this line is the normal CSS; these blocks
   only refine it for narrower or wider screens. Add new size fixes here.
   ========================================================================== */

/* 320–428px — Mobile Small + Mobile Large (iPhone SE, iPhone 16, Pixel 9 / 9 Pro / 10, Galaxy A55, Galaxy Z Fold 6 cover, Pixel 9 Pro Fold cover) */
@media (max-width: 428px) {
    .persona_compact_actions { flex-wrap: wrap; max-width: 100%; }
    .persona_compact_actions .persona_badge_action { white-space: normal; }
}

/* 320–767px — every phone size and iPad Mini portrait (all Mobile tiers plus 429–767) */
@media (max-width: 767px) {
    .connections_filter.connections_filter_compact.connections_filter_inline { grid-template-columns: minmax(0, 1fr) 2.5rem; }
}

/* Oct 12 2026 - her request: MINI and FULL header glyph links sit in one inline row at one height (an <a> and a <button> as inline items sat on different baselines and looked staggered). Same row recipe as the Overview glyph row. */
.persona_popup_contact_glyphs {
  display: flex;
  align-items: center;
  gap: var(--control-gap, 4px);
}