/* ████████████████████████████████████████████████████████ */
/* ██  events.css — events panel, user posts, create post ██ */
/* ████████████████████████████████████████████████████████ */

#p-events{padding:14px 16px 80px;gap:0;overflow-y:auto}

/* ── SEGMENTED TYPE TOGGLE ─────────────────────────────── */
.ev-type-seg{
  flex:1;padding:8px 12px;border:none;border-radius:10px;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.78rem;
  cursor:pointer;transition:all 0.15s;background:transparent;color:var(--muted);
  min-height:34px;display:flex;align-items:center;justify-content:center;gap:5px;
}
.ev-type-seg.on[data-etype="meetup"]{background:#16a34a;color:#fff}
.ev-type-seg.on[data-etype="tournament"]{background:#7c3aed;color:#fff}

/* ── FILTER CHIPS ──────────────────────────────────────── */
.ev-fchip{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 12px;border-radius:20px;
  background:transparent;border:1.5px solid var(--border);
  color:var(--muted);font-family:'Plus Jakarta Sans',sans-serif;
  font-size:0.74rem;font-weight:600;cursor:pointer;
  white-space:nowrap;flex-shrink:0;transition:all 0.12s;
  min-height:34px;-webkit-tap-highlight-color:transparent;
}
.ev-fchip:hover{border-color:var(--border2);background:var(--surf2)}
.ev-fchip.active{border-color:var(--acc);color:var(--acc);background:rgba(194,161,90,0.08)}
.ev-fchip.open{border-color:var(--acc);box-shadow:0 2px 8px rgba(0,0,0,0.12)}
.ev-fchip svg{width:13px;height:13px;flex-shrink:0}
.ev-fchip-clear{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;
  background:var(--acc);color:#fff;font-size:0.6rem;font-weight:800;
  margin-left:2px;cursor:pointer;line-height:1;
}
/* Dropdown option rows */
.ev-dd-opt{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:9px;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;font-size:0.82rem;font-weight:600;
  color:var(--tx);transition:background 0.1s;
}
.ev-dd-opt:hover{background:var(--surf3)}
.ev-dd-opt.on{color:var(--acc)}
.ev-dd-opt .ev-dd-radio{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--border2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:border-color 0.1s;
}
.ev-dd-opt.on .ev-dd-radio{border-color:var(--acc)}
.ev-dd-opt.on .ev-dd-radio::after{
  content:'';width:8px;height:8px;border-radius:50%;background:var(--acc);
}
@keyframes evChipIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Distance slider styling */
#ev-dist-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:var(--surf3);outline:none}
#ev-dist-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--acc);cursor:pointer;border:2px solid var(--surf);box-shadow:0 1px 4px rgba(0,0,0,0.25)}
#ev-dist-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--acc);cursor:pointer;border:2px solid var(--surf);box-shadow:0 1px 4px rgba(0,0,0,0.25)}
#ev-dist-slider::-moz-range-track{height:6px;border-radius:3px;background:var(--surf3)}

/* ── SEARCH BAR ────────────────────────────────────────── */
.ev-search-bar{display:flex;align-items:center;gap:8px;background:var(--surf2);border:1.5px solid var(--border2);border-radius:12px;padding:9px 13px;margin-bottom:10px}
.ev-search-bar svg{width:16px;height:16px;stroke:var(--dim);flex-shrink:0}
.ev-search-bar input{flex:1;background:none;border:none;outline:none;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:0.87rem;color:var(--tx)}
.ev-search-bar input::placeholder{color:var(--dim)}

/* ── SECTION TABS ──────────────────────────────────────── */
.ev-section-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex-shrink:0;touch-action:pan-x;overscroll-behavior-y:contain}
.ev-section-tabs::-webkit-scrollbar{display:none}
.ev-stab{flex:1 1 0;padding:8px 14px;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.72rem;font-weight:700;color:var(--dim);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:all 0.15s;text-align:center}
.ev-stab.on{color:var(--gold);border-bottom-color:var(--gold)}

/* ── HERO EVENT CARD ───────────────────────────────────── */
.ev-hero-card{background:var(--surf);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:8px;cursor:pointer;transition:all 0.15s}
.ev-hero-card:hover{border-color:var(--border2)}
.ev-hero-top{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border)}
.ev-hero-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ev-hero-ico svg{width:20px;height:20px;stroke:currentColor}
.ev-hero-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.9rem;color:var(--tx);margin-bottom:2px}
.ev-hero-sub{font-size:0.72rem;color:var(--muted)}
.ev-hero-bot{display:flex;align-items:center;justify-content:space-between;padding:8px 14px}

