/* ============================================================
   ACCRA2ACTIVE — Design System v3 (bright / editorial)
   Signature: the "ticket stub" — every event is rendered like an
   admission ticket on bright cardstock, with a single inked stub
   on the left (date, perforation, a little colour) — the one dark
   accessory on an otherwise open, high-contrast, paper-white page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;0,9..144,900;1,9..144,500;1,9..144,600&family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Space+Mono:wght@400;700&display=swap');

:root{
  /* --- surfaces (bright base) --- */
  --bg:         #FFFFFF;   /* page background */
  --surface:    #FFFFFF;   /* card surface */
  --surface-2:  #F2EFE8;   /* elevated / hover / input fill */
  --surface-3:  #E7E2D6;   /* skeleton shimmer stop, deeper hover */

  /* --- the one dark accessory: nav chrome + ticket stub --- */
  --ink:        #14102A;   /* true dark ink — nav bar, bottom nav, ticket stub */
  --ink-soft:   #1D1836;   /* raised dark surface within ink chrome */

  /* --- accent palette (unchanged brand colours, tuned for contrast on white) --- */
  --coral:      #FF6B4A;   /* primary action / energy — buttons, solid fills */
  --coral-deep: #D6431F;   /* coral text/icon on white — passes contrast */
  --lime:       #C6F24D;   /* "going" / affirmative fills */
  --lime-deep:  #4C7A16;   /* lime as text-on-light (badges, checks) */
  --magenta:    #FF3F8F;   /* thoughts / likes / interested */
  --gold:       #F2C14E;   /* prices, premium fills */
  --gold-deep:  #8A5B0C;   /* gold as text-on-light (pending badges) */
  --blue:       #1D6FE0;   /* verification checkmark */
  --violet:     #7C5CFC;   /* secondary accent, links, focus ring */

  /* --- text --- */
  --text-dark:  #1A1730;   /* primary text — on bright surfaces (default) */
  --text-light: #FFFFFF;   /* text on ink chrome / stub / colour-fill bands */
  --text-muted: #6B647F;   /* muted text — on bright surfaces */
  --text-muted-dark: #A99FCB; /* muted text — on ink chrome / dark bands */
  --line:       rgba(20,16,42,.10);
  --line-dark:  rgba(20,16,42,.20);

  /* --- type --- */
  --display: 'Fraunces', Georgia, serif;
  --body:    'Urbanist', system-ui, sans-serif;
  --mono:    'Space Mono', monospace;

  /* --- shape / motion --- */
  --radius: 22px;
  --radius-sm: 14px;
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%; background:var(--bg);}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--text-dark);
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
  background-image:
    radial-gradient(circle at 10% -10%, rgba(124,92,252,.07), transparent 42%),
    radial-gradient(circle at 90% 0%, rgba(255,107,74,.06), transparent 48%);
  background-attachment:fixed;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{
  font-family:inherit; font-size:16px; /* 16px prevents iOS zoom */
  background:var(--surface-2); color:var(--text-dark);
  border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:13px 14px;
}
input::placeholder, textarea::placeholder{color:var(--text-muted);}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--violet);}
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B647F' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

::selection{background:var(--coral); color:var(--text-light);}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:2px;
}

.container{max-width:1120px; margin:0 auto; padding:0 24px;}
@media (max-width:480px){ .container{padding:0 18px;} }

