/* ================================================================
   POST CARD REDESIGN v10
   Band + Avatar Ring + Stacked Meta + Pill Footer + Thread Lines
================================================================= */

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) {
  /* Owner 2026-09-20: was a heavy gold gradient that made the whole feed read golden. Now
     transparent so the feed shares the app shell (video-bg + body tint) like the Studio. */
  background: transparent;
}

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  margin-left: 0;
  margin-bottom: 10px;
  contain: layout style;
  /* No content-visibility here (speed pass 2026-09-29): a post near the viewport edge flipped between rendered
     and skipped every frame (its 300px placeholder differs from its real height, so each flip moved it back
     across the edge). Traced as ~120 style+layout+paint passes per second on an idle feed, 3.4 s of main-thread
     work in every 5 s. The feed renders one page of posts at a time, so skipping them saved little. */
}
body.dark-mode :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post { background: transparent; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post:hover > .fp-card-clip { box-shadow: 0 4px 24px rgba(0,0,0,0.15); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post::after { content: none; }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-clip {
  clip-path: inset(0 round 16px);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 16px;
}

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-band {
  height: 28px;
  background:
    linear-gradient(135deg,
      transparent calc(var(--lp, 50%) - 18%),
      rgba(255,255,255,0.2) var(--lp, 50%),
      transparent calc(var(--lp, 50%) + 18%)),
    radial-gradient(ellipse at 50% 50%, rgba(175,170,163,.5), rgba(175,170,163,.22));
  /* Owner 2026-09-25: the glow used to stay at full strength all the way to the right edge, so it
     overshot the rounded corner. Fade it back out symmetrically (mirror of the 22% left fade-in) so
     it tapers before the corner and matches the left side. */
  -webkit-mask-image: linear-gradient(90deg, transparent, black 22%, black 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 22%, black 78%, transparent);
  border-radius: 0 0 50% 50%;
}

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-body {
  display: flex; gap: 12px; padding: 14px;
  margin-top: -24px;
  position: relative; z-index: 1;
}

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-ring {
  /* ~30% smaller than the former 88px (owner report 2026-09-18) */
  width: 62px; height: 62px;
  background: var(--line);   /* owner 2026-09-20: was gold #8D7343 */
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-ring.av-notch {
  clip-path: polygon(0% 8%, 8% 0%, 100% 0%, 100% 92%, 92% 100%, 0% 100%);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-ring.av-tv { border-radius: 14%; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-ring .fp-avatar {
  /* ~30% smaller than the former 80px / 24px (owner report 2026-09-18) */
  width: 56px; height: 56px; border-radius: 0;
  font-size: 17px; font-weight: 800;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-ring.av-notch .fp-avatar {
  clip-path: polygon(0% 8%, 8% 0%, 100% 0%, 100% 92%, 92% 100%, 0% 100%);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-ring.av-tv .fp-avatar { border-radius: 14%; }
/* .fp-online-dot removed (owner 2026-09-20): replaced by the hover "online / nil / no" line. */

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-col { position: static; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-wrap { width: auto; height: auto; border-radius: 0; background: transparent; box-shadow: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-avatar-underlay { display: none; }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-content { flex: 1; min-width: 0; position: relative; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-header { padding: 0; min-height: auto; }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-display-name {
  font-size: 13px; font-weight: 700; color: #fff;
  text-shadow: 0 0 4px #8D7343, 0 0 4px #8D7343, 0 0 8px #8D7343, 0 0 8px #8D7343;
  display: inline; letter-spacing: 0.02em;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-meta-sub {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-hover-fade { opacity: 0.35; transition: opacity 0.1s ease; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post:hover > .fp-card-clip .fp-hover-fade,
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item:hover > .fp-card-clip .fp-hover-fade { opacity: 1; }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-handle { font-size: 11px; color: rgba(255,255,255,0.7); opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-handle .fp-at { color: rgba(255,255,255,0.7); opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-handle .fp-at { color: rgba(255,255,255,0.7); opacity: 1; }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-palindrome { padding: 6px 0 8px; color: #fff; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-wrapper { margin: 6px 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-repost-banner { padding: 4px 14px 0; color: rgba(255,255,255,0.6); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-friend-liked { padding: 4px 14px 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-edited-badge { color: rgba(255,255,255,0.5); }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-footer {
  background: linear-gradient(180deg, transparent, rgba(201,154,46,0.25));
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 8px 14px;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-actions { padding: 0; border-top: none; margin-top: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-action-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; color: rgba(255,255,255,0.7);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-action-btn:hover { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-actions-right { margin-left: auto; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-options-btn {
  color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 3px 10px; font-size: 11px;
  cursor: pointer; font-family: inherit; margin-left: auto;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-options-btn:hover { background: rgba(255,255,255,0.2); color: rgba(255,255,255,0.9); }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none;
  border-radius: 0; padding: 0;
  overflow: visible; display: block; gap: 0;
  position: relative;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item > .fp-card-clip { clip-path: inset(0 round 16px); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-band { height: 18px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-card-body { padding: 10px 12px; gap: 10px; margin-top: -12px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-avatar-ring { width: 32px; height: 32px; } /* ~30% smaller (owner 2026-09-18) */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-avatar-ring .fp-avatar,
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-reply-avatar { width: 28px; height: 28px; font-size: 9px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-display-name { font-size: 12px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-card-footer { padding: 6px 12px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-text { color: #fff; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-handle { color: rgba(255,255,255,0.7); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-handle:hover { color: rgba(255,255,255,0.9); text-decoration: underline; text-underline-offset: 2px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-time { color: rgba(255,255,255,0.5); opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-handle-link:hover .fp-at,
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-handle-link:hover { color: rgba(255,255,255,0.9); }

/* Each reply owns its stem, so the last elbow clips at every nesting depth.
   No dependency on the legacy fixThreadLines --lb measurement. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-thread.open.has-replies::before {
  content: ''; display: block; width: 1px; height: 6px;
  background: var(--line); margin-left: 34px; flex-shrink: 0;
}
/* Owner 2026-09-20: every neighbour pair in a thread (post->first reply, sibling->sibling,
   reply->its child, last grandchild->parent's next sibling) has the same 6px vertical gap,
   regardless of branch. Elbow at 25px = reply avatar centre (9px body pad + 16px half of 32px). */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-thread.open { padding: 0; gap: 0; background: transparent; border: none; box-shadow: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-thread-scroll { margin-left: 34px; position: relative; padding: 0; max-height: none; overflow-y: visible; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-thread-scroll::before { content: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri { position: relative; padding: 0 0 0 18px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri + .fp-ri { margin-top: 6px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--line);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri::after {
  content: ''; position: absolute; left: 0; top: 25px;
  width: 18px; height: 1px; background: var(--line);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri:last-child::before { bottom: auto; height: 25px; }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-rx-hover-bar { display: none !important; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri > .fp-thread { margin-left: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-thread-compose { margin-bottom: 6px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-compose, :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-rc-inner {
  background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2);
}

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post.potd > .fp-card-clip { background: rgba(255,248,220,0.25); border-color: rgba(200,155,20,0.45); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-repost-menu { background: var(--bg); border-color: var(--line); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-repost-menu-item { color: var(--txt); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-repost-menu-item:hover { background: var(--hover, rgba(127,127,127,0.14)); }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction {
  background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.8);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.3); color: #fff; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction.active, :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction.fp-reaction-mine {
  background: rgba(255,255,255,0.15); border-color: rgba(201,154,46,0.5); color: #fff;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction .fp-rx-count { color: rgba(255,255,255,0.6); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction.active .fp-rx-count,
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction.fp-reaction-mine .fp-rx-count { color: rgba(201,154,46,0.9); }


/* Inline reply composer's "Post Sop". Owner 2026-10-03: it was a white wash on the light feed in light mode, so it
   melted into its surroundings; it is now the post card's own solid theme-coloured pill (css/19-compose.css
   #feed-inline-slot .fcc-post-btn), the same in both modes. */
.fp-inline-post-btn {
  background: var(--theme, var(--blue));
  border: 1px solid color-mix(in srgb, var(--theme, var(--blue)) 55%, transparent);
  border-radius: 999px; padding: 7px 26px;
  color: #fff; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  transition: filter 0.12s;
}
body.dark-mode .fp-inline-post-btn { color: var(--bg0); }
.fp-inline-post-btn:hover { filter: brightness(1.08); }
.fp-inline-post-btn:disabled { opacity: 0.45; cursor: default; filter: none; }

/* Owner 2026-09-25 (item #1): inline "Bust Sub" composer - a stripped dummy post appended beneath the
   clicked post. Just the avatar + a studio compose segment + "Post Sop"; no meta/options/presence line. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-inline-reply {
  margin: 4px 0 10px 36px;
  background: transparent;   /* owner 2026-09-25: no second box around the segment (studio has none) */
  border: none;
  border-radius: 0;
  overflow: visible;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-inline-reply-inner { display: flex; gap: 12px; padding: 12px 14px 4px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-inline-reply-body { flex: 1; min-width: 0; }
/* The reply cell's chrome now comes from the shared .fc-cell.pal-seg rule (14-feed.css) so it is
   visually identical to a studio segment. The old rounded translucent box override was removed. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-inline-reply-footer {
  display: flex; justify-content: flex-end;
  padding: 4px 14px 12px;
}

/* Approved compact cards: keep the gold feed, with readable warm surfaces. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) {
  /* Owner 2026-09-20: de-golded surfaces. Cards use the app's neutral --card; quote/hover use
     neutral + a faint blue accent instead of cream/gold. */
  --fp-surface: var(--card);
  --fp-quote: var(--bg0);
  --fp-hover: rgba(53,116,196,.08);
  --fp-quiet: var(--dim);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-clip {
  background: var(--fp-surface); border: 0; border-radius: 9px;
  clip-path: none;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-band { height: 8px; opacity: .45; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-body { padding: 9px; gap: 7px; margin-top: -8px; }   /* owner 2026-09-20: avatar equidistant from top (9px) and left (9px) */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item > .fp-card-clip { clip-path: none; }
/* Owner 2026-09-24: sub-posts get the SAME upper "shine" as the OP post - band height 8px (was 4px)
   with the matching -8px body overlap, so the reply's top edge reads identically to a top-level post. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-band { height: 8px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-card-body { padding: 9px; gap: 7px; margin-top: -8px; }   /* owner 2026-09-20; -8px to match OP band (2026-09-24) */
/* Avatar column + hover presence line (owner 2026-09-20): "online / nil / no" under the avatar,
   shown only on hover, with the active state highlighted (online=green, no=text, nil=amber). */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-av-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 62px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-av-col { width: 32px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-presence { margin-top: 3px; font-size: 8px; line-height: 1; white-space: nowrap; color: var(--fp-quiet); opacity: 0; transition: opacity .1s; pointer-events: none; letter-spacing: .02em; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post:hover > .fp-card-clip .fp-presence,
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item:hover > .fp-card-clip .fp-presence { opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-presence[data-st="online"] .pw-online { color: var(--green); font-weight: 800; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-presence[data-st="no"]     .pw-no     { color: var(--txt);   font-weight: 800; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-presence[data-st="nil"]    .pw-nil    { color: var(--amber); font-weight: 800; }
/* Sub-post (reply) presence: split to two lines ("online /" + "nil / no") because the reply
   avatar column is only 32px wide (owner 2026-09-22). The <br> in the markup forces the break. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-presence-sub { white-space: normal; line-height: 1.3; text-align: center; }
/* Owner 2026-09-25: the username is metadata, not the message. It drops from full ink to the same quiet
   var(--fp-quiet) as the @handle, hour and icons, so the post body is the most noticeable text in the
   post. Hover still lifts it to amber as a click affordance. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-display-name { color: var(--txt); text-shadow: none; font-weight: 700; letter-spacing: 0; cursor: pointer; transition: color 0.12s; }
/* Owner 2026-09-24: the username (display name) highlights on hover exactly like the @handle does,
   and clicking it already opens that user's profile (onclick=openProfilePage in the markup). */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-display-name:hover { color: var(--amber); }
/* Date top-right + post number (owner 2026-09-20); the type label moved to the footer (below). */
/* Owner 2026-09-20: date + # number on ONE line, blended into the post (very faint) until the post
   is hovered; seconds are half-size on the baseline (not raised). */
/* Owner 2026-10-05: the reserved room (was 180px for posts, 165px for replies) is 220px, the width of a full stamp
   ("05/10/2026 20:48:08 #09840262020105"): names ran under the date before. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-content:has(> .fp-date) > .fp-display-name { display: block; padding-right: var(--fp-date-room, 220px); overflow-wrap: anywhere; min-height: 16px; }
/* Owner 2026-09-24: date + # a touch larger (10px) and more blended into the post when un-hovered
   (opacity 0.2, was 0.3); full opacity on hover is unchanged below. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-date { position: absolute; top: 0; right: 0; text-align: right; font-size: 10px; line-height: 1.3; color: var(--fp-quiet); font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.2; transition: opacity 0.12s; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-date-sec { font-size: 0.55em; vertical-align: text-top; }   /* owner 2026-09-24: seconds half size; top edge aligns with the TOP of the hh:mm glyphs (text-top), NOT floating above the line like superscript */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-postnum { display: inline; font-size: 1em; letter-spacing: .02em; margin-left: 5px; transition: color 0.12s; }
/* Owner 2026-09-25: the #number is a per-post permalink (opens /post/<id>); hint it on hover. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-postnum:hover { color: var(--blue); text-decoration: underline; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post:hover > .fp-card-clip .fp-date,
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item:hover > .fp-card-clip .fp-date { opacity: 1; }
/* Owner 2026-09-20: reply date+number sit in the reply's top-right corner too (inherits .fp-date
   absolute top:0/right:0, relative to .fp-card-content); the reply name reserves room for it. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-display-name { display: block; padding-right: var(--fp-date-room, 220px); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-actions .fp-type-label { position: static; margin-left: auto; padding: 1px 4px; border: 0; background: none; color: var(--amber); font-size: 10px; font-weight: 650; letter-spacing: 0; cursor: help; white-space: nowrap; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-actions .fp-type-label + .fp-options-btn { margin-left: 6px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-hover-fade { opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-handle,.fp-handle .fp-at,.fp-reply-handle,.fp-reply-handle .fp-at,
  .fp-time,.fp-reply-time,.fp-edited-badge,.fp-repost-banner) { color: var(--fp-quiet); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-handle-link:hover,.fp-handle-link:hover .fp-at,.fp-reply-handle:hover) { color: var(--amber); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-palindrome,.fp-reply-text) { color: var(--txt); }
/* Owner 2026-09-25: the body keeps the text-selection cursor (never the arrow) and stays selectable, so
   a reader can highlight and copy it (the mirror-copy rides on this). The blue/amber canonical/mirror
   letters on top of var(--txt) make it the loudest text in the post. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-palindrome { font-size: 19px; font-weight: 500; line-height: 1.25; padding: 5px 0 3px; letter-spacing: -.025em; cursor: text; -webkit-user-select: text; user-select: text; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-text { font-size: 17px; cursor: text; -webkit-user-select: text; user-select: text; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-footer { background: none; border: 0; padding: 4px 9px 7px; }
/* Owner 2026-09-20: avatar owns its own left column; the footer + any in-content blocks start at
   the content column (body padding 9 + avatar 62 + gap 7 = 78px; replies = 9 + 32 + 7 = 48px), so
   nothing sits under the avatar. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-footer { padding-left: 78px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-card-footer { padding-left: 48px; }
/* Owner 2026-10-05 ("a lot of empty space in the post"): posts and replies carry their footer INSIDE the text column
   (js/11c-post-card.js, js/11d-interact.js), so the reply / repost / reaction row sits right under the body instead of
   under the whole avatar column; the card is only as tall as its taller column. The avatar column stretches to that
   height. Presence stays beneath the alias (owner 2026-10-06). */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-content > .fp-card-footer,
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reply-item .fp-card-content > .fp-card-footer { padding: 4px 0 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-card-content { flex: 1 1 auto; min-width: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-av-col { align-self: stretch; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-av-col > .fp-presence { margin-top: 3px; padding-top: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-note,.fp-tags,.fp-image-wrap,.fp-poll-options) { padding-left: 0; padding-right: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-sig { padding-left: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-repost-banner,.fp-friend-liked) { padding-left: 78px; }
/* Owner 2026-09-20: footer buttons cluster together on the left; the ⋯ options button is pinned
   all the way right via margin-left:auto (see .fp-options-btn below). */
/* Owner 2026-09-24: more breathing room between the action buttons (Bust Sub / Repost / React) so
   the footer reads more twitter-like; the reactions strip keeps its own tighter 4px gap below. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-actions { justify-content: flex-start; flex-wrap: nowrap; gap: 14px; min-width: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-action-btn,.fp-options-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 0; background: none; box-shadow: none; padding: 4px;
  min-height: 26px; flex-shrink: 0; border-radius: 5px;
  color: var(--fp-quiet); margin-left: 0;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-action-btn,.fp-options-btn):hover { background: var(--fp-hover); color: var(--amber); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-options-btn { position: static; opacity: 1; margin-left: auto; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-action-btn svg { width: 18px; height: 18px; flex-shrink: 0; display: block; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-actions-right { margin-left: 0; min-width: 0; gap: 4px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reactions { min-width: 0; flex-wrap: wrap; gap: 3px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-rx-inline-trigger { flex-shrink: 0; opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction {
  border: 0; background: none; box-shadow: none; padding: 2px 3px; color: var(--fp-quiet);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction:hover { border: 0; background: var(--fp-hover); color: var(--txt); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-reaction.active,.fp-reaction.fp-reaction-mine) { border: 0; background: var(--fp-hover); color: var(--amber); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-reaction .fp-rx-count { color: var(--fp-quiet); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-reaction.active,.fp-reaction.fp-reaction-mine) .fp-rx-count { color: var(--amber); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .feed-post.potd > .fp-card-clip { background: color-mix(in srgb, var(--fp-surface) 90%, var(--amber)); border: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-wrapper { border: 0; box-shadow: none; background: var(--fp-quote); border-radius: 6px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-wrapper::before { content: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-wrapper .fp-card-clip { background: transparent; border: 0; box-shadow: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-wrapper .fp-card-footer { display: block; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-handle { color: var(--fp-quiet); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-text { color: var(--txt); white-space: normal; font-size: 17px; font-weight: 500; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-actions { margin-top: 5px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-action-btn:disabled { opacity: .45; cursor: default; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.fp-action-btn,.rap-vote-btn):focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Compact bubbles (study-7), using the neutral post palette. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) :is(.rap-battle-card,.lob-card) {
  background: var(--fp-surface); border: 0; border-radius: 9px;
  color: var(--txt); padding: 9px;
  --faint: var(--dim);
  --blue: var(--amber);
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-header {
  display: grid; grid-template-columns: minmax(0,max-content) auto minmax(0,max-content);
  justify-content: center; align-items: center; gap: 10px; border: 0; padding: 2px 0 8px;
  position: relative;
}
/* "Rap Spar" sits in the fighters' row at the battle's right edge (owner 2026-09-29), not on a row of its own. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-header .rap-type-label {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 10px; font-weight: 650; color: var(--author, var(--amber)); cursor: help; white-space: nowrap;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant { min-width: 0; gap: 7px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-handle { font-family: var(--sans); font-weight: 400; color: var(--fp-quiet); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant .rap-display-name { font-size: 12px; font-weight: 650; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant:first-child { flex-direction: row-reverse; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant-meta { min-width: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant:first-child :is(.rap-display-name,.rap-handle) { text-align: right; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant:last-child :is(.rap-display-name,.rap-handle) { text-align: left; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-avatar { border-radius: 14%; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-versus { color: var(--fp-quiet); background: var(--fp-quote); border-radius: 15px; padding: 5px 8px; font-size: 11px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-disses { padding: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-round-section { margin: 0; border: 0; border-radius: 0; overflow: visible; }

:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-round-title { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; font-size: 11px; color: var(--fp-quiet); font-weight: 650; text-transform: none; letter-spacing: 0; border: 0; padding: 7px 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-round-title::before, :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-round-title::after { content: ""; height: 1px; background: var(--line); flex: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-row {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 8px 10px 9px;
  border: 1px solid var(--line); border-radius: 10px 10px 10px 2px;
  background: var(--fp-surface);
  margin: 0 42px 6px 0;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-right { margin: 0 0 6px 42px; border-radius: 10px 10px 2px 10px; }
/* One header line (owner 2026-09-29): avatar | name/@handle | options | time. The right fighter's line
   is mirrored, so each side's avatar sits on its own outer edge. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-identity { display: flex; flex-direction: row; align-items: center; gap: 8px; width: auto; min-width: 0; flex-shrink: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-identity-right { flex-direction: row-reverse; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-identity-right .rap-diss-who { text-align: right; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-identity .rap-display-name { font-size: 12px; font-weight: 650; cursor: pointer; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-identity .rap-handle { color: var(--fp-quiet); font-size: 10px; cursor: pointer; overflow-wrap: anywhere; }
/* Options: pushed to the far side of the line, small and quiet, full strength only on the hovered diss. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-opts {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap;
  margin-left: auto; opacity: 0.6; transition: opacity 0.12s;
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-identity-right .rap-diss-opts { margin-left: 0; margin-right: auto; flex-direction: row-reverse; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-row:hover .rap-diss-opts { opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-opts .rap-vote-row { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-opts .rap-diss-rx { display: flex; align-items: center; gap: 4px; padding: 0; margin: 0; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-opts .rap-diss-rx:empty { display: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-time { color: var(--fp-quiet); font-size: 9px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0.3; transition: opacity 0.12s; }
/* owner 2026-09-26: hover is per-SUBPOST, not per-battle. Only the diss row under the cursor reveals its
   own date+number and gets a subtle highlight; the other rounds' rows stay as they are. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-row:hover .rap-diss-time { opacity: 1; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-row:hover { box-shadow: 0 0 0 1px var(--author, var(--blue)) inset; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-text { padding-left: 38px; font-family: var(--sans); font-size: 17px; line-height: 1.25; font-weight: 500; letter-spacing: -.025em; overflow-wrap: anywhere; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-diss-right .rap-diss-text { padding: 0 38px 0 0; text-align: right; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-vote-btn { border: 0; padding: 2px 0; border-radius: 3px; color: var(--fp-quiet); font-size: 11px; }
/* The viewer's own pick is highlighted (owner 2026-09-26). Scoped here so it beats the rule above. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-vote-btn.chosen { color: #fff; font-weight: 800; padding: 2px 7px; border-radius: 8px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-ko.chosen { background: rgba(200,150,12,0.95); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-ok.chosen { background: var(--dim); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-vote-btn:hover { background: var(--fp-hover); color: var(--amber); }
/* Avatars carry the owner-colour outline, like the main posts' avatar ring (owner 2026-09-29). */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-avatar { box-shadow: 0 0 0 2px var(--fp-surface), 0 0 0 4px var(--author, var(--line)); cursor: pointer; }
body.dark-mode :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-avatar { box-shadow: 0 0 0 2px var(--fp-surface), 0 0 0 4px var(--author-dark, var(--line)); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-see-refs { margin-left: 0; color: var(--fp-quiet); font-size: 11px; white-space: nowrap; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-conclusion { background: var(--fp-quote); color: var(--txt); border-radius: 5px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-comments-bar { padding: 0 9px 4px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-comment-compose { display: flex; gap: 6px; margin-top: 6px; background: var(--fp-surface); border-color: var(--line); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-comment-compose .rap-sc-input { min-width: 0; font-family: var(--sans); font-size: 17px; background: var(--card); color: var(--txt); border-color: var(--line); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-comment-compose .rap-sc-input:focus { border-color: var(--amber); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 8px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-title { font-size: 10px; font-weight: 650; color: var(--author, var(--amber)); cursor: help; }   /* the challenger's colour (owner 2026-09-29) */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-countdown { font-size: 10px; color: var(--fp-quiet); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entries { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry { min-width: 0; padding: 7px; background: var(--fp-quote); border-radius: 6px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-identity { display: flex; align-items: center; gap: 6px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-meta { display: flex; flex-direction: column; min-width: 0; gap: 2px; overflow-wrap: anywhere; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-meta strong { font-size: 11px; font-weight: 650; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-meta span { font-size: 10px; color: var(--fp-quiet); }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-text { font-size: 18px; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; margin: 7px 0 3px; min-height: 45px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-pending { background: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-pending .lob-entry-text { font-size: 11px; color: var(--fp-quiet); letter-spacing: 0; }
@media (max-width: 520px) {
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-thread-scroll { margin-left: 15px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-thread.open.has-replies::before { margin-left: 15px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri { padding-left: 12px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-ri::after { width: 12px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-header { gap: 6px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant { gap: 5px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant .rap-avatar { width: 26px; height: 26px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-participant-meta .rap-handle { font-size: 9px; overflow-wrap: anywhere; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .rap-versus { font-size: 9px; }
  :is(#feed-scroll,#pp-posts-list,#setup-post-preview) .lob-entry-identity { flex-wrap: wrap; }
}
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-quote-wrapper { cursor: pointer; }

/* Polls (owner 2026-09-29): the question (a palindrome, with a "?") above its options; a poll may have no body. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-palindrome.fp-no-body { display: none; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-poll-q { font-size: 17px; font-weight: 600; line-height: 1.3; padding: 2px 0 6px; }
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-poll-q::after { content: " ?"; opacity: 0.55; }

/* The author's "Sail alias" (Setup > Sail alias) under the avatar (owner 2026-09-30). Same column width as the
   avatar; a long alias wraps onto two lines at most and is clipped after that (full text on hover). */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-sail-alias {
  max-width: 84px; margin-top: 4px; text-align: center;
  font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em;
  color: var(--author-dark, var(--theme));
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}

/* Busy Sub room chip on a post (owner 2026-09-30): clicking it opens that room. */
:is(#feed-scroll,#pp-posts-list,#setup-post-preview) .fp-room-label { cursor: pointer; margin-right: 6px; }