/* The public jams pages: the list, cities, states and one jam. Built on
   detail-pages.css; the app's jam colours (live is the pop-up blue). */
:root {
  --jam-live: #1877f2;
  --jam-live-wash: rgba(24, 119, 242, .08);
  --jam-hero-wash: rgba(21, 102, 107, .08);
  --jam-question-wash: rgba(212, 165, 55, .16);
  --jam-radius: 6px;
}

.jams-web.detail-page { max-width: 1160px; }

/* Components here set display, which would otherwise beat [hidden]. */
.jams-web [hidden],
.jam-sheet-backdrop [hidden] { display: none !important; }

.jams-web h1 {
  margin: 0;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.jams-web h2 { margin: 0 0 12px; font-size: 1.15rem; }

.jam-lede {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--color-text-secondary);
  font-size: 1.02rem;
  line-height: 1.6;
}

.jam-caption { color: var(--color-text-muted); font-size: .85rem; }

/* Buttons: rounded rectangles, as in the app. */
.jam-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--color-forest-main);
  border-radius: var(--jam-radius);
  background: white;
  color: var(--color-forest-main);
  font: inherit;
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.jam-button:hover { background: var(--color-bg-hover); text-decoration: none; }
.jam-button:disabled { opacity: .55; cursor: default; }
.jam-button .material-icons { font-size: 18px; }

.jam-button-primary,
.jam-button[aria-pressed="true"] {
  background: var(--color-forest-main);
  color: white;
}

.jam-button-primary:hover,
.jam-button[aria-pressed="true"]:hover { background: var(--color-forest-light); }

.jam-button-quiet { border-color: transparent; background: transparent; }
.jam-button-icon { padding: 8px; min-width: 40px; }
.jam-button-live { border-color: var(--jam-live); background: var(--jam-live); color: white; }
.jam-button-live:hover { background: #3b8cf5; }

.jam-text-button {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--color-forest-main);
  font: inherit;
  font-size: .85rem;
  font-weight: 650;
  cursor: pointer;
}

.jam-text-button:hover { text-decoration: underline; }

.jam-link-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--color-forest-main);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}

.jam-link-button .material-icons { font-size: 18px; }

/* Search ---------------------------------------------------------------- */
.jam-list-head { margin: 0 0 28px; }

.jam-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin-top: 22px;
}

.jam-search-field {
  display: flex;
  flex: 1 1 280px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--jam-radius);
  background: white;
}

.jam-search-field:focus-within { border-color: var(--color-forest-main); box-shadow: 0 0 0 3px rgba(21, 102, 107, .12); }
.jam-search-field .material-icons { color: var(--color-text-muted); font-size: 20px; }

.jam-search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1rem;
}

.jam-search .jam-button { min-height: 44px; }

.jam-search-status {
  flex-basis: 100%;
  margin: 2px 0 0;
  color: var(--color-text-muted);
  font-size: .85rem;
}

/* Places suggestions sit above the page. */
.pac-container { z-index: 2000; border-radius: var(--jam-radius); }

/* The list -------------------------------------------------------------- */
.jam-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 32px;
  align-items: start;
}

.jam-map-col { position: sticky; top: 76px; }

.jam-list-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.jam-sort {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--jam-radius);
  overflow: hidden;
}

.jam-sort-option {
  padding: 9px 14px;
  color: var(--color-text-secondary);
  font-size: .88rem;
  font-weight: 650;
  text-decoration: none;
}

.jam-sort-option + .jam-sort-option { border-left: 1px solid var(--color-border); }
.jam-sort-option.is-selected { background: var(--color-forest-main); color: white; }
.jam-sort-option:hover { text-decoration: none; }

.jam-group {
  margin: 26px 0 0;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--detail-rule);
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.jam-group-accent { color: var(--color-forest-main); }

.jam-rows { margin: 0; padding: 0; list-style: none; }