/* ---------------- Typography helpers ---------------- */
.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--coral-deep);
}
h1,h2,h3{font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:-0.01em; color:var(--text-dark);}
h1{font-size:clamp(34px,7.5vw,80px); font-weight:600; font-optical-sizing:auto;}
h2{font-size:clamp(24px,4vw,44px); font-weight:600;}
h3{font-size:clamp(18px,2.4vw,22px); font-weight:600;}
h1 em, h2 em{font-style:italic; font-weight:500; color:var(--coral-deep);}
p{line-height:1.65; color:var(--text-muted);}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px;
  border-radius:100px;
  font-weight:700;
  font-size:15px;
  border:2px solid transparent;
  transition:transform .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-tap-highlight-color:transparent;
  white-space:nowrap;
}
.btn svg{width:18px; height:18px; flex-shrink:0;}
.btn-primary{background:var(--coral); color:#fff; box-shadow:0 10px 26px -10px rgba(255,92,60,.55);}
.btn-primary:hover{background:var(--coral-deep); transform:translateY(-1px);}
.btn-dark{background:var(--ink); color:var(--text-light);}
.btn-dark:hover{transform:translateY(-1px); background:var(--ink-soft);}
.btn-lime{background:var(--lime); color:var(--ink);}
.btn-lime:hover{transform:translateY(-1px);}
.btn-outline{background:transparent; border-color:var(--line-dark); color:var(--text-dark);}
.btn-outline:hover{background:var(--surface-2); border-color:var(--violet);}
.btn-outline-light{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.5); color:var(--text-light);}
.btn-outline-light:hover{border-color:var(--text-light); background:rgba(255,255,255,.18);}
.btn-ghost{background:transparent; color:var(--text-dark); padding:10px 14px;}
.btn-ghost:hover{background:var(--surface-2);}
.btn-block{width:100%;}
.btn-sm{padding:9px 16px; font-size:13px;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none !important;}

/* ---------------- Nav (sits flush on the white page — no bar, no border) ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--bg);
  border-bottom:none;
}
.nav-inner{display:flex; align-items:center; gap:10px; padding:10px 24px; max-width:1120px; margin:0 auto;}
.logo{display:flex; align-items:center; line-height:0; margin-right:auto;}
.logo img{height:54px; width:auto; display:block;}
.logo .dot{color:var(--coral);}
.nav-links{display:flex; align-items:center; gap:6px;}
.nav-link{padding:10px 14px; border-radius:100px; font-weight:600; font-size:14px; color:var(--text-muted);}
.nav-link.active, .nav-link:hover{background:var(--surface-2); color:var(--text-dark);}
/* .btn-outline-light is designed for dark surfaces (hero bands); the nav sits on
   the white page background, so it needs its own dark-appropriate treatment here
   or it renders as invisible white-on-white (this was hiding the Log out button). */
.nav-links .btn-outline-light{background:transparent; border-color:var(--line-dark); color:var(--text-dark);}
.nav-links .btn-outline-light:hover{background:var(--surface-2); border-color:var(--violet);}
.nav-mobile-toggle{display:none;}

