/**
 * Profile — workspace presentation (UX Stage 3)
 * Location: /public_html/profile/assets/profile-workspace.css
 *
 * Presentation only. Every id, class and handler that profile/assets/script.js,
 * profile-mint.js, profile-theme.js and posts/* rely on is unchanged; this sheet
 * restyles them. Scoped to body.xln-profile (set in profile/index.php) because
 * profile/assets/styles.css is also Stream's layout sheet.
 *
 * Colours come only from the semantic tokens in nav/shell.css, so the page is
 * built for Light and Dark at once. Density: spacious header, standard cards,
 * compact metadata.
 */

body.xln-profile { background: var(--mx-app-bg); color: var(--mx-text-primary); }
.xln-profile .main { padding: 24px 32px 56px; }
.xln-profile .xln-page { max-width: 1180px; margin: 0 auto; }

/* ── Identity card ──────────────────────────────────────────────────────── */
.xln-profile .profile-card {
  background: var(--mx-surface-primary);
  border: 1px solid var(--mx-border-default);
  border-radius: 20px;
  box-shadow: var(--mx-shadow);
  margin-bottom: 20px;
}
/* The cover frames the identity; it no longer dominates the page. */
.xln-profile .cover-image { height: 184px; }
.xln-profile .cover-image::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 72px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .28));
}
.xln-profile .edit-cover-btn {
  z-index: 2; min-height: 36px; padding: 0 14px; border-radius: 10px;
  background: rgba(10, 10, 15, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
  font: 600 13px/1 var(--mx-font-body); backdrop-filter: blur(8px);
}
.xln-profile .edit-cover-btn:hover { background: rgba(10, 10, 15, .78); }

.xln-profile .profile-body { padding: 0 28px 0; }
.xln-profile .profile-info-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end;
  gap: 20px; margin-top: -48px; padding-bottom: 20px;
}
.xln-profile .profile-avatar {
  width: 112px; height: 112px; border-radius: 24px; overflow: hidden; position: relative; z-index: 1;
  border: 4px solid var(--mx-surface-primary); background: var(--mx-surface-secondary);
  box-shadow: var(--mx-shadow);
}
.xln-profile .profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.xln-profile .profile-avatar:hover { transform: none; background: var(--mx-surface-secondary); }
.xln-profile .profile-avatar:focus-visible { outline: 2px solid var(--mx-focus-ring-color); outline-offset: 3px; }

.xln-profile .profile-details { padding-top: 56px; min-width: 0; }
.xln-profile .profile-name {
  margin: 0; font: 700 var(--mx-type-page-title)/1.15 var(--mx-font-display); letter-spacing: -.015em;
  color: var(--mx-text-primary); overflow-wrap: anywhere;
}
.xln-profile .profile-role {
  display: inline-flex; width: fit-content; max-width: 100%; align-items: center; gap: 6px; margin-top: 8px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--mx-accent-gold-soft); color: var(--mx-accent-gold-text);
  font: 600 12px/1.5 var(--mx-font-body);
}
.xln-profile .profile-role .iconify, .xln-profile .profile-role svg { color: var(--mx-accent-gold-text) !important; }

/* Metrics: one compact row, left-aligned, value over label. */
.xln-profile .profile-stats {
  display: flex; flex-wrap: wrap; gap: 0; margin: 14px 0 0; justify-content: flex-start;
}
.xln-profile .stat-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 0 18px; border-left: 1px solid var(--mx-border-default); text-align: left;
}
.xln-profile .stat-item:first-child { padding-left: 0; border-left: 0; }
.xln-profile .stat-val { font: 700 18px/1.2 var(--mx-font-display); }
/* profile-theme.js tints these with the cover palette (!important); a palette
   colour is not guaranteed readable on either theme, so values stay text-primary. */
.xln-profile .profile-stats .stat-val { color: var(--mx-text-primary) !important; }
.xln-profile .stat-label {
  font: 600 11px/1.3 var(--mx-font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--mx-text-muted);
}

