/* Pathfinder — unified mobile + desktop */
:root{ 
  --topbar-h: 67px; 
  --footbar-h: 76px; 
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --line:#232323; 
  --accent:#FFD34D; /* OU ORANGE #f49021 — yellow #FFD34D) */
  --radius-lg:20px; 
  }

/* Full-bleed shell on this route */
body.pathfinder .wrap{ padding:0; }
body.pathfinder .app{ min-height:100svh; border:0; border-radius:0; box-shadow:none; }
body.pathfinder main{ padding:0; }
body.pathfinder .page{
  max-width:1200px;               /* wider on desktop */
  margin:0 auto;
  padding:12px 10px calc(var(--footbar-h) + var(--safe-bottom) + 12px);
  min-height:calc(100svh - var(--topbar-h) - var(--safe-bottom));
  display:grid; gap:14px;
}

/* ---------- Story bars ---------- */
.path-storybars{
  position:relative;display:flex;gap:6px;padding:6px 6px 8px;
  /*-webkit-tap-highlight-color: rgba(244,144,33,.35); */
  user-select:none;
}
.path-storybars span{
  flex:1; min-width:22px;         /* easier to hit */
  height:6px; background:#ffffff55;
  border-radius:999px; overflow:hidden; cursor:pointer;
}
.path-storybars span::after{
  content:""; display:block; height:100%; width:0;
  background:var(--accent); transition:width .25s;
}
.path-storybars span.is-active::after{ width:100%; }
.path-storybars span.is-viewed{ background:#ffffff99; }

/* ---------- Deck (media) ---------- */
.path-deck{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:#000; box-shadow:0 20px 44px rgba(0,0,0,.35);
  -webkit-touch-callout: none;
}
.path-card{
  position:absolute; inset:0; border-radius:var(--radius-lg);
  touch-action:none; will-change:transform;
}
.path-img{ width:100%; height:100%; object-fit:cover; display:block; background:#000; }

/* Sizing: mobile vs desktop */
@media (max-width: 899px){
  .path-deck{ height:64vh; min-height:420px; }
}

/* === Desktop layout: wide deck, narrower aside (optional hooks) === */
@media (min-width: 900px){
  .path-layout{
    display:grid;
    grid-template-columns: minmax(320px, 420px) minmax(600px, 1fr);
    gap:18px; align-items:start;
  }
  .path-deck-col .path-deck{
    height: min(88vh, 1100px);
    aspect-ratio: 9 / 16;
    margin: 0 auto;
  }
  .path-card{ inset:0; }
  .path-aside{ max-width:420px; }
}

/* ---------- Overlays ---------- */
.path-overlay-top{
  position:absolute; left:0; right:0; top:0; padding:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 48%, rgba(0,0,0,0) 100%);
  color:#fff; z-index:2; pointer-events:none;
}
.path-brand{ margin:0; font-size:1.25rem; line-height:1.25; font-weight:800; letter-spacing:.01em; }
.path-subline{ margin:.4rem 0 0; font-size:.95rem; line-height:1.35; opacity:.95; }

.path-overlay-bottom{
  position:absolute; left:0; right:0; bottom:0; padding:14px 14px 16px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.75) 100%);
  color:#fff; z-index:2; pointer-events:none;
}
.path-title{ margin:0 0 2px 0; font-size:1.05rem; }
.path-desc { margin:0; opacity:.9; font-size:.92rem; }

/* Center prompts (pre/post) */
.path-banner, .path-prompt{
  position:absolute; left:50%; top:45%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.6); color:#fff; padding:10px 14px; border:1px solid #444;
  border-radius:12px; font-weight:800; letter-spacing:.02em; display:none; z-index:4;
  pointer-events:none;
}
.path-banner.show, .path-prompt.show{ display:block; }


/* Make prompt/banner adopt the yellow pill look when .path-tip is present */
.path-banner.path-tip,
.path-prompt.path-tip {
  background: var(--accent);
  color: #111;
  border: 1px solid var(--accent);
  font-weight: 700;
  text-shadow: none;
  border-radius: 999px;      /* stronger pill */
  padding: 6px 10px;         /* same feel as media.js tip */
}



