/* Identity and the next action remain together, while photo decorations stay
   in their existing edge/below-photo layers. */
#view-work .work-intro { min-width:0; }
#view-work .work-recent-activity { color:var(--member-muted,#c5b7c6);font-size:12px; }
#view-work .work-actions { display:flex; flex-wrap:wrap; gap:10px; }
#view-work .work-actions:has(> :not([hidden])) { margin:20px 0; }
#view-work .work-actions:not(:has(> :not([hidden]))) { display:none; }
#view-work .work-actions .btn { flex:1; min-width:120px; }
#view-work .work-actions .work-gift-action {
  color:#f1d7ad; border-color:rgba(221,183,124,.32); background:rgba(114,76,36,.12);
}
#view-work .work-actions .work-gift-action:hover {
  color:#ffebce; border-color:rgba(236,202,151,.58); background:rgba(114,76,36,.22);
}
#view-work .work-details { min-width:0; }
#view-work .media-thumbs { min-width:0; max-width:100%; }
#view-work.work-loading .work-body { display:block; max-width:640px; }
#view-work.work-loading .work-info, #view-work.work-loading .media-thumbs { display:none; }
#view-work.work-loading .media-stage { min-height:240px; animation:none; }
#view-work .work-load-state { padding:24px; text-align:center; color:var(--member-muted,#c5b7c6); font-size:14px; line-height:1.6; }
#view-work .work-load-state p { margin:0 0 16px; }
#modalCard:has(.premium-checkout) .pay-box { text-align:left; }
#modalCard:has(.premium-checkout) .pay-h { margin-bottom:8px; }
#modalCard:has(.premium-checkout) .pay-sub { margin:0 0 14px; }
#modalCard:has(.premium-checkout) .pay-summary {
  display:grid; grid-template-columns:1fr auto; gap:8px 12px;
  padding:16px 0; margin-bottom:12px;
  border-block:1px solid var(--member-border);
  font-size:13px; color:var(--member-muted);
}
#modalCard:has(.premium-checkout) .pay-summary b {
  color:var(--member-text); font-variant-numeric:tabular-nums; white-space:nowrap;
}
#modalCard:has(.premium-checkout) .pay-term { font-size:12px; }
#modalCard:has(.premium-checkout) .pay-chip { min-height:52px; }
.pay-providers{display:flex;gap:8px;margin:16px 0 10px}
.pay-provider{flex:1;min-height:44px;border:1px solid var(--member-border,#674653);border-radius:8px;background:var(--member-field,#100b17);color:var(--member-text,#f4eff6);font:600 14px/1.4 var(--font-b);cursor:pointer}
.pay-provider.on{border-color:var(--ember);background:var(--member-surface-soft,#1c1524)}
.pay-provider:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.pay-topup-estimate{font-size:14px;line-height:1.5;text-align:left;color:var(--member-text,#f4eff6);font-variant-numeric:tabular-nums;margin:12px 0}
.ank-preview{text-align:left;min-width:0}
.ank-preview>h3{font-size:17px;margin:0 0 18px}
.ank-preview>h4{font:400 26px/1.3 var(--font-d);margin:0 0 6px;overflow-wrap:anywhere}
.ank-preview-city{font-size:14px;color:var(--member-muted,#c5b7c6);margin-bottom:12px}
.ank-preview-photo{display:block;width:100%;max-height:46dvh;object-fit:contain;background:var(--member-field,#100b17);border-radius:10px;margin:0 0 16px}
.ank-preview .val-content{white-space:pre-wrap;overflow-wrap:anywhere}
.ank-preview-locked,.ank-preview-empty{font-size:13px;line-height:1.5;color:var(--member-muted,#c5b7c6);margin:16px 0}
#mediaStage .stage-img[role=button]{cursor:zoom-in}
#mediaStage .stage-img[role=button]:focus-visible{outline:2px solid var(--ember);outline-offset:-4px}
@media(max-width:760px) {
  /* A flush, opaque header keeps scrolling actions/photos from showing
     through the navigation or through a gap above it. */
  #view-work.club-view > .topbar {
    top:0; width:100%; margin:0; padding:10px 12px;
    border:0; border-bottom:1px solid var(--member-border-soft,#443344);
    border-radius:0; background:var(--member-surface,#140f1c);
    box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  }
  #view-work .work-body { display:flex; flex-direction:column; gap:10px; }
  #view-work .media-stage { align-self:stretch; min-width:0; }
  /* Keep a long thumbnail row inside the photo column. Otherwise start
     alignment gives it its full intrinsic width and pans the whole page. */
  #view-work .media-thumbs { align-self:stretch; }
  #view-work .work-info { display:contents; }
  #view-work .work-intro { order:-1; padding:0 4px; }
  #view-work .work-title { display:none; } /* The top bar already names this profile. */
  #view-work .work-meta { margin:0; gap:8px; font-size:14px; }
  #view-work .work-status-line { margin:8px 0 0; font-size:13px; }
  #view-work .work-status-art { width:28px; height:28px; }
  #view-work .work-actions:has(> :not([hidden])) { margin:12px 0 2px; }
  #view-work .work-actions .btn { min-height:44px; padding:10px 14px; font-size:14px; }
  #view-work .work-details {
    padding:18px; border-radius:var(--member-radius,18px);
    background:var(--member-surface,#130e1b);
  }
  #view-work .media-thumbs:empty { display:none; }
  #view-work .work-values:empty { display:none; }
}