/* Actions: one gold primary (Dashboard / Message), everything else secondary. */
.xln-profile .profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-bottom: 4px; }
.xln-profile .profile-actions .btn,
.xln-profile .profile-actions a.btn {
  min-height: 40px; padding: 0 16px !important; border-radius: 10px !important;
  font: 600 14px/1 var(--mx-font-body);
}
.xln-profile .profile-actions .btn-primary {
  background: var(--mx-accent-gold); color: var(--mx-accent-gold-ink); border: 1px solid var(--mx-accent-gold-border);
}
.xln-profile .profile-actions .btn-primary:hover { background: var(--mx-accent-gold-strong); }
.xln-profile .profile-actions .btn-ghost {
  background: transparent; color: var(--mx-text-primary); border: 1px solid var(--mx-border-strong);
}
.xln-profile .profile-actions .btn-ghost:hover { background: var(--mx-hover-surface); }
/* profile-mint.js injects its own button styles; restyled as a secondary action. */
.xln-profile .profile-actions .mxl-mint-btn {
  min-height: 40px; padding: 0 16px; border-radius: 10px;
  background: transparent; color: var(--mx-text-primary); border: 1px solid var(--mx-border-strong);
  box-shadow: none; font: 600 14px/1 var(--mx-font-body);
}
.xln-profile .profile-actions .mxl-mint-btn:hover { background: var(--mx-hover-surface); color: var(--mx-text-primary); }
.xln-profile .profile-actions .mxl-mint-menu {
  background: var(--mx-surface-overlay); border: 1px solid var(--mx-border-strong); box-shadow: var(--mx-shadow-strong);
}
.xln-profile .profile-actions .mxl-mint-item { color: var(--mx-text-primary); }
.xln-profile .profile-actions .mxl-mint-item:hover { background: var(--mx-hover-surface); }

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.xln-profile .tabs-nav {
  display: flex; gap: 4px; margin: 0; padding: 0 0 0;
  border-top: 1px solid var(--mx-border-default); overflow-x: auto; scrollbar-width: none;
}
.xln-profile .tabs-nav::-webkit-scrollbar { display: none; }
.xln-profile .tab-btn {
  flex: 0 0 auto; position: relative; min-height: 48px; padding: 0 14px;
  background: none; border: 0; color: var(--mx-text-muted);
  font: 600 14px/1 var(--mx-font-body); cursor: pointer;
}
.xln-profile .tab-btn:hover { color: var(--mx-text-primary); }
.xln-profile .tabs-nav .tab-btn.active { color: var(--mx-text-primary) !important; }  /* palette tint (profile-theme.js) is not contrast-safe */
.xln-profile .profile-actions, .xln-profile .profile-info-row { margin-bottom: 0; }
.xln-profile .tabs-nav { margin-top: 0 !important; }
.xln-profile .tab-btn.active::after, .xln-profile .tab-btn::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px;
  background: transparent;
}
.xln-profile .tab-btn.active::after { background: var(--mx-accent-gold); }
.xln-profile .tab-btn:focus-visible { outline: 2px solid var(--mx-focus-ring-color); outline-offset: -2px; border-radius: 8px; }

/* ── Content grid and side rail ─────────────────────────────────────────── */
.xln-profile .content-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 20px; margin-top: 0; }
.xln-profile .content-grid > .stack { gap: 16px; }
.xln-profile .sidebar-card,
.xln-profile .xln-contrib,
.xln-profile .contributions-card {
  background: var(--mx-surface-primary); border: 1px solid var(--mx-border-default);
  border-radius: 16px; box-shadow: none; padding: var(--mx-pad-standard, 20px);   /* density: standard */
}
.xln-profile .sidebar-card-title {
  margin: 0 0 12px; font: 700 var(--mx-type-card-title)/1.3 var(--mx-font-display); color: var(--mx-text-primary);
}
.xln-profile .xln-creator-info { display: grid; gap: 12px; margin: 0; font-size: 13px; line-height: 1.5; }
.xln-profile .xln-creator-info dt {
  font: 600 11px/1.3 var(--mx-font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--mx-text-muted);
}
.xln-profile .xln-creator-info dd { margin: 2px 0 0; color: var(--mx-text-primary); overflow-wrap: anywhere; }
.xln-profile .xln-creator-info .xln-handle { font-family: var(--mx-font-mono); color: var(--mx-accent-gold-text); }