/* ---------------- Nav search (search icon + live results dropdown) ---------------- */
.nav-search{position:relative; flex-shrink:0;}
.nav-search-toggle{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:100px; border:1.5px solid var(--line);
  background:var(--surface-2); color:var(--text-dark); flex-shrink:0;
}
.nav-search-toggle svg{width:17px; height:17px;}
.nav-search-toggle[aria-expanded="true"]{background:var(--ink); border-color:var(--ink); color:var(--text-light);}
.nav-search-scrim{position:fixed; inset:0; background:rgba(6,4,16,.45); z-index:75;}
.nav-search-scrim.hidden{display:none;}
.nav-search-panel{
  position:absolute; top:calc(100% + 12px); right:-6px;
  width:min(400px, calc(100vw - 32px));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 30px 60px -20px rgba(20,16,42,.4);
  z-index:80; overflow:hidden;
}
.nav-search-panel.hidden{display:none;}
.nav-search-input-wrap{display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line);}
.nav-search-input-wrap svg{width:17px; height:17px; color:var(--text-muted); flex-shrink:0;}
.nav-search-input-wrap input{border:none; padding:6px 0; flex:1; font-size:14px; background:transparent; min-width:0;}
.nav-search-input-wrap input:focus{outline:none; box-shadow:none;}
.nav-search-close{
  width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--text-muted); flex-shrink:0; font-size:13px; line-height:1;
}
.nav-search-close:hover{background:var(--surface-2); color:var(--text-dark);}
.nav-search-results{max-height:min(60vh, 440px); overflow-y:auto; padding:6px;}
.nav-search-group{padding:2px 0;}
.nav-search-group + .nav-search-group{border-top:1px solid var(--line); margin-top:4px; padding-top:6px;}
.nav-search-group-label{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding:6px 10px 4px;}
.nav-search-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--radius-sm); color:var(--text-dark);}
.nav-search-row:hover, .nav-search-row.active{background:var(--surface-2);}
.nsr-thumb{
  width:36px; height:36px; border-radius:10px; flex-shrink:0; overflow:hidden;
  background:var(--surface-2); display:flex; align-items:center; justify-content:center; color:var(--text-muted);
}
.nsr-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.nsr-thumb svg{width:16px; height:16px;}
.nsr-avatar{border-radius:50%; background:var(--ink); color:#fff; font-family:var(--mono); font-weight:700; font-size:12px;}
.nsr-main{display:flex; flex-direction:column; min-width:0; flex:1;}
.nsr-title{font-weight:700; font-size:13.5px; color:var(--text-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nsr-sub{font-size:11.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px;}
.nav-search-loading, .nav-search-empty{padding:28px 16px; text-align:center; font-size:13px; color:var(--text-muted);}
@media (max-width:760px){
  .nav-search-panel{position:fixed; top:74px; left:16px; right:16px; width:auto;}
}

@media (max-width:760px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; height:100dvh;
    background:var(--ink-soft); flex-direction:column; align-items:stretch; padding:100px 24px 24px;
    transform:translateX(100%); transition:transform .3s var(--ease); z-index:60;
    gap:4px; border-left:1px solid rgba(255,255,255,.08);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-link{color:var(--text-light); padding:14px 16px; font-size:16px;}
  .nav-link.active, .nav-link:hover{background:rgba(255,255,255,.08); color:var(--text-light);}
  .nav-mobile-toggle{
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:100px; border:1px solid var(--line); background:var(--surface-2); color:var(--text-dark); z-index:70;
  }
  .nav-scrim{
    position:fixed; inset:0; background:rgba(6,4,16,.6); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease); z-index:55;
  }
  .nav-scrim.open{opacity:1; pointer-events:auto;}
}

/* ---------------- Bottom nav (dark chrome, mobile) ---------------- */
.bottom-nav{ display:none; }
@media (max-width:760px){
  .bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--ink); padding:10px 8px calc(10px + env(safe-area-inset-bottom));
    justify-content:space-around; border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -8px 28px -12px rgba(20,16,42,.35);
  }
  .bottom-nav a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    color:var(--text-muted-dark); font-size:11px; font-weight:600; padding:8px 10px; border-radius:12px;
    min-width:56px; min-height:48px;
  }
  .bottom-nav a svg{width:22px; height:22px;}
  .bottom-nav a.active{color:var(--lime);}
  body.has-bottom-nav{padding-bottom:76px;}
}

/* ---------------- Mobile back-header (sub-pages) ---------------- */
.mobile-back{
  display:none;
  align-items:center; gap:10px;
  padding:14px 20px;
  position:sticky; top:0; z-index:45;
  background:rgba(20,16,42,.92);
  backdrop-filter:blur(16px);
}
.mobile-back button{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.08); border:none; color:var(--text-light); flex-shrink:0;
}
.mobile-back button svg{width:20px; height:20px;}
.mobile-back span{font-family:var(--display); font-weight:700; font-size:16px; color:var(--text-light);}
@media (max-width:760px){
  .mobile-back{display:flex;}
}