.jam-row { border-bottom: 1px solid var(--detail-rule); }

.jam-row a {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 4px;
  color: inherit;
  text-decoration: none;
}

.jam-row a:hover { background: rgba(255, 255, 255, .6); }
.jam-row a:hover .jam-row-name { color: var(--color-forest-main); }

.jam-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.jam-row-name {
  color: var(--detail-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

.jam-row-line { color: var(--color-text-secondary); font-size: .9rem; }
.jam-row-where { color: var(--color-text-muted); font-size: .85rem; }
.jam-row-live { color: var(--jam-live); font-size: .9rem; font-weight: 700; }

.jam-row-distance {
  flex: 0 0 auto;
  color: var(--detail-accent);
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* "?" for a jam nobody has checked in three months, as the app marks it. */
.jam-stale {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 4px;
  background: var(--jam-question-wash);
  color: var(--color-earth-main);
  font-size: .72rem;
  font-weight: 800;
  vertical-align: 2px;
}

.jam-stale-large { width: 26px; height: 26px; margin-left: 10px; font-size: 1rem; vertical-align: 10px; }

.jam-note { margin: 18px 0 0; color: var(--color-text-muted); }

.jam-add-prompt {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--detail-rule);
  border-radius: var(--jam-radius);
  background: var(--detail-paper);
}

.jam-add-prompt strong { display: block; color: var(--detail-ink); }
.jam-add-prompt span { color: var(--color-text-muted); font-size: .9rem; }

/* Map ------------------------------------------------------------------- */
.jam-map-wrap { margin: 0 0 28px; }

.jam-map {
  width: 100%;
  height: 520px;
  border: 1px solid var(--detail-rule);
  border-radius: var(--jam-radius);
  background: var(--detail-wash);
}

.jam-list-head-home + .jam-map-wrap .jam-map { height: 440px; }
.jam-map-single .jam-map { height: 100%; min-height: 360px; }
.jam-map-note { margin: 8px 0 0; color: var(--color-text-muted); font-size: .85rem; }

.jam-map-card { max-width: 240px; font-family: Inter, ui-sans-serif, -apple-system, sans-serif; }
.jam-map-card strong { display: block; margin-bottom: 3px; font-size: .95rem; }
.jam-map-card span { display: block; color: #555; font-size: .82rem; }
.jam-map-card a { display: inline-block; margin-top: 6px; color: var(--color-forest-main); font-weight: 700; }

/* Places ---------------------------------------------------------------- */
.jam-place-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--detail-rule);
}

.jam-place-grid-compact { margin-bottom: 28px; }

.jam-place-grid a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--detail-rule);
  color: var(--detail-ink);
  font-weight: 600;
  text-decoration: none;
}

.jam-place-grid a:hover { color: var(--color-forest-main); }
.jam-place-count { color: var(--color-text-muted); font-weight: 500; }

.jam-section-wide { margin-top: 40px; }

.jam-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.jam-section-heading h2 { margin: 0; }
.jam-section-heading a,
.jam-more-link { color: var(--color-forest-main); font-size: .88rem; font-weight: 700; text-decoration: none; }

/* The app ---------------------------------------------------------------- */
.jam-app-callout { margin-top: 56px; }
.jam-app-callout h2 { margin: 0 0 8px; font-size: 1.5rem; }
.jam-app-callout p { margin: 0; }
.jam-app-callout .jam-app-rating { margin-top: 12px; font-size: .8rem; color: rgba(255, 255, 255, .6); }
.jam-app-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.jam-app-badges img { display: block; height: 40px; }

/* One jam ---------------------------------------------------------------- */
.jam-page-head { margin: 0 0 18px; }
.jam-page-title { max-width: 860px; }
.jam-page-where { margin: 10px 0 0; color: var(--color-text-secondary); font-size: 1.02rem; }

.jam-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 22px;
}

.jam-menu { position: relative; }

