/**
 * @benlowrey/events-directory-css — shared design system for Events Engine consumers.
 *
 * Extracted from Real Awake's scripts/build-directory.js (2026-08-05), which is the
 * reference implementation — its card layout, timeline grid, glass-blur cards, hover
 * states, and native view-transitions went through real iteration and bug fixes this
 * session (row-packing day-bucketing, sticky headers, height-cap removal, scroll-snap).
 * Real Awake now imports THIS file rather than keeping its own independent copy, so a
 * fix here reaches every consumer instead of needing to be hand-ported N times.
 *
 * EXCEPTION: the nav (.events-nav and everything inside it) does NOT live here any more —
 * moved inline into each consumer's own <head> on 2026-09-28, after three rounds of real
 * breakage on real devices, all the same root cause: the nav's correct rendering depended
 * on THIS file loading over the network before the user saw or touched the page, which is
 * not a guarantee on a real mobile connection. A user can see and interact with the nav
 * (tap the burger) before anything else on the page has had a chance to load, unlike cards
 * or filters below the fold — so the nav is the one part of this design system that has to
 * be self-contained rather than shared. If you're touching nav CSS, edit it in each
 * consumer's HEAD template (events-directory-site/index.js and real-awake's
 * scripts/build-directory.js), not here — and keep both in sync by hand, the same way the
 * golden-master test already keeps real-awake's whole script in sync with the kit's.
 *
 * Every colour is a CSS custom property with an --evd- prefix and a sensible fallback —
 * a consumer applies its own brand by overriding these on :root (or any wrapping scope),
 * typically sourced from branding-engine-api's cssVariables() emitter. Nothing in this
 * file hardcodes a brand colour; Real Awake's pink and Phantom Finance's cyan are both
 * just override sets on top of the same rules.
 *
 * Class names are unchanged from Real Awake's existing markup on purpose — both the
 * static-HTML site and any React consumer emit the SAME class names against this SAME
 * stylesheet, which is what makes this a genuine shared design system rather than a
 * theming convention two different rule-sets happen to follow.
 */

/* No universal *{...} reset here on purpose — a shared package must not leak a global
   reset into a consumer's OTHER, unrelated pages (Phantom Finance's existing pages
   already get box-sizing/margin/padding reset from Tailwind's own preflight). Each
   consumer keeps its own baseline reset locally; this file only ever targets its own
   specific classes below. */

