/* v151 design-vs-live fixes — batch 1. Loaded after brutal-lite.css on every page. */
/* Screens: Explore (+ Select city / Offline / Location off / Loading states), Clips, Pick for me.
   Design truth: lite5/corner-map-preview.html, clips-preview.html, pick-preview.html,
   city-preview.html, state-*-preview.html. Everything is scoped to the page's own body class. */

/* ==========================================================================
   EXPLORE (body.exp-page.lite-fullbleed) — lite5/corner-map-preview.html
   ========================================================================== */

/* ---- bottom sheet: sized + positioned by explore.php's inline script (measured peek/half/
   full). The handle + title row is one sticky grab bar, like the reference's handle-wrap. ---- */
body.exp-page.lite-fullbleed .exp__sheet{ height:auto; max-height:none; overscroll-behavior:contain; scrollbar-width:none; }
body.exp-page.lite-fullbleed .exp__sheet::-webkit-scrollbar{ display:none; }
body.exp-page.lite-fullbleed .exp__grab{
  position:sticky; top:0; z-index:4; background:var(--card); border-radius:20px 20px 0 0;
  padding:10px 0 2px; cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
body.exp-page.lite-fullbleed .exp__grab .exp__handle{ position:static; margin:0 auto 10px; }
body.exp-page.lite-fullbleed .exp__grab .exp__handle::before{ content:none; }
body.exp-page.lite-fullbleed .exp__sheethead{ padding:0 18px 10px; min-height:24px; align-items:center; }
/* reference .sheet.is-peek .sheet__body{opacity:0}: at peek only the title row shows */
body.exp-page.lite-fullbleed .exp__sheet > :not(.exp__grab){ transition:opacity .2s ease; }
body.exp-page.lite-fullbleed .exp__sheet.is-peek > :not(.exp__grab){ opacity:0; pointer-events:none; }
body.exp-page.lite-fullbleed .exp__skeltitle{ display:none; }
body.exp-page.lite-fullbleed .exp__sheet.is-loading .exp__sheethead h3{ display:none; }
body.exp-page.lite-fullbleed .exp__sheet.is-loading .exp__skeltitle{ display:block; margin:0; }
body.exp-page.lite-fullbleed .exp__skel{ padding:4px 16px 0; }
body.exp-page.lite-fullbleed .exp__showall{ display:flex; margin:10px auto 4px; }
/* desktop: the sheet keeps its centred 480px column; the script only sets translateY */
@media (min-width:481px){
  body.exp-page.lite-fullbleed .exp__sheet,
  body.exp-page.lite-fullbleed .exp__sheet.is-half,
  body.exp-page.lite-fullbleed .exp__sheet.is-full,
  body.exp-page.lite-fullbleed .exp__sheet:not(.is-half):not(.is-full){
    left:50%; right:auto; width:480px; margin:0 0 0 -240px;
  }
}

/* ---- floating chrome: the reference's search hint is a muted example, chips white ---- */
body.exp-page.lite-fullbleed .exp__pills .pill.pill--cat,
body.exp-page.lite-fullbleed .exp__pills .pill.pill--cat:not(.is-active){ background:#fff; color:var(--ink); }
body.exp-page.lite-fullbleed .exp__pills .pill.is-active{ background:var(--ink); color:#fff; }
body.exp-page.lite-fullbleed .exp__pillgroup .pill{ border:0; font:600 12.5px/1 var(--font-ui); padding:0 14px; }
body.exp-page.lite-fullbleed .exp__pillgroup .pill i.ph-caret-down{ font-size:12px; color:var(--muted); }
body.exp-page.lite-fullbleed .exp__pillgroup .pill i.ph-broadcast{ display:none; }

/* ---- map pins: exactly the reference .pin-circle (42px photo, 2.5px ink ring, 2px ink
   offset) + .pin-label. No coloured/featured ring variants. ---- */
body.exp-page.lite-fullbleed .sm-pin__photo{ border:2.5px solid var(--ink); box-shadow:var(--sh-sm); background-color:#fff; }
body.exp-page.lite-fullbleed .sm-pin--featured .sm-pin__photo{ box-shadow:var(--sh-sm); }
body.exp-page.lite-fullbleed .sm-pin--featured .sm-pin__name{ color:#fff; }
body.exp-page.lite-fullbleed .sm-pin__ph{ color:var(--ink); font-size:18px; }

/* ---- "Creators to follow" rail = reference .rail: kicker title, plain 54px avatars with the
   calm shadow only (NO ink border), yellow + badge on the avatar corner ---- */
body.exp-page.lite-fullbleed .exp-rail{ padding:4px 16px 0; }
body.exp-page.lite-fullbleed .exp-rail__head{ margin:4px 0 10px; }
body.exp-page.lite-fullbleed .exp-rail__head h2 i{ display:none; }
body.exp-page.lite-fullbleed .cmini__av,
body.exp-page.lite-fullbleed .cmini--all .cmini__av{ border:0 !important; box-shadow:var(--soft); background:var(--card-2); width:54px; height:54px; }
body.exp-page.lite-fullbleed .cmini-box{ width:58px; flex:0 0 58px; }
body.exp-page.lite-fullbleed .cmini{ width:58px; }
body.exp-page.lite-fullbleed .cmini__fol{
  top:38px; left:40px; right:auto; bottom:auto; width:18px; height:18px; border:2px solid #fff; box-shadow:none;
  background:var(--yellow); color:var(--ink); font-size:9px;
}
body.exp-page.lite-fullbleed .cmini__fol::after{ content:''; position:absolute; inset:-13px; } /* 44px tap area */

/* ---- ONE card style for every card in the sheet (reference .vgrid/.vcard). The grid
   (map-explore.js) and the "Happening near you" rail (inc/cards.php via inc/happening.php)
   share these rules; the rail's cards are exactly one grid column wide. ---- */
body.exp-page.lite-fullbleed #pinList.pgrid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
body.exp-page.lite-fullbleed .exp-rail--hp{ padding:4px 16px 18px; }
body.exp-page.lite-fullbleed .exp-rail--hp .railrow{ gap:12px; padding:2px 16px 2px; margin:0 -16px; scroll-snap-type:x proximity; scroll-padding-inline:16px; }
body.exp-page.lite-fullbleed .exp-rail--hp .pin-card,
body.exp-page.lite-fullbleed .exp-rail--hp .pin-card--rail{
  flex:0 0 calc((min(100vw, 480px) - 44px) / 2); width:calc((min(100vw, 480px) - 44px) / 2); scroll-snap-align:start;
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card{
  position:relative; display:flex; flex-direction:column; gap:7px; min-width:0;
  border:0 !important; border-radius:0; background:none; box-shadow:none !important; padding:0;
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__media{
  position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden; background:var(--card-2); border:0; box-shadow:none;
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--card-2) !important; color:var(--ink); font-size:28px;
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__cat{
  position:absolute; top:8px; left:8px; z-index:2; display:flex; align-items:center; gap:4px; height:auto;
  background:rgba(255,255,255,.92) !important; color:var(--ink) !important; border:0;
  border-radius:999px; padding:4px 9px 4px 7px; font:700 10px/1 var(--font-ui); max-width:calc(100% - 58px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__cat i{ font-size:10px; color:var(--ink) !important; }
/* offer = the reference's pink sticker under the category chip (top:41px) */
body.exp-page.lite-fullbleed .exp__sheet .pin-card__badge,
body.exp-page.lite-fullbleed .exp__sheet .pin-card__feat{
  position:absolute; top:41px; left:8px; right:auto; z-index:2; display:inline-flex; align-items:center; gap:4px;
  padding:4px 9px; border:var(--bd); border-radius:999px; background:var(--pink); color:#fff;
  font:800 11.5px/1 var(--font-ui); box-shadow:var(--sh-sm); transform:rotate(-2deg); white-space:nowrap;
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__badge i{ font-size:12px; }
body.exp-page.lite-fullbleed .exp-rail--hp .pin-card__badge::before{
  content:"\e478"; font-family:"Phosphor-Bold"; font-weight:normal; font-size:12px; line-height:1; /* ph-tag */
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__scrim{ position:absolute; inset:auto 0 0 0; height:55%; z-index:1; background:linear-gradient(transparent,rgba(0,0,0,.72)); }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__phtext{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:2; color:#fff; font:800 13px/1.2 var(--font-display);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__info{ display:block; padding:0; min-height:0; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__place-sm{ display:block; min-height:0; height:auto; -webkit-line-clamp:unset; margin:0; font:700 13px/1.25 var(--font-ui); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__creator{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; color:var(--muted); min-width:0; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__t{ font:500 12px/1.2 var(--font-ui); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__av{ width:18px; height:18px; border:0 !important; border-radius:50%; object-fit:cover; box-shadow:none; flex:0 0 auto; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__av--ph{ display:flex; align-items:center; justify-content:center; background:var(--card-2); font-size:10px; color:var(--muted); }
/* Plan dot = reference .plan-dot: 34px yellow, 2px ink ring, NO shadow; 44px tap area */
body.exp-page.lite-fullbleed .exp__sheet .pin-card__actions{ position:absolute; top:8px; right:8px; left:auto; bottom:auto; z-index:3; margin:0; padding:0; border:0; background:none; display:block; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__actions-left{ display:none; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__act--save{
  position:relative; top:auto; right:auto; width:34px; height:34px; min-width:0; min-height:0; padding:0; border-radius:50%;
  background:var(--yellow); border:var(--bd); box-shadow:none !important; display:flex; align-items:center; justify-content:center;
  font-size:16px; color:var(--ink);
}
body.exp-page.lite-fullbleed .exp__sheet .pin-card__act--save::after{ content:''; position:absolute; inset:-6px; border-radius:50%; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__act--save.is-on{ background:var(--ink); color:var(--yellow); }
body.exp-page.lite-fullbleed .exp__sheet .pin-card--featured .pin-card__act--save{ top:auto; }
body.exp-page.lite-fullbleed .exp__sheet .pin-card__media.outline-flash{ outline:3px solid var(--blue); outline-offset:2px; }

/* ---- "Video processing" card (lite5/state-loading-preview.html) — the viewer's own clip ---- */
body.exp-page.lite-fullbleed .exp-proc{ display:flex; flex-direction:column; gap:7px; min-width:0; }
body.exp-page.lite-fullbleed .exp-proc .vcard__media{ position:relative; aspect-ratio:9/16; border-radius:14px; overflow:hidden; background:var(--ink-soft); }
body.exp-page.lite-fullbleed .exp-proc img.poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(3px) brightness(.55) saturate(.8); animation:none; }
body.exp-page.lite-fullbleed .exp-proc .proc-scrim{ position:absolute; inset:0; background:rgba(20,21,24,.25); }
body.exp-page.lite-fullbleed .exp-proc .proc-mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#fff; text-align:center; padding:0 10px; }
body.exp-page.lite-fullbleed .exp-proc .proc-spin{ width:30px; height:30px; border-radius:50%; border:3px solid rgba(255,255,255,.35); border-top-color:#fff; animation:smExpSpin .8s linear infinite; }
@keyframes smExpSpin{ to{ transform:rotate(360deg); } }
body.exp-page.lite-fullbleed .exp-proc .proc-label{ font:800 12px/1.3 var(--font-ui); }
body.exp-page.lite-fullbleed .exp-proc .proc-pct{ font:700 11px/1 var(--font-ui); opacity:.85; min-height:11px; }
body.exp-page.lite-fullbleed .exp-proc .proc-bar-wrap{ position:absolute; left:10px; right:10px; bottom:10px; height:5px; border-radius:999px; background:rgba(255,255,255,.3); overflow:hidden; }
body.exp-page.lite-fullbleed .exp-proc .proc-bar-fill{ height:100%; background:var(--yellow); border-radius:999px; transition:width .6s ease; }
body.exp-page.lite-fullbleed .exp-proc .vcard__place{ font:700 13px/1.25 var(--font-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body.exp-page.lite-fullbleed .exp-proc .vcard__by{ font-size:12px; color:var(--muted); }
@media (prefers-reduced-motion:reduce){ body.exp-page.lite-fullbleed .exp-proc .proc-spin{ animation:none; } }

/* ==========================================================================
   CLIPS (body.clips-lite) — lite5/clips-preview.html
   ========================================================================== */
/* mute sits top-RIGHT (the only thing left in .reels-top since the close X went) */
body.clips-lite .reels-top{ justify-content:flex-end; }
/* creator line = "@handle · Follow" only — the creator photo lives at the top of the rail */
body.clips-lite .reels-slide .rf-by .rf-av{ display:none; }
body.clips-lite .reels-slide .rf-follow{ background:none; border:0; padding:0; color:rgba(255,255,255,.85); font:700 14.5px/1 var(--font-ui); text-shadow:0 1px 4px rgba(0,0,0,.4); cursor:pointer; min-height:24px; }
body.clips-lite .reels-slide .rf-follow.is-on{ color:rgba(255,255,255,.6); }
body.clips-lite .reels-slide .rf-bydot{ color:rgba(255,255,255,.7); }
/* rail avatar: photo, or a calm grey circle with an ink user icon when there is none */
body.clips-lite .rf-side .rf-rail-av{
  width:46px; height:46px; border-radius:50%; overflow:hidden; border:2.5px solid var(--ink); background:var(--card-2);
  display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:20px; margin-bottom:4px; flex:0 0 auto;
}
body.clips-lite .rf-side .rf-rail-av img{ width:100%; height:100%; object-fit:cover; display:block; }
/* place card thumbnail fallback (no poster): calm tile, ink pin icon */
body.clips-lite .rf-place > i.ph-map-pin{ width:36px; height:36px; border-radius:10px; background:var(--card-2); color:var(--ink); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto; }

/* ==========================================================================
   PICK FOR ME (.pks-wrap, pick.php) — lite5/pick-preview.html results card
   ========================================================================== */
.pks-wrap .sw-stage{ height:276px; margin:16px 0 0; }
.pks-wrap .sw-ph--blank{ background:var(--card-2); color:var(--ink); }
.pks-wrap .sw-card__cat{ font:800 11.5px/1 var(--font-ui); padding:4px 9px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.pks-wrap .sw-card__tr{ display:flex; gap:6px; align-items:center; flex:0 0 auto; }
.pks-wrap .sw-card__reel{ font:700 11px/1 var(--font-ui); padding:4px 8px; background:rgba(22,19,16,.72); color:#fff; }
.pks-wrap .sw-card__deal{ margin:0; padding:4px 9px; font:800 11.5px/1 var(--font-ui); box-shadow:none; }
.pks-wrap .sw-card__tag{ font:800 17px/1.2 var(--font-display); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pks-wrap .sw-card__place{ display:flex; align-items:center; gap:6px; margin-top:7px; font:700 14px/1.2 var(--font-ui); color:#fff; min-width:0; }
.pks-wrap .sw-card__place span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pks-wrap .sw-card__place i{ flex:0 0 auto; }
.pks-wrap .sw-card__place--big{ margin-top:0; font:800 17px/1.2 var(--font-display); }
.pks-wrap .sw-card__meta{ font:500 11.5px/1.3 var(--font-ui); color:#fff; opacity:.85; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pks-wrap .sw-card__who{ font:700 11.5px/1 var(--font-ui); gap:7px; margin-top:9px; }
.pks-wrap .sw-card__ver{ color:#5ac8fa; font-size:11px; }
.pks-wrap .why-line{ display:flex; align-items:flex-start; gap:6px; margin-top:10px; font-size:12px; color:var(--muted); line-height:1.35; }
.pks-wrap .why-line i{ color:var(--ink); font-size:14px; margin-top:1px; flex:0 0 auto; }
.pks-wrap .sw-meta{ display:none; }
/* loading / empty states are calm (the Plan button keeps the one hard shadow on screen) */
.pks-wrap .sw-loading,.pks-wrap .sw-empty{ border:1px solid var(--line); box-shadow:none; }
.pks-wrap .sw-note{ border:1px solid var(--line); box-shadow:none; background:var(--card-2); }