.jam-menu-items {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  right: 0;
  min-width: 230px;
  padding: 6px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--jam-radius);
  background: white;
  box-shadow: var(--shadow-lg);
}

.jam-menu-items[hidden] { display: none; }

.jam-menu-items > a,
.jam-menu-items > button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.jam-menu-items > a:hover,
.jam-menu-items > button:hover { background: var(--color-bg-hover); }
.jam-menu-items .material-icons { color: var(--color-text-muted); font-size: 20px; }

.jam-band {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 18px;
  padding: 14px 16px;
  border-radius: var(--jam-radius);
}

.jam-band[hidden] { display: none; }
.jam-band strong { display: block; }
.jam-band span { color: var(--color-text-secondary); font-size: .88rem; }
.jam-band-question { background: var(--jam-question-wash); }
.jam-band-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

.jam-banner { margin: 0 0 18px; }

.jam-banner img {
  display: block;
  width: 100%;
  max-height: 380px;
  object-fit: cover;
  border-radius: var(--jam-radius);
}

.jam-live {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--jam-radius);
  background: var(--jam-live-wash);
}

.jam-live > .material-icons {
  padding: 8px;
  border-radius: 8px;
  background: rgba(24, 119, 242, .12);
  color: var(--jam-live);
}

.jam-live > div { flex: 1; min-width: 0; }
.jam-live strong { display: block; }
.jam-live span { color: var(--color-text-muted); font-size: .88rem; }

.jam-hero {
  margin: 0 0 24px;
  padding: 26px 20px;
  border-radius: var(--jam-radius);
  background: var(--jam-hero-wash);
  text-align: center;
}

.jam-hero-pattern {
  margin: 0 0 8px;
  color: var(--color-forest-main);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.jam-hero-next { margin: 0; color: var(--color-text-primary); font-size: 1rem; font-weight: 500; }
.jam-hero-dates { margin: 12px 0 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: .85rem; }
.jam-hero-dates li + li { margin-top: 4px; }

.jam-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}

.jam-body-single { grid-template-columns: minmax(0, 760px); }

.jam-section + .jam-section { margin-top: 26px; }

.jam-section p { margin: 0; line-height: 1.55; }
.jam-section p + p,
.jam-section p + .jam-button { margin-top: 8px; }
.jam-section .jam-caption { margin-top: 4px; }

.jam-text { color: var(--color-text-primary); line-height: 1.6; overflow-wrap: anywhere; }
.jam-text + .jam-text { margin-top: 10px; }
.jam-text a { color: var(--color-forest-main); }
.jam-contact-name { font-weight: 650; }

.jam-missing {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--detail-rule);
  border-radius: var(--jam-radius);
  background: white;
}

.jam-missing li + li { border-top: 1px solid var(--detail-rule); }

.jam-missing button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.jam-missing button:hover { background: var(--color-bg-hover); }
.jam-missing .material-icons { color: var(--color-forest-main); font-size: 20px; }

.jam-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--detail-rule);
  color: var(--color-text-muted);
  font-size: .85rem;
}

.jam-players { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.jam-players[hidden] { display: none; }

.jam-player {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--detail-rule);
  border-radius: var(--jam-radius);
  background: white;
  color: var(--color-text-primary);
  font-size: .9rem;
  text-decoration: none;
}

.jam-player img,
.jam-player .jam-player-initial {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.jam-player .jam-player-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  color: var(--color-earth-main);
  font-size: .8rem;
  font-weight: 700;
}

.jam-songs {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  columns: 2 240px;
  column-gap: 32px;
}

.jam-songs li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--detail-rule);
  break-inside: avoid;
}

.jam-songs a { color: var(--detail-ink); font-weight: 600; text-decoration: none; }
.jam-songs a:hover { color: var(--color-forest-main); }
.jam-songs-count { color: var(--color-text-muted); font-size: .82rem; white-space: nowrap; }

.jam-nights { margin: 0 0 12px; padding: 0; list-style: none; }