/* Composer: one card language with the side rail. Behaviour is posts/*. */
.xln-profile .create-post-card {
  background: var(--mx-surface-primary) !important; border: 1px solid var(--mx-border-default) !important;
  border-radius: 16px !important; box-shadow: none !important;
}
.xln-profile .create-post-card .content-input-field {
  background: var(--mx-input-bg) !important; color: var(--mx-text-primary) !important;
  border: 1px solid var(--mx-input-border) !important; border-radius: 12px !important;
}
.xln-profile .create-post-card .content-input-field::placeholder { color: var(--mx-placeholder) !important; }
.xln-profile .create-post-card .media-btn {
  background: var(--mx-surface-subtle) !important; color: var(--mx-text-secondary) !important;
  border: 1px solid var(--mx-border-default) !important;
}
.xln-profile .create-post-card .media-btn:hover { color: var(--mx-text-primary) !important; background: var(--mx-hover-surface) !important; }
.xln-profile .create-post-card .content-input-info { color: var(--mx-text-muted) !important; }
.xln-profile .create-post-card .content-input-footer { border-top-color: var(--mx-border-default) !important; }
.xln-profile .create-post-card .content-input-submit:disabled { opacity: .55; }

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .xln-profile .main { padding: 20px 20px 48px; }
  .xln-profile .content-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ── Phone: identity → actions → tabs → composer/posts → secondary context ─ */
