/* ============================================================
 * Satya v26 — Public Profile view (/{username})
 * ------------------------------------------------------------
 * Per-view exceptions for app/Views/v26/user/profile.php. base.css
 * carries the cards / grids / lists / avatars; the classes below are
 * the primitives it genuinely lacks. Color comes only from theme
 * tokens; structure from --s-* / --radius-* / --shadow-* knobs.
 *
 * Justification, class by class:
 *  .pf-cover / .pf-cover--custom
 *      Hero cover band with a calm token gradient; the --custom modifier
 *      drops the gradient so an uploaded CoverManager photo shows through.
 *      base.css has no cover/banner primitive (circles keeps its own .c-cover).
 *  .pf-headcard
 *      The identity card that overlaps the cover (negative margin + z-index).
 *      A unique hero-overlap geometry no base surface provides.
 *  .pf-avatar
 *      Hero avatar: bigger than base .s-avatar's --xl (5rem) cap, plus the
 *      white "ring" framing it against the cover. Extends .s-avatar (sized via
 *      --s-avatar-size), so renderAvatar()'s Tailwind size classes are moot.
 *  .pf-thumb
 *      4:3 media geometry for an offering (product) tile — base has no media box.
 *  .pf-post-img
 *      Fixed square thumbnail for a post row (larger than .s-list__icon's 2.25rem).
 *  .pf-fab
 *      Floating "book a session" affordance (own profile) — a fixed pill CTA
 *      with no base equivalent. Calm, not urgent; no pulse/scarcity.
 *  .privacy-toggle* / .privacy-dropdown / .privacy-option / .privacy-icon
 *      Token shim for the REUSED legacy partials/privacy_toggle.php (Tailwind-
 *      authored; the v26 chrome ships no Tailwind). Restores the toggle button +
 *      dropdown geometry with tokens only, preserving every JS hook the partial
 *      and privacy-toggle.js bind (.privacy-toggle / .privacy-option / data-*).
 *      Same pattern as posts.css shimming the Tailwind comments partial.
 * ============================================================ */

/* ── Cover band ────────────────────────────────────────────── */
.pf-cover {
  height: 12.5rem;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 70% 60% at 20% 20%, var(--primary-400), transparent 60%),
    linear-gradient(135deg, var(--primary-700), var(--primary-500) 55%, var(--primary-300));
  background-size: cover;
  background-position: center;
}
.pf-cover--custom { background: var(--bg-tertiary); }
@media (min-width: 1024px) { .pf-cover { height: 15rem; } }
@media (max-width: 640px)  { .pf-cover { height: 8.5rem; } }

/* ── Identity card overlapping the cover ───────────────────── */
.pf-headcard {
  margin-top: -3.25rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) { .pf-headcard { margin-top: -2.5rem; } }

/* ── Hero avatar (extends .s-avatar) ───────────────────────── */
.pf-avatar {
  --s-avatar-size: 6rem;
  padding: 0.3rem;
  background: var(--bg-primary);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
}
@media (max-width: 640px) { .pf-avatar { --s-avatar-size: 4.5rem; } }

/* ── Offering (product) tile media ─────────────────────────── */
.pf-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  margin-bottom: var(--s-space-3);
}

/* ── Post row thumbnail ────────────────────────────────────── */
.pf-post-img {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  display: grid;
  place-items: center;
  color: var(--brand-primary);
  font-size: 1.25rem;
}

/* ── Floating "book a session" CTA (own profile) ───────────── */
.pf-fab {
  position: fixed;
  bottom: var(--s-space-5);
  right: var(--s-gutter);
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  padding: var(--s-space-3) var(--s-space-5);
  border-radius: var(--radius-pill);
  background: var(--brand-primary);
  color: var(--text-inverse, #fff);
  font-size: var(--s-text-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: transform var(--s-transition), background var(--s-transition);
}
.pf-fab:hover { transform: translateY(-2px); }
@media (max-width: 640px) {
  .pf-fab { left: 50%; right: auto; transform: translateX(-50%); }
  .pf-fab:hover { transform: translateX(-50%) translateY(-2px); }
}

/* ── Privacy-toggle shim (reused Tailwind partial) ─────────── */
.privacy-toggle-wrapper { position: relative; display: inline-block; line-height: 0; }
.privacy-toggle {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 2px solid var(--bg-primary);
  border-radius: var(--radius-pill);
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-sm);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}
.privacy-toggle[disabled] { cursor: default; }
.privacy-icon { display: inline-block; }
.privacy-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 11rem;
  padding: var(--s-space-1);
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 120;
}
.privacy-option {
  display: flex;
  align-items: center;
  gap: var(--s-space-2);
  width: 100%;
  padding: var(--s-space-2);
  text-align: left;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-size: var(--s-text-sm);
  cursor: pointer;
}
.privacy-option:hover { background: var(--bg-secondary); }