.jam-nights li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--detail-rule);
}

.jam-nights-date { color: var(--color-text-muted); font-size: .88rem; }
.jam-nights a { color: var(--color-forest-main); font-weight: 600; text-decoration: none; }

/* A short message after an action. */
.jam-toast {
  position: fixed;
  z-index: 3000;
  left: 50%;
  bottom: 24px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: var(--jam-radius);
  background: var(--color-charcoal);
  color: white;
  font-size: .92rem;
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

/* Edit sheets ------------------------------------------------------------ */
.jam-sheet-backdrop {
  position: fixed;
  z-index: 1500;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(43, 37, 32, .45);
}

body.jam-sheet-open { overflow: hidden; }

.jam-sheet {
  position: static;
  margin: 0;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: white;
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xl);
}

.jam-sheet-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.jam-sheet-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--color-border-subtle);
}

.jam-sheet-head [data-sheet-back] { margin-left: -12px; }
.jam-sheet-head h2 { flex: 1; margin: 0; font-size: 1.1rem; }

.jam-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
}

.jam-sheet .jam-sheet-body > * + *,
.jam-sheet .jam-wizard > * + *,
.jam-sheet .jam-where > * + * { margin-top: 18px; }
.jam-sheet .jam-where > .jam-caption,
.jam-sheet .jam-sheet-body > .jam-caption { margin-top: 8px; }
.jam-sheet-body p { margin-bottom: 0; line-height: 1.55; }

.jam-sheet-error {
  margin: 0;
  padding: 0 20px 10px;
  color: var(--color-crimson-main);
  font-size: .9rem;
}

.jam-sheet-error[hidden] { display: none; }

.jam-sheet-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--color-border-subtle);
}

.jam-sheet-foot .jam-button { min-width: 120px; }
.jam-sheet-badges { margin-top: 16px; }

.jam-field { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }

.jam-field-label {
  display: block;
  margin-bottom: 6px;
  padding: 0;
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jam-field-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--jam-radius);
  background: white;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
}

.jam-field-input:focus { outline: 0; border-color: var(--color-forest-main); box-shadow: 0 0 0 3px rgba(21, 102, 107, .12); }
textarea.jam-field-input { resize: vertical; }
.jam-caption-error { color: var(--color-crimson-main); }

.jam-segmented {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--jam-radius);
  overflow: hidden;
}

.jam-segmented button {
  flex: 1;
  min-height: 40px;
  padding: 8px 10px;
  border: 0;
  background: white;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: .9rem;
  font-weight: 650;
  cursor: pointer;
}

.jam-segmented button + button { border-left: 1px solid var(--color-border); }
.jam-segmented button[aria-pressed="true"] { background: var(--color-forest-main); color: white; }

.jam-options { display: grid; gap: 8px; }

.jam-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--jam-radius);
  cursor: pointer;
}

.jam-option:has(input:checked) { border-color: var(--color-forest-main); background: var(--jam-hero-wash); }
.jam-option input { margin-top: 3px; accent-color: var(--color-forest-main); }
.jam-option strong { display: block; font-size: .95rem; }
.jam-option small { color: var(--color-text-muted); font-size: .82rem; }

.jam-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.jam-choice { position: relative; cursor: pointer; }
.jam-choice input { position: absolute; opacity: 0; pointer-events: none; }

.jam-choice span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--jam-radius);
  font-size: .9rem;
  font-weight: 600;
}

.jam-choice input:checked + span { border-color: var(--color-forest-main); background: var(--color-forest-main); color: white; }
.jam-choice input:focus-visible + span { box-shadow: 0 0 0 3px rgba(21, 102, 107, .25); }

.jam-date-add { display: flex; gap: 8px; }
.jam-date-add .jam-field-input { flex: 1; }
.jam-date-list { margin: 10px 0 0; padding: 0; list-style: none; }