/* ---------------- Ticket stub card (signature element) ---------------- */
.ticket{
  position:relative;
  display:grid;
  grid-template-columns:104px 1px 1fr;
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(20,16,42,.02) inset, 0 20px 44px -28px rgba(20,16,42,.28);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ticket.is-past, .feed-event-card.is-past{opacity:.6; filter:grayscale(.35);}
.ticket:hover{transform:translateY(-3px); box-shadow:0 1px 0 rgba(20,16,42,.02) inset, 0 26px 56px -24px rgba(20,16,42,.34);}
.ticket-stub{
  background:linear-gradient(160deg, var(--ink-soft), var(--ink));
  color:var(--text-light);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:18px 8px;
  text-align:center;
}
.ticket-stub .month{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--lime);}
.ticket-stub .day{font-family:var(--display); font-size:32px; font-weight:800; line-height:1;}
.ticket-stub .time{font-family:var(--mono); font-size:11px; color:var(--text-muted-dark); margin-top:6px;}
.ticket-perf{
  background-image: radial-gradient(circle, var(--bg) 2.5px, transparent 2.6px);
  background-color:var(--line-dark);
  background-size: 100% 14px;
  background-position: center;
  position:relative;
}
.ticket-perf::before, .ticket-perf::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:18px; height:18px; background:var(--bg); border-radius:50%;
}
.ticket-perf::before{top:-9px;}
.ticket-perf::after{bottom:-9px;}
.ticket-body{padding:18px 20px; min-width:0;}
.ticket-cat{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--coral-deep); font-weight:700;}
.ticket-title{font-family:var(--display); font-weight:700; font-size:17px; margin:6px 0 8px; line-height:1.2; color:var(--text-dark);}
.ticket-meta{font-size:13px; color:var(--text-muted); display:flex; align-items:center; gap:6px; margin-bottom:2px;}
.ticket-meta svg{width:14px; height:14px; flex-shrink:0;}
.ticket-foot{display:flex; align-items:center; justify-content:space-between; margin-top:12px; gap:10px; flex-wrap:wrap;}
.ticket-host{display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted);}
.avatar{width:22px; height:22px; border-radius:50%; background:var(--coral); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:10px; font-weight:700; flex-shrink:0; overflow:hidden;}
.avatar img{width:100%; height:100%; object-fit:cover;}
.avatar.lg{width:44px; height:44px; font-size:16px;}
.avatar.xl{width:84px; height:84px; font-size:26px;}
.verified-badge{display:inline-flex; align-items:center; color:var(--blue); flex-shrink:0;}
.verified-badge svg{width:14px; height:14px;}

/* ---------------- Vote pills ---------------- */
.vote-row{display:flex; gap:8px; flex-wrap:wrap;}
.vote-pill{
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:100px; border:1.5px solid var(--line);
  font-size:13px; font-weight:700; background:var(--surface-2); color:var(--text-muted);
  transition:all .15s var(--ease);
}
.vote-pill svg{width:15px; height:15px;}
.vote-pill:hover{border-color:var(--violet);}
.vote-pill[data-active="true"][data-vote="going"]{background:var(--lime); border-color:var(--lime); color:var(--ink);}
.vote-pill[data-active="true"][data-vote="interested"]{background:var(--magenta); border-color:var(--magenta); color:#fff;}
.vote-pill[data-active="true"][data-vote="not_going"]{background:var(--ink); border-color:var(--ink); color:var(--text-light);}
.vote-count{font-family:var(--mono);}

/* ---------------- Post / thought card (Twitter-style) ---------------- */
.post-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; display:flex; gap:12px; box-shadow:0 12px 28px -22px rgba(20,16,42,.18); }
.post-body{flex:1; min-width:0;}
.post-head{display:flex; align-items:center; gap:8px; margin-bottom:4px; flex-wrap:wrap;}
.post-name{font-weight:700; font-size:14px; color:var(--text-dark);}
.post-handle{font-family:var(--mono); font-size:12px; color:var(--text-muted);}
.post-time{font-family:var(--mono); font-size:11px; color:var(--text-muted);}
.post-time::before{content:"·"; margin-right:8px;}
.post-text{font-size:14px; color:var(--text-dark); line-height:1.55; white-space:pre-wrap;}
.post-tag{
  display:inline-flex; align-items:center; gap:5px; margin-top:8px;
  font-family:var(--mono); font-size:11px; color:var(--coral-deep); background:rgba(255,92,60,.10);
  padding:5px 10px; border-radius:100px;
}
.post-img{margin-top:10px; border-radius:14px; overflow:hidden; max-height:420px; background:var(--surface-2); display:flex; align-items:center; justify-content:center;}
.post-img img{width:100%; height:auto; max-height:420px; object-fit:contain; display:block;}
.post-actions{display:flex; align-items:center; gap:18px; margin-top:12px; flex-wrap:wrap;}
.post-action{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; color:var(--text-muted); background:none; border:none; padding:4px; border-radius:8px; }
.post-action svg{width:17px; height:17px; transition:transform .15s var(--ease);}
.post-action:hover{color:var(--magenta);}
.post-action:hover svg{transform:scale(1.15);}
.post-action[data-liked="true"]{color:var(--magenta);}
.post-action[data-liked="true"] svg{fill:var(--magenta); stroke:var(--magenta);}
.post-action.share-action:hover{color:var(--violet);}
.post-action.danger:hover{color:var(--coral-deep);}
.post-menu-btn{margin-left:auto; color:var(--text-muted); background:none; border:none; padding:4px;}
.post-menu-btn svg{width:16px; height:16px;}

