/* ============================================================
   BM 26 — clean minimal design system. Light-first.
   Neutral off-white + ink + one restrained teal accent.
   Light / dark / playa-night. Mobile-first. No neon, no sand.
   ============================================================ */

/* ---- design tokens ---- */
:root{
  --r-lg:20px; --r-md:16px; --r-sm:12px;
  --accent:#1f6f63; --accent-ink:#ffffff;
  --accent-soft:rgba(31,111,99,.10);
  --amber:#e8a24a; --mint:#3aa88a; --indigo:#5f6fae; --rose:#d76a86;
}
[data-theme="light"]{
  --bg:#f7f7f5; --fg:#17171a; --muted:#73737a; --line:#e3e3dd;
  --card:#ffffff; --card2:#fbfbfa; --card-solid:#ffffff;
  --shadow:0 1px 2px rgba(20,20,25,.07), 0 4px 14px rgba(20,20,25,.05);
  --tint:#1f6f63;
}
[data-theme="dark"]{
  --bg:#151518; --fg:#f4f4f2; --muted:#9a9aa2; --line:#2c2c33;
  --card:#1e1e24; --card2:#232329; --card-solid:#1e1e24;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 20px rgba(0,0,0,.3);
  --tint:#46d0b4;
}
/* playa night-vision: near black, low blue, flat */
[data-theme="night"]{
  --bg:#0a0500; --fg:#ff9a6b; --muted:#a34a32; --line:#3d0d00;
  --card:#190b04; --card2:#1f0e06; --card-solid:#190b04;
  --shadow:0 1px 2px rgba(0,0,0,.7); --tint:#ff7a3d;
}

/* ---- base ---- */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; min-height:100%; background:var(--bg); color:var(--fg);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:calc(74px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
main{max-width:680px;margin:0 auto;padding:0 14px}
.flex{display:flex}.items-center{align-items:center}.gap-3{gap:12px}
.px-4{padding-left:16px;padding-right:16px}.pb-3{padding-bottom:12px}
.pt-3{padding-top:12px}.flex-1{flex:1 1 0%}.min-w-0{min-width:0}
.text-sm{font-size:13px}.block{display:block}
input,button,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;touch-action:manipulation}

/* ---- header ---- */
.appbar{position:sticky;top:0;z-index:30;background:var(--bg);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.wordmark{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:0;line-height:1;color:var(--fg)}
.wordmark span{color:var(--tint);font-weight:800}
.sub{font-size:11.5px;color:var(--muted);margin:3px 0 0;font-weight:500}
.iconbtn{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto;
  transition:transform .15s;touch-action:manipulation}
.iconbtn:active{transform:scale(.92)}
.iconbtn.on{border-color:var(--tint);color:var(--tint)}
.search{width:100%;padding:11px 14px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--fg);font-size:15px;touch-action:manipulation}
.search:focus{outline:none;border-color:var(--tint);box-shadow:0 0 0 3px var(--accent-soft)}
.search::placeholder{color:var(--muted)}

/* ---- bottom tab bar ---- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 2px;
  border-radius:12px;color:var(--muted);font-size:9.5px;font-weight:700;touch-action:manipulation;
  transition:color .15s}
.tab .ti{font-size:19px;line-height:1;filter:grayscale(.35)}
.tab[aria-selected="true"]{color:var(--tint)}
.tab[aria-selected="true"] .ti{filter:none}

/* ---- chips / filters / days ---- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--muted);font-size:12.5px;font-weight:700;touch-action:manipulation;
  transition:background .15s,color .15s,transform .12s}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--tint);border-color:var(--tint);color:var(--accent-ink)}
.chip .n{font-style:normal;opacity:.65;font-weight:600}
.days{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{padding:7px 10px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  text-align:center;color:var(--muted);font-size:10.5px;font-weight:700;line-height:1.15;min-width:54px;
  cursor:pointer;touch-action:manipulation}
.day b{display:block;font-size:13.5px;color:var(--fg)}
.day.on{background:var(--tint);border-color:var(--tint)}
.day.on b{color:var(--accent-ink)}

/* ---- section label ---- */
.hr{margin:16px 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;display:flex;align-items:center;gap:8px}
.hr::after{content:"";flex:1;height:1px;background:var(--line)}
.section-title{font-size:18px;font-weight:800;margin:4px 0 10px;letter-spacing:-.3px}