@media (max-width: 768px) {
  .xln-profile .main { padding: 12px 12px 32px; }
  .xln-profile .profile-card { border-radius: 16px; }
  .xln-profile .cover-image { height: 128px; }
  .xln-profile .profile-body { padding: 0 16px; }
  /* Avatar overlaps the cover; name and role sit beside it; one compact
     metric line; full-width actions. (Overrides the legacy ≤860px centring.) */
  .xln-profile .profile-info-row {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px 14px;
    margin-top: 0; text-align: left; padding-bottom: 14px; flex-wrap: nowrap;
  }
  /* .profile-details is a plain wrapper; on phones its children join the grid
     so the metric line can run full width under the identity block. */
  .xln-profile .profile-details { display: contents; }
  .xln-profile .profile-avatar {
    grid-column: 1; grid-row: 1 / span 2; width: 76px; height: 76px; border-radius: 18px; margin: 14px 0 0;
  }
  .xln-profile .profile-name { grid-column: 2; grid-row: 1; align-self: end; margin-top: 14px; font-size: 22px; }
  .xln-profile .profile-role { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .xln-profile .profile-stats { grid-column: 1 / -1; grid-row: 3; margin: 4px 0 0; justify-content: flex-start; width: auto; gap: 0; }
  .xln-profile .profile-actions { grid-row: 4; }
  .xln-profile .stat-item { flex-direction: row; align-items: baseline; gap: 5px; padding: 0 10px; }
  .xln-profile .stat-val { font-size: 15px; }
  .xln-profile .stat-label { font-size: 11px; letter-spacing: .04em; }
  .xln-profile .cover-image { height: 136px; }
  /* profile-theme.js's cover player: tighter on phones, 36px controls. */
  .xln-profile #coverImage > div:not(.edit-cover-btn) { max-width: calc(100% - 16px); }
  .xln-profile #coverImage > div > span:nth-of-type(2) { display: none !important; }
  .xln-profile #coverImage > div > button { min-width: 36px !important; min-height: 36px !important; }
  .xln-profile .profile-actions { grid-column: 1 / -1; justify-content: stretch; }
  .xln-profile .profile-actions > * { flex: 1 1 140px; }
  .xln-profile .profile-actions .btn, .xln-profile .profile-actions a.btn,
  .xln-profile .profile-actions .mxl-mint-btn { width: 100%; min-height: 44px; justify-content: center; }
  .xln-profile .tab-btn { min-height: 44px; padding: 0 12px; }
  /* Cover-theme player controls: full touch targets on phones. */
  .xln-profile .cb-btn { min-width: 36px; min-height: 36px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UX3.1 — FLAGSHIP PROFILE
   Identity → work → connection → contribution → ownership. Presentation only;
   every id and handler above is unchanged. Tokens only (Light / Dark / System).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Identity ───────────────────────────────────────────────────────────── */
.xln-profile .xp-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.xln-profile .xp-verified { flex: 0 0 auto; width: 22px; height: 22px; color: var(--mx-accent-gold-text); }
.xln-profile .xp-verified svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.xln-profile .xp-verified .xp-verified-tick { stroke: var(--mx-surface-primary); }
.xln-profile .xp-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 6px;
  font-size: 13.5px; color: var(--mx-text-secondary);
}
.xln-profile .xp-handle { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-family: var(--mx-font-mono); font-size: 13px; color: var(--mx-text-secondary); }
.xln-profile .xp-loc { display: inline-flex; align-items: center; gap: 4px; }
.xln-profile .xp-loc svg { width: 15px; height: 15px; color: var(--mx-text-muted); }
.xln-profile .xp-meta .profile-role { margin: 0; padding: 2px 9px; font-size: 11.5px; }
.xln-profile .xp-headline {
  margin: 10px 0 0; max-width: 62ch; font: 600 15.5px/1.45 var(--mx-font-body); color: var(--mx-text-primary);
}
.xln-profile .xp-summary { margin: 4px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.5; color: var(--mx-text-secondary); }
/* Current direction: one public goal, linking to the Work together card. */
.xln-profile .xp-direction {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-top: 10px; padding: 6px 10px 6px 8px;
  border: 1px solid var(--mx-accent-gold-border); border-radius: 10px; background: var(--mx-accent-gold-soft);
  color: var(--mx-text-primary); text-decoration: none; font-size: 13px; line-height: 1.3;
}
.xln-profile .xp-direction:hover { background: var(--mx-selected-surface); }
.xln-profile .xp-direction-k {
  flex: 0 0 auto; font: 700 10.5px/1 var(--mx-font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--mx-accent-gold-text);
}
.xln-profile .xp-direction-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.xln-profile .xp-direction-more { flex: 0 0 auto; font-weight: 700; color: var(--mx-text-secondary); }
/* The avatar overlaps the cover from the top; a taller identity block grows
   downward instead of pushing the avatar off the cover. Actions sit at the
   block's baseline. */
.xln-profile .profile-info-row { align-items: start; position: relative; z-index: 3; }   /* above the cover's theme player */
.xln-profile .profile-details { padding-top: 58px; }
.xln-profile .profile-actions { align-self: end; }

/* ── Side rail: Work together ───────────────────────────────────────────── */
.xln-profile .xp-work-label {
  margin: 14px 0 8px; font: 700 10.5px/1.3 var(--mx-font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mx-text-muted);
}
.xln-profile .xp-work .sidebar-card-title + .xp-work-label { margin-top: 0; }
.xln-profile .xp-goals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.xln-profile .xp-goal {
  display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--mx-border-default); background: var(--mx-surface-subtle);
}
.xln-profile .xp-goal-type { font: 700 10.5px/1.3 var(--mx-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mx-accent-gold-text); }
.xln-profile .xp-goal-label { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--mx-text-primary); overflow-wrap: anywhere; }
.xln-profile .xp-work-note { margin: 0; font-size: 13px; line-height: 1.55; color: var(--mx-text-secondary); }
.xln-profile .xp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.xln-profile .xp-chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--mx-border-default); background: var(--mx-surface-subtle);
  color: var(--mx-text-primary); font-size: 13px; font-weight: 600; text-decoration: none;
}
.xln-profile .xp-chip:hover { border-color: var(--mx-border-strong); background: var(--mx-hover-surface); }
.xln-profile .xp-work-actions { display: grid; gap: 8px; margin-top: 16px; }
.xln-profile .xp-btn {
  flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--mx-border-strong); background: transparent;
  color: var(--mx-text-primary); font: 650 13.5px/1 var(--mx-font-body); text-decoration: none; cursor: pointer;
}
.xln-profile .xp-btn:hover { background: var(--mx-hover-surface); }
.xln-profile .xp-btn--primary { background: var(--mx-accent-gold); color: var(--mx-accent-gold-ink); border-color: var(--mx-accent-gold-border); }
.xln-profile .xp-btn--primary:hover { background: var(--mx-accent-gold-strong); }
.xln-profile .xp-link {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--mx-accent-gold-text); font: 650 13.5px/1.3 var(--mx-font-body); text-decoration: none;
}
.xln-profile .xp-link:hover { text-decoration: underline; }
.xln-profile .xp-muted { color: var(--mx-text-secondary); }

