/* post-engine.css -- the look of a post, everywhere posts appear.
   Extracted unchanged from home.html's own <style> block (so Home renders
   exactly as before) and shared with my-profile.html and
   professional-profile.html. Pair with post-engine.js. */

  /* Safety net: every .ico-<name> variant is sized by its own specific
     selector (.comm-post-action .ico, .comm-comment-send svg, etc), each
     scoped to wherever that icon actually appears. If a future spot ever
     uses class="ico ico-x" somewhere none of those scoped rules reach --
     or a rule like .ico-send's width:calc(55px * var(--ik)) resolves
     against an --ik that isn't in scope there -- an SVG with no width/
     height otherwise falls back to the browser's native default (300x150
     box), which is exactly the oversized icon this rule prevents. */
  .ico{width:20px;height:20px;flex-shrink:0;display:inline-block;}

  .comm-identity-logo{width:26px;height:26px;border-radius:50%;overflow:hidden;background:var(--navy-06);color:var(--navy-45);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:11px;font-family:'Cabinet Grotesk',sans-serif;flex-shrink:0;}


  .comm-post{display:flex;gap:10px;padding:22px 0;border-bottom:1px solid var(--navy-06);}

  .comm-post:last-child{border-bottom:none;}

  .comm-post-avatar{width:54px;height:54px;border-radius:50%;flex-shrink:0;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--navy-06);color:var(--navy-45);font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:17px;}

  /* Follow "+" badge on profile pictures (feed posts, open post, comments).
     Shown only for people/companies you don't already follow (and never on
     your own posts). The visible dot is small; ::after widens the tap area. */
  .comm-avatar-wrap{position:relative;flex-shrink:0;align-self:flex-start;line-height:0;}

  .comm-follow-plus{position:absolute;right:-3px;bottom:-3px;width:22px;height:22px;padding:0;border-radius:50%;border:2px solid var(--white,#fff);background:var(--teal,#1B7A6E);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;box-shadow:0 1px 3px rgba(27,33,45,.25);}

  .comm-follow-plus::after{content:'';position:absolute;inset:-9px;}

  @media (hover:hover){.comm-follow-plus:hover,.comm-follow-plus:active{background:var(--teal-dark,#145d54);}}

  .comm-follow-plus svg{display:block;}

  .comm-comment .comm-avatar-wrap .comm-follow-plus{width:16px;height:16px;right:-3px;bottom:-3px;border-width:1.5px;}

  .comm-comment .comm-avatar-wrap .comm-follow-plus svg{width:9px;height:9px;}

  .comm-follow-pill{position:static;width:auto;height:auto;line-height:1.15;margin-left:auto;padding:9px 20px;border-radius:100px;border:none;background:var(--navy,#1b212d);color:#fff;font-family:'Cabinet Grotesk',sans-serif;font-size:13px;font-weight:700;box-shadow:none;white-space:nowrap;}

  .comm-follow-pill::after{inset:0;}

  @media (hover:hover){.comm-follow-pill:hover,.comm-follow-pill:active{background:#000;}}

  .comm-follow-pop{position:fixed;z-index:1250;min-width:190px;background:var(--white,#fff);border:1px solid var(--navy-10);border-radius:14px;box-shadow:0 18px 40px -14px rgba(27,33,45,.38);padding:6px;display:none;}

  .comm-follow-pop.open{display:block;}

  .comm-follow-pop-btn{display:flex;align-items:center;gap:11px;width:100%;padding:12px 12px;border:none;background:none;border-radius:10px;font-family:'Cabinet Grotesk',sans-serif;font-size:14.5px;font-weight:600;color:var(--navy);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}

  @media (hover:hover){.comm-follow-pop-btn:hover{background:var(--navy-04,#f4f5f3);}}

  .comm-follow-pop-btn:disabled{opacity:.6;cursor:default;}

  .comm-follow-pop-btn svg{flex-shrink:0;color:var(--navy-65,#5c6470);}

  .comm-follow-pop-btn.primary{color:var(--teal-dark,#145d54);}

  .comm-follow-pop-btn.primary svg{color:var(--teal,#1B7A6E);}

  .comm-toast{position:fixed;left:50%;bottom:96px;transform:translate(-50%,12px);z-index:1600;background:var(--navy,#1b212d);color:#fff;font-size:13.5px;font-weight:500;padding:11px 18px;border-radius:100px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center;}

  .comm-toast.show{opacity:1;transform:translate(-50%,0);}

  [data-author-id]{cursor:pointer;}

  @media (hover:hover){.comm-post-name[data-author-id]:hover{text-decoration:underline;}}

  .comm-post-body{flex:1;min-width:0;}

  .comm-post-open{cursor:pointer;}

  .comm-post-top{display:flex;flex-direction:column;gap:1px;}

  .comm-post-namerow{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}

  .comm-post-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--navy);line-height:1.3;}

  .comm-post-title{font-size:13px;font-weight:600;color:var(--navy-65,#5c6470);margin-top:1px;}

  .comm-post-time{font-size:11px;font-weight:400;color:var(--navy-45);}

  .comm-post-text{font-size:14px;font-weight:400;color:var(--navy);line-height:1.42;margin-top:6px;white-space:pre-wrap;}

  .comm-post-text.is-clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal;}

  .comm-post-more-toggle{display:block;background:none;border:none;padding:0;margin:2px 0 0;font:inherit;font-size:13px;font-weight:600;color:var(--navy-45);cursor:pointer;-webkit-tap-highlight-color:transparent;}

  @media (hover:hover){.comm-post-more-toggle:hover{color:var(--navy);text-decoration:underline;}}

  /* ---- Post media --------------------------------------------------------
     ONE photo / video: sits inside the text column -- its left edge is the same
     edge as the name and caption, corners are curved, and the whole picture is
     shown (never cropped). Same on phones and on web.

     2+ photos on phones: a Threads-style row. Every photo keeps its own shape,
     rounded corners, a small gap, and the next photo peeks in from the edge so it
     reads as swipeable (at rest the first photo lines up with the text).
     2+ photos on web: an Instagram-style slider (one frame, arrows, dots). */
  .comm-post{--pp-bl:0px;--pp-br:0px;}

  .comm-post-img{margin-top:12px;border-radius:16px;overflow:hidden;display:inline-flex;max-width:100%;}

  .comm-post-img img,.comm-post-img video{display:block;width:auto;height:auto;max-width:100%;max-height:520px;object-fit:contain;cursor:zoom-in;}

  /* Video tiles: our own wrapper hosts the video plus the custom control
     layer (play/pause, scrub bar, fullscreen, speed picker) on top of it.
     Sized to shrink-wrap the video in a single post (like the plain <img>
     case above); the gallery variant further down stretches it to fill
     the fixed-aspect-ratio gallery cell instead. Video itself keeps its
     cursor default (no zoom-in -- tapping it is play/pause, not a viewer). */
  .comm-post-img .comm-video-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;}

  .comm-post-gallery-item .comm-video-wrap{position:relative;display:block;width:100%;height:100%;}

  .comm-video-wrap video{cursor:default;-webkit-user-drag:none;}

  .comm-video-wrap video::-webkit-media-controls{display:none !important;}

  .comm-video-bigplay{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;border:none;background:rgba(20,22,26,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}

  .comm-video-mute{position:absolute;top:10px;right:10px;z-index:3;width:30px;height:30px;border-radius:50%;border:none;background:rgba(20,22,26,.6);color:#fff;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;}
  .comm-video-mute svg[hidden]{display:none;}
  @media (hover:hover){.comm-video-mute:hover{background:rgba(20,22,26,.8);}}

  .comm-video-bigplay[hidden]{display:none !important;}

  .comm-video-bigplay svg{margin-left:2px;}

  .comm-video-controls{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));opacity:0;transition:opacity .15s;}

  .comm-video-wrap:hover .comm-video-controls,.comm-video-wrap.is-fullscreen .comm-video-controls{opacity:1;}

  @media (hover:none){.comm-video-controls{opacity:1;background:linear-gradient(to top,rgba(0,0,0,.45),rgba(0,0,0,0));}}

  .comm-video-playpause,.comm-video-fullscreen{flex:0 0 auto;border:none;background:none;padding:2px;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}

  .comm-video-scrub{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:6px 0;cursor:pointer;touch-action:none;}

  .comm-video-scrub-track{position:relative;width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.3);}

  .comm-video-scrub-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:#fff;}

  .comm-video-scrub-thumb{position:absolute;top:50%;left:0;width:10px;height:10px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);}

  .comm-video-time{flex:0 0 auto;color:#fff;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;}

  /* Press-and-hold speed picker -- fullscreen only. The hint appears
     first (a hold that hasn't yet reached the picker threshold); the
     picker replaces it once the hold is long enough. Both sit centered
     near the top of the fullscreen video, out of the way of the scrub bar
     at the bottom. */
  .comm-video-speed-hint,.comm-video-speed-picker{position:absolute;top:18px;left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .12s;}

  .comm-video-speed-hint.is-visible,.comm-video-speed-picker.is-visible{opacity:1;}

  .comm-video-speed-hint{background:rgba(20,22,26,.7);color:#fff;font-size:11.5px;font-weight:600;padding:7px 14px;border-radius:20px;white-space:nowrap;}

  .comm-video-speed-picker{display:flex;gap:4px;background:rgba(20,22,26,.7);border-radius:20px;padding:4px;}

  .comm-video-speed-opt{border:none;background:none;color:rgba(255,255,255,.65);font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:16px;}

  .comm-video-speed-opt.active{background:#fff;color:#14161a;}

  /* Only the fullscreen wrapper needs the bigger touch target + visible
     controls for the hold gesture to feel deliberate; outside fullscreen
     the picker/hint never show (gated in JS) so no extra sizing needed. */
  .comm-video-wrap.is-fullscreen{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#000;}

  .comm-video-wrap.is-fullscreen video{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;}

  .comm-post-gallery{position:relative;margin-top:12px;--gh:340px;--gr:16px;--gg:8px;}

  .comm-post-gallery-track{display:flex;gap:var(--gg);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;}

  .comm-post-gallery-track::-webkit-scrollbar{display:none;}

  .comm-post-gallery-track::after{content:'';flex:0 0 1px;}

  .comm-post-gallery-item{flex:0 0 auto;scroll-snap-align:start;height:var(--gh);aspect-ratio:var(--ar,4/5);border-radius:var(--gr);overflow:hidden;background:var(--navy-06);}

  .comm-post-gallery-item.is-loaded{background:none;}

  .comm-post-gallery-item img,.comm-post-gallery-item video{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;}
  .comm-post-gallery-item img{cursor:zoom-in;}

  /* Desktop mouse: prev / next arrows, since there is no swipe. */
  .comm-gal-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.96);color:var(--navy,#1b212d);box-shadow:0 2px 10px rgba(15,23,26,.28);align-items:center;justify-content:center;cursor:pointer;z-index:2;-webkit-tap-highlight-color:transparent;}

  .comm-gal-nav.prev{left:8px;}

  .comm-gal-nav.next{right:8px;}

  .comm-gal-nav[hidden]{display:none !important;}

  @media (min-width:721px) and (hover:hover){
    .comm-post-gallery.has-overflow .comm-gal-nav{display:flex;}
  }

  @media (max-width:720px){
    .comm-post-gallery{--gh:min(340px,74vw);}
    /* The row scrolls under the screen edge, but at rest the first photo lines
       up with the text above it. */
    .comm-post-gallery{margin-left:calc(-1 * var(--pp-bl));margin-right:calc(-1 * var(--pp-br));}
    .comm-post-gallery-track{padding-left:var(--pp-bl);scroll-padding-left:var(--pp-bl);}
    .comm-post-gallery-track::after{flex-basis:calc(var(--pp-br) + 12px);}
  }

  /* Web: Instagram-style slider for posts with several photos. One frame the
     shape of the first photo (between 4:5 and 1.91:1), the others sit inside it
     whole (never cropped), small round arrows on the sides, dots inside the frame
     at the bottom. Swipe / trackpad / arrows / dots all move it. */
  .comm-gal-dots{display:none;}

  @media (min-width:721px){
    .comm-post-gallery{width:min(100%,468px);--gar:1;}
    .comm-post-gallery-track{aspect-ratio:var(--gar);gap:0;scroll-snap-type:x mandatory;border-radius:16px;background:none;overflow-y:hidden;}
    .comm-post-gallery-track::after{display:none;}
    .comm-post-gallery-item{position:relative;flex:0 0 100%;height:auto;aspect-ratio:auto;border-radius:0;scroll-snap-align:start;scroll-snap-stop:always;background:none;}
    /* cover (not contain): the frame is filled edge to edge, so no grey bars show around a photo that is a different shape from the first one */
    .comm-post-gallery-item img,.comm-post-gallery-item video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
    .comm-gal-dots{display:flex;position:absolute;left:0;right:0;bottom:12px;justify-content:center;gap:4px;pointer-events:none;}
    .comm-gal-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);box-shadow:0 0 3px rgba(0,0,0,.4);transition:background .15s;}
    .comm-gal-dot.active{background:#fff;}
    .comm-gal-nav{width:28px;height:28px;background:rgba(26,26,26,.72);color:#fff;box-shadow:none;}
    .comm-gal-nav.prev{left:8px;}
    .comm-gal-nav.next{right:8px;}
    .comm-gal-nav svg{width:14px;height:14px;}
    /* Open-post panel: room for a bigger photo. */
    .comm-modal-post .comm-post-img,.comm-modal-post .comm-post-img img,.comm-modal-post .comm-post-img video{max-height:min(78vh,780px);}
    .comm-modal-post .comm-post-gallery{width:min(100%,520px);}
  }


  /* Full-screen image viewer -- tapping a post's image opens it here,
     above everything (including the post modal it may have been opened
     from). Tap the image or the close button to dismiss. */
  .comm-imgview-backdrop{position:fixed;inset:0;z-index:1500;background:#000;display:none;flex-direction:column;}

  .comm-imgview-backdrop.open{display:flex;transition:transform .22s ease,background .22s ease;}

  /* The image sits centered in the stage; the like / comment / repost /
     send row is its own bar directly under the image area. */
  .comm-imgview-stage{position:relative;flex:1 1 auto;min-height:0;margin-top:64px;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}

  .comm-imgview-stage::-webkit-scrollbar{display:none;}

  .comm-imgview-slide{position:relative;flex:0 0 100%;scroll-snap-align:start;display:flex;}

  .comm-imgview-slide img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;}

  /* Slider under the frame, only rendered when a post has more than one
     photo/video -- tap a dot to jump straight to that slide. */
  /* Prev / next -- the main way to move through multiple photos with a mouse
     (swipe still works by touch/trackpad). Dark round buttons floating over
     the stage, one on each side; hidden on the first/last slide and hidden
     entirely for a single photo. */
  .comm-imgview-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:1;width:40px;height:40px;border-radius:50%;border:none;background:rgba(20,22,26,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;}

  @media (hover:hover){.comm-imgview-nav:hover{background:rgba(20,22,26,.8);}}

  .comm-imgview-nav[hidden]{display:none !important;}

  .comm-imgview-nav.prev{left:16px;}

  .comm-imgview-nav.next{right:16px;}

  @media (max-width:720px){.comm-imgview-nav{display:none !important;}}

  .comm-imgview-dots{flex:0 0 auto;display:flex;justify-content:center;gap:6px;padding:10px 0 2px;}

  .comm-imgview-dots:empty{display:none;}

  .comm-imgview-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);border:none;padding:0;cursor:pointer;}

  .comm-imgview-dot.active{background:#fff;}

  .comm-imgview-actions{flex:0 0 auto;display:flex;justify-content:center;padding:4px 12px calc(14px + env(safe-area-inset-bottom));}

  .comm-imgview-actions .comm-post-actions{margin:0;gap:6px;justify-content:center;--ik:.4;}

  .comm-imgview-actions .comm-post-action{color:#fff;padding:8px 14px;font-size:13px;}

  @media (hover:hover){.comm-imgview-actions .comm-post-action:not(.liked):not(.reposted):hover{background:rgba(255,255,255,.12);color:#fff;}}

  .comm-imgview-actions .comm-post-action.liked{color:var(--orange);}

  .comm-imgview-actions .comm-post-action.reposted{color:#5fd6c3;}

  .comm-imgview-close{position:fixed;top:calc(14px + env(safe-area-inset-top));right:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:rgba(12,16,22,.5);border-radius:50%;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;}


  .comm-post-actions{display:flex;align-items:center;gap:6px;margin-top:14px;}

  .comm-post-action{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:100px;border:none;background:none;color:var(--navy-45);font-size:14px;font-weight:600;cursor:pointer;transition:background .15s,color .15s;}

  @media (hover:hover){.comm-post-action:hover{background:var(--navy-06);color:var(--navy);}}

  .comm-post-action.liked{color:var(--orange);}

  .comm-post-action.liked svg{fill:var(--orange);}

  .comm-post-action{white-space:nowrap;}
  .comm-post-action.comm-save-btn{margin-left:auto;padding-inline:10px;}
  .comm-post-action.comm-save-btn.is-saved{color:var(--teal-dark,#0f766d);}

  /* Web only -- the feed's avatars/spacing/type were sized for a much
     wider column than the actual centered feed uses, so posts read as
     oversized on desktop even though mobile was already tuned. Scaled
     down to match, without touching the (already correct) <=720px rules
     below. */
  @media (min-width:721px){
    .comm-post{gap:10px;padding:17px 0;}
    .comm-post-avatar{width:44px;height:44px;font-size:14px;}
    .comm-post-name{font-size:13.5px;}
    .comm-post-title{font-size:12px;}
    .comm-post-time{font-size:11.5px;}
    .comm-post-text{font-size:12.5px;}
    .comm-post-img,.comm-post-img img,.comm-post-img video{max-height:min(78vh,760px);}
    .comm-post-actions{gap:2px;margin-top:10px;}
    .comm-post-action{padding:6px 10px;gap:5px;font-size:12.5px;}
    .comm-identity-logo{width:22px;height:22px;}
  }

  @media (max-width:720px){
    .comm-post{gap:10px;}
    .comm-post-avatar{width:48px;height:48px;font-size:15.5px;}
    .comm-post-actions{gap:0;margin-left:-8px;}
    .comm-post-action{padding:8px 9px;gap:5px;font-size:13.5px;}
  }

  .comm-post-action-note{font-size:13px;color:var(--navy-45);margin-top:4px;}


  /* ---- Action row: picker + like / comment / repost / send, icon and
     count only (no text labels) ---- */
  .comm-post-actions{gap:0;margin-left:-6px;--ik:.38;}

  .comm-post-action{padding:8px 13px;gap:6px;font-size:12.5px;font-weight:400;color:#3c3c3c;}

  @media (hover:hover){.comm-post-action:not(.liked):not(.reposted):hover{color:#3c3c3c;}}

  .comm-post-action .ico{flex-shrink:0;display:block;}

  .ico-heart{width:calc(58px * var(--ik));height:calc(52px * var(--ik));}

  .ico-comment{width:calc(56px * var(--ik));height:calc(56px * var(--ik));}

  .ico-repost{width:calc(55px * var(--ik));height:calc(56px * var(--ik));}

  .ico-send{width:calc(55px * var(--ik));height:calc(56px * var(--ik));}

  .comm-like-btn .ico-fill{display:none;}

  .comm-like-btn.liked .ico-fill{display:inline;}

  .comm-post-action.reposted{color:var(--teal,#1B7A6E);}

  .comm-as-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 8px 4px 6px;margin-right:4px;border:none;background:none;border-radius:100px;color:var(--navy-65,#5c6470);cursor:pointer;-webkit-tap-highlight-color:transparent;}

  .comm-as-btn[hidden]{display:none;}

  @media (hover:hover){.comm-as-btn:hover{background:var(--navy-06);}}

  .comm-as-av{width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--navy-06);color:var(--navy-65,#5c6470);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}

  .comm-as-av img{width:100%;height:100%;object-fit:cover;display:block;}

  .comm-as-sheet{width:360px;}

  .comm-as-opt{display:flex;align-items:center;gap:14px;width:100%;padding:10px 12px;border:none;background:none;border-radius:12px;font-family:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}

  @media (hover:hover){.comm-as-opt:hover{background:var(--navy-04,#f4f5f3);}}

  .comm-as-opt-logo{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--navy-06);color:var(--navy-65,#5c6470);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

  .comm-as-opt-logo img{width:100%;height:100%;object-fit:cover;display:block;}

  .comm-as-opt-name{flex:1;min-width:0;font-size:15.5px;font-weight:600;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .comm-as-radio{width:28px;height:28px;border-radius:50%;border:2px solid var(--navy-45);flex-shrink:0;display:flex;align-items:center;justify-content:center;}

  .comm-as-opt.picked .comm-as-radio{border:none;background:var(--teal,#1B7A6E);}

  .comm-as-opt.picked .comm-as-radio::after{content:'';width:10px;height:10px;border-radius:50%;background:#fff;}

  .comm-as-btnrow{display:flex;gap:10px;padding:10px 12px 6px;}

  .comm-as-save{flex:1;padding:13px 14px;border-radius:100px;border:none;background:var(--teal,#1B7A6E);color:#fff;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;}

  .comm-as-save:disabled{background:var(--navy-06);color:var(--navy-45);cursor:default;}

  .comm-as-cancel{flex:1;padding:13px 14px;border-radius:100px;border:1.5px solid var(--navy);background:var(--white,#fff);color:var(--navy);font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;}

  @media (max-width:720px){
    .comm-post-actions{gap:0;margin-left:-6px;--ik:.37;}
    .comm-post-action{padding:8px 8px;gap:5px;font-size:12.5px;}
    .comm-as-sheet{width:100%;}
    .comm-as-opt{padding:12px 0;}
    .comm-as-opt-logo{width:56px;height:56px;font-size:16px;}
    .comm-as-opt-name{font-size:17px;}
    .comm-as-btnrow{padding:16px 0 4px;border-top:1px solid var(--navy-06);margin-top:10px;}
    .comm-as-save,.comm-as-cancel{padding:15px 14px;font-size:16px;}
  }


  /* ---- Post "..." menu. Bottom sheet on phones, anchored popover on
     desktop; one markup, one set of handlers, same actions either way. ---- */
  .comm-post-body{position:relative;}

  .comm-post-more{position:absolute;top:-8px;right:-10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;color:var(--navy-45);cursor:pointer;-webkit-tap-highlight-color:transparent;}

  @media (hover:hover){.comm-post-more:hover,.comm-post-more:active{background:var(--navy-06);color:var(--navy);}}

  .comm-post-more + .comm-post-top{padding-right:34px;}

  /* Higher than the image/video viewer (1500) AND the comments sheet that
     can sit on top of it (1600) -- otherwise tapping "..." on a comment
     while the viewer is open renders this menu BEHIND both, so it looks
     like nothing happened until you back out of the viewer. */
  .comm-pmenu-backdrop{position:fixed;inset:0;z-index:1700;display:none;background:transparent;}

  .comm-pmenu-backdrop.open{display:block;}

  .comm-pmenu{position:fixed;width:300px;max-width:calc(100vw - 16px);background:var(--white,#fff);border:1px solid var(--navy-10);border-radius:14px;box-shadow:0 18px 40px -14px rgba(27,33,45,.38);padding:6px;font-family:'Cabinet Grotesk',sans-serif;}

  .comm-pmenu-handle{display:none;}

  .comm-pmenu-item{display:flex;align-items:center;gap:14px;width:100%;padding:12px 12px;border:none;background:none;border-radius:10px;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--navy);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;}

  @media (hover:hover){.comm-pmenu-item:hover{background:var(--navy-04,#f4f5f3);}}

  .comm-pmenu-item:disabled{opacity:.55;cursor:default;}

  .comm-pmenu-item svg{flex-shrink:0;}

  .comm-pmenu-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .comm-pmenu-item.danger{color:#B5432F;}

  /* Own-post menu: the Edit item is greyed out (not a real disabled
     button, so a tap can still surface the "why" toast) once a post is
     past the 8-hour edit window. */
  .comm-pmenu-item.is-disabled{opacity:.5;cursor:default;}

  @media (hover:hover){.comm-pmenu-item.is-disabled:hover{background:none;}}

  /* Audience / reply-audience option rows: label + one-line description
     on the left, a checkmark on the currently-selected option's right --
     needs its own layout since the plain icon+label item above is a
     single ellipsis-clamped line. */
  .comm-pmenu-item.opt{justify-content:space-between;align-items:center;}

  .comm-pmenu-optwrap{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}

  .comm-pmenu-optlabel{font-size:14.5px;font-weight:600;color:var(--navy);white-space:normal;}

  .comm-pmenu-optdesc{font-size:11.5px;font-weight:400;color:var(--navy-45);white-space:normal;}

  .comm-pmenu-item.opt svg{color:var(--teal,#1B7A6E);margin-left:10px;}

  .comm-pmenu-sep{height:1px;background:var(--navy-06);margin:6px 8px;}

  .comm-pmenu-title{font-size:14px;font-weight:700;color:var(--navy);padding:10px 12px 6px;}

  .comm-pmenu-text{font-size:14px;line-height:1.5;color:var(--navy-65,#5c6470);padding:2px 12px 12px;}

  .comm-pmenu-btnrow{display:flex;gap:10px;padding:0 12px 8px;}

  .comm-pmenu-btn{flex:1;padding:12px 14px;border-radius:100px;border:1px solid var(--navy-10);background:var(--white,#fff);font-family:inherit;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;}

  .comm-pmenu-btn.danger{background:#B5432F;border-color:#B5432F;color:#fff;}

  .comm-pmenu-btn.primary{background:var(--teal,#1B7A6E);border-color:var(--teal,#1B7A6E);color:#fff;}

  .comm-pmenu-btn:disabled{opacity:.6;cursor:default;}

  .comm-pmenu-editwrap{padding:4px 12px 8px;}

  .comm-pmenu-edit-textarea{width:100%;min-height:110px;padding:10px 12px;margin:2px 0 8px;border:1px solid var(--navy-10);border-radius:var(--r-md);font-family:inherit;font-size:14px;color:var(--navy);resize:vertical;box-sizing:border-box;}

  .comm-pmenu-edit-hint{font-size:11.5px;color:var(--navy-45);padding:0 0 10px;}

  .comm-pmenu-editwrap .comm-pmenu-btnrow{padding:0;}

  @media (max-width:720px){
    .comm-pmenu-backdrop{background:rgba(12,16,22,.5);opacity:0;transition:opacity .2s;}
    .comm-pmenu-backdrop.open{opacity:1;}
    .comm-pmenu{left:0 !important;right:0;bottom:0;top:auto !important;width:100%;max-width:none;border:none;border-radius:20px 20px 0 0;box-shadow:none;padding:6px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);}
    .comm-pmenu-backdrop.open .comm-pmenu{transform:translateY(0);}
    .comm-pmenu-handle{display:block;width:40px;height:5px;border-radius:5px;background:#000;margin:8px auto 10px;}
    .comm-pmenu-item{font-size:14px;padding:12px 4px;gap:14px;min-height:44px;}
    @media (hover:hover){.comm-pmenu-item:hover{background:none;}}
    .comm-pmenu-sep{margin:6px 0;}
    .comm-pmenu-title{font-size:14px;padding:10px 4px 6px;}
    .comm-pmenu-text{font-size:13px;padding:2px 4px 14px;}
    .comm-pmenu-btnrow{padding:0 0 6px;}
    .comm-pmenu-btn{padding:12px;font-size:13.5px;}
    .comm-post-more{right:-12px;}
  }


  /* ---- Post detail modal: dedicated full-post + full-thread view,
     opened by tapping a post or its Comment action. Full-screen sheet on
     mobile (same idea as the posts.html composer), centered card on
     desktop. ---- */
  .comm-modal-backdrop{position:fixed;inset:0;z-index:1100;background:rgba(12,16,22,.5);display:none;justify-content:flex-end;opacity:0;transition:opacity .28s ease;}

  .comm-modal-backdrop.is-visible{display:flex;}

  .comm-modal-backdrop.open{opacity:1;}

  .comm-modal{background:var(--white);width:100%;max-width:640px;height:100%;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);}

  .comm-modal-backdrop.open .comm-modal{transform:translateX(0);}

  @media (min-width:720px){.comm-modal-backdrop{background:rgba(12,16,22,.35);}.comm-modal{box-shadow:-30px 0 70px -20px rgba(27,33,45,.4);}}


  /* ---- Comments sheet: the same panel/backdrop, in "comments only" mode.
     Tapping a post's Comment action opens this instead of the full-post
     side panel above -- it slides up from the bottom, skips the post
     preview, and is sized to content instead of filling the screen. ---- */
  .comm-modal-handle{display:none;}

  /* Higher than the image viewer's z-index (1500) so tapping Comment
     from inside the fullscreen photo/video viewer slides the comments
     sheet up on top of it, instead of underneath it. */
  .comm-modal-backdrop.is-comments-sheet{align-items:flex-end;justify-content:center;z-index:1600;}

  .comm-modal-backdrop.is-comments-sheet .comm-modal{max-width:640px;height:auto;max-height:82vh;border-radius:18px 18px 0 0;transform:translateY(100%);}

  .comm-modal-backdrop.is-comments-sheet.open .comm-modal{transform:translateY(0);}

  .comm-modal-backdrop.is-comments-sheet .comm-modal-handle{display:block;width:38px;height:5px;border-radius:5px;background:#000;margin:9px auto 2px;flex-shrink:0;}

  .comm-modal-backdrop.is-comments-sheet .comm-modal-post{display:none;}

  .comm-modal-backdrop.is-comments-sheet .comm-modal-header{padding-top:2px;}

  @media (min-width:720px){.comm-modal-backdrop.is-comments-sheet .comm-modal{box-shadow:0 -20px 60px -20px rgba(27,33,45,.4);}}

  .comm-modal-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 14px;flex-shrink:0;}

  .comm-modal-title{flex:1;text-align:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:15.5px;color:var(--navy);}

  .comm-modal-header-spacer{width:38px;flex-shrink:0;}

  .comm-modal-body{flex:1;min-height:0;overflow-y:auto;padding:0 16px;}

  .comm-modal-post{padding:6px 0 2px;border-bottom:1px solid var(--navy-06);}

  .comm-modal-post .comm-post-avatar{width:48px;height:48px;}

  .comm-modal-post .comm-post-actions{margin-bottom:4px;}


  .comm-comment-list{display:flex;flex-direction:column;gap:16px;padding:14px 0 20px;}

  .comm-comment-empty{font-size:12.5px;color:var(--navy-45);padding:14px 0;text-align:center;}

  /* ---- TikTok-style comment row: no card/bubble behind the text --
     name and text sit directly on the page background, one plain meta
     row underneath (like count + time + Reply all the same weight, so
     "9h ago" no longer reads as visually different from the rest). ---- */
  .comm-comment{display:flex;gap:9px;}

  .comm-comment-avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--white);border:1.5px solid var(--navy-06);color:var(--navy-45);font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:11.5px;}

  .comm-comment-col{flex:1;min-width:0;}

  .comm-comment-name{font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:12px;color:var(--navy);}

  .comm-comment-text{font-size:13.5px;font-weight:400;color:var(--navy);line-height:1.4;white-space:pre-wrap;word-break:break-word;margin-top:2px;}

  .comm-comment-photo{margin-top:8px;}

  .comm-comment-photo img{max-width:190px;max-height:190px;border-radius:12px;object-fit:cover;border:1px solid var(--navy-06);display:block;}

  .comm-comment-meta{display:flex;align-items:center;gap:16px;margin:6px 0 0;}

  .comm-comment-meta button,
  .comm-comment-meta .comm-comment-time{border:none;background:none;padding:0;font-family:inherit;font-size:11.5px;font-weight:600;color:var(--navy-45);cursor:pointer;display:inline-flex;align-items:center;gap:4px;}

  @media (hover:hover){.comm-comment-meta button:hover{color:var(--navy);}}

  .comm-comment-meta .comm-comment-time{cursor:default;}

  .comm-comment-like-btn.liked{color:var(--orange);}

  .comm-comment-like-btn svg{width:12px;height:12px;}

  .comm-comment-like-btn.liked svg{fill:var(--orange);}

  .comm-comment-share-btn svg,.comm-comment-more-btn svg{width:13px;height:13px;}

  /* Author-liked badge: the post author's tiny avatar with a filled orange
     heart peeking out of its bottom-right corner, Instagram-style. Sits in
     the meta row, right before the "..." button. */
  .comm-author-like-badge{position:relative;display:inline-flex;width:16px;height:16px;flex-shrink:0;}

  .comm-author-like-badge img,.comm-author-like-badge-fallback{width:16px;height:16px;border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background:var(--white);border:1px solid var(--navy-06);color:var(--navy-45);font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:7px;}

  .comm-author-like-badge svg{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;color:var(--orange);background:var(--white);border-radius:50%;padding:1px;box-sizing:content-box;}

  .comm-comment-more-btn{margin-left:auto;}


  /* Replies collapse behind "View N replies" -- matches TikTok/Instagram:
     nothing past the top-level comment shows until tapped. */
  .comm-view-replies-btn{display:flex;align-items:center;gap:6px;margin:10px 0 0;border:none;background:none;padding:0;font-family:'Cabinet Grotesk',sans-serif;font-size:12px;font-weight:600;color:var(--navy-45);cursor:pointer;}

  @media (hover:hover){.comm-view-replies-btn:hover{color:var(--navy);}}

  .comm-view-replies-btn::before{content:'';width:20px;height:1px;background:var(--navy-25,#9aa39c);flex-shrink:0;}

  .comm-view-replies-btn svg{transition:transform .15s;flex-shrink:0;}

  .comm-view-replies-btn.expanded svg{transform:rotate(180deg);}

  .comm-replies{display:none;flex-direction:column;gap:14px;margin:12px 0 0 20px;}

  .comm-replies.expanded{display:flex;}


  /* Replying to a specific comment no longer opens its own inline box --
     tapping "Reply" focuses the one shared composer at the bottom (below)
     with "@name " pre-filled, same as Instagram. The reply still lands
     nested under that comment (parentCommentId), just typed from the one
     shared bar instead of a per-comment mini-form. */

  /* Quick emoji row -- sits directly above the composer, matches
     Instagram's default reaction row above the comment field. Tapping
     inserts the emoji into the reply input at the cursor. */
  .comm-reply-emoji-row{display:flex;gap:16px;padding:8px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-top:1px solid var(--navy-06);background:var(--white);flex-shrink:0;}

  .comm-reply-emoji-row::-webkit-scrollbar{display:none;}

  .comm-reply-emoji-btn{font-size:20px;line-height:1;background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;}

  .comm-reply-emoji-btn:active{transform:scale(0.85);}


  /* One-photo-at-a-time preview above the input once picked, with a
     remove (x) button -- shown/hidden entirely in JS. */
  .comm-reply-photo-preview{display:flex;align-items:center;gap:8px;padding:8px 16px 0;flex-shrink:0;}

  .comm-reply-photo-preview img{width:52px;height:52px;border-radius:9px;object-fit:cover;border:1px solid var(--navy-06);}

  .comm-reply-photo-remove{width:20px;height:20px;border-radius:50%;background:var(--navy-45);color:var(--white);border:none;font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;}


  .comm-comment-form{display:flex;gap:8px;align-items:center;padding:10px 16px;flex-shrink:0;background:var(--white);}

  .comm-reply-avatar-btn{position:relative;flex-shrink:0;padding:0;border:none;background:none;cursor:pointer;line-height:0;-webkit-tap-highlight-color:transparent;}

  .comm-reply-avatar-btn[hidden]{cursor:default;}

  .comm-reply-avatar{display:flex;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--navy-06);color:var(--navy-45);align-items:center;justify-content:center;font-family:'Cabinet Grotesk',sans-serif;font-weight:600;font-size:11.5px;border:1.5px solid var(--navy-06);}

  .comm-reply-avatar img{width:100%;height:100%;object-fit:cover;}

  .comm-reply-avatar-btn.has-multi::after{content:'';position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;background:var(--white);box-shadow:0 0 0 1.5px var(--navy-25,#9aa39c);}

  .comm-comment-input{flex:1;min-width:0;border:1px solid var(--navy-12,#dfe2de);border-radius:100px;padding:9px 15px;font-size:13.5px;font-family:inherit;background:var(--navy-04,#f4f5f3);color:var(--navy);}

  .comm-comment-input:focus{outline:none;border-color:var(--navy-25,#9aa39c);}

  .comm-reply-photo-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;flex-shrink:0;color:var(--navy-80,#2a303c);cursor:pointer;-webkit-tap-highlight-color:transparent;}

  @media (hover:hover){.comm-reply-photo-btn:hover{background:var(--navy-06);color:var(--navy);}}

  .comm-comment-send{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:none;color:var(--teal,#1B7A6E);cursor:pointer;flex-shrink:0;padding:0;}

  .comm-comment-send svg{width:19px;height:19px;}

  .comm-comment-send:disabled{color:var(--navy-25,#9aa39c);cursor:default;}

  /* Icon swap: the photo button is what shows by default; the moment
     there's text (or a photo already attached) it's replaced by Send --
     never both showing together. */
  .comm-comment-form.has-content .comm-reply-photo-btn{display:none;}

  .comm-comment-form.has-content .comm-comment-send{display:flex;}


  /* ================= Home polish round (post spacing, sizes, web layout) =================
     Declared last so it wins over the earlier mobile/web sizing above. */

  /* Name -> post text and post/image -> action row sit closer together. */
  .comm-post-text{margin-top:2px;}

  .comm-post-namerow{line-height:1.2;}

  .comm-post-img{margin-top:8px;}

  .comm-post-actions{margin-top:7px;--ik:.32;}

  .comm-post-action{padding:6px 10px;gap:4px;font-size:11.5px;}

  @media (max-width:720px){
    .comm-post-actions{margin-top:6px;--ik:.31;}
    .comm-post-action{padding:6px 8px;gap:4px;font-size:11.5px;}
  }

  @media (min-width:721px){
    .comm-post-actions{margin-top:5px;}
  }

  /* Picker (small avatar + caret) a touch smaller. */
  .comm-as-btn{padding:2px 5px 2px 3px;margin-right:2px;gap:3px;}

  .comm-as-btn svg{width:10px;height:10px;}

  .comm-as-av{width:24px;height:24px;font-size:10px;}


  /* "...more" is orange so it reads as tappable. */
  .comm-post-more-toggle{color:var(--orange);}

  @media (hover:hover){.comm-post-more-toggle:hover{color:var(--orange);}}


  /* The "act as" popup: smaller text and icons, phone and web. */
  .comm-as-sheet{width:290px;}

  .comm-as-opt{gap:10px;padding:7px 10px;border-radius:10px;}

  .comm-as-opt-logo{width:32px;height:32px;font-size:11px;}

  .comm-as-opt-name{font-size:13px;}

  .comm-as-radio{width:20px;height:20px;border-width:1.5px;}

  .comm-as-opt.picked .comm-as-radio::after{width:8px;height:8px;}

  .comm-as-btnrow{gap:8px;padding:8px 10px 4px;}

  .comm-as-save,.comm-as-cancel{padding:9px 12px;font-size:13px;}

  .comm-as-sheet .comm-pmenu-title{font-size:13px;padding:8px 10px 4px;}

  @media (max-width:720px){
    .comm-as-sheet{width:100%;}
    .comm-as-opt{padding:8px 0;}
    .comm-as-opt-logo{width:36px;height:36px;font-size:12px;}
    .comm-as-opt-name{font-size:14px;}
    .comm-as-btnrow{padding:12px 0 2px;margin-top:6px;}
    .comm-as-save,.comm-as-cancel{padding:11px 12px;font-size:13.5px;}
    .comm-as-sheet .comm-pmenu-title{font-size:13.5px;padding:8px 0 4px;}
  }

/* ---- Poll (feed + post-detail modal) -----------------------------------
   Rendered by postPollHtml() in post-engine.js into the same slot photos/
   videos occupy. Before voting: plain outlined option buttons, nothing
   revealed. After voting (or once the poll has closed): every option
   becomes a filled percentage bar, own pick checked, nothing clickable. */
.comm-poll{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.comm-poll-question{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.35;}
.comm-poll-opts{display:flex;flex-direction:column;gap:8px;}
.comm-poll-opt{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:var(--r-md);border:1.5px solid var(--navy-10);background:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease);}
@media (hover:hover){.comm-poll-opt:hover{border-color:var(--teal);background:var(--teal-08);}}
.comm-poll-opt:disabled{cursor:default;opacity:.6;}
.comm-poll-opt-result{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:12px 14px;border-radius:var(--r-md);border:1.5px solid var(--navy-10);overflow:hidden;font-size:13.5px;font-weight:600;color:var(--navy);}
.comm-poll-opt-result.mine{border-color:var(--teal);}
.comm-poll-opt-fill{position:absolute;inset:0;width:var(--pp-pct,0%);background:var(--navy-06);transition:width .4s var(--ease);z-index:0;}
.comm-poll-opt-result.mine .comm-poll-opt-fill{background:var(--teal-16);}
.comm-poll-opt-label{position:relative;z-index:1;display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.comm-poll-opt-check{flex-shrink:0;color:var(--teal);}
.comm-poll-opt-pct{position:relative;z-index:1;flex-shrink:0;font-weight:700;color:var(--navy-65);}
.comm-poll-meta{font-size:11.5px;color:var(--navy-45);}
.comm-poll-opt.has-img{display:flex;align-items:center;gap:12px;padding:8px 14px 8px 8px;}
.comm-poll-opt-img{position:relative;z-index:1;flex-shrink:0;width:48px;height:48px;border-radius:var(--r-sm,8px);object-fit:cover;background:var(--navy-06);}
.comm-poll-opt-text{min-width:0;}
.comm-poll-opt-result.has-img{justify-content:flex-start;}
.comm-poll-opt-result.has-img .comm-poll-opt-label{flex:1;}
.comm-post-loc{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:12px;color:var(--navy-45);}
.comm-post-loc svg{flex-shrink:0;}
.comm-post-loc span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---- "Pinned" label on a profile's pinned post ---- */
.comm-post.has-pinned{flex-wrap:wrap;}
.comm-post-pinned{flex:0 0 100%;display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:600;line-height:1;color:var(--navy-45);margin:0 0 -2px;}
.comm-post-pinned-slot{width:44px;flex-shrink:0;display:flex;justify-content:flex-end;}
.comm-post-pinned-slot svg{display:block;}
@media (max-width:720px){.comm-post-pinned-slot{width:48px;}}

/* ---- Profile "Posts" tab column: lines the list up with Home's feed
   geometry (same edge inset on phones, same column width on web) so posts
   and their edge-to-edge photos lay out identically. ---- */
.comm-profile-feed{width:100%;}
@media (min-width:721px){.comm-profile-feed{max-width:708px;}}
@media (max-width:720px){.comm-profile-feed{margin-left:var(--pf-inset,-6px);margin-right:var(--pf-inset,-6px);width:auto;}}

/* Delete icon in red */
.comm-pmenu-item.danger svg{color:#D92D20;}

/* ---- Repost: own posts can't be reposted; "<name> reposted" header ---- */
.comm-repost-btn.comm-repost-own{opacity:.35;cursor:not-allowed;}
.comm-post-reposted{margin:0 0 4px;}

/* ---- Post "..." (More) button is black, not grey ---- */
.comm-post-more{color:#111;}
@media (hover:hover){.comm-post-more:hover,.comm-post-more:active{color:#000;}}

/* ---- Web: popover cards (post More menu, follow pop, act-as) are slim, not fat ---- */
@media (min-width:721px){
  .comm-pmenu{width:228px;border-radius:12px;padding:4px;box-shadow:0 10px 28px -12px rgba(27,33,45,.32);}
  .comm-pmenu-item{gap:10px;padding:8px 10px;font-size:13px;border-radius:8px;}
  .comm-pmenu-item svg{width:18px;height:18px;}
  .comm-pmenu-optlabel{font-size:13px;}
  .comm-pmenu-optdesc{font-size:11px;}
  .comm-pmenu-sep{margin:4px 6px;}
  .comm-pmenu-title{font-size:13px;padding:8px 10px 4px;}
  .comm-pmenu-text{font-size:12.5px;padding:2px 10px 10px;}
  .comm-pmenu-btnrow{padding:0 10px 6px;gap:8px;}
  .comm-pmenu-btn{padding:8px 12px;font-size:12.5px;}
  .comm-follow-pop{min-width:160px;border-radius:12px;padding:4px;box-shadow:0 10px 28px -12px rgba(27,33,45,.32);}
  .comm-follow-pop-btn{gap:9px;padding:8px 10px;font-size:13px;border-radius:8px;}
  .comm-as-sheet{width:260px;}
  .comm-as-opt{padding:6px 9px;gap:9px;border-radius:8px;}
}

/* ---- Double-tap / double-click to like: the heart that pops on the post ---- */
.comm-post, #commImgViewStage{touch-action:manipulation;}   /* no browser double-tap zoom on posts/photos */
.pp-dtl-heart{
  position:fixed;z-index:2000;pointer-events:none;
  width:96px;height:96px;margin:-48px 0 0 -48px;
  color:var(--orange,#ED7546);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));
  transform-origin:50% 60%;
  animation:pp-dtl-pop 900ms cubic-bezier(.2,.8,.2,1) forwards;
  will-change:transform,opacity;
}
.pp-dtl-heart svg{display:block;width:100%;height:100%;}
@keyframes pp-dtl-pop{
  0%   {opacity:0;transform:rotate(var(--dtl-rot,0deg)) scale(.2);}
  16%  {opacity:1;transform:rotate(var(--dtl-rot,0deg)) scale(1.28);}
  30%  {opacity:1;transform:rotate(var(--dtl-rot,0deg)) scale(.94);}
  44%  {opacity:1;transform:rotate(var(--dtl-rot,0deg)) scale(1.06);}
  70%  {opacity:1;transform:rotate(var(--dtl-rot,0deg)) scale(1) translateY(0);}
  100% {opacity:0;transform:rotate(var(--dtl-rot,0deg)) scale(1.12) translateY(-46px);}
}
@media (prefers-reduced-motion:reduce){
  .pp-dtl-heart{animation:pp-dtl-fade 700ms ease forwards;}
  @keyframes pp-dtl-fade{0%{opacity:0}20%{opacity:1}75%{opacity:1}100%{opacity:0}}
}

/* #hashtags inside post text */
.comm-hashtag{color:var(--teal,#0F766D);font-weight:500;}
.comm-mention{color:var(--teal,#0F766D);font-weight:500;}

/* Co-authors next to a post's author name, and the "post sent" toast that drops from the header */
.comm-post-collab{font-size:15px;color:var(--navy-65,#5b6670);font-weight:400;}
.comm-post-collab .comm-collab-name{color:var(--navy);font-family:'Cabinet Grotesk',sans-serif;font-weight:600;cursor:pointer;}
@media (hover:hover){.comm-post-collab .comm-collab-name:hover{text-decoration:underline;}}
@media (max-width:720px){.comm-post-collab{font-size:13.5px;}}
.comm-sent-toast{position:fixed;top:0;left:50%;z-index:1700;display:flex;align-items:center;gap:10px;max-width:88vw;padding:12px 20px 12px 14px;border-radius:100px;background:rgba(27,33,45,.94);color:#fff;font-size:14.5px;font-weight:600;box-shadow:0 8px 28px rgba(15,23,26,.25);transform:translate(-50%,-120%);opacity:0;pointer-events:none;transition:transform .35s cubic-bezier(.2,.9,.3,1.1),opacity .25s;margin-top:calc(14px + env(safe-area-inset-top,0px));}
.comm-sent-toast.show{transform:translate(-50%,0);opacity:1;}
.comm-sent-toast svg{flex-shrink:0;}
@media (prefers-reduced-motion:reduce){.comm-sent-toast{transition:opacity .2s;}}

/* Mobile video viewer fallback for browsers without wrapper fullscreen. */
body.comm-video-viewer-open{overflow:hidden!important}
.comm-video-wrap.comm-video-fallback-fullscreen{position:fixed!important;inset:0!important;z-index:3000!important;width:100vw!important;height:100dvh!important;max-width:none!important;display:flex!important;align-items:center!important;justify-content:center!important;background:#000!important;border-radius:0!important}
.comm-video-wrap.comm-video-fallback-fullscreen video{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.comm-video-wrap.comm-video-fallback-fullscreen .comm-video-controls{opacity:1}
@media(max-width:720px){.comm-reply-photo-btn svg{width:25px!important;height:25px!important}}

.comm-profile-grid-cover{object-position:var(--cover-position,50% 50%)}.comm-comment-form.comments-off{opacity:.72}.comm-comment-form.comments-off .comm-comment-input{background:#f1f3f4;color:#828a91}.comm-comment-form.comments-off .comm-comment-send{display:none}.pcc-cover-adjust{margin:8px 0 2px;font-size:11px;color:var(--navy-65)}.pcc-cover-adjust label{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.pcc-cover-adjust span{display:inline-flex;align-items:center;gap:5px}.pcc-cover-adjust input{width:86px;accent-color:var(--teal)}

.comm-video-more{position:absolute;top:10px;left:10px;z-index:3;width:32px;height:32px;border:0;border-radius:50%;background:rgba(20,22,26,.6);color:#fff;font-family:inherit;font-size:20px;font-weight:700;line-height:1;cursor:pointer}.comm-video-options{position:absolute;left:10px;top:48px;z-index:9;width:min(280px,calc(100% - 20px));padding:10px;background:#fff;color:#18232a;border-radius:16px;box-shadow:0 12px 40px #0004;line-height:1.3}.comm-video-options[hidden]{display:none}.comm-video-options-head{font-weight:700;padding:8px 10px 10px}.comm-video-options button{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;border:0;background:none;color:inherit;text-align:left;font-family:inherit;font-size:14px;font-weight:500;padding:10px;border-radius:8px}.comm-video-options button:active{background:#f0f4f4}

/* ---- Full-screen video viewer (tap a video) ---------------------------------- */
.comm-vv{position:fixed;inset:0;z-index:3600;background:#000;color:#fff;opacity:0;transition:opacity .18s ease;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;font-family:inherit}
.comm-vv.open{opacity:1}
.comm-vv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
.comm-vv.is-fill .comm-vv-video{object-fit:cover}
.comm-vv-zone{position:absolute;inset:0;touch-action:none;-webkit-tap-highlight-color:transparent}
.comm-vv-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 14px 0;z-index:3;pointer-events:none;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,0));height:90px;box-sizing:border-box}
.comm-vv-round{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:0;background:rgba(40,40,40,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.comm-vv-pill{position:absolute;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:4;background:rgba(0,0,0,.6);color:#fff;font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;pointer-events:none}
.comm-vv-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:46px 16px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72) 38%,rgba(0,0,0,.86));pointer-events:none;box-sizing:border-box}
.comm-vv-bottom>*{pointer-events:auto}
.comm-vv-author{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.comm-vv-av{width:38px;height:38px;border-radius:9px;background:#0f766d;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.comm-vv-av img{width:100%;height:100%;object-fit:cover;display:block}
.comm-vv-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.comm-vv-who b{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.comm-vv-who small{font-size:12.5px;color:rgba(255,255,255,.7)}
.comm-vv .comm-follow-pill{position:static!important;margin:0!important;transform:none!important;flex:none;background:rgba(255,255,255,.2)!important;color:#fff!important;border:0!important;border-radius:999px!important;padding:8px 16px!important;width:auto!important;height:auto!important;font-size:14px!important;font-weight:700!important}
.comm-vv-caption{font-size:14.5px;line-height:1.4;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.comm-vv-actions .comm-post-actions{display:flex;gap:8px;margin:0 0 6px;padding:0;border:0;background:none;flex-wrap:nowrap;overflow:hidden}
.comm-vv-actions .comm-as-btn{display:none!important}
.comm-vv-actions .comm-post-action{background:rgba(255,255,255,.16)!important;color:#fff!important;border:0;border-radius:999px;height:40px;min-width:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:600;flex:0 1 auto}
.comm-vv-actions .comm-post-action .ico{width:19px;height:19px;color:inherit}
.comm-vv-actions .comm-like-btn.liked{color:#ff4d6d!important}
.comm-vv-progress{height:3px;background:rgba(255,255,255,.28);border-radius:2px;margin:8px 0 2px;position:relative;touch-action:none;cursor:pointer}
.comm-vv-progress::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.comm-vv-progress i{display:block;height:100%;width:0;background:#fff;border-radius:2px}
.comm-vv-ctrl{display:flex;align-items:center;gap:6px;height:48px}
.comm-vv-ibtn{background:none;border:0;color:#fff;min-width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font:inherit;font-size:16px;font-weight:700}
.comm-vv-time{font-size:15px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums;margin-left:4px}
.comm-vv-spacer{flex:1}
.comm-vv-sheetbg{position:absolute;inset:0;z-index:6;background:rgba(0,0,0,0);display:flex;align-items:flex-end;transition:background .18s}
.comm-vv-sheetbg[hidden]{display:none}
.comm-vv-sheetbg.show{background:rgba(0,0,0,.4)}
.comm-vv-sheet{width:100%;background:#fff;color:#14181f;border-radius:22px 22px 0 0;padding:8px 16px calc(14px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .22s ease;box-sizing:border-box;max-height:88vh;overflow-y:auto}
.comm-vv-sheetbg.show .comm-vv-sheet{transform:none}
.comm-vv-grab{width:38px;height:4px;border-radius:2px;background:#d8dde0;margin:4px auto 12px}
.comm-vv-seg{display:flex;background:#eef0f1;border-radius:11px;padding:3px;margin-bottom:6px}
.comm-vv-seg button{flex:1;border:0;background:none;padding:10px 0;font:inherit;font-size:15px;color:#555;border-radius:9px;cursor:pointer}
.comm-vv-seg button.active{background:#fff;color:#111;font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.comm-vv-row{display:flex;align-items:center;gap:16px;width:100%;border:0;background:none;padding:15px 6px;font:inherit;font-size:17px;color:#14181f;text-align:left;cursor:pointer}
.comm-vv-row span{flex:1}
.comm-vv-row em{font-style:normal;color:#555;font-size:16px}
.comm-vv-switch{width:52px;height:30px;border-radius:15px;background:#cfd5d8;position:relative;flex:none;transition:background .15s}
.comm-vv-switch::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}
.comm-vv-row.on .comm-vv-switch{background:#0f9d6e}
.comm-vv-row.on .comm-vv-switch::after{transform:translateX(22px)}
@media (min-width:721px){
  .comm-vv-sheet{max-width:460px;margin:0 auto}
}

/* Big centred speaker flash on mute / unmute tap */
.comm-video-wrap{position:relative;}
.pp-speaker-flash{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(20,22,26,.6);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;z-index:6;transform:scale(.8);}
.pp-speaker-flash.show{animation:ppSpeakerFlash .8s ease-out forwards;}
@keyframes ppSpeakerFlash{0%{opacity:0;transform:scale(.8);}20%{opacity:1;transform:scale(1);}70%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1.08);}}

/* Text-only post tiles in the profile grid: a quote-card instead of a bare grey box */
html body .comm-profile-grid-tile.is-text{background:linear-gradient(145deg,#0f3d36,#1b7a6e);color:#fff;}
html body .comm-profile-grid-tile.is-text::before{content:"\201C";position:absolute;left:10px;top:2px;font:700 38px/1 Georgia,serif;color:rgba(255,255,255,.35);}
html body .comm-profile-grid-tile.is-text .comm-profile-grid-text{padding:30px 12px 12px;font-weight:600;-webkit-line-clamp:6;}
/* Much smaller carousel / multi-video badges on the post grid */
html body .comm-profile-grid-carousel,html body .pf-badge{right:6px;top:6px;}
html body .comm-profile-grid-carousel svg,html body .pf-badge svg{width:14px !important;height:14px !important;}
@media(max-width:720px){html body .comm-profile-grid-carousel svg,html body .pf-badge svg{width:12px !important;height:12px !important;}html body .comm-profile-grid-tile.is-text::before{font-size:30px;left:7px;}html body .comm-profile-grid-tile.is-text .comm-profile-grid-text{padding:24px 8px 8px;}}
.comm-video-mute svg{width:18px;height:18px;}.comm-video-mute{width:34px;height:34px;}

/* ===== Edge-to-edge feed media (phones) =====
   Photos, videos and carousels run the full width of the screen like Instagram / TikTok.
   Avatar, name, caption and the reaction row stay exactly where they were (LinkedIn-style). */
@media (max-width:720px){
  html body .comm-post .comm-post-img{display:block;width:calc(100% + var(--pp-bl) + var(--pp-br));max-width:none;margin:10px calc(-1 * var(--pp-br)) 0 calc(-1 * var(--pp-bl));border-radius:0;}
  html body .comm-post .comm-post-img img,html body .comm-post .comm-post-img video{width:100%;max-width:none;height:auto;max-height:min(80vh,640px);min-height:200px;object-fit:cover;border-radius:0;}
  html body .comm-post .comm-post-img .comm-video-wrap{display:block;width:100%;max-width:none;}
  html body .comm-post .comm-post-gallery{--gh:auto;--gr:0px;--gg:0px;margin:10px calc(-1 * var(--pp-br)) 0 calc(-1 * var(--pp-bl));width:calc(100% + var(--pp-bl) + var(--pp-br));}
  html body .comm-post .comm-post-gallery-track{padding-left:0;scroll-padding-left:0;gap:0;scroll-snap-type:x mandatory;border-radius:0;}
  html body .comm-post .comm-post-gallery-track::after{display:none;}
  html body .comm-post .comm-post-gallery-item{flex:0 0 100%;height:auto;aspect-ratio:4/5;border-radius:0;scroll-snap-align:start;scroll-snap-stop:always;}
  /* the post opened in the side panel keeps its normal inset layout */
  html body .comm-modal-post .comm-post-img,html body .comm-modal-post .comm-post-gallery{width:100%;margin-left:0;margin-right:0;border-radius:14px;}
  html body .comm-modal-post .comm-post-gallery-item{border-radius:0;}
}

/* ===== Edge-to-edge feed media (web) -- same layout as phones ===== */
@media (min-width:721px){
  html body .comm-post .comm-post-img{display:block;width:calc(100% + var(--pp-bl) + var(--pp-br));max-width:none;margin:10px calc(-1 * var(--pp-br)) 0 calc(-1 * var(--pp-bl));border-radius:0;}
  html body .comm-post .comm-post-img img,html body .comm-post .comm-post-img video{width:100%;max-width:none;height:auto;max-height:min(78vh,720px);min-height:240px;object-fit:cover;border-radius:0;}
  html body .comm-post .comm-post-img .comm-video-wrap{display:block;width:100%;max-width:none;}
  html body .comm-post .comm-post-gallery{margin:10px calc(-1 * var(--pp-br)) 0 calc(-1 * var(--pp-bl));width:calc(100% + var(--pp-bl) + var(--pp-br));--gar:4/5;}
  html body .comm-post .comm-post-gallery-track{border-radius:0;}
  html body .comm-modal-post .comm-post-img,html body .comm-modal-post .comm-post-gallery{width:100%;margin-left:0;margin-right:0;border-radius:14px;}
}


/* ---- Composer follow-up: carousel indicator, comments sheet, pins, drafts ---- */
.comm-gal-count{display:none;}
@media (max-width:720px){
  .comm-post-gallery{position:relative;}
  .comm-gal-count{display:block;position:absolute;right:12px;top:12px;z-index:3;background:rgba(20,24,30,.66);color:#fff;font-size:12px;font-weight:600;line-height:1;border-radius:999px;padding:6px 10px;pointer-events:none;letter-spacing:.02em;}
  .comm-gal-dots{display:flex;position:absolute;left:0;right:0;bottom:10px;justify-content:center;gap:5px;pointer-events:none;z-index:3;}
  .comm-gal-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 3px rgba(0,0,0,.45);transition:background .15s,transform .15s;}
  .comm-gal-dot.active{background:#fff;transform:scale(1.2);}
}
@media (min-width:721px){ .comm-gal-count{display:block;position:absolute;right:10px;top:10px;z-index:3;background:rgba(20,24,30,.66);color:#fff;font-size:12px;font-weight:600;line-height:1;border-radius:999px;padding:6px 10px;pointer-events:none;} }
/* comments sheet: no back arrow, the handle at the top is the way to slide it down */
.comm-modal-backdrop.is-comments-sheet #commModalCloseBtn,.comm-modal-backdrop.is-comments-sheet .comm-modal-header-spacer{display:none;}
.comm-modal-backdrop.is-comments-sheet .comm-modal-header{justify-content:center;}
/* grid tags: Pinned and Draft are orange, not red */
html body .comm-profile-grid-pin{background:#F27A2F !important;color:#fff;}
.comm-profile-grid-draft{position:absolute;left:0;top:0;padding:4px 9px;background:#F27A2F;color:#fff;font-size:11px;font-weight:700;border-radius:0 0 6px 0;z-index:2;}
.comm-profile-grid-tile.is-draft{outline:0;}

a.comm-profile-grid-tile.is-draft{display:block;position:relative;text-decoration:none;color:inherit;}
.comm-profile-grid-draftsize{position:absolute;left:8px;bottom:8px;z-index:2;display:flex;align-items:center;gap:5px;color:#fff;font-size:12.5px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.55);}
.comm-profile-grid-draftsize svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---- Stage 14: Instagram-style post header ----
   logo(s) | name (and co-author) over "place . time"; the caption, photos and actions start on their own lines,
   level with the logo's left edge. "...more" is grey. */
.comm-post{flex-wrap:wrap;gap:0;--av:44px;}
@media (max-width:720px){.comm-post{--av:48px;}}
.comm-modal-post{--av:48px;}
.comm-post-head{flex:0 0 100%;display:flex;align-items:center;gap:10px;position:relative;min-width:0;}
.comm-post-headtext{flex:1;min-width:0;padding-right:34px;}
.comm-post-namerow{display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;line-height:1.25;}
.comm-post-sub{display:flex;align-items:center;gap:5px;margin-top:1px;font-size:12px;line-height:1.3;color:var(--navy-45);min-width:0;white-space:nowrap;}
.comm-post-sub .comm-post-loc-text{min-width:0;overflow:hidden;text-overflow:ellipsis;}
.comm-post-sub .comm-post-dot{flex:0 0 auto;}
.comm-post-sub .comm-post-time{flex:0 0 auto;font-size:inherit;color:inherit;}
.comm-post-body{flex:0 0 100%;min-width:0;margin-top:10px;}
.comm-post-body .comm-post-text{margin-top:0;}
.comm-post-head .comm-post-more{top:50%;right:-10px;transform:translateY(-50%);}
.comm-post-collab{font-size:inherit;}
.comm-post-collab .comm-post-collab-and{color:var(--navy-45);}
.comm-avatar-stack{position:relative;width:var(--av);height:var(--av);flex:0 0 var(--av);align-self:flex-start;line-height:normal;}
.comm-avatar-stack .comm-post-avatar,.comm-avatar-stack .comm-collab-avatar{position:absolute;box-sizing:border-box;width:calc(var(--av) * .72);height:calc(var(--av) * .72);border-radius:50%;border:2px solid #fff;object-fit:cover;font-size:calc(var(--av) * .28);}
.comm-avatar-stack .comm-post-avatar{top:0;right:0;z-index:1;}
.comm-avatar-stack .comm-collab-avatar{bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#1B212D;color:#fff;font-weight:700;cursor:pointer;}
.comm-post-more-toggle,.comm-post-more-toggle:hover{color:#8A9099;font-weight:500;}
@media (hover:hover){.comm-post-more-toggle:hover{color:#6B7280;text-decoration:none;}}
.comm-post-namerow{font-size:15px;}
@media (min-width:721px){.comm-post-namerow{font-size:13.5px;}}
.comm-avatar-stack .comm-post-avatar{background:#E8ECEB;color:#4A5553;border-color:#fff;}
.comm-post-collab .comm-collab-name,.comm-post-collab .comm-collab-name:hover{text-decoration:none;}

/* ---- Stage 14b: collab header fixes ----
   The author's logo was a near-white circle with grey initials, mostly hidden behind the co-author's dark one.
   Now it is a solid, readable circle with its initials shifted into the visible (top-right) part, and the
   co-author's logo is a little smaller so more of the author's shows. No underline on any name in the header. */
.comm-avatar-stack .comm-post-avatar{width:calc(var(--av) * .78);height:calc(var(--av) * .78);background:#0F766D;color:#fff;border:2px solid #fff;font-weight:700;font-size:calc(var(--av) * .3);padding:0 0 calc(var(--av) * .2) calc(var(--av) * .22);}
.comm-avatar-stack img.comm-post-avatar{padding:0;background:#E8ECEB;}
.comm-avatar-stack .comm-collab-avatar{width:calc(var(--av) * .58);height:calc(var(--av) * .58);font-size:calc(var(--av) * .24);}
.comm-post-namerow,.comm-post-namerow *,.comm-post-namerow *:hover,.comm-post-namerow .comm-post-name[data-author-id]:hover{text-decoration:none !important;}

/* ---- Stage 14c: tiny faint scrollbars on mobile, across the feed ---- */
@media (max-width:720px){
  /* Stage 16e: tiny, faint, short scrollbars on phones for scrollable panels, lists and sheets (was fully hidden).
     The page itself keeps no native bar (no layout shift): pp-overlays.js draws its short page scroller. */
  html,body{scrollbar-width:none;-ms-overflow-style:none;}
  html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}
  *:not(html):not(body)::-webkit-scrollbar{display:block;width:3px;height:3px;background:transparent;}
  *:not(html):not(body)::-webkit-scrollbar-track{background:transparent;}
  *:not(html):not(body)::-webkit-scrollbar-thumb{background:rgba(27,33,45,.16);background-clip:padding-box;border-radius:3px;border-top:14px solid transparent;border-bottom:14px solid transparent;}
}
@supports not selector(::-webkit-scrollbar){@media (max-width:720px){*:not(html):not(body){scrollbar-width:thin;scrollbar-color:rgba(27,33,45,.16) transparent;}}}

/* ---- Stage 4: feed video is clean (viewer has the controls); icon swap works; viewer spinner ---- */
svg[hidden]{display:none!important}
.comm-post .comm-video-more,.comm-post .comm-video-options,.comm-post .comm-video-controls{display:none!important}
.comm-imgview-backdrop.open{background:#000}
.comm-vv-spin{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;animation:commVvSpin .8s linear infinite;z-index:2;opacity:0;pointer-events:none;transition:opacity .15s}
.comm-vv.is-loading .comm-vv-spin{opacity:1}
@keyframes commVvSpin{to{transform:rotate(360deg)}}

/* Stage 4: the Save (bookmark) icon had no drawing behind it, so the button looked empty. Outline when unsaved, filled when saved. */
.comm-post-action.comm-save-btn .ico-bookmark{width:20px;height:20px;fill:none;stroke:currentColor;}
.comm-post-action.comm-save-btn.is-saved .ico-bookmark{fill:currentColor;}


/* ===== Phones: full-screen media viewer (Reels-style) =====
   Back arrow top-left; poster's photo + name (+ Follow) and the caption bottom-left with
   "see more" / "see less"; like / comment / repost / send / save stacked down the right side.
   Same for single photos, photo carousels, video carousels and the single-video viewer. */
.comm-imgview-info{display:none;}
.comm-imgview-cbar{display:none;}
.comm-vv-cbtn{display:block;width:100%;margin-top:10px;height:44px;border:0;border-radius:22px;background:rgba(255,255,255,.14);color:rgba(255,255,255,.78);font:inherit;font-size:15px;text-align:left;padding:0 18px;cursor:text;-webkit-tap-highlight-color:transparent;}
.comm-imgview-close .ico-back{display:none;}
.comm-cap-toggle{background:none;border:0;padding:2px 0 0;color:rgba(255,255,255,.75);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.comm-vv-caption.is-open{display:block;-webkit-line-clamp:unset;max-height:34vh;overflow-y:auto;}
.comm-iv-caption.is-open{display:block;-webkit-line-clamp:unset;max-height:34vh;overflow-y:auto;pointer-events:auto;}
@media (max-width:720px){
  .comm-imgview-close{left:12px;right:auto;background:none;width:44px;height:44px;}
  .comm-imgview-close .ico-x{display:none;}
  .comm-imgview-close .ico-back{display:block;}
  .comm-imgview-stage{margin-top:0;}
  .comm-imgview-dots{position:absolute;top:calc(60px + env(safe-area-inset-top));left:0;right:0;padding:0;z-index:3;}
  .comm-imgview-backdrop{--cbar-h:0px;}
  .comm-imgview-backdrop.has-cbar{--cbar-h:calc(66px + env(safe-area-inset-bottom));}
  .comm-imgview-info{display:block;position:absolute;left:0;right:0;bottom:var(--cbar-h);z-index:3;box-sizing:border-box;padding:56px 72px calc(14px + env(safe-area-inset-bottom)) 14px;color:#fff;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));pointer-events:none;}
  .comm-imgview-backdrop.has-cbar .comm-imgview-info{padding-bottom:14px;}
  .comm-imgview-cbar{display:none;}
  .comm-imgview-backdrop.has-cbar .comm-imgview-cbar{display:flex;flex:0 0 auto;position:relative;z-index:4;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#14171c;box-sizing:border-box;}
  .comm-iv-cbtn{flex:1;height:44px;border:0;border-radius:22px;background:#262b33;color:#aeb5c0;font:inherit;font-size:15px;text-align:left;padding:0 18px;cursor:text;-webkit-tap-highlight-color:transparent;}
  .comm-imgview-backdrop.is-dragging > :not(.comm-imgview-nav){transform:translateY(var(--ivdy,0)) scale(var(--ivs,1));transition:none;}
  .comm-imgview-info:empty{display:none;}
  .comm-imgview-info button{pointer-events:auto;}
  .comm-iv-author{display:flex;align-items:center;gap:10px;margin-bottom:8px;pointer-events:auto;}
  .comm-iv-av{width:38px;height:38px;border-radius:50%;background:#0f766d;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;border:2px solid rgba(255,255,255,.85);box-sizing:border-box;}
  .comm-iv-av img{width:100%;height:100%;object-fit:cover;display:block;}
  .comm-iv-name{font-size:15px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.5);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .comm-iv-caption{font-size:14px;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.5);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;word-break:break-word;}
  .comm-imgview-actions{position:absolute;right:6px;bottom:calc(var(--cbar-h) + 118px);z-index:3;display:block;padding:0;}
  .comm-imgview-actions .comm-post-actions{flex-direction:column;align-items:center;gap:12px;}
  .comm-imgview-actions .comm-as-btn{display:none!important;}
  .comm-imgview-actions .comm-post-action{flex-direction:column;gap:3px;padding:6px;min-width:46px;background:none!important;font-size:12px;font-weight:600;}
  .comm-imgview-actions .comm-post-action .ico{width:28px;height:28px;}
  /* single-video viewer: same arrangement */
  .comm-vv-av{border-radius:50%;}
  .comm-vv-author,.comm-vv-caption,.comm-vv + .comm-cap-toggle,.comm-vv-bottom > .comm-cap-toggle{margin-right:56px;}
  .comm-vv-actions{position:absolute;right:6px;bottom:calc(160px + env(safe-area-inset-bottom));}
  .comm-vv-actions .comm-post-actions{flex-direction:column;align-items:center;gap:12px;overflow:visible;margin:0;}
  .comm-vv-actions .comm-post-action{flex-direction:column;gap:3px;height:auto;min-width:46px;padding:6px;background:none!important;font-size:12px;}
  .comm-vv-actions .comm-post-action .ico{width:28px;height:28px;}
}

/* ---- Saved sheet: "Saved" row + collections (phones slide up, web drops a card) ---- */
.pp-col-backdrop{position:fixed;inset:0;z-index:1850;background:transparent;opacity:1;}
.pp-col-sheet{position:fixed;display:flex;flex-direction:column;background:#fff;color:#111;border-radius:16px;box-shadow:0 18px 44px -14px rgba(20,26,40,.42);border:1px solid rgba(20,26,40,.08);overflow:hidden;font-family:inherit;}
.pp-col-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.pp-col-saved,.pp-col-row{display:flex;align-items:center;gap:14px;padding:12px 16px;}
.pp-col-saved{background:#fff;padding:14px 18px;}
.pp-col-thumb{flex:0 0 auto;width:52px;height:52px;border-radius:14px;background:#e6e9ee;overflow:hidden;display:grid;place-items:center;color:#8a919c;}
.pp-col-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-col-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.pp-col-name{font-size:15px;font-weight:700;line-height:1.25;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pp-col-sub{font-size:13.5px;color:#6b7280;}
.pp-col-unsave,.pp-col-toggle{flex:0 0 auto;border:0;background:none;padding:4px;cursor:pointer;color:#111;display:grid;place-items:center;-webkit-tap-highlight-color:transparent;}
.pp-col-toggle{color:#5b6470;}
.pp-col-toggle.is-on{color:#3b4fd8;}
.pp-col-section{background:#eef1f5;padding:6px 0 10px;}
.pp-col-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 6px;font-size:15.5px;font-weight:700;color:#111;}
.pp-col-new{border:0;background:none;color:#3b4fd8;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;padding:4px 0;}
.pp-col-none{padding:10px 18px 14px;font-size:13.5px;color:#6b7280;}
.pp-col-loading{padding:28px 18px;text-align:center;font-size:14px;color:#6b7280;}
.pp-col-create{display:flex;gap:10px;padding:8px 18px 12px;}
.pp-col-create input{flex:1;min-width:0;border:1px solid #cfd5de;background:#fff;border-radius:12px;padding:11px 12px;font:inherit;font-size:15px;color:#111;outline:none;}
.pp-col-create input:focus{border-color:#3b4fd8;}
.pp-col-create-btn{border:0;border-radius:12px;background:#111;color:#fff;font:inherit;font-size:14px;font-weight:600;padding:0 18px;cursor:pointer;}
.pp-col-create-btn:disabled{opacity:.6;}
@media (hover:hover){.pp-col-row:hover{background:rgba(20,26,40,.04);}}
@media (max-width:720px){
  .pp-col-backdrop.is-mobile{background:rgba(12,16,22,.5);opacity:0;transition:opacity .2s;}
  .pp-col-backdrop.is-mobile.open{opacity:1;}
  .pp-col-backdrop.is-mobile .pp-col-sheet{left:0;right:0;bottom:0;top:auto;width:100%;max-height:78vh;border:0;border-radius:22px 22px 0 0;box-shadow:none;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);padding-bottom:env(safe-area-inset-bottom);}
  .pp-col-backdrop.is-mobile.open .pp-col-sheet{transform:translateY(0);}
  .pp-col-handle{width:44px;height:5px;border-radius:5px;background:#8b9099;margin:12px auto 6px;flex:0 0 auto;}
}