/* ---- set / event card ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;margin:0 0 8px;position:relative;cursor:pointer;touch-action:manipulation;
  transition:transform .12s, box-shadow .15s}
.card:hover{box-shadow:var(--shadow)}
.card:active{transform:scale(.99)}
.card.pick{box-shadow:inset 3px 0 0 var(--tint)}
.card.estimate{opacity:.88}
.card .t{font-variant-numeric:tabular-nums;font-weight:800;font-size:13px;color:var(--muted);min-width:56px}
.card .a{font-weight:700;font-size:15px;margin-top:2px}
.card .m{font-size:12.5px;color:var(--muted);margin-top:3px;word-wrap:break-word}
.tagrow{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.tag{font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;color:#fff}
.tag.pick{background:var(--tint)}
.tag.family{background:#5b6270}
.tag.sunrise{background:var(--amber)}
.tag.sunset{background:var(--rose)}
.tag.nonmusic{background:#8a8f99}
.tag.food{background:var(--mint)}
.tag.est{background:var(--card2);color:var(--muted);border:1px solid var(--line)}
.tag.official{background:var(--tint)}
.star{border:0;background:none;cursor:pointer;font-size:15px;color:var(--muted);padding:0 4px}
.star.on{color:var(--amber)}
.empty{padding:40px 20px;text-align:center;color:var(--muted);font-weight:600}

/* ---- explore indices ---- */
.ix{padding:12px 14px;margin:0 0 8px;border-radius:var(--r-md);background:var(--card);
  border:1px solid var(--line);cursor:pointer;transition:transform .1s;touch-action:manipulation}
.ix:active{transform:scale(.99)}
.ix .ixn{font-weight:700;font-size:14.5px}
.ix .ixn s{text-decoration:none;font-size:10px;color:var(--muted);margin-left:5px}
.ix .p{font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---- map (pan/zoom) ---- */
.mapwrap{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--card)}
.mapzoom{position:relative;overflow:hidden;touch-action:none}
.mapinner{transform-origin:0 0;will-change:transform}
.playa-map{width:100%;height:min(72vw,520px);display:block;color:#9aa0a8}
.zoomctrl{position:absolute;right:10px;top:10px;z-index:5;display:flex;flex-direction:column;gap:6px}
.zoomctrl button{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--card);color:var(--fg);font-size:16px;font-weight:800;touch-action:manipulation}
.mkle{fill:var(--tint);stroke:#fff;stroke-width:.55;cursor:pointer}
.mkle.mine{fill:var(--amber)}
.mkle.food{fill:var(--mint)}
.mkle.art{fill:var(--indigo)}
.mkle.highlight{fill:var(--amber);stroke:#fff;stroke-width:1.2;animation:markerPulse 1.2s infinite alternate}
.mkle-pulse{animation:ringPulse 1.4s infinite;pointer-events:none}
@keyframes markerPulse{from{stroke-width:1}to{stroke-width:2.5}}
@keyframes ringPulse{0%{r:2;opacity:1;stroke-width:.8}100%{r:6;opacity:0;stroke-width:.2}}
.map-highlight-banner{position:absolute;left:10px;right:10px;bottom:10px;z-index:6;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow)}

/* ---- bottom sheet ---- */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(15,15,18,.45);
  display:flex;align-items:flex-end;justify-content:center}
.sheet:not([hidden]){animation:sheetIn .2s ease}
@keyframes sheetIn{from{opacity:0}to{opacity:1}}
.sheet:not([hidden]) .sheetcard{animation:sheetUp .24s cubic-bezier(.2,.8,.3,1)}
@keyframes sheetUp{from{transform:translateY(6%)}to{transform:translateY(0)}}
.sheetcard{width:100%;max-width:680px;border-radius:20px 20px 0 0;background:var(--card-solid);
  padding:20px 16px calc(20px + env(safe-area-inset-bottom));max-height:90vh;overflow:auto;position:relative}