:root {
  --evd-primary: #d94780;
  --evd-primary-hover: #c23b70;
  /* Text on filled primary surfaces (the main button, the call-to-action, the active nav pill). White
     suits a saturated colour; a light or metallic primary (gold) sets a dark tone here so the label
     stays readable. */
  --evd-on-primary: #fff;
  /* Fill of the main button. A brand with a richer or metallic look supplies its own gradient. */
  --evd-primary-gradient: linear-gradient(135deg, var(--evd-primary), color-mix(in srgb, var(--evd-primary) 60%, white));
  /* Backdrop of the monogram tile shown when an organiser has no image. */
  --evd-placeholder: linear-gradient(135deg,#240a1b,#130a21 60%,#06060c);
  --evd-placeholder-hero: linear-gradient(135deg,#2e0f21 0%,#1b1326 55%,#06060c 100%);
  --evd-bg-dark: #06060c;
  --evd-bg-card: linear-gradient(135deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
  --evd-bg-card-sub: linear-gradient(145deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
  --evd-border: rgba(255, 255, 255, 0.15);
  --evd-text-muted: rgba(255, 255, 255, 0.6);
  /* Light backing behind card/hero <img> tags — a no-op for opaque photos (object-fit:cover
     hides it entirely) but stops a transparent-PNG logo with a dark mark from vanishing
     into a dark theme. Override to a brand's own neutral if it isn't dark-themed. */
  --evd-img-backing: #f0eef2;
  --evd-font-display: 'Outfit', sans-serif;
  --evd-font-body: 'Inter', sans-serif;
}

/* Native cross-document view transitions — a smooth cross-fade between page loads on a
   static multi-page site, no JS/framework needed. Browsers without support just do a
   normal instant navigation — pure progressive enhancement. A React/SPA consumer won't
   use this (client-side routing has its own transition story), but it's harmless to
   include and free for any consumer that IS a plain multi-page site. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding:7.5rem 1.5rem 4rem}
.grid{max-width:1200px;margin:0 auto;padding:3rem 1.5rem 4rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1.5rem}

.region{color:rgba(255,255,255,.55);font-size:.9rem;margin-bottom:1.6rem}
.crumb{font-size:.78rem;color:rgba(255,255,255,.45);margin-bottom:1rem;font-family:var(--evd-font-display)}
.crumb a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
.crumb a:hover{color:#fff}

.cats{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 1rem}
.cats a{padding:.3rem .85rem;border:1px solid color-mix(in srgb, var(--evd-primary) 35%, transparent);border-radius:999px;color:rgba(255,255,255,.9);text-decoration:none;font-size:.8rem;background:color-mix(in srgb, var(--evd-primary) 6%, transparent);transition:border-color .2s,background-color .2s,color .2s;font-family:var(--evd-font-display)}
.cats a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 12%, transparent)}

/* Profile page layout grid */
.profile-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:2rem}
@media(min-width:860px){ .profile-grid{grid-template-columns:1.8fr 1fr;gap:3.5rem} }
.profile-main{display:flex;flex-direction:column;gap:2rem}
.profile-sidebar{position:relative}
@media(min-width:860px){ .profile-sidebar{position:sticky;top:6rem;height:fit-content} }

/* Hero cover image */
.cover{width:100%;max-height:450px;object-fit:cover;object-position:center;background:var(--evd-img-backing);border-radius:16px;border:1px solid rgba(255,255,255,.08);margin:0;box-shadow:0 12px 36px rgba(0,0,0,.4);transition:transform 0.4s ease}
.mono{width:100%;height:320px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:4.5rem;letter-spacing:.06em;color:rgba(255,255,255,.92);background:var(--evd-placeholder-hero);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 36px rgba(0,0,0,.4)}
/* Marks: an organiser's LOGO is shown whole, on the light backing, instead of being cropped to fill a
   photo frame (a wordmark cropped to its middle reads as a broken image). The generator adds .is-mark
   only when the image is a logo file (<slug>.logo.*) or the authority's logo with no cover photo. */
.org-card img.is-mark{object-fit:contain;padding:1.2rem 1.6rem;background:var(--evd-img-backing)}
.cover.is-mark{height:320px;object-fit:contain;padding:1.6rem;background:var(--evd-img-backing)}
.sidebar-logo.is-mark{object-fit:contain;padding:14px}
.org-list-thumb.is-mark{object-fit:contain;padding:4px}

p.evd-body{color:rgba(255,255,255,.85);margin-bottom:1.4rem;font-size:1.05rem;line-height:1.8;letter-spacing:0.01em}
h2.evd-heading{font-family:var(--evd-font-display);font-size:1.5rem;font-weight:600;color:#fff;margin:2rem 0 1.2rem;border-top:1px solid rgba(255,255,255,.06);padding-top:2rem}

/* Sidebar (organiser profile page) */
.sidebar-card{background:var(--evd-bg-card);border:1px solid var(--evd-border);border-radius:24px;padding:2.5rem 2rem;display:flex;flex-direction:column;gap:1.8rem;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 8px 32px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);transition:border-color .3s, transform .3s, box-shadow .3s}
.sidebar-card:hover{border-color:color-mix(in srgb, var(--evd-primary) 30%, transparent);transform:translateY(-2px);box-shadow:0 12px 40px color-mix(in srgb, var(--evd-primary) 15%, transparent)}
.sidebar-logo-container{display:flex;justify-content:center;margin-bottom:-0.2rem}
.sidebar-logo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid var(--evd-primary);padding:3px;background:var(--evd-img-backing);box-shadow:0 0 20px color-mix(in srgb, var(--evd-primary) 25%, transparent)}
.sidebar-info{display:flex;flex-direction:column;gap:.9rem;border-bottom:1px solid rgba(255,255,255,.06);padding-bottom:1.5rem}
.info-item{display:flex;align-items:center;gap:.8rem;font-size:.95rem;color:rgba(255,255,255,.85)}
.info-icon{font-size:1.15rem}
.info-link{color:#fff;text-decoration:none;border-bottom:1px dashed var(--evd-primary);transition:color .2s}
.info-link:hover{color:var(--evd-primary)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.4rem;border-radius:99px;font-weight:600;text-decoration:none;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:.95rem}
.btn.primary{background:var(--evd-primary-gradient);color:var(--evd-on-primary);box-shadow:0 4px 15px color-mix(in srgb, var(--evd-primary) 30%, transparent);border:none}
.btn.primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 25px color-mix(in srgb, var(--evd-primary) 50%, transparent)}
.btn.secondary{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.btn.secondary:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-2px)}

.sidebar-socials h3, .sidebar-cta h3{font-family:var(--evd-font-display);font-size:1.1rem;margin-bottom:.8rem;color:#fff;font-weight:600;letter-spacing:0.02em}
.social-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.5rem}
.social-grid a{display:block;text-align:center;padding:.5rem;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:.82rem;color:rgba(255,255,255,.8);text-decoration:none;transition:background .2s,border-color .2s,color .2s;background:rgba(255,255,255,.01)}
.social-grid a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 5%, transparent)}