.path-bid-sub{
  font-size: .72rem;
  line-height: 1;
  opacity: .85;
  margin-top: -2px;
}

/* ---------- Bottom actions (mobile only) ---------- */
.path-bottomnav{
  position:fixed; left:0; right:0; bottom:0;
  height:calc(var(--footbar-h) + var(--safe-bottom));
  padding:8px 10px calc(8px + var(--safe-bottom));
  display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; align-items:center;
  background:var(--card, #141414); border-top:1px solid var(--line);
  z-index:980;
}
.path-bicon{
  background:transparent; border:1px solid var(--line);
  border-radius:14px; padding:10px 8px; color:#ddd; display:grid; justify-items:center; gap:6px;
  font-size:.8rem;
}
.path-bicon:hover{ color:#fff; border-color:#3a3a3a; }
.path-bicon svg{ display:block; }
.path-bicon-primary{ background:var(--accent); color:#111; border-color:transparent; box-shadow:0 8px 22px rgba(244,144,33,.25); }
.path-bid-label{ font-weight:800; }

/* Keep primary (yellow) button text dark even on hover/focus/active */
.path-bicon-primary,
.path-bicon-primary:hover,
.path-bicon-primary:focus,
.path-bicon-primary:active {
  color: #111 !important;
  border-color: transparent !important;
  background: var(--accent) !important; /* already set, reinforces state */
  box-shadow: 0 8px 22px rgba(244,144,33,.25);
}

/* Optional: keep the svg matching the text color (already uses currentColor) */
#pfWouldBid svg { fill: currentColor; }

/* Optional: nudge the sublabel appearance */
.path-bid-sub{
  font-size:.72rem; line-height:1; opacity:.85; margin-top:-2px;
}




@media (min-width: 900px){
  .path-bottomnav{ display: none !important; }
}

/* Desktop side panel content (optional) */
.path-aside{
  display:none; background:var(--card, #141414);
  border:1px solid var(--line); border-radius:12px; padding:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
@media (min-width: 900px){ .path-aside{ display:block; } }

.path-aside h2{ margin:.25rem 0 .5rem; font-size:1.2rem; }
.path-aside p{ color:#e1e1e1; line-height:1.55; }
.path-list{ margin:.5rem 0 0; padding:0; list-style:none; display:grid; gap:8px; }
.path-list li{ position:relative; padding-left:22px; }
.path-list li::before{ content:"›"; position:absolute; left:0; top:0; color:var(--accent); font-weight:900; }

/* Tap highlights in Yellow orange 
.path-card, .path-storybars { -webkit-tap-highlight-color: rgba(255,211,77,.35); }*/

.path-card { -webkit-tap-highlight-color: transparent; }
/*.path-storybars { -webkit-tap-highlight-color: rgba(255,211,77,.35); } */
.path-storybars { -webkit-tap-highlight-color: transparent; } 

/* These should never intercept clicks */
.path-banner, .path-prompt, .path-overlay-top, .path-overlay-bottom { pointer-events: none; }

/* Toast above the fixed bar */
#ouToast{ bottom:calc(var(--footbar-h) + var(--safe-area-inset-bottom, 0px) + 14px) !important; }

/* ---- Desktop compact strip (full-width, small footprint) ---- */
:root{ --strip-h: 72px; }

.path-strip{ display:none; } /* hidden on mobile */
@media (min-width: 900px){
  .path-strip{
    display:block; height: var(--strip-h);
    border:1px solid var(--line); border-radius: 12px;
    background: var(--card, #141414); box-shadow: 0 8px 24px rgba(0,0,0,.25);
    padding: 10px 12px;
  }
  .path-strip-inner{
    display:flex; gap:10px; align-items:center; height:100%; overflow:auto;
  }
  .path-chip{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border:1px solid var(--line); border-radius:999px;
    color:#e6e6e6; background:#1b1b1b; white-space:nowrap;
  }
  .path-chip .g{ opacity:.9; }
  .path-chip-cta .link{ color:#fff; text-decoration:none; }
  .path-chip-cta .link:hover{ color: var(--accent); }
}

/* ---- Large deck below the strip (desktop) ---- */
.path-deck-wide{ margin-top: 12px; }

@media (min-width: 900px){
  .path-deck-wide .path-deck{
    /* Tall + wide, not "phone-like" */
    height: clamp(560px, calc(100svh - var(--topbar-h) - var(--strip-h) - 32px), 1000px);
    width: 100%;
    border-radius: var(--radius-lg); overflow: hidden; background:#000;
    box-shadow: 0 20px 44px rgba(0,0,0,.35);
  }
  .path-deck-wide .path-img{
    width:100%; height:100%; object-fit: contain; background:#000; /* show full mask */
  }
}

/* Ensure edge tap zones are always above the video */
.path-edge{
  position:absolute; top:0; bottom:0; width:22%;
  z-index:60; pointer-events:auto;
  -webkit-tap-highlight-color: rgba(244,144,33,.35);
  touch-action: manipulation;        /* removes 300ms delay on some browsers */
}
.path-edge.left{ left:0; }
.path-edge.right{ right:0; }
.path-edge:active{ background: rgba(255,211,77,.14); }

/* ---- Video containment – letterbox by HEIGHT (great for Shorts) ---- */
.path-deck.video-mode{ position:relative; }
.path-deck.video-mode .yt-wrap{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#000; z-index:1;            /* under overlays & edges */
}
.path-deck.video-mode .yt-inner{
  height:100%; width:auto;
  aspect-ratio: var(--yt-ar, 9 / 16);
  max-width:100%;
}
.path-deck.video-mode .yt-inner iframe{
  display:block; width:100%; height:100%; border:0; background:#000;
}

/* Prevent unexpected scroll jumps when the iframe UI changes size */
.path-deck, .path-deck .yt-wrap, .path-deck .yt-inner{ overflow-anchor:none; }
.path-deck, .yt-wrap { overscroll-behavior: contain; }

/* Orange tip bubble (for side-navigation hint on video slides) */
.path-tip{
  background: var(--accent);
  color:#111;
  border:1px solid var(--accent);
  font-weight:700;
}


/* Show a rotate overlay and disable interactions when in landscape on small screens */
@media (orientation: landscape) and (max-width: 900px) {
  body.pathfinder .rotate-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,.78);
    color: #fff;
    text-align: center;
    padding: 24px;
  }
  body.pathfinder .rotate-overlay .pill {
    background: var(--accent);
    color: #111;
    border: 1px solid var(--accent);
    border-radius: 999px;
    font-weight: 800;
    padding: 10px 14px;
    display: inline-block;
  }
  /* Optional: dim deck interactions while in landscape */
  body.pathfinder .path-deck,
  body.pathfinder .path-bottomnav { pointer-events: none; filter: grayscale(.4) blur(1px); }
}


/* Kill image long-press menu & drag handles where possible */
.path-img {
  -webkit-touch-callout: none;   /* iOS Safari */
  -webkit-user-drag: none;       /* Safari/WebKit */
  user-select: none;             /* General */
  -webkit-user-select: none;
  pointer-events: auto;          /* we still let it receive pointer events */
}


/* Super Like hold progress for the Like button */
.path-bottomnav #pfLike {
  position: relative;
  overflow: visible; /* ensure ring can render clean edges */
}

.hold-ring{
  position:absolute;
  inset:-2px;               /* a hair outside the button bounds */
  border-radius:12px;       /* match button radius */
  pointer-events:none;
  opacity:0;
  transition: opacity .12s linear;
  /* ring look */
  background: transparent;  /* updated live via JS conic-gradient */
  -webkit-mask:
    radial-gradient(transparent calc(100% - 3px), #000 0); /* donut cutout */
          mask:
    radial-gradient(transparent calc(100% - 3px), #000 0);
}