.sheetcard::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:40px;height:4px;border-radius:4px;background:var(--line)}
.sheetclose{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:10px;
  border:1px solid var(--line);background:var(--card2);color:var(--fg);font-size:15px;cursor:pointer}
.official-link{margin-left:2px}

/* ---- buttons ---- */
.btnrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn{flex:1 1 auto;min-width:110px;padding:12px;border-radius:12px;font-weight:700;font-size:13.5px;
  cursor:pointer;touch-action:manipulation}
.btn.primary{background:var(--tint);color:var(--accent-ink);border:0}
.btn.ghost{background:var(--card2);color:var(--fg);border:1px solid var(--line)}

/* ---- Coachella grid ---- */
.gridwrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);
  max-height:70vh;-webkit-overflow-scrolling:touch}
.weekgrid{display:flex;min-width:max-content}
.gcol{flex:0 0 auto;width:150px;min-width:150px;border-left:1px solid var(--line);position:relative;background:var(--card)}
.gdayhead{position:sticky;top:0;z-index:3;background:var(--card2);border-bottom:1px solid var(--line);
  padding:8px 6px;text-align:center;font-size:10.5px;font-weight:800;color:var(--muted)}
.gdayhead b{display:block;font-size:13px;color:var(--fg)}
.gblk{position:absolute;left:2%;border-radius:8px;background:var(--accent-soft);
  border-left:3px solid var(--tint);padding:3px 5px;font-size:10.5px;line-height:1.2;cursor:pointer;
  overflow:hidden;touch-action:manipulation;min-height:18px;display:flex;flex-direction:column;justify-content:center}