.sidebar-cta{background:linear-gradient(135deg,color-mix(in srgb, var(--evd-primary) 8%, transparent) 0%,rgba(36,26,51,.2) 100%);border:1px solid color-mix(in srgb, var(--evd-primary) 18%, transparent);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.8rem}
.sidebar-cta p{font-size:.88rem;color:rgba(255,255,255,.8);margin-bottom:.4rem;line-height:1.6}
.cta-btn{display:block;text-align:center;background:var(--evd-primary);color:var(--evd-on-primary);padding:.75rem;border-radius:10px;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 4px 12px color-mix(in srgb, var(--evd-primary) 25%, transparent)}
.cta-btn:hover{background:var(--evd-primary-hover);transform:translateY(-2px);box-shadow:0 6px 16px color-mix(in srgb, var(--evd-primary) 40%, transparent)}

.links{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1rem}
.links a{display:inline-block;padding:.5rem 1.2rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.85);text-decoration:none;font-size:.9rem;transition:border-color .2s,color .2s,background-color .2s;background:var(--evd-bg-card-sub);backdrop-filter:blur(10px)}
.links a:hover{border-color:var(--evd-primary);color:#fff;background:color-mix(in srgb, var(--evd-primary) 8%, transparent)}

/* Event list item (organiser profile page's "Upcoming Events") */
.ev{border:1px solid var(--evd-border);border-radius:14px;padding:1.4rem;margin-bottom:1rem;background:var(--evd-bg-card-sub);transition:border-color .3s, transform .2s, background .3s;backdrop-filter:blur(10px);scroll-margin-top:90px}
.ev:hover{border-color:color-mix(in srgb, var(--evd-primary) 30%, transparent);transform:translateX(4px);background:rgba(255,255,255,.04)}
.ev:target{border-color:var(--evd-primary);background:color-mix(in srgb, var(--evd-primary) 12%, transparent);animation:evd-target-flash 2s ease-out}
@keyframes evd-target-flash{0%{box-shadow:0 0 0 3px color-mix(in srgb, var(--evd-primary) 50%, transparent)}100%{box-shadow:0 0 0 3px transparent}}
.ev-name{font-weight:600;color:#fff;font-family:var(--evd-font-display);font-size:1.1rem;margin-bottom:0.2rem}
.ev-meta{color:rgba(255,255,255,.6);font-size:.88rem;margin-top:.15rem;display:flex;align-items:center;gap:0.4rem}

/* Organiser cards (directory grid) */
.org-card{display:flex;flex-direction:column;background:var(--evd-bg-card);border:1px solid var(--evd-border);border-radius:20px;overflow:hidden;text-decoration:none;transition:border-color .3s,transform .3s,box-shadow .3s;box-shadow:0 4px 24px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(180%)}
.org-card:hover{border-color:color-mix(in srgb, var(--evd-primary) 40%, transparent);transform:translateY(-6px);box-shadow:0 12px 36px color-mix(in srgb, var(--evd-primary) 15%, transparent)}
.org-card-img-wrapper{position:relative}
.org-card img,.org-ph{width:100%;height:180px;object-fit:cover;border-bottom:1px solid rgba(255,255,255,.05)}
.org-card img{background:var(--evd-img-backing)}
.org-ph{display:flex;align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:2.5rem;color:rgba(255,255,255,.9);letter-spacing:.05em;background:var(--evd-placeholder)}
.org-card-badges{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.org-card-badge{background:rgba(6,6,12,0.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:0.7rem;font-family:var(--evd-font-display);padding:0.25rem 0.65rem;border-radius:99px;letter-spacing:0.02em}
.org-b{padding:1.2rem 1.4rem}
.org-t{font-family:var(--evd-font-display);font-weight:600;color:#fff;font-size:1.15rem;letter-spacing:0.01em}
.org-r{color:rgba(255,255,255,.45);font-size:.85rem;margin-top:.25rem;display:flex;align-items:center;gap:0.3rem}
.org-d{color:rgba(255,255,255,.65);font-size:.88rem;margin-top:.65rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.55}

/* Page intro/header block */
.intro{max-width:1200px;margin:0 auto;padding:2.2rem 1.5rem 0;text-align:center}
.intro h1{margin-bottom:.6rem}
.intro p{max-width:640px;margin:0 auto;color:rgba(255,255,255,.7)}
.intro .crumb{text-align:center;margin-bottom:.8rem}

.foot{text-align:center;padding:2.5rem;color:rgba(255,255,255,.3);font-size:.78rem;border-top:1px solid rgba(255,255,255,.05);margin-top:4rem}
.foot a{color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.foot a:hover{color:var(--evd-primary)}

/* ---------------------------------------------------------------------------------
   Timeline (day-grid calendar) — pairs with @benlowrey/events-timeline-logic's
   packTimelineRows()/clampToWindow() for the row-packing math. This is styling only.

   KNOWN DRIFT, discovered 2026-09-27, not yet resolved: the kit's timelinePage() (index.js
   in events-directory-site) ALSO declares every selector below, inline, in the page's own
   <style> block — and because that block sits later in <head> than the <link> to this
   file, its rules win the cascade on every live site today. This block is therefore DEAD:
   editing it changes nothing a visitor sees. Left in place (not deleted) only so a future
   pass can properly consolidate the two into one (move the inline copy's rules here,
   remove them from index.js, keep index.js to only the truly page-computed CSS — the
   WINDOW_DAYS-sized grid-template-columns and the --day-w/--row-h custom properties the
   zoom JS reads/writes) rather than deleting one side blind. Until then, THE INLINE COPY
   IN index.js IS THE ONE TO EDIT.
   ----------------------------------------------------------------------------------- */
.tl-scroll{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom}
.timeline{position:relative;display:grid;grid-auto-rows:var(--evd-row-h,44px)}
.tl-day{grid-row:1;border-right:1px solid rgba(255,255,255,.05);padding:.4rem .3rem;position:sticky;top:0;background:var(--evd-bg-dark);z-index:2;display:flex;flex-direction:column;align-items:center;font-family:var(--evd-font-display)}
.tl-day.tl-weekend{background:rgba(255,255,255,.02)}
.tl-day.tl-today .tl-daynum{color:var(--evd-primary);font-weight:700}
.tl-month-row{grid-row:1;display:flex;pointer-events:none;height:0;overflow:visible}
.tl-month-cell{flex-shrink:0;position:relative}
.tl-month-label{position:sticky;left:0;top:0;z-index:3;display:inline-block;background:var(--evd-bg-dark);border-right:1px solid rgba(255,255,255,.08);padding:.4rem .5rem .4rem .6rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--evd-primary);white-space:nowrap;font-family:var(--evd-font-display)}
.tl-weekday-letter{font-size:.58rem;color:rgba(255,255,255,.35);text-transform:uppercase;line-height:1.3}
.tl-daynum{font-size:.72rem;color:rgba(255,255,255,.55)}
.tl-today-line{border-left:2px solid var(--evd-primary);pointer-events:none;z-index:1;opacity:.5}

.tl-bar{position:relative;margin:3px 2px;border-radius:8px;background:linear-gradient(90deg,var(--evd-primary) 0%,color-mix(in srgb, var(--evd-primary) 85%, white) var(--dur,100%),color-mix(in srgb, var(--evd-primary) 40%, transparent) calc(var(--dur,100%) + 6%),color-mix(in srgb, var(--evd-primary) 25%, transparent) 100%);display:flex;align-items:center;gap:.5rem;padding:0 .5rem;text-decoration:none;overflow:hidden;box-shadow:0 2px 8px color-mix(in srgb, var(--evd-primary) 25%, transparent);transition:transform .15s,box-shadow .15s;min-width:0;min-height:28px}
.tl-bar .tl-name,.tl-bar .tl-meta,.tl-bar .tl-meta-short{white-space:nowrap}
.tl-bar:hover{transform:translateY(-1px);box-shadow:0 6px 16px color-mix(in srgb, var(--evd-primary) 40%, transparent);z-index:3}
.tl-thumb{width:22px;height:22px;border-radius:50%;object-fit:cover;flex-shrink:0;display:none;background:var(--evd-img-backing)}
span.tl-thumb.tl-mono{background:#1a1a1a}
.tl-mono{align-items:center;justify-content:center;font-family:var(--evd-font-display);font-weight:700;font-size:.6rem;color:#fff}
.tl-text{min-width:0;overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.tl-name{font-size:.72rem;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis}
.tl-meta,.tl-meta-short{font-size:.62rem;color:rgba(255,255,255,.85);overflow:hidden;text-overflow:ellipsis;display:none}

.timeline[data-density="compact"] .tl-name{font-size:.62rem}
.timeline[data-density="cosy"] .tl-thumb{display:flex}
.timeline[data-density="cosy"] .tl-meta-short{display:block}
.timeline[data-density="roomy"] .tl-thumb{width:34px;height:34px;display:flex}
.timeline[data-density="roomy"] .tl-meta{display:block}

.tl-controls{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;margin:.3rem auto .6rem;max-width:1200px;padding:0 1.5rem}
.tl-nav-btn{background:var(--evd-bg-card-sub);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);color:#fff;padding:.5rem 1rem;border-radius:999px;font-family:var(--evd-font-display);font-weight:600;font-size:.85rem;cursor:pointer;transition:background .2s}
.tl-nav-btn:hover{background:color-mix(in srgb, var(--evd-primary) 15%, transparent);border-color:var(--evd-primary)}
.tl-wrap{width:100%;max-width:100%;margin:0 auto 4rem;padding:0 .5rem}
@media (min-width:768px){.tl-controls{max-width:100%}.tl-wrap{padding:0 1rem}}
.tl-empty{padding:3rem 1.5rem;text-align:center;color:rgba(255,255,255,.5)}
@media (max-width:640px){ .tl-controls{gap:.4rem} .tl-nav-btn{padding:.4rem .8rem;font-size:.78rem} }

/* ---------------------------------------------------------------------------------
   Simple List View — High-density, alphabetical (A-Z) quick-glance index
   ----------------------------------------------------------------------------------- */
.org-list-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

/* Alphabetical jump bar */
.org-list-jump-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 2rem;
  padding: .6rem 1rem;
  background: var(--evd-bg-card-sub);
  border: 1px solid var(--evd-border);
  border-radius: 999px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: sticky;
  top: calc(4.25rem + var(--evd-nav-extra, 0rem));
  z-index: 20;
}
.org-list-jump-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-family: var(--evd-font-display);
  font-weight: 700;
  font-size: .75rem;
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  transition: all .2s;
}
.org-list-jump-letter:hover {
  background: color-mix(in srgb, var(--evd-primary) 20%, transparent);
  color: #fff;
  border: 1px solid var(--evd-primary);
}
.org-list-jump-letter.disabled {
  opacity: .25;
  pointer-events: none;
}

/* Letter Section */
.org-list-section {
  margin-bottom: 2.25rem;
  scroll-margin-top: 7.5rem;
}
.org-list-letter-heading {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .75rem;
  font-family: var(--evd-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--evd-primary);
  letter-spacing: .02em;
}
.org-list-letter-heading::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--evd-primary) 35%, transparent), transparent);
}

/* List group & rows */
.org-list-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.org-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  padding: .65rem 1rem;
  background: var(--evd-bg-card-sub);
  border: 1px solid var(--evd-border);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  transition: all .2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.org-list-row:hover {
  background: color-mix(in srgb, var(--evd-primary) 8%, rgba(255, 255, 255, .04));
  border-color: color-mix(in srgb, var(--evd-primary) 40%, transparent);
  transform: translateX(4px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--evd-primary) 12%, transparent);
}

.org-list-left {
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  flex: 1;
}

.org-list-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--evd-img-backing);
  border: 1px solid rgba(255, 255, 255, .15);
}
.org-list-mono {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--evd-font-display);
  font-weight: 700;
  font-size: .8rem;
  color: rgba(255, 255, 255, .9);
  background: linear-gradient(135deg, color-mix(in srgb, var(--evd-primary) 40%, #1a1a1a), #0d0d12);
  border: 1px solid rgba(255, 255, 255, .15);
}

.org-list-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.org-list-name {
  font-family: var(--evd-font-display);
  font-weight: 600;
  font-size: .95rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-list-tags {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.org-list-meta {
  font-size: .78rem;
  color: var(--evd-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-list-right {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
}

.org-list-badge {
  padding: .25rem .6rem;
  border-radius: 999px;
  font-size: .72rem;
  font-family: var(--evd-font-display);
  font-weight: 600;
  background: color-mix(in srgb, var(--evd-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--evd-primary) 30%, transparent);
  color: rgba(255, 255, 255, .9);
  white-space: nowrap;
}

.org-list-arrow {
  color: rgba(255, 255, 255, .4);
  transition: transform .2s, color .2s;
  display: flex;
  align-items: center;
}
.org-list-row:hover .org-list-arrow {
  color: var(--evd-primary);
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .org-list-wrap {
    padding: 1.25rem .75rem 3rem;
  }
  .org-list-jump-bar {
    top: calc(5.6rem + var(--evd-nav-extra, 0rem));
    padding: .4rem .6rem;
    gap: .2rem;
  }
  .org-list-jump-letter {
    width: 22px;
    height: 22px;
    font-size: .65rem;
  }
  .org-list-row {
    padding: .5rem .75rem;
    gap: .6rem;
  }
  .org-list-thumb, .org-list-mono {
    width: 30px;
    height: 30px;
    font-size: .7rem;
  }
  .org-list-name {
    font-size: .85rem;
  }
  .org-list-badge {
    font-size: .68rem;
    padding: .2rem .45rem;
  }
}

/* ==========================================================================
   Universal Multichoice Category Filter System
   ========================================================================== */

.cat-filter-wrap {
  width: 100%;
  max-width: 1400px;
  margin: 1.25rem auto 1.5rem;
  padding: 0.6rem 0.85rem;
  background: rgba(14, 14, 18, 0.75);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-sizing: border-box;
}

.cat-filter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 0.2rem;
}

.cat-filter-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
}

.cat-filter-count-num {
  font-weight: 700;
  color: var(--evd-primary);
}

.cat-filter-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.cat-filter-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.72rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.cat-filter-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--evd-primary);
  color: #fff;
}

.cat-filter-pills {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.1rem 0.1rem 0.25rem;
}

.cat-filter-pills::-webkit-scrollbar {
  display: none;
}

.cat-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.65);
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.cat-filter-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.cat-filter-pill.active {
  background: color-mix(in srgb, var(--evd-primary) 18%, rgba(0, 0, 0, 0.4));
  border-color: color-mix(in srgb, var(--evd-primary) 65%, transparent);
  color: #fff;
  box-shadow: 0 0 14px color-mix(in srgb, var(--evd-primary) 22%, transparent);
}