/* ---------------- Quoted content (share / quote-post) ---------------- */
.quote-card{
  margin-top:10px; border:1.5px solid var(--line); border-radius:14px; padding:12px;
  display:flex; gap:10px; background:var(--surface-2);
}
.quote-card:hover{border-color:var(--violet);}
.quote-card .avatar{width:20px; height:20px; font-size:9px;}
.quote-card-body{min-width:0; flex:1;}
.quote-card-head{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; color:var(--text-dark); flex-wrap:wrap;}
.quote-card-head .h{font-family:var(--mono); font-weight:400; color:var(--text-muted); font-size:11.5px;}
.quote-card-text{font-size:13px; color:var(--text-muted); margin-top:3px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.quote-card-event{display:flex; align-items:center; gap:10px; margin-top:2px;}
.quote-card-event-thumb{
  width:40px; height:40px; border-radius:8px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(160deg, var(--ink-soft), var(--ink)); display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.quote-card-event-thumb img{width:100%; height:100%; object-fit:cover;}
.quote-card-event-thumb .m{font-family:var(--mono); font-size:7px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime);}
.quote-card-event-thumb .d{font-family:var(--display); font-size:13px; font-weight:800; color:#fff; line-height:1;}
.quote-card-event-info{min-width:0;}
.quote-card-event-info .t{font-weight:700; font-size:13px; color:var(--text-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.quote-card-event-info .l{font-size:11.5px; color:var(--text-muted);}

/* Pending-quote preview shown above the composer while drafting a share */
.quote-pending{
  position:relative; margin:2px 0 10px; border:1.5px dashed var(--line-dark); border-radius:14px; padding:10px 34px 10px 12px;
  display:flex; gap:10px; background:var(--surface-2);
}
.quote-pending-remove{
  position:absolute; top:8px; right:8px; width:22px; height:22px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line); color:var(--text-muted);
  display:flex; align-items:center; justify-content:center;
}
.quote-pending-remove svg{width:11px; height:11px;}

/* ---------------- Cards / surfaces ---------------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:0 16px 36px -26px rgba(20,16,42,.22);}
.dark-section{background:var(--ink); color:var(--text-light); border-radius:var(--radius);}
.dark-section p{color:var(--text-muted-dark);}

/* ---------------- Forms ---------------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px; color:var(--text-dark);}
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; border-radius:var(--radius-sm); border:1.5px solid var(--line);
  background:var(--surface-2); color:var(--text-dark);
}
.field input::placeholder, .field textarea::placeholder{color:var(--text-muted);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--violet); outline:none;}
.field textarea{resize:vertical; min-height:90px;}
.field-hint{font-size:12px; color:var(--text-muted); margin-top:5px;}
.field-error{font-size:12px; color:var(--coral-deep); margin-top:5px; display:none;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){.two-col{grid-template-columns:1fr;}}

.auth-shell{
  min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(255,92,60,.16), transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(124,92,252,.16), transparent 45%),
    var(--bg);
}
.auth-card{width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:32px 28px; box-shadow:0 40px 80px -34px rgba(20,16,42,.35);}
.auth-tabs{display:flex; background:var(--ink); border-radius:100px; padding:4px; margin-bottom:22px;}
.auth-tab{flex:1; text-align:center; padding:10px; border-radius:100px; font-weight:700; font-size:13px; color:var(--text-muted-dark);}
.auth-tab[aria-selected="true"]{background:var(--surface); color:var(--text-dark); box-shadow:0 2px 8px rgba(0,0,0,.18);}
.oauth-row{display:flex; flex-direction:column; gap:10px; margin-bottom:18px;}
.oauth-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:12px; font-weight:700; font-size:14px;
  background:var(--surface-2); color:var(--text-dark);
}
.oauth-btn:hover{border-color:var(--violet);}
.oauth-btn svg{width:18px; height:18px;}
.divider{display:flex; align-items:center; gap:10px; margin:18px 0; color:var(--text-muted); font-size:12px; font-family:var(--mono);}
.divider::before, .divider::after{content:''; flex:1; height:1px; background:var(--line);}

/* ---------------- Badges / chips / status ---------------- */
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; padding:5px 10px; border-radius:100px; background:var(--surface-2); color:var(--text-muted); font-weight:700;}
.chip-pending{background:rgba(138,91,12,.10); color:var(--gold-deep);}
.chip-verified{background:rgba(76,122,22,.10); color:var(--lime-deep);}
.badge-admin{background:var(--surface-2); color:var(--gold-deep); border:1px solid rgba(138,91,12,.25);}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:var(--text-light); padding:14px 20px; border-radius:100px;
  font-size:14px; font-weight:600; z-index:200; transition:transform .3s var(--ease);
  display:flex; align-items:center; gap:10px; box-shadow:0 20px 40px -16px rgba(20,16,42,.4);
  max-width:90vw;
}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast svg{width:18px; height:18px; flex-shrink:0;}
.toast.error{background:var(--coral-deep);}

.skeleton{background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:shimmer 1.4s infinite; border-radius:var(--radius-sm);}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.empty-state{text-align:center; padding:60px 20px; color:var(--text-muted);}
.empty-state svg{width:44px; height:44px; margin:0 auto 14px; color:var(--text-muted);}

.footer{border-top:1px solid var(--line); padding:32px 0; margin-top:60px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:13px; color:var(--text-muted);}

/* utility */
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;} .gap-8{gap:8px;} .gap-12{gap:12px;}
.text-center{text-align:center;}
.hidden{display:none !important;}

