/* 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. */

/* Avatar frame and presence marker (moved from new_base_aesthetics.css; kept first so this file's own rules still win ties) */
/* Persona presence belongs to the shared avatar shell. */
.persona_avatar_frame {
    position: relative;
}

/* Oct 18 2026 - her request (#757): the transparent wrapper every avatar sits in. Extra width on the left and right only (0 top and bottom); the status box tucks into the bottom-left corner, the Following star into the bottom-right corner. */
.persona_avatar_wrapper {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
    box-sizing: content-box;
    margin: 0;
    padding: 0 1rem;
    background: transparent;
}
.persona_avatar_wrapper_xs {
    padding-inline: 0.5rem;
}
.persona_avatar_wrapper_xs > .persona_presence_marker {
    left: calc(0.5rem - (var(--persona-avatar-frame-scale, 1) * var(--persona-avatar-frame-x, 0.5) - 0.5) * (100% - 1rem));
}

/* Sept 30 2026 - her direct diagnosis: the marker was getting buried under .persona_avatar_frame.avatar::after... */
.persona_presence_marker {
    position: absolute;
    /* Oct 18 2026 #788 - the status box sits on the bottom-left corner of the rectangle around the avatar and its frame art. The art's overhang below and to the left, as a share of the avatar (the wrapper is as tall as the avatar, and 100% minus the side padding is its width), comes from the frame's own scale, x and y values; with no frame the overhang is zero and the box sits on the avatar's own corner. */
    left: calc(1rem - (var(--persona-avatar-frame-scale, 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)));
    z-index: 3;
    box-sizing: border-box;
    width: 10px;
    max-width: 10px;
    height: 10px;
    max-height: 10px;
    background: var(--persona-presence-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-none); /* her report: the status box is a SQUARE; --radius-small (8px since the radius tokens changed) turned this 10px... */
}

/* ==========================================================================
   Shared Public Avatars
   ========================================================================== */

/* ==========================================================================
   Avatar Structure
   ========================================================================== */

/* One owner for public avatar structure and image fitting. */
.persona_avatar_frame.avatar {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  overflow: visible;
  place-items: stretch;
}