.cat-filter-checkbox {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  transition: all 0.15s ease;
  background: rgba(0, 0, 0, 0.2);
}

.cat-filter-pill.active .cat-filter-checkbox {
  background: var(--evd-primary);
  border-color: var(--evd-primary);
  color: #000;
  font-weight: 800;
}

.cat-filter-pill:not(.active) .cat-filter-checkbox svg {
  display: none;
}

.cat-filter-pill-label {
  letter-spacing: 0.01em;
}

.cat-filter-pill-count {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  opacity: 0.85;
}

.cat-filter-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  margin: 1.5rem 0;
  display: none;
}

.cat-filter-empty.visible {
  display: block;
}

.cat-filter-empty-title {
  font-size: 1.15rem;
  font-family: var(--evd-font-display, inherit);
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.5rem;
}

.cat-filter-empty-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 1.25rem;
}

/* Smooth filtering transitions on cards & list rows */
.org-card,
.org-list-row {
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.25s,
              box-shadow 0.25s !important;
  will-change: opacity, transform;
}

.cat-filtered-out {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  pointer-events: none !important;
}

.cat-filtered-hidden {
  display: none !important;
}

@media (max-width: 640px) {
  .cat-filter-wrap {
    margin: 0.75rem 0 1.25rem;
    padding: 0.5rem 0.6rem;
    border-radius: 12px;
  }
  .cat-filter-pill {
    padding: 0.3rem 0.65rem;
    font-size: 0.74rem;
  }
  .cat-filter-status {
    font-size: 0.72rem;
  }
}