/* ── EVENT TAGS ────────────────────────────────────────── */
.ev-tags{display:flex;gap:5px;flex-wrap:wrap}
.ev-tag{font-size:0.65rem;font-weight:600;padding:2px 7px;border-radius:5px}
.ev-tag-tourney{background:rgba(194,65,12,0.12);color:var(--acl)}
.ev-tag-club{background:rgba(2,132,199,0.1);color:#38bdf8}
.ev-tag-meetup{background:rgba(22,163,74,0.1);color:#4ade80}
.ev-tag-free{background:rgba(74,222,128,0.1);color:#4ade80}
.ev-tag-paid{background:rgba(245,158,11,0.1);color:#fbbf24}
.ev-tag-fide{background:rgba(194,65,12,0.12);color:var(--acl)}
.ev-tag-neutral{background:var(--surf2);color:var(--dim)}

/* ── RSVP BUTTON ───────────────────────────────────────── */
.ev-rsvp-btn{padding:5px 13px;border-radius:8px;background:var(--acc);color:#fff;border:none;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.75rem;cursor:pointer;flex-shrink:0;transition:background 0.15s}
.ev-rsvp-btn:hover{background:var(--acc2)}
.ev-rsvp-btn.joined{background:var(--surf2);color:var(--muted);border:1px solid var(--border)}

/* ── LIST ROW ──────────────────────────────────────────── */
.ev-list-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity 0.15s}
.ev-list-row:last-child{border-bottom:none}
.ev-list-row:hover{opacity:0.8}
.ev-list-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ev-list-ico svg{width:18px;height:18px;stroke:currentColor}
.ev-list-title{font-size:0.87rem;font-weight:700;color:var(--tx);margin-bottom:2px}
.ev-list-meta{font-size:0.71rem;color:var(--muted)}
.ev-list-dist{font-size:0.72rem;color:var(--dim);flex-shrink:0;text-align:right}
.ev-list-price{font-size:0.65rem;color:var(--muted);margin-top:2px}
.ev-section-label{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.65rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--gold);padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:4px}

/* ── EMPTY STATE ───────────────────────────────────────── */
.ev-empty{display:flex;flex-direction:column;align-items:center;padding:40px 20px;gap:10px;text-align:center}
.ev-empty svg{width:36px;height:36px;stroke:var(--dim);opacity:0.5}
.ev-empty-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.95rem;color:var(--tx)}
.ev-empty-sub{font-size:0.8rem;color:var(--muted);max-width:220px;line-height:1.5}

/* ── HOST / FAB BUTTONS ────────────────────────────────── */
.host-btn{display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:var(--pill);background:var(--acc);border:none;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.18s;box-shadow:0 4px 16px rgba(192,101,74,0.4)}
.host-btn:hover{background:var(--acc2);transform:scale(1.03)}
.host-btn .hb-ico{font-size:1rem}
.fab-row{display:flex;align-items:center;justify-content:flex-end;gap:10px;position:absolute;bottom:16px;right:16px;z-index:20}
.post-fab{width:46px;height:46px;border-radius:50%;background:var(--acc);color:#fff;border:none;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 16px rgba(192,101,74,0.45);display:flex;align-items:center;justify-content:center;transition:all 0.18s;flex-shrink:0}
.post-fab:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(192,101,74,0.55);background:var(--acc2)}

/* ── USER MEETUP POSTS ─────────────────────────────────── */
.upost{background:linear-gradient(135deg,rgba(16,185,129,0.06),rgba(16,185,129,0.02));border:1.5px solid rgba(16,185,129,0.28);border-radius:16px;padding:13px 15px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;transition:all 0.15s;box-shadow:0 1px 4px rgba(16,185,129,0.1)}
.upost:hover{background:rgba(16,185,129,0.08);border-color:rgba(16,185,129,0.45)}
.upost-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#f97316);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;color:#fff;font-weight:700}
.upost-body{flex:1;min-width:0}
.upost-name{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.85rem;color:var(--tx);margin-bottom:1px}
.upost-loc{font-size:0.78rem;font-weight:600;color:#059669;margin-bottom:3px}
.upost-msg{font-size:0.76rem;color:var(--muted);line-height:1.4;margin-bottom:5px}
.upost-meta{font-size:0.67rem;color:var(--dim);display:flex;gap:8px}
.upost-join{margin-left:auto;padding:5px 13px;border-radius:var(--pill);background:#059669;color:#fff;border:none;font-size:0.68rem;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;flex-shrink:0;align-self:center;transition:background 0.15s}
.upost-join:hover{background:#047857}
.upost-join.joined{background:var(--surf2);color:var(--muted);border:1.5px solid var(--border)}
.post-divider{font-size:0.62rem;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;color:var(--dim);padding:6px 2px 4px;border-bottom:1px solid var(--border);margin-bottom:2px}

/* ── CREATE POST MODAL ─────────────────────────────────── */
.cpost-ov{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:600;display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;visibility:hidden;transition:opacity 0.25s,visibility 0s 0.25s}
.cpost-ov.on{opacity:1;pointer-events:all;visibility:visible;transition:opacity 0.25s,visibility 0s}
.cpost-box{background:var(--surf);border-radius:24px 24px 0 0;padding:10px 20px 32px;width:100%;max-width:540px;transform:translateY(40px);transition:transform 0.3s cubic-bezier(0.34,1.3,0.64,1);max-height:92vh;overflow-y:auto}
.cpost-ov.on .cpost-box{transform:translateY(0)}
.cpost-handle{width:36px;height:4px;border-radius:2px;background:var(--border2);margin:0 auto 8px;padding:4px 0;background-clip:content-box;cursor:grab;touch-action:none}
.cpost-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:16px;color:var(--tx)}
.cpost-field{margin-bottom:12px}
.cpost-label{font-size:0.68rem;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.cm-char-count{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.66rem;font-weight:600;color:var(--dim);letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums;transition:color 0.15s}
.cpost-inp{width:100%;padding:10px 13px;border-radius:12px;border:1.5px solid var(--border2);background:var(--surf2);color:var(--tx);font-family:'Plus Jakarta Sans',sans-serif;font-size:0.88rem;outline:none;transition:border-color 0.15s}
.cpost-inp:focus{border-color:var(--acc)}
.cpost-inp::placeholder{color:var(--dim)}
textarea.cpost-inp{resize:none;height:72px;line-height:1.5}
.cpost-row{display:flex;gap:8px}
.cpost-row .cpost-field{flex:1}
.cpost-times{display:flex;gap:7px;flex-wrap:wrap;margin-top:5px}
.ctime-chip{padding:6px 13px;border-radius:var(--pill);font-size:0.72rem;font-weight:600;background:var(--surf2);color:var(--muted);border:1.5px solid var(--border);cursor:pointer;transition:all 0.15s}
.ctime-chip.on{background:rgba(194,65,12,0.1);color:var(--acc);border-color:rgba(194,65,12,0.3)}
.cpost-field.cp-error .cpost-inp,
.cpost-field.cp-error select.cpost-inp,
.cpost-field.cp-error .cpost-inp:focus{border-color:#dc2626}
.cpost-field.cp-error .cp-date-btns>button{border-color:#dc2626}
.cp-err-msg{font-size:0.7rem;color:#dc2626;margin-top:4px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;display:none}
.cpost-field.cp-error .cp-err-msg{display:block}
.cp-tslot{flex:1;height:22px;background:var(--surf2);cursor:pointer;transition:background 0.1s;border-right:1px solid var(--surf);min-width:0}
.cp-tslot:first-child{border-radius:4px 0 0 4px}
.cp-tslot:last-child{border-radius:0 4px 4px 0;border-right:none}
.cp-tslot.in-range{background:var(--acc)}
.cp-tslot.is-start{background:var(--acc);border-radius:4px 0 0 4px}
.cp-tslot.is-end{background:var(--acc);border-radius:0 4px 4px 0}
.cp-tslot.is-start.is-end{border-radius:4px}
.cp-tslot:hover:not(.in-range):not(.is-start):not(.is-end):not(.cp-tslot-past){background:rgba(194,65,12,0.25)}
.cp-tslot-past{background:repeating-linear-gradient(-45deg,rgba(128,128,128,0.45),rgba(128,128,128,0.45) 1.5px,var(--surf2) 1.5px,var(--surf2) 5px) !important;cursor:not-allowed !important}
.cpost-submit{width:100%;padding:13px;border-radius:14px;background:var(--acc);color:#fff;border:none;font-family:'Plus Jakarta Sans',sans-serif;font-size:0.92rem;font-weight:700;cursor:pointer;margin-top:6px;transition:background 0.15s}
.cpost-submit:hover{background:var(--acc2)}
@keyframes pulse-pin{0%,100%{box-shadow:0 2px 12px rgba(194,65,12,0.45)}50%{box-shadow:0 2px 22px rgba(194,65,12,0.75),0 0 0 8px rgba(194,65,12,0.12)}}

/* ── NUMBER INPUT SPIN BUTTONS ─────────────────────────── */
/* Dark mode default: tell the browser to render native controls light */
.cpost-inp[type="number"]{color-scheme:dark}
/* Light mode override */
body.light .cpost-inp[type="number"]{color-scheme:light}

/* ── EVENTS SEARCH BAR ─────────────────────────────────────
   Block layout with absolutely positioned icon, so the input is
   NOT a flex child. Flex layout + Chromium's caret pass can
   produce a clipped sliver caret — mirrors the map search fix. */
#ev-search-wrap{
  position:relative;
  flex:1;
  height:38px;
  background:var(--surf2);
  border:1.5px solid var(--border2);
  border-radius:12px;
  box-sizing:border-box;
}
#ev-search-wrap .ev-search-icon{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  pointer-events:none;
}
#ev-main-search{
  box-sizing:border-box;
  display:block;
  width:100%;
  height:100%;
  padding:0 14px 0 36px;
  margin:0;
  background:transparent;
  border:none;
  outline:none;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:15px;
  line-height:34px; /* wrap 38 − 2*1.5 border = 35; 34 leaves a hair of breathing room */
  font-weight:400;
  font-style:normal;
  color:var(--tx);
  caret-color:var(--tx);
  -webkit-appearance:none;
  appearance:none;
}
#ev-main-search::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
#ev-main-search::placeholder{color:var(--dim)}

/* ── "Happening now" fire animation ────────────────────────
   Soft flame-like amber→orange gradient that flows top→bottom.
   Applied to the card's left accent bar when a meetup is in
   progress, and as a matching ring around the Check-in CTA so
   both elements pulse in sync. Uses a repeating-linear-gradient
   with an animated `background-position` — no scale changes,
   no flashing, just a gentle ember glow. */
@keyframes cm-fire-flow    { to { background-position: 0 60px; } }
@keyframes cm-fire-flow-sm { to { background-position: 0 24px; } }
.cm-fire-bar{
  background:repeating-linear-gradient(
    180deg,
    #fbbf24 0%,
    #f97316 30%,
    #ea580c 50%,
    #f97316 70%,
    #fbbf24 100%
  ) !important;
  background-size:100% 60px !important;
  animation:cm-fire-flow 2.6s linear infinite;
}
.cm-fire-btn{
  position:relative;
  isolation:isolate;
}
.cm-fire-btn::before{
  content:'';
  position:absolute;
  inset:-1.5px;
  border-radius:inherit;
  padding:1.5px;
  background:repeating-linear-gradient(
    180deg,
    #fbbf24 0%,
    #f97316 30%,
    #ea580c 50%,
    #f97316 70%,
    #fbbf24 100%
  );
  background-size:100% 24px;
  animation:cm-fire-flow-sm 1.8s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(249,115,22,0.45));
  z-index:-1;
}

/* ── In-progress tournament — fuchsia/magenta variant ──────
   Same shimmer mechanic as cm-fire-bar but in a violet→magenta
   palette so tournaments and meetups read distinctly when both
   are live in the same list. */
.cm-fire-bar-magenta{
  background:repeating-linear-gradient(
    180deg,
    #f0abfc 0%,
    #d946ef 30%,
    #a21caf 50%,
    #d946ef 70%,
    #f0abfc 100%
  ) !important;
  background-size:100% 60px !important;
  animation:cm-fire-flow 2.6s linear infinite;
}
.cm-fire-btn-magenta{
  position:relative;
  isolation:isolate;
}
/* ── Standings info icons ─────────────────────────────────
   Small "i" badge in column headers. Desktop gets an inline
   hover tooltip; touch devices get nothing on hover (because
   there's no hover) and instead fall through to a click-toast
   handled in JS. The @media query gates the tooltip so iOS
   doesn't get a sticky CSS popover on tap. */
.cm-info-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:13px;height:13px;line-height:13px;text-align:center;
  border-radius:50%;background:var(--surf3);color:var(--muted);
  font-size:0.62rem;font-weight:700;cursor:pointer;
  border:none;padding:0;margin-left:3px;
  vertical-align:1px;font-family:inherit;
  -webkit-tap-highlight-color:rgba(192,101,74,0.2);
  touch-action:manipulation;
  position:relative;
}
/* Anchored to the icon's RIGHT edge so the tooltip extends LEFTWARD only.
   The TB1/TB2 columns sit near the right edge of the standings sheet,
   and a centered tooltip would clip against the sheet boundary. Right-
   anchoring keeps the tooltip inside its container regardless of which
   column it belongs to.
   For icons at the LEFT side of a sheet (e.g. the Format label in the
   tournament create/edit form), use the `.cm-info-btn-left` modifier
   below — it flips to left-anchored so the tooltip extends rightward. */
.cm-info-btn::after{
  content:attr(data-info);
  position:absolute;
  bottom:calc(100% + 6px);
  right:-2px;
  left:auto;
  transform:none;
  background:rgba(15,23,42,0.96);
  color:#f8fafc;
  padding:8px 12px;border-radius:8px;
  font-size:0.72rem;font-weight:500;
  white-space:normal;text-align:left;
  width:max-content;max-width:230px;
  line-height:1.4;
  box-shadow:0 6px 20px rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.08);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.12s ease-out;
  z-index:10002;
}
.cm-info-btn.cm-info-btn-left::after{
  /* Centered on the icon, then biased ~70% leftward of its own width so the
     tooltip mostly extends LEFT of the icon while still beginning slightly
     to the right. Keeps the tooltip inside narrow form columns on mobile
     where the previous left:-2px placement clipped against the right edge. */
  right:auto;
  left:50%;
  transform:translateX(-70%);
}
@media (hover: hover) {
  .cm-info-btn:hover::after,
  .cm-info-btn:focus-visible::after{
    opacity:1;
  }
}

.cm-fire-btn-magenta::before{
  content:'';
  position:absolute;
  inset:-1.5px;
  border-radius:inherit;
  padding:1.5px;
  background:repeating-linear-gradient(
    180deg,
    #f0abfc 0%,
    #d946ef 30%,
    #a21caf 50%,
    #d946ef 70%,
    #f0abfc 100%
  );
  background-size:100% 24px;
  animation:cm-fire-flow-sm 1.8s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite:exclude;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(217,70,239,0.45));
  z-index:-1;
}