/* Synced Lines v84 (28 Oct 2026, Agent E): Feed extras.
   .sk            neutral loading skeleton (content-flash bug): a plain grey block with reserved size, never a stock picture or wrong text.
                  Shared: feed.js (Fish Off banner, slot, own session posts), ui.js cover() and app.js featured venue use it too.
   .f-mood        owner-only "how it went" ticker at the top of your own session card (feed.js moodBanner).
   .f-slot-*      "Just for you" slot additions: Dilwyn avatar row, Coming soon, weather card lines. */

.sk{display:block;background:#E6EAF1;border-radius:10px;min-height:12px;color:transparent;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.sk{animation:sk-pulse 1.8s ease-in-out infinite}}
@keyframes sk-pulse{50%{opacity:.55}}
.sk-line{height:14px;margin:8px 0 0;width:100%}
.sk-w30{width:30%}.sk-w50{width:50%}.sk-w80{width:80%}

/* Fish Off banner: the picture box keeps its 4:3 space as a grey block until the first photo has loaded. No fish: text only. */
.h-mod-img.sk{border-radius:12px;min-height:0}
.h-mod.h-mod-nopic{gap:0}

/* "Just for you" slot */
.f-slot.is-sk{min-height:118px}
.f-slot.is-sk .sk-line:first-child{margin-top:2px}
.f-slot-head{display:block;min-width:0}
.f-slot-row{display:flex;align-items:center;gap:10px}
.f-slot-av{display:block;flex:none;width:48px;height:48px;border-radius:50%;object-fit:cover;background:#E6EAF1}
.f-slot-wx{display:block}
.f-slot-wxnow{display:block;margin:4px 0 0;font-size:1.05rem;font-weight:700;line-height:1.35}
.f-slot-src{display:block;margin:4px 0 0;font-size:.78rem;color:#5a6676}
.f-slot[data-kind="soon"] .f-slot-who::after{content:" \00b7 coming";font-weight:600;color:#5a6676}

/* Feed card header: another angler's name is a link to their public profile (#angler-<id>); own name goes to Me. Looks like the plain name. */
.f-meta a.f-who-link,.f-meta a.f-who-link:visited{color:inherit;text-decoration:none}
.f-meta a.f-who-link:focus-visible{outline:2px solid var(--navy,#1B2A4A);outline-offset:2px;border-radius:4px}
.f-meta a.f-who-link strong{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px}
.f-meta a.f-who-link:active strong{text-decoration-color:currentColor}

/* Own session post: the live card's space (4:5 like the baked card) is held by a grey block, never by the old picture. */
.f-pic.f-pic-sk{margin:0 -14px}
.f-sk-card{width:100%;aspect-ratio:4/5;border-radius:0}

/* Owner-only "how it went" ticker. Only inserted when the session has a mood (no mood = no bar, no gap); measured in the frame it is inserted. */
.f-mood{position:relative;display:block;overflow:hidden;margin:-12px -14px 0;padding:6px 0;background:#1B2A4A;color:#fff;font-weight:700;font-size:.85rem;line-height:1.2;white-space:nowrap;border-radius:var(--card-r,15px) var(--card-r,15px) 0 0}
.f-mood-track{display:inline-flex;width:max-content;will-change:transform;animation:f-mood-roll 12s linear infinite}
.f-mood-h{display:inline-flex;flex:none}
.f-mood-w{display:inline-block;padding:0 18px}
.f-mood-w::after{content:"\00b7";margin-left:18px;opacity:.6}
@keyframes f-mood-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .f-mood-track{animation:none;width:auto}
  .f-mood-h[aria-hidden]{display:none}
  .f-mood-h .f-mood-w:not(:first-child){display:none}
  .f-mood-w::after{content:none}
}

/* Used by the INTEGRATION snippets for ui.js cover() (Sessions in-card photo) and app.js featured venue (Venues page). */
.sc-ph.sk{border-radius:0;position:absolute;inset:0}
.v-feat.is-sk .sk-line:first-child{margin-top:0}
/* v85: jokes in the feed + visible Jokes entry */
.f-jokes-link{display:flex;align-items:center;justify-content:space-between;min-height:48px;box-sizing:border-box;margin:10px 0;padding:12px 16px;border:1.5px solid var(--ink);border-radius:12px;color:var(--ink);font-weight:700;text-decoration:none;background:var(--bg)}
.f-joke .f-joke-tag{display:inline-block;background:var(--ink);color:#fff;border-radius:999px;padding:2px 10px;font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.f-joke-t{font-size:1.08rem;line-height:1.4;margin:10px 0;overflow-wrap:anywhere}
.f-joke-more{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:600}
/* v90 item 18: quiet comment menu */
.f-cm{position:relative}
.f-cm-more{background:none;border:0;color:var(--muted);font-size:1.2rem;line-height:1;min-width:44px;min-height:44px;cursor:pointer;vertical-align:middle;padding:0 8px}
.f-cm-menu{position:absolute;right:0;top:100%;z-index:5;background:#fff;border:1px solid #d5dce6;border-radius:10px;box-shadow:0 4px 14px rgba(27,42,74,.15);padding:4px}
.f-cm-menu-item{display:block;min-height:44px;min-width:160px;background:none;border:0;text-align:left;font:inherit;color:inherit;padding:0 12px;cursor:pointer}

/* v90 items 16/17: jokes as normal feed posts */
.f-joke-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f-joke-av{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #d7dee6;object-fit:contain;padding:4px;box-sizing:border-box}
.f-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* v91 item 4: commenter circle + link; profile Block button */
.f-cm{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.f-cm .ua-c{width:32px;height:32px;font-size:.85rem;flex:none}
.f-cm-who{font-weight:700;color:var(--ink);text-decoration:none}
.f-cm-b{flex:1 1 60%;min-width:0}
.a-block{margin-top:12px}

/* v93: Facebook-style action bar (Like, React, Comment, Share) */
.f-rx{padding:2px 14px 0;margin-top:6px}
.f-rx-sum{margin:0 0 4px;font-size:.85rem;color:var(--muted,#556)}
.f-rx-sum[hidden]{display:none}
.f-rx-row{display:flex;border-top:1px solid var(--card-line,#d5dbe3);border-bottom:1px solid var(--card-line,#d5dbe3);padding:2px 0}
.f-rx-b{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 4px;background:none;border:0;border-radius:8px;font:inherit;font-size:.82rem;font-weight:700;color:#4a5568;cursor:pointer;white-space:nowrap}
.f-rx-b span{overflow:hidden;text-overflow:ellipsis}
.f-rx-b:active{background:#E4E9F2}
.f-rx-b.on{color:#1B2A4A}
.f-rx-like.on svg{fill:#1B2A4A;stroke:#1B2A4A}
.f-rx-em{font-size:1.15rem;line-height:1}
.f-rx-pick{display:flex;justify-content:space-around;gap:4px;margin:6px 0 2px;padding:6px 8px;background:#fff;border:1px solid var(--card-line,#d5dbe3);border-radius:999px;box-shadow:0 2px 8px rgba(27,42,74,.15)}
.f-rx-pick[hidden]{display:none}
.f-rx-opt{font-size:1.6rem;line-height:1;min-width:44px;min-height:44px;background:none;border:0;border-radius:50%;cursor:pointer}
.f-rx-opt:active{background:#E4E9F2;transform:scale(1.15)}
.f-rx-note{margin:4px 0 0}

/* v93b: Facebook-style compact bar (icon + count, reaction badges on the right) and tidier comments */
.f-rx-row{border:0;padding:0;align-items:center;gap:2px}
.f-rx-b{flex:0 0 auto;min-width:44px;padding:0 10px;gap:5px;color:#4a5568;font-size:.95rem;font-weight:600}
.f-rx-b span:empty{display:none}
.f-rx-sum{margin:0 0 0 auto;display:inline-flex;align-items:center;padding-right:2px}
.f-rx-sum[hidden]{display:none}
.f-rx-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-left:-6px;box-sizing:border-box;font-size:.7rem;line-height:1}
.f-rx-badge:first-child{margin-left:0}
.f-rx-bg{font-size:.7rem;line-height:1}
.f-cm-viewmore{list-style:none;margin:2px 0 6px}
.f-cm-vm{background:none;border:0;padding:6px 0;min-height:44px;font:inherit;font-weight:700;color:#4a5568;cursor:pointer}
.f-cm{align-items:flex-start}
.f-cm-main{flex:1 1 0;min-width:0}
.f-cm-top{margin:0;font-size:.92rem;line-height:1.3}
.f-cm-top .f-cm-who,.f-cm-top strong{font-weight:700;color:#1B2A4A;text-decoration:none}
.f-cm-t{font-weight:400;font-size:.8rem;color:var(--muted,#667)}
.f-cm-main .f-cm-b{margin:2px 0 0;font-size:.95rem;overflow-wrap:anywhere}
.f-cm-acts{display:flex;gap:14px}
.f-cm-reply{background:none;border:0;padding:6px 0;min-height:36px;font:inherit;font-size:.82rem;font-weight:700;color:#4a5568;cursor:pointer}

/* v93c: rounded comment pill, filled blue-ish liked state */
.f-cm-row{align-items:center;gap:8px}
.f-cm-row .f-cm-in{border:0;background:#EEF1F6;border-radius:999px;padding:0 16px;min-height:44px}
.f-cm-row .f-cm-in::placeholder{color:#5b6577}
.f-cm-row .f-cm-go{border-radius:999px;min-height:44px;padding:0 18px}
.f-rx-like.on{color:#1B5FD6}
.f-rx-like.on svg{fill:#1B5FD6;stroke:#1B5FD6}
.f-rx-b:active{background:#E4E9F2}

/* v93d: hide the baked-in "Founding Angler" footer text on session-card images (card is 1080x1350, footer bar is the bottom 60px, text starts about 58% across) */
.f-pic.f-pic-sess{position:relative}
.f-pic.f-pic-sess::after{content:"";position:absolute;right:0;bottom:0;width:44%;height:4.44%;background:#0f1b2d;border-bottom-right-radius:14px;pointer-events:none}

/* v95 (Tom 31 Oct): the reaction picker wraps, so all the emoji show */
.f-rx-pick{flex-wrap:wrap;justify-content:flex-start;border-radius:18px;max-width:100%}
.f-rx-opt{flex:0 0 calc((100% - 20px) / 6);min-width:0;max-width:56px}
.f-rx-opt.on{background:#E4E9F2;box-shadow:inset 0 0 0 2px #1B5FD6}
.f-rx-face .f-rx-em{letter-spacing:1px}

/* v128 (Tom 1 Nov spec): comments open in an iPhone-style bottom sheet from the Comment icon. Tap-only: X or the dimmed feed closes it, no drag handle, no swipe.
   z-index sits under the confirm box (200) so "Delete this comment?" shows on top of the sheet. */
.cs-open{overflow:hidden}
.cs-back{position:fixed;inset:0;z-index:150;background:rgba(10,20,40,.45)}
.cs{position:fixed;left:0;right:0;bottom:0;z-index:151;display:flex;flex-direction:column;box-sizing:border-box;max-width:640px;margin:0 auto;max-height:62vh;max-height:62dvh;background:var(--card,#fff);color:var(--ink,#0f1b2d);border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom);animation:cs-up .22s ease-out}
@keyframes cs-up{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.cs{animation:none}}
.cs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 6px 4px 16px;border-bottom:1px solid var(--card-line,#d5dbe3);flex:none}
.cs-title{font-size:1rem}
.cs-x{background:none;border:0;font:inherit;font-size:1.25rem;min-width:44px;min-height:44px;cursor:pointer;color:var(--ink,#0f1b2d)}
.cs-list{list-style:none;margin:0;padding:10px 14px;flex:1 1 auto;min-height:96px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.cs-empty{color:var(--muted,#5a6676);text-align:center;padding:18px 0}
.cs-cm{display:flex;align-items:flex-start;gap:10px;position:relative;flex-wrap:nowrap}
.cs-cm .ua-c{width:36px;height:36px;font-size:.9rem;flex:none}
.cs-note{margin:0;padding:0 14px;flex:none}
.cs-note:empty{display:none}
.cs-row{display:flex;gap:8px;align-items:center;padding:8px 12px 10px;border-top:1px solid var(--card-line,#d5dbe3);flex:none}
.cs-in{flex:1;min-width:0;box-sizing:border-box;font:inherit;font-size:16px;border:0;background:#EEF1F6;color:inherit;border-radius:999px;padding:0 16px;min-height:44px}
.cs-go{border:0;background:var(--navy,#1B2A4A);color:#fff;font:inherit;font-weight:700;border-radius:999px;min-height:44px;padding:0 20px;cursor:pointer}
.cs-go:disabled{opacity:.45;cursor:default}
.f-cmts-launch{border-top:0;margin-top:0;padding:2px 14px 10px}
.f-cm-open{display:inline-flex;align-items:center;gap:6px;background:none;border:0;font:inherit;font-weight:600;color:var(--navy,#1B2A4A);min-height:44px;cursor:pointer;padding:0}

/* v129 (Tom 1 Nov spec): small red unread number at the top right of the Comment icon; @ tags; the friend list that opens on @ */
.f-cm-ico{position:relative;display:inline-flex;overflow:visible!important;text-overflow:clip!important}
.has-unread .f-cm-ico{margin-right:5px}
.f-cm-unread{position:absolute;top:-11px;right:-11px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;background:#D93025;color:#fff;font-weight:700;font-size:.68rem;line-height:16px;font-style:normal;text-align:center;pointer-events:none}
.f-cm-tag{color:#174a9c;font-weight:700;text-decoration:none;background:#E6EEFB;border-radius:6px;padding:0 4px}
.f-cm-tag.is-me{background:#FFF0C2;color:#6b4700}
.cs-tags{flex:none;max-height:190px;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--card-line,#d5dbe3);background:var(--card,#fff)}
.cs-tag-row{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;box-sizing:border-box;background:none;border:0;border-bottom:1px solid #eef1f6;padding:4px 14px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.cs-tag-row .ua-c{width:32px;height:32px;font-size:.85rem;flex:none}
.cs-tags-none{margin:0;padding:12px 14px;color:var(--muted,#5a6676)}
/* v130: one-line push ask under the comment log, after your first comment */
.cs-push{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:8px 14px;background:#EEF2F8;border-top:1px solid var(--card-line,#d5dbe3);font-size:.9rem}
.cs-push-t{flex:1 1 150px;min-width:0;font-weight:600}
.cs-push-b{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #1B2A4A;background:#fff;color:#1B2A4A;font:inherit;font-weight:700;cursor:pointer}
.cs-push-yes{background:#1B2A4A;color:#fff}
.cs-push-b:disabled{opacity:.55}