/* Palm Desert Golf Cart Parade 2026. Desert parade poster look: sand, palm, sunset. */
@font-face { font-family: "Bowlby One"; src: url("../fonts/bowlby-one.woff2") format("woff2"); font-display: swap; }

:root {
  --sand: #fff8ec; --paper: #ffffff; --ink: #1d2b24; --muted: #4c5a52; --line: #e1d6bf;
  --palm: #0d5c4a; --palm-ink: #ffffff; --sunset: #c2401c; --marigold: #f2b134; --sky: #17708a;
  --urgent: #b3261e; --notice: #8a5a00; --shadow: 0 6px 22px rgba(29, 43, 36, .18);
  --tab-h: 62px; --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sand: #0f1c18; --paper: #182a24; --ink: #f3ead8; --muted: #b9c4bc; --line: #2c423a;
    --palm: #5fd0ae; --palm-ink: #06231b; --sunset: #ff8f6b; --marigold: #f2b134; --sky: #6fc8e0;
    --urgent: #ff8a80; --notice: #f2b134; --shadow: 0 6px 22px rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sand: #0f1c18; --paper: #182a24; --ink: #f3ead8; --muted: #b9c4bc; --line: #2c423a;
  --palm: #5fd0ae; --palm-ink: #06231b; --sunset: #ff8f6b; --marigold: #f2b134; --sky: #6fc8e0;
  --urgent: #ff8a80; --notice: #f2b134; --shadow: 0 6px 22px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--sand); color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
[hidden] { display: none !important; }
a { color: var(--sky); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 3000; background: var(--paper); padding: 8px 12px; }

/* Header */
.top {
  display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px;
  background: var(--paper); border-bottom: 3px solid var(--marigold);
}
.top img { border-radius: 50%; background: #fff8ec; flex: none; }
.top-text { min-width: 0; flex: 1; }
.top h1 { font: 400 1.25rem/1.1 "Bowlby One", Impact, sans-serif; margin: 0; color: var(--palm); letter-spacing: .01em; }
.top p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; flex: none; }

/* Live alert banner */
.banner { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--sunset); color: #fff; }
:root[data-theme="dark"] .banner, .banner.dark { color: #2a0d04; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .banner { color: #2a0d04; } }
.banner.urgent { background: var(--urgent); }
.banner div { flex: 1; min-width: 0; font-size: .92rem; line-height: 1.3; }
.banner strong { display: block; }
.banner span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.banner button { min-height: 40px; min-width: 40px; border-radius: 8px; border: 2px solid currentColor; background: transparent; font-weight: 700; padding: 0 10px; }

/* Views */
main { flex: 1; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; }
.view.pad { overflow-y: auto; padding: 20px 16px 28px; -webkit-overflow-scrolling: touch; }
.view.pad > * { max-width: 40rem; margin-left: auto; margin-right: auto; }
.poster { font: 400 2rem/1.05 "Bowlby One", Impact, sans-serif; color: var(--sunset); margin: 0 0 4px; text-wrap: balance; }
.lede { margin: 0 0 18px; color: var(--muted); }
.muted { color: var(--muted); font-size: .92rem; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 auto 14px; }
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card p { margin: 0 0 8px; }
.card p:last-child { margin-bottom: 0; }
.card.emergency { border-left: 6px solid var(--urgent); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px;
  border: 0; border-radius: 10px; background: var(--palm); color: var(--palm-ink); font-weight: 700; text-decoration: none;
}
.btn.ghost { background: transparent; color: var(--palm); border: 2px solid var(--palm); }
.btn[disabled] { opacity: .55; }

/* Map */
#view-map { display: flex; flex-direction: column; }
#map { flex: 1; min-height: 0; background: #efe6d2; z-index: 0; }
:root[data-theme="dark"] #map { background: #14241f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #map { background: #14241f; } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px; background: var(--sand); scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1.500px solid var(--line); background: var(--paper); font-size: .86rem; font-weight: 600;
}
.chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.chip[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
.fab {
  position: absolute; right: 14px; bottom: 78px; z-index: 500; width: 52px; height: 52px; border-radius: 50%;
  border: 0; background: var(--paper); color: var(--sky); box-shadow: var(--shadow); display: grid; place-items: center;
}
.fab.is-on { background: var(--sky); color: var(--paper); }
.nearest {
  position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 500; display: flex; align-items: center; gap: 6px;
  background: var(--paper); border-radius: 14px; padding: 6px 8px 6px 12px; box-shadow: var(--shadow); overflow-x: auto;
}
.nearest span { font: 400 .78rem "Bowlby One", Impact, sans-serif; color: var(--sunset); text-transform: uppercase; flex: none; }
.nearest button { flex: 1 0 auto; min-height: 42px; padding: 0 10px; border-radius: 10px; border: 0; background: var(--palm); color: var(--palm-ink); font-weight: 700; font-size: .88rem; }
.sheet {
  position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 600; background: var(--paper); border-radius: 16px;
  padding: 14px 16px 16px; box-shadow: var(--shadow); border-top: 5px solid var(--c, var(--palm)); max-width: 30rem; margin: 0 auto;
}
.sheet h2 { margin: 0 34px 4px 0; font-size: 1.15rem; }
.sheet p { margin: 0 0 8px; }
.sheet-cat { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sheet-dist { font-weight: 700; color: var(--palm); }
.sheet-x { position: absolute; top: 6px; right: 6px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.700rem; line-height: 1; }

/* Map markers */
.pin {
  width: 30px; height: 30px; border-radius: 50% 50% 50% 4px; transform: rotate(-45deg); background: var(--c); border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4); display: grid; place-items: center;
}
.pin b { transform: rotate(45deg); color: #fff; font: 800 11px/1 system-ui, sans-serif; }
.staff {
  background: #0d5c4a; color: #fff; border: 2px solid #fff; border-radius: 999px; padding: 3px 9px; font: 700 12px/1.2 system-ui, sans-serif;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transform: translate(-50%, -50%); display: inline-block;
}
.staff::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7dffb0; margin-right: 5px; }
.me { width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(26, 115, 232, .4); }
.apin { width: 34px; height: 34px; border-radius: 50%; background: #b3261e; border: 3px solid #fff; color: #fff; display: grid; place-items: center; font: 900 18px/1 system-ui; box-shadow: 0 0 0 0 rgba(179, 38, 30, .6); animation: pulse 1.800s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 18px rgba(179, 38, 30, 0); } }
.street-label { background: transparent; border: 0; box-shadow: none; font: 700 11px system-ui; color: var(--muted); }
.street-label::before { display: none; }
.leaflet-container { font: inherit; }

/* Schedule */
.timeline { list-style: none; margin: 0 auto; padding: 0; }
.timeline li { display: grid; grid-template-columns: 4.200rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); align-items: baseline; }
.timeline time { font: 400 1.25rem/1 "Bowlby One", Impact, sans-serif; color: var(--palm); }
.timeline li.past { opacity: .55; }
.timeline li.now { background: var(--paper); border: 2px solid var(--marigold); border-radius: 12px; padding: 12px; margin: 6px -12px; }
.timeline li.now span::before { content: "Happening now"; display: block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sunset); }

/* Alerts */
.push-card { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.push-card p { flex: 1 1 14rem; margin: 0; }
.alert-list { list-style: none; margin: 0 auto; padding: 0; }
.alert-list li { background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--sky); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.alert-list li.notice { border-left-color: var(--marigold); }
.alert-list li.urgent { border-left-color: var(--urgent); }
.alert-list li.cleared { opacity: .55; }
.alert-list h3 { margin: 0 0 2px; font-size: 1.05rem; }
.alert-list p { margin: 0 0 6px; overflow-wrap: anywhere; }
.alert-list small { color: var(--muted); display: block; }
.alert-list .tag { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.alert-list li.urgent .tag { color: var(--urgent); }
.alert-list button { margin-top: 8px; min-height: 40px; }

.social a { display: inline-block; margin: 0 14px 6px 0; font-weight: 700; }
.foot { text-align: center; font-size: .85rem; color: var(--muted); padding-top: 10px; border-top: 1px solid var(--line); }
.foot p { margin: 6px 0; }

/* Tabs */
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.tabs button { position: relative; height: var(--tab-h); border: 0; background: transparent; color: var(--muted); font-size: .74rem; font-weight: 700; display: grid; place-items: center; align-content: center; gap: 2px; }
.tabs svg { width: 24px; height: 24px; }
.tabs button[aria-current="page"] { color: var(--palm); }
.tabs button[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 4px; border-radius: 0 0 4px 4px; background: var(--sunset); }
.badge { position: absolute; top: 8px; left: calc(50% + 6px); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--urgent); color: var(--paper); font-size: .72rem; line-height: 20px; }

.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + var(--safe-b) + 16px); transform: translateX(-50%); z-index: 2000; max-width: min(92vw, 28rem); background: var(--ink); color: var(--sand); padding: 10px 16px; border-radius: 10px; font-size: .92rem; box-shadow: var(--shadow); }

