/* home_storyline.css — the storyline home feed (third home mode).
 *
 * Layout contract:
 *  - .wg-main gets .wg-main-slf (set by index.php): no max-width, no padding,
 *    so the games strip runs edge-to-edge. The feed re-centres its own column.
 *  - The REAL header and bottom nav are untouched in content and design; this
 *    page only slides them away on scroll-down (body.wg-slf-off, toggled by
 *    js/home_storyline.js) and back on scroll-up / 3s idle.
 *  - NO-GAP RULE: the strip is sticky at top: var(--wg-slf-top) — the header's
 *    measured height. Hiding the header moves it by exactly -100% (its own
 *    height) on the SAME duration and curve the strip's `top` animates over,
 *    so the two edges stay glued at every instant of the animation.
 *  - Never animate transform on .wg-main (fixed-overlay trap); only the
 *    header, bottom nav, FAB and the floating pill move, all of them already
 *    fixed/sticky elements.
 */

.wg-main.wg-main-slf { max-width: none; padding: 0; }

/* "We've moved" notice (non-prod hosts): index.php emits it on every feed
   variant, and each feed's stylesheet carries these rules (same block as
   home.css / home_personal.css) — without them it renders as ugly in-flow
   text at the top of the page instead of a modal. */
.wg-moved { position: fixed; inset: 0; z-index: 1000; background:rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wg-moved-card { position: relative; background:var(--wg-raised); border-radius: 14px; max-width: 460px; width: 100%; padding: 26px 22px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); text-align: center; }
.wg-moved-x { position: absolute; top: 8px; right: 10px; background:none; border:none; font-size: 26px; line-height: 1; color:var(--wg-muted); cursor: pointer; }
.wg-moved-title { font-size: 1.4rem; margin: 0 0 12px; color:var(--wg-color-dark); }
.wg-moved-card p { margin: 0 0 12px; line-height: 1.55; font-size: 0.95rem; }
.wg-moved-lead { font-weight: 600; }
.wg-moved-warn { background:var(--wg-danger-tint); border:1px solid #f3b6b6; color:var(--wg-danger-ink); border-radius: var(--wg-radius); padding: 10px 12px; font-size: 0.9rem !important; }
.wg-moved-cta { display: block; width: 100%; margin: 6px 0 10px; font-size: 1.05rem; padding: 13px 16px; }
.wg-moved-stay { background:none; border:none; color:var(--wg-muted); font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 4px; }

/* ── chrome hide/show (scoped to this page via body.wg-slf-page) ───────── */
body.wg-slf-page .wg-header,
body.wg-slf-page .wg-bottomnav { transition: transform .3s var(--wg-ease-out); will-change: transform; }
body.wg-slf-off .wg-header { transform: translateY(-100%); }
body.wg-slf-off .wg-bottomnav { transform: translateY(110%); }
/* The + FAB deliberately does NOT hide with the bars: posting stays one tap
   away at every scroll position. It rides DOWN into the freed space while the
   bottom bar is away (founder calls, 2026-08-13). Its bottom comes from the
   measured --wg-slf-bottom var (see the pill rules below). */
body.wg-slf-page .wg-fab { transition: bottom .3s var(--wg-ease-out); }

/* ── games strip: pinned for the whole scroll ──────────────────────────── */
.wg-slf-strip {
  position: sticky; top: var(--wg-slf-top, 59px); z-index: 9;
  background:rgba(var(--wg-frost-rgb), 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom:1px solid var(--wg-border-soft);
  padding: 8px 10px 6px;
  transition: top .3s var(--wg-ease-out);
}
body.wg-slf-off .wg-slf-strip { top: 0; }
/* -- search strip content (games left the feeds 2026-08-19) -------------- */
.wg-slf-search { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; }
.wg-slf-search > svg, .wg-slf-search > .wg-ico { width: 20px; height: 20px; flex: none; color:var(--wg-color-dark); }
.wg-slf-search input {
  flex: 1; min-width: 0; border:1px solid var(--wg-border-soft); border-radius: 12px;
  padding: 9px 13px; font: inherit; font-size: .95rem; background:var(--wg-raised); color:var(--wg-text);
}
.wg-slf-search input:focus { outline:none; border-color:var(--wg-color-dark); box-shadow: var(--wg-focus-ring); }
.wg-slf-search .wg-btn { flex: none; width: auto; padding: 9px 16px; }

/* ── "New posts" pill: hangs just under the pinned games strip ──────────
   Same family as the bottom switch pill, mirrored to the top. Rides the
   header's hide/show like the strip does, so it never covers content. */
.wg-slf-new {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: var(--wg-slf-newtop, 130px);   /* measured from the strip's live bottom */
  z-index: 10;                        /* above the strip: it is a floating action */
  display: inline-flex; align-items: center; gap: 7px;
  background:var(--wg-color); color:var(--wg-on-brand); border:none; border-radius: 999px;
  padding: 9px 16px; font-size: .78rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 18px rgba(14, 175, 76, 0.38);
  transition: top .3s var(--wg-ease-out), transform var(--wg-dur) var(--wg-ease-spring);
  animation: wg-slf-newin .28s var(--wg-ease-spring) both;
}
.wg-slf-new:active { transform: translateX(-50%) scale(.96); }
.wg-slf-new .wg-ico-in { width: 15px; height: 15px; }
@keyframes wg-slf-newin {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* No hide-and-reveal while restoring: fading the feed out and back IS the
   blink. The restore instead scrolls in the SAME task that inserts the cards,
   so the very first paint is already in the right place. */

/* ── boosted badge ──────────────────────────────────────────────────────
   A boost re-dates a post (it jumps to the top, then newer posts push it
   down again), so there is no pinned block — just this tag explaining why
   an older listing is sitting high up. */
.wg-slf-boosttag {
  display: inline-flex; align-items: center; gap: 3px;
  background:var(--wg-warn-tint); color:var(--wg-warn-ink); border-radius: 999px; padding: 2px 8px;
  font-size: .63rem; font-weight: 800; letter-spacing: .02em;
}
.wg-slf-boosttag .wg-ico, .wg-slf-boosttag svg { width: 11px; height: 11px; }
.wg-slf-item.is-boost .wg-slf-card { border-color:#f0dca8; background:var(--wg-warn-tint); }

/* ── feed column ───────────────────────────────────────────────────────── */
.wg-slf-col { max-width: 720px; margin: 0 auto; padding: 14px 16px 130px; }

/* per-module accent variables (chips, timeline nodes, run buttons) */
.wg-slk-market    { --slc: var(--wg-color-dark); --slc-bg: var(--wg-tint); }
.wg-slk-community { --slc: #6d28d9; --slc-bg: #f1eafd; }
.wg-slk-jobs      { --slc: #1d4ed8; --slc-bg: #e8effd; }
.wg-slk-events    { --slc: #c2410c; --slc-bg: #feeee3; }
.wg-slk-find      { --slc: #0f766e; --slc-bg: #e3f5f2; }
.wg-slk-lucky     { --slc: #b45309; --slc-bg: #fdf1dd; }
.wg-slk-workers   { --slc: #4338ca; --slc-bg: #eceafd; }
.wg-slk-videos    { --slc: #be185d; --slc-bg: #fdeaf2; }
.wg-slk-tutorials { --slc: #0369a1; --slc-bg: #e3f1fb; }

/* day markers */
.wg-slf-day { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; }
.wg-slf-day span {
  font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color:var(--wg-color-dark); background:var(--wg-tint); border-radius: 999px; padding: 3px 11px;
}
.wg-slf-day::after { content: ""; flex: 1; height: 1px; background:var(--wg-border-soft); }

/* the timeline rail */
.wg-slf-items { position: relative; padding-left: 24px; }
.wg-slf-items::before {
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; border-radius: 2px; background:var(--wg-border-soft);
}
.wg-slf-item { position: relative; margin-bottom: 14px; }
.wg-slf-node {
  position: absolute; left: -24px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background:var(--slc, var(--wg-color));
  border:3px solid var(--wg-bg); box-shadow: 0 0 0 1px var(--wg-border-soft);
}
/* follow-up posts inside a run: smaller node, tighter spacing, no when-line */
.wg-slf-item.is-run { margin-bottom: 8px; }
.wg-slf-item.is-run .wg-slf-node { width: 10px; height: 10px; left: -22px; top: 8px; }
.wg-slf-item.is-runend { margin-bottom: 14px; }

.wg-slf-when {
  font-size: .68rem; color:var(--wg-muted); font-weight: 650; margin-bottom: 4px;
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.wg-slf-src {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .64rem; font-weight: 750; border-radius: 999px; padding: 2px 8px;
  color:var(--slc); background:var(--slc-bg);
  transition: box-shadow var(--wg-dur) var(--wg-ease-out), transform var(--wg-dur) var(--wg-ease-spring);
}
/* the chip is a LINK to its module's board — give it press feedback */
a.wg-slf-src:hover { box-shadow: 0 0 0 1.5px var(--slc) inset; }
a.wg-slf-src:active { transform: scale(.95); }
.wg-slf-src .wg-ico { width: 12px; height: 12px; }

/* cards */
.wg-slf-card {
  display: block; background:var(--wg-surface);
  border:1px solid var(--wg-border-soft); border-radius: 12px; padding: 11px 12px;
  color:var(--wg-text);
  transition: transform var(--wg-dur) var(--wg-ease-out), box-shadow var(--wg-dur) var(--wg-ease-out);
}
.wg-slf-card:hover { box-shadow: var(--wg-shadow-hover); transform: translateY(-1px); }
.wg-slf-card:active { transform: scale(.99); }
.wg-slf-title { font-size: .9rem; font-weight: 750; line-height: 1.3; display: block; color:var(--wg-text); }
/* rich cards (open lucky draw, RSVP-able event): a non-anchor card with inner
   links + a CTA, so no button ever nests inside an anchor. The CTA is the
   card's own bottom edge (founder-picked "integrated footer action"), so the
   card drops its bottom padding and the CTA bleeds to the borders. */
.wg-slf-card-flat { cursor: default; padding-bottom: 0; }
.wg-slf-card-flat:hover { transform: none; }
.wg-slf-lucky-cd { margin-top: 9px; }
/* the sitewide flip countdown is built to OVERLAY an image bottom
   (position:absolute) — as a standalone strip inside the card it must sit in
   flow, or it pins itself over the whole timeline item and the CTA button */
.wg-slf-lucky-cd .wg-cd-flip {
  position: static; border-radius: 10px; padding: 8px 12px 9px;
  background:#17201b;
}
.wg-slf-cta {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 11px -12px 0; padding: 11px 14px;
  border-top:1px solid var(--wg-border-soft); border-radius: 0 0 11px 11px;
  color:var(--wg-color-dark); font-size: .8rem; font-weight: 800; letter-spacing: .01em;
  background:transparent;
  transition: background var(--wg-dur) ease;
}
.wg-slf-cta:hover { background:var(--wg-tint); }
.wg-slf-cta:active { background:var(--wg-tint); }
.wg-slf-cta-chev { color:var(--wg-color); font-weight: 800; line-height: 1; }
/* video cards: poster + centred play, swapped for a real <video> on tap */
.wg-slf-card-vid { cursor: default; }
.wg-slf-card-vid:hover { transform: none; }
.wg-slf-vidwrap {
  position: relative; margin-top: 9px; border-radius: 10px; overflow: hidden;
  background:#0f1720;
}
.wg-slf-vidwrap .wg-slf-shot { margin-top: 0; }
/* the wrap is height-locked by JS at play time, so the player fills the box
   the poster occupied — no reflow, no flicker */
.wg-slf-vidwrap video { display: block; width: 100%; height: 100%; max-height: 340px; object-fit: contain; background:#000; }
.wg-slf-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%; border:none; cursor: pointer;
  background:rgba(15, 23, 32, 0.62); color:var(--wg-on-scrim);
  display: grid; place-items: center;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform var(--wg-dur) var(--wg-ease-spring), background var(--wg-dur) ease;
}
.wg-slf-play svg { width: 24px; height: 24px; margin-left: 3px; }
.wg-slf-play:hover { background:rgba(14, 175, 76, 0.85); transform: translate(-50%, -50%) scale(1.07); }
.wg-slf-play:active { transform: translate(-50%, -50%) scale(0.94); }

/* where the countdown would sit, once the draw moment has passed */
.wg-slf-lucky-ended {
  margin-top: 9px; padding: 9px 12px; border-radius: 10px; text-align: center;
  background:var(--wg-surface-2); color:var(--wg-muted); font-size: .78rem; font-weight: 750;
}
.wg-slf-ex { font-size: .78rem; color:var(--wg-muted); margin: 4px 0 0; line-height: 1.42; }
.wg-slf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.wg-slf-foot-l { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wg-slf-price { color:var(--wg-color-dark); font-weight: 800; font-size: .92rem; }
.wg-slf-freetag { background:var(--wg-accent-yellow); color:var(--wg-warn-ink); font-size: .66rem; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.wg-slf-paytag { background:var(--wg-info-tint); color:#1d4ed8; font-size: .68rem; font-weight: 750; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.wg-slf-statustag { background:var(--wg-surface-2); color:var(--wg-muted); font-size: .66rem; font-weight: 750; border-radius: 999px; padding: 2px 9px; }
.wg-slf-cattag { background:var(--wg-info-tint); color:var(--wg-info-ink); font-size: .66rem; font-weight: 750; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.wg-slf-meta { color:var(--wg-muted); font-size: .7rem; display: inline-flex; align-items: center; gap: 3px; }
.wg-slf-meta .wg-ico { width: 12px; height: 12px; }

/* photo carousel (swipe horizontally, dots + counter) */
.wg-slf-carwrap { position: relative; margin-top: 9px; border-radius: 10px; overflow: hidden; }
.wg-slf-car {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; border-radius: inherit;
  /* smooth native swiping: keep momentum, stop horizontal chaining into
     browser back/forward gestures, let vertical pans scroll the page */
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}
.wg-slf-car::-webkit-scrollbar { display: none; }
/* EVERY photo keeps its own proportions, portrait or landscape — a fixed-
   height cover crop beheads portrait shots (event flyers, clothing photos).
   Natural aspect up to a cap; beyond the cap, and for the shorter photos in a
   mixed-orientation carousel (the row takes the tallest slide's height),
   contain letterboxes on the tint instead of cropping or distorting. */
.wg-slf-shot {
  flex: 0 0 100%; scroll-snap-align: start; width: 100%;
  height: auto; max-height: 340px; object-fit: contain;
  background:var(--wg-tint); display: block;
}
.wg-slf-dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 5px; pointer-events: none; }
.wg-slf-dot { width: 6px; height: 6px; border-radius: 50%; background:rgba(255, 255, 255, 0.55); }
.wg-slf-dot.on { background:var(--wg-raised); }
.wg-slf-count {
  position: absolute; top: 8px; right: 8px; background:rgba(0, 0, 0, 0.55); color:var(--wg-on-scrim);
  font-size: .62rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; pointer-events: none;
}

/* run folding: dashed reveal button in the run's module colour */
.wg-slf-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin: 2px 0 14px; padding: 9px 12px;
  background:var(--wg-bg); border:1.5px dashed var(--slc, var(--wg-color));
  border-radius: 12px; color:var(--slc, var(--wg-color-dark));
  font-size: .78rem; font-weight: 750; cursor: pointer;
  transition: background var(--wg-dur) ease, transform var(--wg-dur) var(--wg-ease-spring);
}
.wg-slf-more:hover { background:var(--slc-bg, var(--wg-tint)); }
.wg-slf-more:active { transform: scale(.98); }

/* load-more fallback + empty state */
.wg-slf-morewrap { display: flex; justify-content: center; margin-top: 10px; }
#wg-slf-sentinel { height: 1px; }

/* ── floating "Switch to default feed" pill ────────────────────────────── */
.wg-slf-back {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--wg-bottom-inset, calc(64px + env(safe-area-inset-bottom, 0px))) + 10px); z-index: 22;
  display: inline-flex; align-items: center; gap: 7px;
  background:#17201b; color:var(--wg-on-scrim); border:none; border-radius: 999px;
  padding: 10px 16px; font-size: .78rem; font-weight: 650; cursor: pointer;
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.32);
  transition: bottom .3s var(--wg-ease-out), transform var(--wg-dur) var(--wg-ease-spring);
}
.wg-slf-back:active { transform: translateX(-50%) scale(.96); }
.wg-slf-back .wg-ico-in { width: 15px; height: 15px; }
/* MEASURED anchoring (--wg-slf-bottom, set by js/home_storyline.js): static
   offsets guessed per platform kept missing (iOS safe areas, Android URL
   bars, the app's native tab bar). The JS measures the real web bottom nav
   and floats the pill and FAB 8px above it; with the nav hidden or absent
   (bars-off, native app, desktop) both drop to 12px off the edge. The
   fallbacks below only matter if JS dies before the feed renders. */
.wg-slf-back { bottom: var(--wg-slf-bottom, calc(var(--wg-bottom-inset, calc(64px + env(safe-area-inset-bottom, 0px))) + 10px)); }
body.wg-slf-off .wg-slf-back { bottom: var(--wg-slf-bottom, calc(14px + env(safe-area-inset-bottom))); }
body.wg-slf-page .wg-fab { bottom: var(--wg-slf-bottom, calc(var(--wg-bottom-inset, calc(64px + env(safe-area-inset-bottom, 0px))) + 4px)); }

/* ── reduced motion: no sliding, everything appears/disappears in place ── */
@media (prefers-reduced-motion: reduce) {
  body.wg-slf-page .wg-header,
  body.wg-slf-page .wg-bottomnav,
  body.wg-slf-page .wg-fab,
  .wg-slf-feed,
  .wg-slf-strip,
  .wg-slf-back,
  .wg-slf-new,
  .wg-slf-card,
  .wg-slf-src,
  .wg-slf-play,
  .wg-slf-more { transition: none; }
  .wg-slf-new { animation: none; }
  .wg-slf-new:active { transform: translateX(-50%); }
  .wg-slf-card:hover, .wg-slf-card:active,
  a.wg-slf-src:active,
  .wg-slf-more:active,
  .wg-slf-games .wg-home-game:hover .wg-home-game-ico,
  .wg-slf-games .wg-home-game:active .wg-home-game-ico { transform: none; }
  .wg-slf-car { scroll-behavior: auto; }
}