/* Phones: cards use the full width with a small even gutter. One rule, no !important. */
@media (max-width: 640px) {
  .wrap, .grid, .org-list-wrap {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .grid {
    gap: 1rem;
  }
  .org-card {
    border-radius: 14px;
  }
  .org-b {
    padding: 1rem 0.8rem;
  }
  .ev {
    padding: 1rem 0.8rem;
  }
}

/* ---------------------------------------------------------------------------------
   Filter rows — Country / Region / Category share one bar and one look on every site.
   Each row is a fixed label plus a horizontally scrolling set of pills (the compact single-line
   bar the category filter already used); the right-edge fade says "there is more" without a scrollbar.
   ----------------------------------------------------------------------------------- */
.cat-filter-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}
.cat-filter-row[hidden] { display: none; }
.cat-filter-row-label {
  flex: 0 0 3.7rem;
  font-family: var(--evd-font-display, inherit);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.cat-filter-row > .cat-filter-pills {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
}
.cat-filter-pill.is-single .cat-filter-checkbox { display: none; }
/* Each multi-select row (Region, Category) carries its OWN All/Clear, scoped to that row only —
   a single shared pair at the top of the bar used to silently reset more than one row at once,
   which is what made the whole filter read as unpredictable. Country is single-select and already
   has its own "All countries" pill in the row itself, so it gets no separate button — a second,
   differently-styled "All" next to that pill would be the same confusion in the other direction. */
.cat-filter-row-actions {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex: 0 0 auto;
}
.cat-filter-row-actions .cat-filter-action-btn {
  padding: .15rem .55rem;
  font-size: .62rem;
}
@media (max-width: 640px) {
  .cat-filter-row { gap: .4rem; }
  .cat-filter-row-label { flex-basis: 3.1rem; font-size: .6rem; }
  .cat-filter-row-actions .cat-filter-action-btn { padding: .12rem .45rem; font-size: .58rem; }
}

/* ---------------------------------------------------------------------------------
   Page heading block: less wasted height, above all on phones.
   ----------------------------------------------------------------------------------- */
.intro h1 { line-height: 1.15; }
@media (max-width: 640px) {
  .intro { padding-top: 1.4rem; }
  .intro p { font-size: 1rem; line-height: 1.6; }
  /* The four view buttons duplicate the nav pills, so on a phone they become a compact 2x2 grid instead
     of four stacked full-width buttons. The markup keeps its inline flex layout (Real Awake's output is
     pinned byte-for-byte), so these overrides need !important; that is their only use. */
  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: .5rem !important;
    margin-top: 1.1rem !important;
    padding: 0 .75rem;
  }
  .hero-actions .btn { padding: .6rem .5rem; font-size: .8rem; justify-content: center; white-space: nowrap; }
  .hero-actions .btn svg { display: none; }
  .hero-actions a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Fix for transparent logos with light/white text (e.g. Soulagenic) */
.dark-backing, img.dark-backing {
  background: #1a1a1a !important;
}