* { box-sizing: border-box; }

:root {
  --bg: oklch(0.985 0.006 80);
  --card: oklch(1 0 0);
  --border: oklch(0.9 0.01 70);
  --chip-bg: oklch(0.95 0.01 70);
  --text: oklch(0.26 0.02 50);
  --text-muted: oklch(0.5 0.02 60);
  --text-faint: oklch(0.55 0.02 60);
  --accent: oklch(0.26 0.02 50);
  --good: oklch(0.5 0.15 145);
  --bad: oklch(0.55 0.19 25);
}

body {
  margin: 0;
  background: oklch(0.94 0.006 80);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
}

a { color: var(--text); text-decoration: none; }
::placeholder { color: oklch(0.62 0.02 60); }
button, input { font-family: inherit; }

.phone {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
}

.header {
  flex-shrink: 0;
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 1;
}

.header-top { display: flex; align-items: center; justify-content: space-between; }

.city-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}

.city-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 20px 20px 190px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.city-list input {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 14px;
  outline: none;
  background: var(--card);
  color: var(--text);
}

.use-location-btn {
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--accent);
  background: var(--card);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--text);
}

.use-location-text { display: flex; flex-direction: column; gap: 1px; }
.use-location-title { font-size: 14px; font-weight: 700; }
.use-location-status { font-size: 12px; font-weight: 500; color: var(--text-muted); }

.continent-section { display: flex; flex-direction: column; gap: 8px; }
.continent-section + .continent-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