.jam-date-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.jam-preview {
  padding: 12px 14px;
  border-radius: var(--jam-radius);
  background: var(--jam-hero-wash);
}

.jam-preview p { margin: 0; color: var(--color-forest-deep); font-weight: 600; }

.jam-banner-pick { display: block; cursor: pointer; }

.jam-banner-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 160px;
  border: 1px dashed var(--color-border);
  border-radius: var(--jam-radius);
  background: var(--color-bg-hover);
  color: var(--color-forest-main);
  font-weight: 650;
  overflow: hidden;
}

.jam-banner-preview .material-icons { font-size: 32px; }
.jam-banner-preview img { display: block; width: 100%; max-height: 260px; object-fit: cover; }

.jam-edit-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--detail-rule);
  border-radius: var(--jam-radius);
}

.jam-edit-rows li + li { border-top: 1px solid var(--detail-rule); }

.jam-edit-rows button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.jam-edit-rows button:hover { background: var(--color-bg-hover); }
.jam-edit-rows .material-icons { color: var(--color-forest-main); font-size: 20px; }
.jam-edit-row-text { flex: 1; min-width: 0; }
.jam-edit-row-text strong { display: block; font-size: .95rem; }

.jam-edit-row-text span {
  display: block;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: .88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jam-edit-row-text em { color: var(--color-forest-main); font-style: normal; font-weight: 600; }
.jam-edit-rows .jam-edit-row-go { color: var(--color-text-light); }

/* Edit history ----------------------------------------------------------- */
.jam-edits { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--detail-rule); }
.jam-edits > li { padding: 16px 0; border-bottom: 1px solid var(--detail-rule); }

.jam-edit-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
}

.jam-edit-head strong { color: var(--detail-ink); }
.jam-edit-changes { margin: 10px 0 0; padding: 0; list-style: none; }
.jam-edit-changes li + li { margin-top: 8px; }

/* The jam check-in page ------------------------------------------------- */
.checkin-preview-bar {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-radius: var(--jam-radius);
  background: var(--jam-question-wash);
  color: var(--color-earth-dark);
  font-size: .9rem;
  font-weight: 600;
}

.checkin-status { margin: 12px 0 0; color: var(--color-text-muted); font-size: .88rem; }

.checkin-jams { margin: 0; padding: 0; list-style: none; }

.checkin-jam {
  margin: 0 0 14px;
  padding: 18px 20px;
  border: 1px solid var(--detail-rule);
  border-radius: var(--jam-radius);
  background: white;
}

.checkin-jam.is-done { background: var(--jam-hero-wash); }
.checkin-jam h2 { margin: 0 0 4px; font-size: 1.15rem; }
.checkin-jam h2 a { color: var(--detail-ink); text-decoration: none; }
.checkin-jam h2 a:hover { color: var(--color-forest-main); }
.checkin-jam p { margin: 2px 0 0; }
.checkin-jam-line { color: var(--color-text-secondary); }
.checkin-jam-ask { margin-top: 8px !important; color: var(--color-earth-main); font-size: .9rem; }

.checkin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.checkin-done { margin-top: 12px !important; color: var(--color-forest-deep); font-weight: 650; }

@media (max-width: 900px) {
  .jam-list-layout { grid-template-columns: 1fr; }
  .jam-map-col { position: static; order: -1; }
  .jam-map { height: 320px; }
  .jam-body { grid-template-columns: 1fr; }
  .jam-map-single .jam-map { min-height: 280px; }
}

@media (max-width: 600px) {
  .jam-sheet-backdrop { align-items: flex-end; padding: 0; }
  .jam-sheet { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .jam-sheet-inner { max-height: 92vh; }
  .jam-search .jam-button { flex: 1 1 auto; }
  .jam-nights li { grid-template-columns: 1fr; gap: 2px; }
  .jam-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 6px; }
  .jam-actions .jam-button { padding: 8px 6px; font-size: .84rem; }
}