/* ============================================================================
   Outdoors Festival — App styles
   Design tokens pulled verbatim from outdoors-festival-style-guide.html :root
   ========================================================================== */

:root{
  /* Core palette — sampled directly from 2025 festival assets */
  --orange:    #E38E55;  /* primary brand color */
  --sage:      #6F7971;  /* secondary surface / map base */
  --maroon:    #48252B;  /* deep accent / banners */
  --cream:     #EFEDD8;  /* light text + light surfaces */
  --yellow:    #E8CE5D;  /* highlight accent (paths, "now") */
  --terrain:   #4F534F;  /* darkest tone, terrain / deep bg */

  /* Tints & utility */
  --orange-soft:#EC9D76;
  --cream-pure: #F4F1EA;
  --ink:        #2B2422;
  --line:       rgba(72,37,43,.18);

  --r: 10px;
  --shadow: 0 6px 22px rgba(43,36,34,.14);

  /* App layout */
  --header-h: 64px;
  --tabbar-h: 64px;
  --strip-h: 0px;   /* set by JS = height of the Now & Next strip */
  --preview-h: 0px; /* height of the preview-mode bar (testing only) */
  --display: "Oswald", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }

html, body{ height:100%; }

body{
  margin:0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream-pure);
  line-height:1.5;
  /* Center the mobile layout on wide screens (desktop = centered phone). */
  max-width: 480px;
  margin-inline: auto;
  position: relative;
  overflow: hidden;            /* views scroll internally */
  box-shadow: 0 0 40px rgba(0,0,0,.08);
}

/* Heavy condensed display type */
h1,h2,h3{ font-family: var(--display); font-weight:700; text-transform:uppercase; margin:0; }

/* ===== Header ===== */
.app-header{
  position: fixed;
  top:0; left:50%; transform: translateX(-50%);
  width:100%; max-width:480px;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--orange);
  color: var(--cream);
  display:flex; align-items:center; gap:12px;
  z-index: 30;
  box-shadow: 0 2px 12px rgba(43,36,34,.18);
}
.app-logo{ height:40px; width:40px; object-fit:contain; flex:none; }
.app-header-text{ min-width:0; }
.app-header h1{ font-size:24px; letter-spacing:.01em; line-height:1; }
.app-sub{
  margin:2px 0 0; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ===== View container ===== */
#app{
  position: fixed;
  top: calc(var(--header-h) + env(safe-area-inset-top) + var(--strip-h));
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--preview-h));
  left:50%; transform: translateX(-50%);
  width:100%; max-width:480px;
}

