/*
 * Profile themes (specs/006-profile-themes, contracts/ui-profile-themes.md §1): a member's
 * pieces drawn around and over their profile card, in the drawer, on /account's preview
 * and in the shop. The frame is a size container. The card's width is the frame's, less
 * the room at the sides, and every piece is placed in % of that width (research R1), so a
 * piece lines up at any width, a phone's full-screen drawer included.
 *
 * Back to front (FR-002): the back bottom (z -2), behind the card's surface (z -1), then
 * the card, the body (z 1), the back top (z 2), the decoration (z 3), the front pieces
 * (z 4), the card's controls (z 5), and the card effect over all of them (z 6) (owner's
 * requests, 2026-10-20). Pieces and the effect never take a click (FR-005), so the
 * controls under the effect still work. Without a theme, nothing here changes how the
 * card looks.
 */

.profile-frame {
  container-type: inline-size;
}

.profile-frame__stage {
  /* The room comes from the theme's own <style> (profile_themes/_frame_layers). */
  --card-w: calc(100cqw / (1 + var(--frame-side, 0) / 50));
  padding:
    calc(var(--card-w) * var(--frame-above, 0) / 100)
    calc(var(--card-w) * var(--frame-side, 0) / 100)
    calc(var(--card-w) * var(--frame-below, 0) / 100);
}

.profile-frame__card {
  /* Where the profile picture sits on the card (shared/profile_drawer.css), for the decoration. */
  --avatar-top: 48px;
  --avatar-left: var(--space-4);
  --avatar-size: 88px;
  position: relative;
  isolation: isolate;
}

.profile-frame__layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* With a theme the card becomes a framed rectangle. Its surface is a layer of its own, so
   the back bottom can lie behind it. */
.profile-frame:has(.profile-frame__layers--on) .profile-frame__card {
  border-radius: var(--radius-comfortable);
}

.profile-frame:has(.profile-frame__layers--on) .profile-frame__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--color-deep-night);
  box-shadow: 0 0 0 1px var(--color-border-subtle), var(--shadow-card);
}

.profile-frame:has(.profile-frame__layers--on) .profile-card__banner {
  border-radius: var(--radius-comfortable) var(--radius-comfortable) 0 0;
}

/* In the drawer the rectangle is the drawer's panel itself (shared/profile_drawer.css): the
   card fills it, and the pieces sit on the panel's edges, sticking out into the room the
   drawer leaves around it (owner's request, 2026-10-20). The bottom pieces sit on its
   bottom edge, the end of the profile. */
dialog.profile-drawer :is(.profile-frame, .profile-frame__stage, .profile-frame__card) {
  height: 100%;
}

dialog.profile-drawer .profile-frame__stage {
  --card-w: 100cqw;
  padding: 0;
}

dialog.profile-drawer .profile-frame:has(.profile-frame__layers--on) .profile-frame__card {
  border-radius: inherit;
}

dialog.profile-drawer .profile-frame:has(.profile-frame__layers--on) .profile-frame__card::before {
  box-shadow: none;
}

/* The banner stays at the top, under the top pieces (they may cover it, or frame it); the
   sections end clear of the bottom pieces reaching into the panel. */
dialog.profile-drawer .profile-frame:has(.profile-frame__layers--on) .profile-card {
  padding-bottom: calc(var(--card-w) * var(--frame-inset-bottom, 0) / 100);
}

/* The card's controls stay above every piece and take their clicks. */
.profile-frame:has(.profile-frame__layers--on) .profile-frame__card :is(a, button, summary, input, select, textarea, label):not(.profile-card__close) {
  position: relative;
  z-index: 5;
}

.profile-frame:has(.profile-frame__layers--on) .profile-card__close {
  z-index: 5;
}

/* ---- Body: down the card's full height, its picture repeated if the card is taller (R2) */

.profile-frame__body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--card-w) * var(--side, 0) / -100);
  z-index: 1;
  width: calc(var(--card-w) * (1 + var(--side, 0) / 50));
  background-image: var(--body-src);
  background-position: top center;
  background-repeat: repeat-y;
  background-size: 100% auto;
}

/* ---- Card effect: inside the card's rectangle, over everything (theme-effect controller, R3) */

.profile-frame__effect {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  border-radius: inherit;
}

/* The effect covers the whole card, however tall: scaled to fill it from the top, a little
   of its sides cropped when the card is taller than the art. */
.profile-frame__effect img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.profile-frame__effect img[hidden] {
  display: none;
}

/* ---- Edge pieces: as wide as the card plus their side overhang, pinned to their edge */

.profile-frame__piece {
  position: absolute;
  left: calc(var(--card-w) * var(--side, 0) / -100);
  display: block;
  width: calc(var(--card-w) * (1 + var(--side, 0) / 50));
}

.profile-frame__piece img,
.profile-frame__decoration img {
  display: block;
  width: 100%;
  height: auto;
}

.profile-frame__piece--top {
  top: calc(var(--card-w) * var(--above, 0) / -100);
}

.profile-frame__piece--bottom {
  bottom: calc(var(--card-w) * var(--below, 0) / -100);
}

.profile-frame__piece--back {
  z-index: 2;
}

/* Behind the card's surface: only what sticks out past the card shows. */
.profile-frame__piece--back.profile-frame__piece--bottom {
  z-index: -2;
}

.profile-frame__piece--front {
  z-index: 4;
}

/* ---- Decoration: centred on the profile picture, larger than it (R4), under the front
   pieces: a member who wants it whole empties the front top. */

.profile-frame__decoration {
  position: absolute;
  top: calc(var(--avatar-top) + var(--avatar-size) / 2);
  left: calc(var(--avatar-left) + var(--avatar-size) / 2);
  z-index: 3;
  display: block;
  width: calc(var(--avatar-size) * var(--scale, 120) / 100);
  transform: translate(-50%, -50%);
}

/* Reduced motion: the body's poster; pictures switch through their <source> (FR-033). */
@media (prefers-reduced-motion: reduce) {
  .profile-frame__body {
    background-image: var(--body-still, var(--body-src));
  }
}

/* ---- A piece's thumbnail in its choices (/account, the shop, the admin page) */

.theme-thumbnail {
  display: block;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  object-fit: contain;
  background-color: var(--color-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
}