/* ---------------- Guest banner (shown instead of gated actions when signed out) ---------------- */
.guest-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; margin-bottom:20px;
}
.guest-banner strong{display:block; font-family:var(--display); font-size:15px;}
.guest-banner span{display:block; font-size:13px; color:var(--text-muted); margin-top:2px;}

/* ---------------- Shared Leaflet map styling (feed map view, event map, picker) ---------------- */
.map-locate-btn{
  position:absolute; z-index:410;
  width:44px; height:44px; border-radius:50%; background:var(--surface); color:var(--text-dark);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px -6px rgba(20,16,42,.3);
}
.map-locate-btn svg{width:20px; height:20px;}
/* thumb-friendly zoom controls on touch screens — default Leaflet buttons are too small to tap reliably */
.leaflet-touch .leaflet-bar a{width:40px; height:40px; line-height:38px; font-size:18px;}
.leaflet-touch .leaflet-bar{border:none; box-shadow:0 6px 18px -6px rgba(20,16,42,.3);}
.a2a-pin{
  width:30px; height:30px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--coral); border:2px solid #fff; box-shadow:0 3px 10px rgba(20,16,42,.35);
}
.a2a-pin span{
  transform:rotate(45deg); display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; color:#fff; font-size:13px;
}
@media (max-width:760px){
  .guest-banner{padding:14px 16px;}
  .guest-banner .btn{width:100%;}
}
.grid-events{display:grid; grid-template-columns:1fr; gap:16px;}
@media (min-width:720px){.grid-events{grid-template-columns:1fr 1fr;}}

@media (max-width:760px){
  .ptab, .subtab, .vote-pill{min-height:44px;}
  .ptab{padding:12px 18px; font-size:14px;}
  .post-action{min-width:44px; min-height:44px; padding:6px 8px;}
  .post-menu-btn{min-width:38px; min-height:38px; display:flex; align-items:center; justify-content:center;}
  .btn{min-height:46px;}
  .btn-sm{min-height:38px;}
  h1{letter-spacing:-0.02em;}
  .card{padding:18px;}
  .post-card, .feed-event-card{padding:14px;}
  .post-actions{gap:14px;}
  .two-col{gap:10px;}
}

/* ---------------- Section dividers (past events, etc.) ---------------- */
.section-divider{display:flex; align-items:center; gap:12px; margin:32px 0 18px;}
.section-divider span{font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap;}
.section-divider::after{content:''; flex:1; height:1px; background:var(--line);}