@media (min-width: 720px) {
  .nearest { left: 50%; right: auto; transform: translateX(-50%); }
  .poster { font-size: 2.600rem; }
}
@media (prefers-reduced-motion: reduce) { .apin { animation: none; } * { scroll-behavior: auto; } }

/* ---------- Admin console ---------- */
body.admin { overflow: auto; display: block; }
.admin main { position: static; max-width: 46rem; margin: 0 auto; padding: 16px 16px 60px; }
.admin label { display: block; font-weight: 700; margin: 12px 0 4px; }
.admin input[type=text], .admin input[type=password], .admin input[type=url], .admin input[type=time], .admin textarea, .admin select {
  width: 100%; min-height: 46px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--paper); border: 1.500px solid var(--muted); border-radius: 10px;
}
.admin textarea { min-height: 96px; resize: vertical; }
.admin .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.admin .row > * { flex: 1 1 9rem; }
.admin .check { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-top: 12px; }
.admin .check input { width: 24px; height: 24px; flex: none; }
.admin h2 { font: 400 1.300rem "Bowlby One", Impact, sans-serif; color: var(--sunset); margin: 0 0 6px; }
.admin table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.admin td, .admin th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.admin .scroll { overflow-x: auto; }
.admin .levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admin .levels label { margin: 0; border: 2px solid var(--line); border-radius: 10px; padding: 10px; text-align: center; cursor: pointer; }
.admin .levels input { position: absolute; opacity: 0; }
.admin .levels input:checked + span { text-decoration: underline; text-decoration-thickness: 3px; }
.admin .levels label:has(input:checked) { border-color: var(--palm); background: var(--sand); }
.admin .levels label:has(input:focus-visible) { outline: 3px solid var(--marigold); }
.admin .stat { font: 400 2rem "Bowlby One", Impact, sans-serif; color: var(--palm); }
.admin #amap { height: 300px; border-radius: 12px; border: 1px solid var(--line); margin-top: 10px; }
.admin .btn.danger { background: var(--urgent); color: var(--paper); }
.admin .btn.small { min-height: 40px; padding: 0 12px; font-size: .88rem; }
.admin .msg { font-weight: 700; margin-top: 10px; min-height: 1.500em; }
.admin nav.sub { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 900; }
.admin nav.sub button { flex: none; min-height: 42px; padding: 0 14px; border-radius: 999px; border: 1.500px solid var(--line); background: transparent; font-weight: 700; }
.admin nav.sub button[aria-current="page"] { background: var(--palm); color: var(--palm-ink); border-color: var(--palm); }