/* ===== Happening Now & Next strip ===== */
.nownext{
  position: fixed;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  left:50%; transform: translateX(-50%);
  width:100%; max-width:480px; z-index:25;
  background: var(--maroon); color: var(--cream);
  box-shadow: 0 3px 10px rgba(43,36,34,.22);
}
.nownext[hidden]{ display:none; }
.nn-inner{ display:flex; flex-direction:column; }
.nn-line{
  display:flex; align-items:center; gap:8px; width:100%;
  border:0; background:transparent; cursor:pointer; text-align:left;
  color:var(--cream); font-family:var(--body);
  padding:7px 14px; border-bottom:1px solid rgba(239,237,216,.12);
  font-size:13px; line-height:1.2;
}
.nn-line:last-child{ border-bottom:0; }
.nn-fallback{ cursor:default; opacity:.95; font-size:13px; }
.nn-fallback b{ color:var(--yellow); }
.nn-tag{
  flex:none; font-family:var(--display); text-transform:uppercase;
  font-size:10px; letter-spacing:.1em; font-weight:700;
  padding:2px 7px; border-radius:99px;
}
.nn-now{ background:var(--yellow); color:#5a4a12; }
.nn-next{ background:rgba(239,237,216,.18); color:var(--cream); }
.nn-time{ flex:none; font-weight:800; font-size:12px; color:var(--yellow); }
.nn-now ~ .nn-time{ color:var(--yellow); }
.nn-title{ flex:1 1 auto; min-width:0; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nn-star{ color:var(--yellow); margin-right:4px; }
.nn-loc{ flex:none; font-size:11px; opacity:.8;
  max-width:34%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nn-ann{
  display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  border:0; cursor:pointer; font-family:var(--body);
  background: rgba(239,237,216,.1); color:var(--cream);
  padding:6px 14px; font-size:12px;
  border-top:1px solid rgba(239,237,216,.12);
}
.nn-ann.is-urgent{ background:var(--yellow); color:#5a4a12; }
.nn-ann-tag{ flex:none; font-weight:800; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.nn-ann-txt{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.view{ position:absolute; inset:0; }
.view[hidden]{ display:none; }

/* Scrollable views (schedule, raffle, info) */
.scroll-pad{
  height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px 16px 28px;
}

.section-intro{
  font-size:14px; color:#56494a; margin:2px 4px 16px;
}

/* ============================================================================
   MAP
   ========================================================================== */
/* Map view is a column: controls on top, stage fills the rest. */
#view-map{ display:flex; flex-direction:column; }
#view-map[hidden]{ display:none; } /* beats #view-map's display:flex */

.map-controls{
  flex:none; background: var(--cream-pure);
  border-bottom:1px solid var(--line);
  padding:8px 10px;
}
.mc-row{ display:flex; gap:8px; align-items:center; }
.mc-search{
  position:relative; flex:1 1 auto; display:flex; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:0 10px;
}
.mc-search-ic{ font-size:13px; opacity:.6; }
.mc-search input{
  flex:1 1 auto; min-width:0; border:0; outline:0; background:transparent;
  font-size:15px; padding:9px 6px; color:var(--ink); font-family:var(--body);
}
.mc-clear{
  border:0; background:rgba(0,0,0,.08); color:var(--ink);
  width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:15px; line-height:1;
}
.mc-clear[hidden]{ display:none; }
.mc-filter-toggle{
  flex:none; border:0; cursor:pointer; border-radius:99px;
  background: var(--sage); color: var(--cream);
  font-family:var(--body); font-weight:800; font-size:13px;
  padding:9px 14px; letter-spacing:.02em;
}
.mc-filter-toggle.is-open{ background: var(--maroon); }
.mc-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; }
.mc-chips[hidden]{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); border-radius:99px; background:#fff;
  font-size:12.5px; font-weight:700; color:#8a7d77; padding:6px 11px;
  font-family:var(--body);
}
.chip.is-on{ color:var(--ink); border-color:var(--maroon); background:var(--cream); }
.chip-dot{ width:11px; height:11px; border-radius:50%; flex:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12); }
.chip:not(.is-on) .chip-dot{ opacity:.35; }
.mc-results{ margin-top:9px; display:flex; flex-direction:column; gap:4px; max-height:160px; overflow-y:auto; }
.mc-results[hidden]{ display:none; }
.mc-result{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  border:0; background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer;
  font-family:var(--body);
}
.mc-noresult{ font-size:13px; color:#8a7d77; padding:8px 4px; }

.map-stage{
  position:relative; flex:1 1 auto; min-height:0;
  background: var(--terrain);
  overflow:hidden;
  touch-action:none;          /* we handle pan/zoom ourselves */
}

/* Hidden by filter/search */
.pin.pin-hidden{ display:none; }
.map-pan{
  position:absolute; top:0; left:0;
  width:100%;                 /* definite width = stage width (avoids circular sizing) */
  transform-origin: 0 0;
  will-change: transform;
}
/* One-shot smooth animation when focusing a pin (toggled by JS). */
.map-pan.anim{ transition: transform .42s cubic-bezier(.22,1,.36,1); }
.map-img{
  display:block;
  width: 100%;                /* fills map-pan; height follows aspect ratio */
  height:auto;
  user-select:none; -webkit-user-drag:none;
}

/* Pins — small dot markers so they don't cover the map's printed labels.
   The button itself is a large invisible tap target; only the inner dot shows. */
.pin{
  position:absolute;
  transform: translate(-50%, -50%);    /* dot sits centered on the coordinate */
  width:42px; height:42px;             /* generous, invisible tap area */
  display:grid; place-items:center;
  border:0; padding:0; margin:0; cursor:pointer;
  background:transparent;
  z-index:2;
}
.pin-dot{
  width:15px; height:15px; border-radius:50%;
  background: var(--orange);
  border:2.5px solid var(--cream);
  box-shadow: 0 2px 5px rgba(0,0,0,.5);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pin.cat-attraction .pin-dot{ background: var(--orange); }
.pin.cat-food       .pin-dot{ background: var(--maroon); }
.pin.cat-stage      .pin-dot{ background: var(--yellow); }
.pin.cat-checkin    .pin-dot{ background: var(--terrain); }
.pin.cat-facility   .pin-dot{ background: var(--sage); }
.pin:active .pin-dot{ transform: scale(1.25); }
/* Selected pin: enlarged with a yellow ring, lifted above the others. */
.pin.is-selected{ z-index:6; }
.pin.is-selected .pin-dot{
  transform: scale(1.7);
  box-shadow: 0 0 0 4px rgba(232,206,93,.7), 0 4px 12px rgba(0,0,0,.5);
}

/* Map hint + legend button */
.map-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:14px;
  background: rgba(43,36,34,.72); color: var(--cream);
  font-size:11.5px; letter-spacing:.03em;
  padding:7px 14px; border-radius:99px;
  pointer-events:none; z-index:5;
  transition: opacity .4s ease;
}
.map-legend-btn{
  position:absolute; top:12px; right:12px; z-index:5;
  background: var(--cream); color: var(--maroon);
  border:0; border-radius:99px;
  font-family: var(--display); text-transform:uppercase;
  font-size:12px; letter-spacing:.08em; font-weight:700;
  padding:8px 14px; box-shadow: var(--shadow); cursor:pointer;
}

/* Locate ("you are here") button */
.locate-btn{
  position:absolute; top:12px; left:12px; z-index:5;
  width:42px; height:42px; border-radius:50%;
  background: var(--cream); color: var(--maroon);
  border:0; box-shadow: var(--shadow); cursor:pointer;
  display:grid; place-items:center; font-size:22px; line-height:1;
  transition: transform .12s ease;
}
.locate-btn:active{ transform: scale(.94); }
.locate-btn.is-active{ background: #2f6fed; color:#fff; }
.locate-btn.is-locating .locate-ic{ animation: locate-spin 1s linear infinite; display:inline-block; }
@keyframes locate-spin{ to{ transform: rotate(360deg); } }

/* Small status message under the locate button */
.geo-toast{
  position:absolute; top:60px; left:12px; z-index:6; max-width:78%;
  background: rgba(43,36,34,.9); color: var(--cream);
  font-size:12px; line-height:1.35; padding:8px 12px; border-radius:10px;
  box-shadow: var(--shadow);
}
.geo-toast[hidden]{ display:none; }
.geo-toast.is-demo{ background: rgba(47,37,43,.92); }
.geo-toast b{ color: var(--yellow); }

/* "You are here" dot + accuracy ring (positioned in the map %coordinate space) */
.user-acc{
  position:absolute; z-index:1;
  border-radius:50%;
  background: rgba(47,111,237,.16);
  border:1px solid rgba(47,111,237,.4);
  transform: translate(-50%, -50%);
  pointer-events:none;
}
.user-dot{
  position:absolute; z-index:3;
  width:18px; height:18px; border-radius:50%;
  background:#2f6fed; border:3px solid #fff;
  box-shadow: 0 0 0 1px rgba(47,111,237,.5), 0 2px 6px rgba(0,0,0,.45);
  transform: translate(-50%, -50%);
  pointer-events:none;
}
.user-dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid rgba(47,111,237,.55);
  animation: user-pulse 1.8s ease-out infinite;
}
@keyframes user-pulse{
  0%{ transform: scale(1); opacity:.8; }
  100%{ transform: scale(2.6); opacity:0; }
}
.user-dot.is-demo{ background:#7a5cff; }
.user-dot.is-demo::after{ border-color: rgba(122,92,255,.55); }
.user-acc.is-demo{ background: rgba(122,92,255,.14); border-color: rgba(122,92,255,.4); }

/* ============================================================================
   SCHEDULE
   ========================================================================== */
.time-group{ margin-bottom:22px; }
.time-head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; gap:10px;
  padding:6px 0 8px; margin-bottom:8px;
  background: linear-gradient(var(--cream-pure) 70%, rgba(244,241,234,0));
}
.time-head .time{
  font-family: var(--display); font-weight:700; text-transform:uppercase;
  font-size:18px; color: var(--maroon); white-space:nowrap;
}
.time-head .rule{ flex:1; height:2px; background: var(--line); }

.event-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding:14px 16px; margin-bottom:10px;
}
.event-card.is-now{ border-color: var(--orange); box-shadow: 0 0 0 2px var(--yellow), var(--shadow); }
.event-card h3{ font-size:17px; color: var(--ink); }
.event-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:7px 0;
}
.now-pill{
  background: var(--yellow); color:#5a4a12; font-weight:800;
  font-size:11px; padding:3px 9px; border-radius:99px; letter-spacing:.05em;
  text-transform:uppercase;
}
.loc-link{
  display:inline-flex; align-items:center; gap:5px;
  background: var(--sage); color: var(--cream);
  border:0; cursor:pointer;
  font-size:12px; font-weight:700;
  padding:4px 11px; border-radius:99px;
  font-family: var(--body);
}
.loc-link::before{ content:"📍"; font-size:11px; }
.event-card .desc{ font-size:13.5px; color:#56494a; margin:0; }

/* ============================================================================
   RAFFLE
   ========================================================================== */
.raffle-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.raffle-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow); border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.raffle-card .thumb{
  aspect-ratio:1/1; background: var(--sage);
  display:block; width:100%; object-fit:cover;
}
.raffle-card .thumb-fallback{
  aspect-ratio:1/1; background: var(--sage);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  color: var(--cream); text-align:center; padding:12px;
}
.raffle-card .thumb-fallback .em{ font-size:34px; }
.raffle-card .info{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:4px; }
.raffle-card .stripe{ height:5px; background: var(--maroon); }
.raffle-card h3{ font-size:15px; line-height:1.05; color: var(--ink); }
.raffle-card .sponsor{
  font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--orange); font-weight:700;
}
.raffle-card .desc{ font-size:12px; color:#56494a; margin:2px 0 0; }

/* ============================================================================
   INFO
   ========================================================================== */
.info-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow: var(--shadow); padding:14px 16px; margin-bottom:12px;
}
.info-card h3{ font-size:15px; color: var(--maroon); margin-bottom:5px; }
.info-card p{ margin:0; font-size:14px; color:#473d39; }
.info-img{ width:100%; border-radius:var(--r); box-shadow:var(--shadow); margin-bottom:14px; display:block; }

/* ============================================================================
   BOTTOM SHEET (pin detail + legend)
   ========================================================================== */
.sheet-backdrop{
  position:fixed; inset:0; z-index:40;
  background: rgba(43,36,34,.45);
}
.sheet-backdrop[hidden]{ display:none; }

.sheet{
  position:fixed; left:50%; bottom:0; transform: translateX(-50%);
  width:100%; max-width:480px; z-index:41;
  background:#fff;
  border-radius:18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(43,36,34,.28);
  padding-bottom: env(safe-area-inset-bottom);
  max-height: 78%;
  display:flex; flex-direction:column;
  animation: sheet-up .26s cubic-bezier(.22,1,.36,1);
}
.sheet[hidden]{ display:none; }
@keyframes sheet-up{ from{ transform: translate(-50%, 100%); } to{ transform: translate(-50%, 0); } }
.sheet::before{
  content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:42px; height:5px; border-radius:99px; background: var(--line);
}
.sheet-close{
  position:absolute; top:8px; right:12px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  border:0; background: rgba(0,0,0,.06); color: var(--ink);
  font-size:22px; line-height:1; cursor:pointer;
}
.sheet-body{ overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Pin detail card layout (mirrors style-guide card) */
.detail .loc-hero{ position:relative; height:150px; background: var(--sage); overflow:hidden; }
.loc-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }
.loc-hero-ph{ width:100%; height:100%; display:grid; place-items:center; }
.loc-hero-ic{ font-size:58px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
.loc-hero-cat{
  position:absolute; left:14px; bottom:12px; color: var(--cream);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800;
  padding:5px 12px; border-radius:99px; box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.detail .stripe{ height:8px; background: var(--maroon); }

/* "Happening here" — schedule events at this location */
.happening{ margin-top:18px; border-top:1px solid var(--line); padding-top:15px; }
.happening h3{
  font-family: var(--display); text-transform:uppercase;
  font-size:13px; letter-spacing:.14em; color: var(--maroon); margin:0 0 11px;
}
.happening-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.happening-list li{ display:flex; align-items:center; gap:11px; }
.ev-time{
  flex:none; min-width:66px; text-align:center;
  font-weight:800; font-size:12px; color:#5a4a12;
  background: var(--yellow); padding:4px 8px; border-radius:6px;
}
.ev-ttl{ font-size:14px; color: var(--ink); line-height:1.25; }
.detail .body-area{ padding:16px 18px 22px; }
.detail .ttl{ font-size:24px; color: var(--ink); margin:0 0 8px; }
.detail .when{
  display:inline-block; background: var(--yellow); color:#5a4a12; font-weight:800;
  font-size:12px; padding:5px 12px; border-radius:99px; margin-bottom:12px;
  letter-spacing:.04em;
}
.detail .desc{ font-size:15px; color:#473d39; margin:0; }

/* Legend sheet */
.legend-sheet{ padding:24px 20px 26px; }
.legend-sheet h2{ font-size:20px; color: var(--maroon); margin-bottom:14px; }
.legend-row{ display:flex; align-items:center; gap:12px; padding:9px 0; }
.legend-key{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--cream); box-shadow:0 2px 5px rgba(0,0,0,.3); flex:none;
}
.legend-row span.lbl{ font-size:15px; font-weight:600; }

/* ============================================================================
   BOTTOM TAB BAR
   ========================================================================== */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background:#fff; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,1fr);
  z-index: 35;
  box-shadow: 0 -2px 14px rgba(43,36,34,.08);
}
.tab{
  border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:#9a8f8a; font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
}
.tab-ic{ font-size:21px; line-height:1; filter:grayscale(.4) opacity(.7); transition:transform .12s; }
.tab-label{ font-size:11px; font-weight:700; letter-spacing:.02em; }
.tab.is-active{ color: var(--maroon); }
.tab.is-active .tab-ic{ filter:none; transform: translateY(-1px) scale(1.08); }
.tab.is-active .tab-label{ color: var(--maroon); }

/* Subtle entrance for swapped views */
.view:not([hidden]) .scroll-pad > *{ animation: fade-in .3s ease both; }
@keyframes fade-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }

/* ============================================================================
   CALIBRATION MODE (dev only — active when body has .calibrate, via #calibrate)
   ========================================================================== */
body.calibrate .pin{ cursor: grab; }
body.calibrate .pin.is-dragging{ cursor: grabbing; z-index:7; }
.pin.is-dragging .pin-dot{
  transform: scale(1.85);
  box-shadow: 0 0 0 4px rgba(232,206,93,.85), 0 4px 12px rgba(0,0,0,.55);
}
/* Label every dot with its id so you know which station you're moving. */
body.calibrate .pin::after{
  content: attr(data-loc-id);
  position:absolute; top:50%; left:50%;
  transform: translate(-50%, 13px);
  font-size:9px; font-weight:700; letter-spacing:.02em; line-height:1;
  color: var(--cream); background: rgba(43,36,34,.82);
  padding:2px 5px; border-radius:4px; white-space:nowrap; pointer-events:none;
}

.calib-panel{
  position:fixed; left:50%; transform:translateX(-50%);
  top: calc(var(--header-h) + env(safe-area-inset-top));
  width:100%; max-width:480px; z-index:36;
  background: rgba(43,36,34,.94); color: var(--cream);
  padding:10px 14px 12px; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  font-size:13px;
}
.calib-head{ display:flex; align-items:center; gap:10px; }
.calib-badge{
  font-family: var(--display); text-transform:uppercase; letter-spacing:.12em;
  font-size:12px; font-weight:700; color: var(--terrain);
  background: var(--yellow); padding:3px 10px; border-radius:99px;
}
.calib-copy{
  margin-left:auto; cursor:pointer; border:0; border-radius:7px;
  background: var(--orange); color: var(--cream);
  font-family: var(--body); font-weight:800; font-size:12px;
  padding:7px 13px; text-transform:uppercase; letter-spacing:.03em;
}
.calib-last{
  margin-top:8px; font-weight:700;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size:12px;
  color: var(--yellow);
}
.calib-details{ margin-top:8px; }
.calib-details summary{ cursor:pointer; font-size:12px; opacity:.85; }
.calib-out{
  width:100%; margin-top:7px; resize:vertical;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size:11.5px;
  border:0; border-radius:7px; padding:9px; background:#1f1a18; color:#e9e3d8;
}
.calib-tip{ margin:8px 0 0; font-size:11px; opacity:.78; line-height:1.4; }
.calib-tip code{ background: rgba(255,255,255,.14); padding:1px 5px; border-radius:4px; }

/* GPS control-point capture */
.calib-geo{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.16); }
.calib-geo-head{ font-size:12px; font-weight:700; }
.calib-geo-row{ display:flex; gap:8px; margin-top:8px; }
.calib-sel{
  flex:1; min-width:0; border:0; border-radius:7px; padding:8px;
  background:#1f1a18; color:#e9e3d8; font-size:12px; font-family: var(--body);
}
.calib-cap{
  cursor:pointer; border:0; border-radius:7px; white-space:nowrap;
  background: #2f6fed; color:#fff; font-weight:800; font-size:12px;
  padding:8px 12px; font-family: var(--body);
}
.calib-cap:disabled{ opacity:.6; cursor:default; }
.calib-geo-status{ margin-top:7px; font-size:11.5px; opacity:.88; line-height:1.35; }
.calib-cp-out{
  width:100%; margin-top:7px; resize:vertical;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size:11.5px;
  border:0; border-radius:7px; padding:9px; background:#1f1a18; color:#e9e3d8;
}
.calib-geo .calib-copy{ margin-top:8px; width:100%; }

/* ============================================================================
   V2 — segmented toggles, stars/favorites, empty states, raffle detail,
   welcome/updates/sponsors
   ========================================================================== */

/* Segmented toggle (All / My Day, All / Prizes I Want) */
.seg-toggle{ display:flex; gap:6px; background:var(--cream); padding:4px;
  border-radius:99px; margin:0 2px 14px; box-shadow:inset 0 0 0 1px var(--line); }
.seg{ flex:1; border:0; cursor:pointer; border-radius:99px;
  background:transparent; color:#8a7d77; font-family:var(--body);
  font-weight:800; font-size:13px; padding:8px 10px; letter-spacing:.01em; }
.seg.is-active{ background:var(--orange); color:var(--cream); box-shadow:var(--shadow); }

/* Star (save to My Day) */
.event-card{ position:relative; }
.event-card h3{ padding-right:30px; } /* keep title clear of the star */
.event-card .star{ position:absolute; top:10px; right:10px; }
.star{
  border:0; background:transparent; cursor:pointer; line-height:1;
  color:var(--orange); font-size:22px; padding:2px;
}
.star.is-on{ color:var(--orange); }
.star:not(.is-on){ color:#c9bdb6; }
.star.sm{ font-size:18px; flex:none; }
.happening-list li .star.sm{ margin-right:2px; }

/* Flash highlight when jumping to a schedule item */
.event-card.flash{ animation: card-flash 1.6s ease; }
@keyframes card-flash{
  0%,100%{ box-shadow: var(--shadow); }
  20%,60%{ box-shadow: 0 0 0 3px var(--yellow), var(--shadow); }
}

/* Empty states + clear-all */
.empty-state{ text-align:center; padding:40px 20px; color:#8a7d77; }
.empty-state .empty-ic{ font-size:40px; color:var(--orange); }
.empty-state h3{ font-family:var(--display); text-transform:uppercase;
  font-size:18px; color:var(--maroon); margin:8px 0 4px; }
.empty-state p{ font-size:14px; margin:0 auto; max-width:30ch; }
.clear-all{
  display:block; margin:6px auto 0; cursor:pointer;
  border:1px solid var(--line); background:#fff; color:var(--maroon);
  border-radius:99px; font-weight:800; font-size:13px; padding:9px 18px;
  font-family:var(--body);
}

/* Raffle — favorite heart + status badge + meta */
.raffle-card{ position:relative; cursor:pointer; }
.raffle-card .thumb-wrap{ position:relative; }
.fav{
  position:absolute; top:8px; right:8px; z-index:2;
  width:34px; height:34px; border-radius:50%; cursor:pointer; border:0;
  background:rgba(255,255,255,.9); color:var(--maroon);
  font-size:18px; line-height:1; box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.fav.is-on{ background:var(--maroon); color:var(--cream); }
.prize-status{
  position:absolute; left:8px; top:8px; z-index:2;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:3px 8px; border-radius:99px;
}
.prize-status.st-up-next{ background:var(--yellow); color:#5a4a12; }
.prize-status.st-drawn{ background:var(--terrain); color:var(--cream); }
.raffle-card.is-drawn{ opacity:.6; }
.raffle-grid.is-empty{ display:block; } /* empty-state spans full width */
.prize-meta{ font-size:11.5px; color:var(--orange); font-weight:700; margin-top:2px;
  letter-spacing:.02em; }

/* Raffle detail (in the bottom sheet) */
.raffle-detail .rd-hero{ background:var(--sage); }
.rd-img{ width:100%; max-height:260px; object-fit:cover; display:block; }
.rd-img.rd-ph{ height:180px; display:grid; place-items:center; font-size:64px; }
.rd-rows{ margin:14px 0 16px; border-top:1px solid var(--line); }
.rd-row{ display:flex; justify-content:space-between; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.rd-row span{ color:#8a7d77; }
.rd-row b{ color:var(--ink); text-align:right; }
.rd-fav{ width:100%; border:0; }

/* Buttons (from the style guide) */
.btn{
  display:inline-block; border:0; border-radius:8px; cursor:pointer;
  font-family:var(--body); font-weight:800; font-size:15px;
  padding:13px 20px; text-transform:uppercase; letter-spacing:.04em;
  text-align:center; text-decoration:none;
}
.btn-primary{ background:var(--orange); color:var(--cream); }
.btn-secondary{ background:var(--maroon); color:var(--cream); }
.btn-ghost{ background:transparent; color:var(--maroon); box-shadow:inset 0 0 0 2px var(--maroon); }

/* Welcome / church section (Info tab) */
.welcome-card{
  background:var(--orange); color:var(--cream);
  border-radius:var(--r); padding:20px 18px; margin-bottom:16px;
  box-shadow:var(--shadow);
}
.welcome-h{ font-family:var(--display); text-transform:uppercase;
  font-size:26px; line-height:1; margin-bottom:10px; }
.welcome-p{ font-size:14.5px; margin:0 0 10px; opacity:.97; }
.welcome-addr{ font-size:13.5px; font-weight:700; margin:12px 0 4px; }
.welcome-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.welcome-actions .btn{ text-decoration:none; }
.welcome-card .btn-ghost{ color:var(--cream); box-shadow:inset 0 0 0 2px var(--cream); }
.welcome-next{ font-size:13px; margin:14px 0 0; opacity:.92; line-height:1.4; }

/* Live updates (announcements) */
.updates{ margin-bottom:16px; }
.updates-h{ font-family:var(--display); text-transform:uppercase;
  font-size:15px; letter-spacing:.1em; color:var(--maroon); margin:0 0 10px; }
.ann-card{
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--sage);
  border-radius:var(--r); box-shadow:var(--shadow); padding:12px 14px; margin-bottom:10px;
}
.ann-card.is-urgent{ border-left-color:var(--maroon); background:#fff7ec; }
.ann-top{ display:flex; align-items:center; gap:9px; margin-bottom:3px; }
.ann-time{ font-size:12px; font-weight:800; color:var(--orange); }
.ann-badge{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  background:var(--maroon); color:var(--cream); padding:2px 8px; border-radius:99px; }
.ann-card h3{ font-size:15px; color:var(--ink); margin:0 0 3px; }
.ann-card p{ font-size:13.5px; color:#56494a; margin:0; }

/* Sponsors placeholder */
.sponsor-card{ background:#fff; border:1px dashed var(--line); border-radius:var(--r);
  padding:16px; margin-top:14px; text-align:center; }
.sponsor-card h3{ font-family:var(--display); text-transform:uppercase;
  font-size:14px; letter-spacing:.08em; color:var(--maroon); margin:0 0 8px; }
.sponsor-note{ font-size:13px; color:#8a7d77; margin:0; }
.sponsor-grid{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.sponsor-item{ background:var(--cream); border-radius:8px; padding:12px 16px; font-weight:700;
  font-size:13px; color:var(--ink); }
.sponsor-item img{ max-height:46px; max-width:120px; object-fit:contain; display:block; }

/* ============================================================================
   PREVIEW MODE (testing only — #preview / ?preview). Sits above the tab bar.
   ========================================================================== */
body.previewing{ --preview-h: 48px; }
.preview-bar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  width:100%; max-width:480px; height:var(--preview-h); z-index:36;
  display:flex; align-items:center; gap:6px; padding:0 10px;
  background: rgba(43,36,34,.94); color: var(--cream); font-size:13px;
}
.pv-tag{
  flex:none; font-family: var(--display); text-transform:uppercase; letter-spacing:.12em;
  font-size:11px; font-weight:700; color: var(--terrain);
  background: var(--yellow); padding:3px 8px; border-radius:99px;
}
.preview-bar input{
  min-width:0; flex:1 1 auto; border:0; border-radius:6px;
  padding:5px 6px; font: 13px var(--body); background: var(--cream-pure); color: var(--ink);
}
.preview-bar input[type="time"]{ flex:0 1 96px; }
.pv-step{
  flex:none; cursor:pointer; border:0; border-radius:6px;
  background: var(--orange); color: var(--cream);
  font: 800 12px var(--body); padding:6px 8px;
}