/* ── About ──────────────────────────────────────────────────────────────── */
.xln-profile .xp-about .card-body { display: grid; gap: 0; padding: 0; }
.xln-profile .xp-about .about-section,
.xln-profile .xp-about .xp-about-sec { padding: 20px 22px; }
.xln-profile .xp-about .xp-about-sec { border-top: 1px solid var(--mx-border-default); }
.xln-profile .xp-about .about-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.xln-profile .xp-about-h { margin: 0; font: 700 18px/1.3 var(--mx-font-display); color: var(--mx-text-primary); }
.xln-profile .xp-about .about-text { margin: 0; max-width: 68ch; font-size: 15px; line-height: 1.7; color: var(--mx-text-primary); overflow-wrap: anywhere; }
.xln-profile .xp-about .about-text.xp-muted { color: var(--mx-text-secondary); }
.xln-profile .xp-website { margin-top: 10px; }
.xln-profile .xp-website a { color: var(--mx-accent-gold-text); font-weight: 600; overflow-wrap: anywhere; }
.xln-profile .xp-about-sh {
  margin: 0 0 10px; font: 700 10.5px/1.3 var(--mx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mx-text-muted);
}
.xln-profile .xp-work-counts { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--mx-text-secondary); }
.xln-profile .xp-work-counts b { color: var(--mx-text-primary); font: 700 16px/1 var(--mx-font-display); margin-right: 3px; }
.xln-profile .xp-account { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ── Work library (Media tab) ───────────────────────────────────────────── */
.xln-profile #media-tab .card-body { padding: 20px 22px; }
.xln-profile .xw-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.xln-profile .xw-title { margin: 0; font: 700 18px/1.3 var(--mx-font-display); color: var(--mx-text-primary); }
.xln-profile .xw-count { font: 600 12px/1 var(--mx-font-mono); color: var(--mx-text-muted); }
.xln-profile .xw-section { margin-top: 18px; }
.xln-profile .xw-section-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font: 700 10.5px/1.3 var(--mx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mx-text-muted);
}
.xln-profile .xw-section-title span { font-weight: 600; color: var(--mx-text-secondary); }
.xln-profile .xw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.xln-profile .xw-grid--audio { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.xln-profile .xw-item {
  display: flex; flex-direction: column; min-width: 0; padding: 0; margin: 0; text-align: left; cursor: pointer;
  border: 1px solid var(--mx-border-default); border-radius: 14px; overflow: hidden;
  background: var(--mx-surface-primary); color: var(--mx-text-primary); font: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.xln-profile .xw-item:hover { border-color: var(--mx-border-strong); transform: translateY(-1px); }
.xln-profile .xw-item:focus-visible { outline: 2px solid var(--mx-focus-ring-color); outline-offset: 2px; }
.xln-profile .xw-thumb {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--mx-surface-secondary);
}
.xln-profile .xw-thumb img, .xln-profile .xw-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xln-profile .xw-item--video .xw-thumb { background: #07070B; }
.xln-profile .xw-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 46px; height: 46px;
  display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(7, 7, 11, .62);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.xln-profile .xw-play svg { width: 20px; height: 20px; fill: currentColor; margin-left: 2px; }
.xln-profile .xw-dur {
  position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px;
  background: rgba(7, 7, 11, .75); color: #fff; font: 600 11px/1 var(--mx-font-mono);
}
.xln-profile .xw-dur:empty { display: none; }
.xln-profile .xw-item--audio .xw-thumb { aspect-ratio: auto; height: 72px; padding: 0 16px; place-items: stretch; }
.xln-profile .xw-wave { display: flex; align-items: center; gap: 2px; width: 100%; height: 100%; padding: 16px 0; }
.xln-profile .xw-wave i { flex: 1 1 0; border-radius: 2px; background: rgba(var(--mx-fg-rgb), .24); }
.xln-profile .xw-item--document .xw-thumb { aspect-ratio: 4 / 3; padding: 12px; }
.xln-profile .xw-item--document canvas {
  display: none; max-width: 100%; max-height: 100%; width: auto; height: auto;
  background: #fff; border-radius: 3px; box-shadow: 0 4px 14px rgba(var(--mx-shadow-rgb), calc(.2 * var(--mx-shadow-k)));
}
.xln-profile .xw-item--document.is-rendered canvas { display: block; }
.xln-profile .xw-doc-fallback { font: 700 13px/1 var(--mx-font-mono); letter-spacing: .08em; color: var(--mx-text-muted); }
.xln-profile .xw-item--document.is-rendered .xw-doc-fallback { display: none; }
.xln-profile .xw-body { display: grid; gap: 4px; padding: 10px 12px 12px; min-width: 0; }
.xln-profile .xw-item-title {
  font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--mx-text-primary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.xln-profile .xw-item-meta { display: flex; flex-wrap: wrap; gap: 5px; font: 500 11.5px/1.3 var(--mx-font-mono); color: var(--mx-text-muted); }
.xln-profile .xw-empty { padding: 28px 8px; text-align: center; }
.xln-profile .xw-empty p { margin: 6px auto 0; max-width: 44ch; font-size: 13.5px; line-height: 1.55; }
.xln-profile .xw-section--identity .xw-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); }
/* Media modal */
.xw-modal { display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--mx-scrim); }
.xw-modal .xw-modal-content {
  width: min(880px, 100%); max-height: 92vh; overflow: auto; padding: 0;
  background: var(--mx-surface-overlay); color: var(--mx-text-primary);
  border: 1px solid var(--mx-border-default); border-radius: 18px; box-shadow: var(--mx-shadow-strong);
}
.xw-modal-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--mx-border-default); }
.xw-modal-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; }
.xw-modal .xw-modal-close {
  position: static; width: 44px; height: 44px; border: 0; border-radius: 10px; background: none;
  color: var(--mx-text-secondary); font-size: 26px; line-height: 1; cursor: pointer;
}
.xw-modal .xw-modal-close:hover { background: var(--mx-hover-surface); color: var(--mx-text-primary); }
.xw-modal-body { padding: 16px; }
.xw-modal-body .xm { margin: 0; }
.xw-modal-img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; border-radius: 10px; }