.continent-heading {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

/* Two cities per row instead of one - a lone city (.full-width) spans both
   columns so it doesn't leave an empty half-row next to it. */
.city-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.city-group-name {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  padding-left: 2px;
  margin-top: 2px;
}

.city-option {
  text-align: left;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  color: var(--text);
}

.city-option.full-width { grid-column: 1 / -1; }
.city-option.active { border-color: var(--good); background: oklch(0.97 0.03 145); }
.city-option .check { margin-left: auto; flex-shrink: 0; }

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.logo-mark { flex-shrink: 0; }

.brand {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.brand-accent { color: oklch(0.62 0.19 29); }

.toggle {
  display: flex;
  background: var(--chip-bg);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.toggle-btn {
  flex-grow: 1;
  padding: 10px 4px;
  border-radius: 9px;
  border: none;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  color: var(--text-faint);
}

.toggle-btn.active { background: var(--accent); color: oklch(1 0 0); }

.year-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: -6px;
}

.year-caption[hidden] { display: none; }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: 1.5px solid;
}

.list {
  flex-grow: 1;
  /* Bottom padding clears the fixed submit bar (see .submit-box) so the last card isn't hidden under it. */
  padding: 16px 20px 190px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.card-side {
  flex-shrink: 0;
  width: 64px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
}

/* The date tile above the thumbnail - the same per-style color used for the
   dot/style-label, so a card's date reads with the same weight as its style
   instead of hiding in the small gray meta line. */
.card-date-tile {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  text-align: center;
}

.card-date-tile-top {
  color: oklch(1 0 0);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 0;
}

.card-date-tile-bottom {
  background: var(--card);
  color: var(--text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  padding: 3px 0;
}

/* "Today" tile shows the time instead of a redundant day number - needs a
   smaller size to fit "7:00 PM" without wrapping or overflowing 64px. */
.card-date-tile-bottom.small {
  font-size: 12px;
  font-weight: 700;
}

.card-body {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-row { display: flex; align-items: center; gap: 8px; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.style-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}

.card-meta { font-size: 13px; color: var(--text-muted); }

/* A fixed-width first column (not auto) so every card's city label lands
   at the same consistent X position regardless of how long that card's
   own source label happens to be - flex/auto-width would let city drift
   left or right per card, which read as "random," not "aligned." */
.card-footer {
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.card-city {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-faint);
}

/* Real flag images, not emoji - see flagImgHtml() in app.js for why. */
.flag-icon {
  width: 14px;
  height: auto;
  border-radius: 2px;
  flex-shrink: 0;
}

.sources { display: flex; gap: 8px; flex-wrap: wrap; }

.source-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  background: var(--chip-bg);
  border-radius: 999px;
  padding: 6px 10px;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 60px 24px;
  color: var(--text-faint);
}

.empty-title { font-weight: 700; font-size: 15px; color: var(--text); }

.empty-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 280px;
  margin-top: 6px;
}

.empty-btn {
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: var(--accent);
  color: oklch(1 0 0);
}

.empty-btn-secondary {
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
}

.city-option-pinned { font-weight: 700; }

.loading, .error {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 14px;
}

.error { color: var(--bad); }

/* Fixed, not in-flow: stays visible over the event list, the detail view and
   the city picker alike - "always at the bottom" means surviving whichever
   full-screen overlay (position:fixed;inset:0) happens to be open. */
/* Dark on purpose, unlike the rest of the (light) app - makes this fixed
   bar read as its own distinct "action" surface rather than blending into
   the page, and gives the coral submit button somewhere it can actually
   glow. Every color below is a local override, not the shared --variables,
   since this is the one dark surface in an otherwise light-themed app. */
.submit-box {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  z-index: 20;
  flex-shrink: 0;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid oklch(0.32 0.02 50);
  background: oklch(0.17 0.014 50);
  box-shadow: 0 -6px 20px oklch(0 0 0 / 0.3);
  color: oklch(0.92 0.008 70);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.submit-title { font-family: "Manrope", system-ui, sans-serif; font-weight: 700; font-size: 14px; }

.submit-row { display: flex; align-items: center; gap: 10px; }

.submit-box input {
  flex-grow: 1;
  min-width: 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid oklch(0.34 0.02 50);
  font-size: 13px;
  outline: none;
  background: oklch(0.23 0.014 50);
  color: oklch(0.95 0.008 70);
}

.submit-box input::placeholder { color: oklch(0.55 0.015 60); }

/* The circular coral "+" button - reuses the app's existing brand-accent
   color (also the logo's "Dance" accent and the Bachata style color)
   rather than introducing a new one-off color, plus a soft glow to match. */
.submit-btn {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: oklch(0.62 0.19 29);
  color: oklch(1 0 0);
  box-shadow: 0 0 0 7px oklch(0.62 0.19 29 / 0.16), 0 4px 16px oklch(0.62 0.19 29 / 0.55);
}

.submit-btn:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.submit-status { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.submit-status.ok { color: oklch(0.72 0.16 145); }
.submit-status.err { color: oklch(0.68 0.19 25); }
.submit-status[hidden] { display: none; }

.search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 160px;
  overflow-y: auto;
}

.search-results[hidden] { display: none; }

.search-results-label { font-size: 12px; font-weight: 700; color: oklch(0.7 0.012 60); }

.search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid oklch(0.34 0.02 50);
  background: oklch(0.23 0.014 50);
  text-align: left;
  cursor: pointer;
}

.search-result-title { font-size: 13px; font-weight: 700; color: oklch(0.95 0.008 70); }
.search-result-host { font-size: 11px; color: oklch(0.65 0.012 60); }

.detail {
  position: fixed;
  inset: 0;
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.detail[hidden] { display: none; }

.detail-header {
  flex-shrink: 0;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}

.icon-btn { background: none; border: none; padding: 4px; margin: -4px; cursor: pointer; color: var(--text); }

.detail-title { font-weight: 700; font-size: 15px; }

.detail-body {
  flex-grow: 1;
  overflow-y: auto;
  padding: 24px 20px 190px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.detail-image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 12px;
}

.detail-heading { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 22px; line-height: 1.25; }

.detail-facts { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: oklch(0.4 0.02 55); }

.detail-fact { display: flex; align-items: center; gap: 10px; }

.detail-desc { font-size: 14px; line-height: 1.6; color: oklch(0.4 0.02 55); }

.detail-sources-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.detail-source-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.detail-source-name { display: flex; align-items: center; gap: 10px; }