/* ---------------- Image gallery (event create/view) ---------------- */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; margin-top:10px;}
.gallery-thumb{position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line);}
.gallery-thumb img{width:100%; height:100%; object-fit:cover;}
.gallery-thumb button{position:absolute; top:5px; right:5px; width:22px; height:22px; border-radius:50%; background:rgba(20,16,42,.72); color:#fff; border:none; display:flex; align-items:center; justify-content:center;}
.gallery-thumb button svg{width:12px; height:12px;}
.gallery-add{aspect-ratio:1; border-radius:12px; border:1.5px dashed var(--line-dark); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--text-muted); font-size:11px; font-family:var(--mono); cursor:pointer;}
.gallery-add:hover{border-color:var(--violet); color:var(--violet);}
.event-gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin:16px 0;}
.event-gallery img{border-radius:14px; aspect-ratio:4/3; object-fit:cover; cursor:pointer;}

/* ---------------- Twitter-style composer (thought-first) ---------------- */
.compose-bar{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  display:flex; gap:12px; align-items:flex-start; margin-bottom:20px;
  box-shadow:0 16px 36px -28px rgba(20,16,42,.24);
}
.compose-bar .avatar{margin-top:2px;}
.compose-main{flex:1; min-width:0;}
.compose-main textarea{
  width:100%; border:none; background:transparent; resize:none; min-height:44px;
  font-family:var(--display); font-size:19px; font-weight:500; color:var(--text-dark);
  padding:8px 0 0; line-height:1.35;
}
.compose-main textarea::placeholder{color:var(--text-muted); font-family:var(--display);}
.compose-main textarea:focus{outline:none;}
.compose-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:6px; padding-top:12px; border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.compose-tools{display:flex; align-items:center; gap:4px;}
.compose-tool{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; background:none; border:none; color:var(--coral-deep);
}
.compose-tool:hover{background:rgba(255,107,74,.10);}
.compose-tool svg{width:19px; height:19px;}
.compose-event-link{
  font-family:var(--mono); font-size:11.5px; color:var(--text-muted);
  display:flex; align-items:center; gap:5px;
}
.compose-event-link svg{width:13px; height:13px;}
.compose-event-link:hover{color:var(--violet);}
.compose-post-btn{padding:9px 20px; font-size:14px; border-radius:100px;}