/* ── Posts as work evidence (Profile only) ──────────────────────────────── */
.xln-profile .xs-post .xs-identity { gap: 10px; }
.xln-profile .xs-post .xs-avatar img, .xln-profile .xs-post .xs-avatar { width: 34px; height: 34px; }
.xln-profile .xs-post .xs-identity-name { font-size: 14px; }
.xln-profile .xs-post .xs-identity-time { font-size: 11.5px; color: var(--mx-text-muted); }
.xln-profile .xs-post .xs-post-text { font-size: 15.5px; line-height: 1.6; color: var(--mx-text-primary); }
.xln-profile .xs-post .xm { margin-top: 12px; }
.xln-profile .xs-post .xs-actions { margin-top: 12px; padding-top: 8px; }
.xln-profile .xs-post .xs-react { color: var(--mx-text-muted); }
.xln-profile .xs-post .xs-react:hover { color: var(--mx-text-primary); }
/* The ownership line reads as the work's record, below the interactions. */
.xln-profile .xs-post .xs-ledger { font-size: 12px; }

/* ── Contributions: proof of participation ──────────────────────────────── */
.xln-profile .cb-card .cb-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 14px; }
.xln-profile .cb-card .cb-stat {
  min-width: 0; padding: 10px; border-radius: 12px; border: 1px solid var(--mx-border-default); background: var(--mx-surface-subtle);
}
.xln-profile .cb-card .cb-stat b { font: 700 20px/1.1 var(--mx-font-display); color: var(--mx-text-primary); }
.xln-profile .cb-card .cb-stat span { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: var(--mx-text-secondary); }
.xln-profile .cb-card .cb-recent-label,
.xln-profile .cb-card .cb-note,
.xln-profile .cb-card .cb-meta,
.xln-profile .cb-card .cb-window { color: var(--mx-text-muted); }
.xln-profile .cb-card .cb-empty-title { color: var(--mx-text-primary); }
.xln-profile .cb-card .cb-empty-body { color: var(--mx-text-secondary); }