.persona_avatar_frame.avatar > .persona_avatar_shape {
  z-index: 1;
  display: block;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.persona_avatar_frame.avatar > .persona_avatar_shape > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Every shared avatar can receive the displayed Persona owner's frame image. */
.persona_avatar_frame.avatar::after {
  position: absolute;
  z-index: 2;
  /* Oct 5 2026 - her report: the avatar circle was too big for the frame.
     The frame is now sized from the frame's own circular opening instead of
     a fixed 116% box. --persona-avatar-frame-scale is the frame's width as a
     multiple of the avatar; -x / -y are where the center of the frame's
     circular opening sits inside the frame image (0-1). left/top place the
     frame so that center lands exactly on the avatar's midpoint, so the
     opening wraps the circle instead of sitting offset. The server sets all
     three (avatar_frame_catalog.php) for each catalog frame. A frame with no
     values set (a theme-supplied one) keeps the old 116% / slight-drop
     placement through these same fallbacks. */
  width: calc(var(--persona-avatar-frame-scale, 1.16) * 100%);
  aspect-ratio: 1 / 1;
  left: calc(50% - var(--persona-avatar-frame-x, 0.5) * var(--persona-avatar-frame-scale, 1.16) * 100%);
  top: calc(50% - var(--persona-avatar-frame-y, 0.5) * var(--persona-avatar-frame-scale, 1.16) * 100%);
  grid-area: 1 / 1;
  content: "";
  background-image: var(--persona-owner-avatar-frame-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(var(--persona-avatar-frame-shift, 2.4%));
  pointer-events: none;
}

.persona_avatar_frame.avatar.persona_portrait_frame::after {
  background-image: var(--persona-owner-portrait-frame-image);
}

/* ==========================================================================
   Avatar Shapes
   ========================================================================== */

.persona_avatar_shape_oval,
.persona_avatar_shape_circle {
  border-radius: 50%;
}

/* Oct 6 2026 - her request: every circle avatar is a little bigger than its frame box, centered, scaled by its own size (--avatar-circle-grow-ratio in css_visual_catalog.css: 10px at the 24rem persona.php widget avatar, the same share at every other size). The frame image is placed from the avatar box, so it does not move. */
.persona_avatar_frame.avatar > .persona_avatar_shape.persona_avatar_shape_circle {
  width: calc(100% * (1 + calc(0.625 / 24)));
  height: calc(100% * (1 + calc(0.625 / 24)));
  justify-self: center;
  align-self: center;
}

.persona_avatar_shape_rounded_square {
  border-radius: 22%;
}

.persona_avatar_shape_square {
  border-radius: var(--radius-none);
}

.persona_avatar_shape_hexagon {
  clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0 50%);
}

.persona_avatar_shape_shield {
  clip-path: polygon(50% 0, 92% 14%, 86% 68%, 50% 100%, 14% 68%, 8% 14%);
}

.persona_avatar_shape_star {
  clip-path: polygon(
    50% 2%,
    61% 35%,
    96% 35%,
    68% 55%,
    79% 90%,
    50% 69%,
    21% 90%,
    32% 55%,
    4% 35%,
    39% 35%
  );
}

.persona_avatar_shape_heart {
  border-radius: var(--radius-none);
  clip-path: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 91C43 83 8 62 8 34C8 17 19 8 33 8C42 8 48 13 50 20C52 13 58 8 67 8C81 8 92 17 92 34C92 62 57 83 50 91Z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='black' d='M50 91C43 83 8 62 8 34C8 17 19 8 33 8C42 8 48 13 50 20C52 13 58 8 67 8C81 8 92 17 92 34C92 62 57 83 50 91Z'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
}

/* ==========================================================================
   Avatar Sizes
   ========================================================================== */

.avatar_xs {
  width: 1.5rem !important;
  min-width: 1.5rem !important;
  height: 1.5rem !important;
  min-height: 1.5rem !important;
}

.avatar_sm {
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  min-height: 2rem !important;
}

.avatar_medium {
  width: 4.5rem !important;
  min-width: 4.5rem !important;
  height: 4.5rem !important;
  min-height: 4.5rem !important;
}

.avatar_large {
  width: 5rem !important;
  min-width: 5rem !important;
  height: 5rem !important;
  min-height: 5rem !important;
}

.avatar_xl {
  width: 6.5rem !important;
  min-width: 6.5rem !important;
  height: 6.5rem !important;
  min-height: 6.5rem !important;
}

/* Named Persona presentation variants. */
.avatar_persona_mini {
  width: 4rem !important;
  min-width: 4rem !important;
  height: 4rem !important;
  min-height: 4rem !important;
}

.avatar_persona_full {
  width: 6rem !important;
  min-width: 6rem !important;
  height: 6rem !important;
  min-height: 6rem !important;
}

/* RETIRED 2026-08-28: special is not an accepted Persona avatar renderer size.
.avatar_special {
  width: 6.5rem !important;
  min-width: 6.5rem !important;
  height: 6.5rem !important;
  min-height: 6.5rem !important;
}
*/

/* Fluid Full Persona portrait; its Widget owns the available dimensions. */
.avatar_portrait {
  width: 100%;
  min-width: 0;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Avatar Context Sizes
   ========================================================================== */

/* The header uses the shared medium avatar component at header scale. */
.site_header .persona_avatar_frame.avatar_medium {
  width: 3rem;
  height: 3rem;
}

/* ==========================================================================
   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–767px — every phone size and iPad Mini portrait (all Mobile tiers plus 429–767) */
@media (max-width: 767px) {
    .persona_avatar_frame { flex-shrink: 0; }
}

/* 768–1024px — Tablet (own tier): iPad Mini landscape (768), Galaxy Z Fold 6 unfolded (~884), Pixel 9 Pro Fold unfolded (~841), Surface Pro 10 / 13 (~912), 1024 */
@media (min-width: 768px) and (max-width: 1024px) {
    .persona_avatar_frame { flex-shrink: 0; }
}

/* 1025–1400px — Narrow Desktop: any desktop browser window narrower than the full site width (Nest Hub Max 1280, laptops, resized windows); the three-column layout switches on at 1401 */
@media (min-width: 1025px) and (max-width: 1400px) {
    .persona_avatar_frame { flex-shrink: 0; }
}