/* ---------------- Feed filter chips ---------------- */
.filter-row{display:flex; gap:8px; margin-bottom:22px; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none;}
.filter-row::-webkit-scrollbar{display:none;}
.filter-chip{
  flex-shrink:0; padding:9px 18px; border-radius:100px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--text-muted); font-weight:700; font-size:13px;
  transition:all .15s var(--ease);
}
.filter-chip.active{background:var(--coral); border-color:var(--coral); color:#fff;}
.filter-chip:not(.active):hover{border-color:var(--violet); color:var(--text-dark);}

/* ---------------- Happening-soon horizontal strip ---------------- */
.soon-section{margin-bottom:26px;}
.soon-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; gap:10px;}
.soon-head .soon-title{font-family:var(--display); font-weight:700; font-size:18px; color:var(--text-dark);}
.soon-see-all{
  font-family:var(--mono); font-size:11.5px; color:var(--coral-deep); font-weight:700;
  white-space:nowrap; background:none; border:none; flex-shrink:0;
}
.soon-see-all:hover{color:var(--violet);}
.soon-scroll{
  display:flex; gap:12px; overflow-x:auto; padding-bottom:4px; margin:0 -24px; padding-left:24px; padding-right:24px;
  -ms-overflow-style:none; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.soon-scroll::-webkit-scrollbar{display:none;}
.soon-card{
  flex-shrink:0; width:168px; border-radius:var(--radius-sm);
  overflow:hidden; box-shadow:0 14px 30px -22px rgba(20,16,42,.35); position:relative;
}
.soon-card-cover{width:100%; height:170px; background:linear-gradient(160deg, var(--ink-soft), var(--ink)); position:relative;}
.soon-card-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.soon-card-date{
  position:absolute; top:8px; left:8px; z-index:2; background:rgba(20,16,42,.72); backdrop-filter:blur(6px);
  border-radius:8px; padding:4px 8px; text-align:center; line-height:1.1;
}
.soon-card-date .m{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--lime);}
.soon-card-date .d{display:block; font-family:var(--display); font-size:14px; font-weight:800; color:#fff;}
.soon-card-overlay{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:12px;
  background:linear-gradient(180deg, rgba(6,4,16,0) 35%, rgba(6,4,16,.55) 68%, rgba(6,4,16,.92) 100%);
}
.soon-card-title{font-family:var(--display); font-weight:800; font-size:14px; line-height:1.25; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.9); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.soon-card-meta{font-size:11px; font-weight:600; color:rgba(255,255,255,.95); margin-top:6px; display:flex; align-items:center; gap:4px; text-shadow:0 1px 5px rgba(0,0,0,.75);}
.soon-card-meta svg{width:11px; height:11px; flex-shrink:0; color:rgba(255,255,255,.95);}
.soon-empty{
  flex-shrink:0; width:100%; padding:22px; text-align:center; color:var(--text-muted); font-size:13px;
  background:var(--surface); border:1px dashed var(--line-dark); border-radius:var(--radius-sm);
}

/* ---------------- Unified feed (event cards mixed with thoughts) ---------------- */
.feed-list{display:flex; flex-direction:column; gap:12px;}
.feed-event-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; display:flex; gap:12px; box-shadow:0 12px 28px -22px rgba(20,16,42,.18);}
.feed-event-card .post-head{margin-bottom:8px;}
.feed-event-badge{
  display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; font-weight:700;
  color:var(--lime-deep); background:rgba(76,122,22,.10); padding:3px 9px; border-radius:100px; margin-bottom:8px;
}
.feed-event-badge svg{width:11px; height:11px;}
.feed-event-inner{
  display:flex; gap:12px; background:var(--surface-2); border-radius:12px; padding:12px; margin-top:2px;
}
.feed-event-thumb{
  width:56px; height:56px; border-radius:10px; flex-shrink:0; overflow:hidden;
  background:linear-gradient(160deg, var(--ink-soft), var(--ink)); display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.feed-event-thumb img{width:100%; height:100%; object-fit:cover;}
.feed-event-thumb .m{font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--lime);}
.feed-event-thumb .d{font-family:var(--display); font-size:17px; font-weight:800; color:#fff; line-height:1;}
.feed-event-info{min-width:0; flex:1;}
.feed-event-info h4{font-family:var(--display); font-weight:700; font-size:15px; color:var(--text-dark); line-height:1.25; margin-bottom:4px;}
.feed-event-info .loc{font-size:12px; color:var(--text-muted); display:flex; align-items:center; gap:5px;}
.feed-event-info .loc svg{width:12px; height:12px; flex-shrink:0;}
.feed-event-foot{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}

/* ---------------- Floating "+" composer menu (feed) ---------------- */
.fab{
  position:fixed; z-index:40;
  width:52px; height:52px; border-radius:50%; background:var(--coral); color:#fff;
  border:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 14px 30px -8px rgba(255,92,60,.55);
  transition:transform .15s var(--ease);
}
.fab:active{transform:scale(.94);}
.fab svg{width:22px; height:22px; transition:transform .2s var(--ease);}
.fab[aria-expanded="true"] svg{transform:rotate(45deg);}
.fab-menu{
  position:fixed; z-index:41; min-width:220px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 24px 48px -16px rgba(20,16,42,.35);
  padding:8px; display:flex; flex-direction:column; gap:2px;
  transform:translateY(8px) scale(.97); opacity:0; pointer-events:none;
  transition:all .16s var(--ease);
}
.fab-menu.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;}
.fab-menu-item{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:12px;
  background:none; border:none; text-align:left; width:100%; color:var(--text-dark); font-weight:700; font-size:14px;
}
.fab-menu-item:hover{background:var(--surface-2);}
.fab-menu-item .ic{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--coral-deep);
}
.fab-menu-item .ic svg{width:17px; height:17px;}
.fab-menu-item .sub{display:block; font-family:var(--mono); font-weight:400; font-size:11px; color:var(--text-muted); margin-top:1px;}
.fab-scrim{position:fixed; inset:0; z-index:39; background:rgba(20,16,42,.25); opacity:0; pointer-events:none; transition:opacity .16s var(--ease);}
.fab-scrim.open{opacity:1; pointer-events:auto;}

/* ---------------- Floor plan builder ---------------- */
.plan-toolbar{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px;}
.plan-canvas-wrap{position:relative; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; touch-action:none;}
.plan-canvas{display:block; width:100%; height:auto; cursor:crosshair;}
.plan-item-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; margin-top:12px; box-shadow:0 16px 36px -26px rgba(20,16,42,.24);}
.legend-dot{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:6px;}