/* ── Desktop: main work area + context rail ─────────────────────────────── */
@media (min-width: 1025px) {
  .xln-profile .xp-rail { position: sticky; top: 20px; align-self: start; }
}
@media (min-width: 1600px) {
  .xln-profile .xln-page { max-width: 1280px; }
  .xln-profile .content-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}

/* ── Phone (≤768): cover → identity → actions → tabs → content → context ── */
@media (max-width: 768px) {
  .xln-profile .xp-name-row { grid-column: 2; grid-row: 1; align-self: end; margin-top: 14px; }
  .xln-profile .xp-name-row .profile-name { margin-top: 0; }
  .xln-profile .xp-verified { width: 18px; height: 18px; }
  .xln-profile .xp-meta { grid-column: 2; grid-row: 2; align-self: start; margin-top: 2px; font-size: 13px; }
  .xln-profile .xp-headline, .xln-profile .xp-summary, .xln-profile .xp-direction { grid-column: 1 / -1; }
  .xln-profile .xp-headline { margin-top: 2px; font-size: 14.5px; }
  .xln-profile .xp-direction { margin-top: 2px; }
  /* Owner on phones: Edit profile leads full width; Dashboard and Mint share a
     row, so the tabs stay near the first screen. Visitors keep Message + Follow
     side by side. */
  .xln-profile .profile-actions > * { flex: 1 1 110px; }
  .xln-profile .profile-actions > .btn-primary[data-owner-action] { flex-basis: 100%; }
  .xln-profile .profile-actions .mxl-mint-btn { white-space: nowrap; }
  .xln-profile .profile-stats { grid-row: auto; }
  .xln-profile .profile-actions { grid-row: auto; }
  .xln-profile .xp-about .about-section, .xln-profile .xp-about .xp-about-sec { padding: 16px; }
  .xln-profile #media-tab .card-body { padding: 16px; }
  .xln-profile .xw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .xln-profile .xw-grid--audio, .xln-profile .xw-grid--document { grid-template-columns: minmax(0, 1fr); }
  .xln-profile .xw-item--document .xw-thumb { aspect-ratio: 16 / 10; }
  .xw-modal { padding: 0; align-items: flex-end; }
  .xw-modal .xw-modal-content { max-height: 94dvh; border-radius: 18px 18px 0 0; }
  .xw-modal-body { padding: 12px; }
}
@media (max-width: 360px) {
  .xln-profile .xw-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Keep the full portrait above the cover, and the look controls beside it. */
.xln-profile .cover-image{z-index:0;isolation:isolate}
.xln-profile .profile-body{z-index:1}
.xln-profile .profile-avatar{transform:none;padding:0;box-sizing:border-box}
.xln-profile #coverImage>.xln-profile-look-controls{left:152px!important;max-width:calc(100% - 168px)}
.xln-profile .xp-calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.xln-profile .xp-calendar-heading h2,.xln-profile .xp-calendar-heading h3{margin:0}
.xln-profile .xp-calendar-heading .xp-link{font-size:12px}
.xln-profile .xp-calendar-note{font-size:11px;color:var(--mx-text-muted);margin:4px 0 12px;line-height:1.5}
.xln-profile .xp-meeting-list{list-style:none;padding:0;margin:0 0 8px}
.xln-profile .xp-meeting-list li+li{border-top:1px solid var(--mx-border-default)}
.xln-profile .xp-meeting-list a{display:flex;gap:10px;align-items:center;min-height:44px;padding:10px 0;text-decoration:none;color:var(--mx-text-primary);font-size:12px;line-height:1.5}
.xln-profile .xp-meeting-list a:hover{color:var(--mx-accent-gold-text)}
.xln-profile .xp-meeting-list a:focus-visible{outline:2px solid var(--mx-focus-ring-color);outline-offset:3px;border-radius:4px}
.xln-profile .xp-meeting-list strong{font-size:13px;overflow-wrap:anywhere}
.xln-profile .xp-meeting-list time,.xln-profile .xp-meeting-list a>span{color:var(--mx-text-muted)}
.xln-profile .xp-meeting-list--rail a{display:grid;gap:3px}
.xln-profile .xp-meeting-list--inline strong{flex:1;min-width:0}
.xln-profile .xp-meeting-open{color:var(--mx-accent-gold-text)!important;white-space:nowrap}
@media(max-width:768px){.xln-profile #coverImage>.xln-profile-look-controls{left:12px!important;max-width:calc(100% - 24px)}.xln-profile .xp-meeting-list--inline a{flex-wrap:wrap;gap:4px 12px}.xln-profile .xp-meeting-list--inline strong{flex-basis:100%}.xln-profile .xp-meeting-open{margin-left:auto}}
.xln-profile .xp-profile-month{padding:12px 0;margin-bottom:12px;border-bottom:1px solid var(--mx-border-default)}.xln-profile .xp-profile-month-title{margin:0 0 8px;font-size:13px;font-weight:600}.xln-profile .xp-profile-month-title small{color:var(--mx-text-muted);font-size:10px;margin-left:5px}.xln-profile .xp-profile-month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.xln-profile .xp-profile-month-grid>span,.xln-profile .xp-profile-month-grid>a{display:grid;position:relative;place-items:center;min-height:32px;font-size:11px;text-decoration:none;color:var(--mx-text-primary);border-radius:6px}.xln-profile .xp-profile-month-grid>span{color:var(--mx-text-muted)}.xln-profile .xp-profile-month-grid a:hover{background:var(--mx-hover-surface)}.xln-profile .xp-profile-month-grid a[aria-current=date]{background:var(--mx-accent-gold);color:var(--mx-accent-gold-ink)}.xln-profile .xp-profile-month-grid a.xp-month-outside{color:var(--mx-text-muted)}.xln-profile .xp-month-dot{position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:var(--mx-accent-gold-text)}.xln-profile .xp-profile-month-grid a:focus-visible{outline:2px solid var(--mx-focus-ring-color);outline-offset:1px}@media(max-width:768px){.xln-profile .xp-profile-month-grid>a{min-height:44px}}