.gblk b{font-size:11px;display:block;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gblk span{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gblk .star{position:absolute;top:1px;right:3px;font-size:12px}
.gblk.est{opacity:.75}
.gblk.mine{border-left-color:var(--amber)}
.gblk.more{border:1px dashed var(--muted);border-left-style:solid;background:var(--card2);
  color:var(--muted);opacity:.95}
.gblk.more b{font-size:10.5px}
.gcol.cur{background:linear-gradient(180deg, var(--accent-soft), var(--card) 34%)}
.ghours{flex:0 0 auto;width:52px;position:relative;background:var(--card2);border-right:1px solid var(--line)}
.ghours div{position:absolute;right:8px;transform:translateY(-50%);font-size:10px;color:var(--muted);font-weight:700}
.legend-mini{font-size:11px;color:var(--muted);margin-top:6px}

/* ---- Fame: Coachella-tribute lineup poster ----
   Pastel sunset sky (lavender -> rose -> peach -> gold), dark ink condensed
   type (system fonts only), day pills, giant headliners, dense name blocks. */
.poster{color:#1c1b1f;border-radius:18px;padding:30px 16px 0;margin-top:10px;
  background:linear-gradient(180deg,#dcd9e4 0%,#f3c4c6 22%,#f6b7a2 45%,#f7cfa2 70%,#f3d8a8 100%);
  overflow:hidden;box-shadow:var(--shadow)}
.poster-head{text-align:center;border-bottom:1px solid rgba(28,27,31,.28);
  padding-bottom:16px;margin-bottom:4px}
.poster-head .ph-kicker{font-size:10px;letter-spacing:.42em;color:#3b3a40;font-weight:800;
  text-transform:uppercase}
.poster-wordmark{font-family:'Arial Narrow',Impact,'Franklin Gothic Medium','Helvetica Neue',Arial,sans-serif;
  font-size:54px;font-weight:900;letter-spacing:.06em;line-height:.95;color:#1c1b1f;
  text-transform:uppercase;margin-top:6px;font-stretch:condensed}
.poster-head .ph-sub{font-size:10.5px;letter-spacing:.3em;color:#3b3a40;margin-top:8px;
  text-transform:uppercase;font-weight:700}
.poster-head .ph-place{font-size:11px;letter-spacing:.22em;color:#5c4a42;margin-top:5px;
  text-transform:uppercase;font-weight:700}
/* "Returning to the Playa" callout */
.callout{text-align:center;padding:20px 0 6px;border-bottom:1px solid rgba(28,27,31,.18)}
.callout .callout-kicker{font-size:10px;letter-spacing:.34em;color:#7a4534;font-weight:800;
  text-transform:uppercase}
.callout .callout-name{font-family:'Arial Narrow',Impact,'Franklin Gothic Medium','Helvetica Neue',Arial,sans-serif;
  font-size:34px;font-weight:900;letter-spacing:.01em;line-height:1;color:#1c1b1f;cursor:pointer;
  text-transform:uppercase;margin-top:8px;font-stretch:condensed;padding:4px 0}
/* day sections */
.poster-day{padding:16px 2px 14px;border-bottom:1px solid rgba(28,27,31,.18)}
.poster-day:last-of-type{border-bottom:1px solid rgba(28,27,31,.28)}
.poster-day .day-row{text-align:right;margin-bottom:10px}
.day-pill{display:inline-block;border:1.5px solid #1c1b1f;border-radius:999px;padding:4px 14px;
  font-size:9.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#1c1b1f;
  background:rgba(255,255,255,.28)}
.phead-name{font-family:'Arial Narrow',Impact,'Franklin Gothic Medium','Helvetica Neue',Arial,sans-serif;
  font-size:44px;font-weight:900;letter-spacing:.005em;line-height:.95;color:#1c1b1f;cursor:pointer;
  text-transform:uppercase;margin-bottom:10px;font-stretch:condensed;padding:3px 0}
@media (min-width:700px){.phead-name{font-size:56px}}
.psub-line{font-size:17px;font-weight:700;line-height:1.42;color:#232227;text-transform:uppercase;
  letter-spacing:.01em;margin-bottom:9px}
.pdense{font-size:11px;font-weight:500;line-height:1.62;color:#37343a;text-transform:uppercase;
  letter-spacing:.015em}
.psub-line span,.pdense span{cursor:pointer;padding:3px 0;touch-action:manipulation}
.psub-line span:active,.pdense span:active,.callout-name:active,.phead-name:active{color:#a2543e}
.psub-line i,.pdense i{font-style:normal;color:#7a4534;padding:0 3px}
/* painted landscape strip */
.pl-land{display:block;width:calc(100% + 32px);margin:14px -16px 0;height:118px}
.poster-foot{text-align:center;font-size:9px;letter-spacing:.3em;color:#4f3e33;
  text-transform:uppercase;padding:8px 0 18px;font-weight:800}

/* ---- Fame: ranked list ---- */
.listfame{margin-top:8px}
.frow{display:flex;align-items:center;gap:10px;padding:9px 10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:7px;cursor:pointer;
  touch-action:manipulation}
.frow:active{transform:scale(.99)}
.frank{font-weight:900;font-size:13px;color:var(--muted);min-width:26px;font-variant-numeric:tabular-nums}
.fname{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmeta{font-size:11.5px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fscore{font-weight:900;font-size:12px;color:var(--tint);min-width:26px;text-align:right;
  font-variant-numeric:tabular-nums}
.fchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.fchip{display:inline-block;font-size:9.5px;font-weight:800;color:var(--tint);
  background:var(--accent-soft);border:1px solid var(--line);border-radius:999px;padding:1px 7px;
  white-space:nowrap}
.fchip.unv{color:var(--muted);background:var(--card2);border-style:dashed}
.pflag{color:#a2543e;font-weight:900;padding-left:2px;cursor:help}

/* ---- misc ---- */
.rowitem{display:flex;gap:12px;align-items:flex-start}
.meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.addbtn{width:100%;padding:14px;border-radius:16px;border:1px dashed var(--line);
  background:var(--card);color:var(--muted);font-size:14px;font-weight:700;cursor:pointer}
.field{margin:0 0 12px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.field input,.field select{width:100%;padding:11px 13px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--fg);font-size:15px}
.field input:focus{outline:none;border-color:var(--tint)}
.badge-mine{font-size:10px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--amber);color:#fff}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
[data-theme="night"] *{animation:none!important;transition:none!important}