/* CityBars — mobile first. Base styles target a phone; min-width queries enhance for larger screens.
   Brand colors come from configuration (--brand-primary, --brand-accent are set in the layout). */

:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 14px;
  --header-h: 76px;
  --gutter: 16px;
  --tap: 44px;
}

/* Colours come from the active theme (wwwroot/themes/<id>/theme.css), chosen by data-theme and data-mode on <html>, and from
   the brand (--brand-primary, --brand-accent, --brand-highlight, set inline by the layout). These are the fallbacks. */
:root {
  --on-primary: #ffffff;
  --glow-text: none;
  --glow-box: none;
  --action: var(--brand-primary);   /* active buttons, switches, selected chips, card borders */
  --hot: var(--brand-primary);      /* small accents: the busy flame, the tagline */
  --glow-hot: none;
  --wordmark: var(--text);          /* the brand name in the header */
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

/* Everything is sized in rem, so this one value sets how big the text is across the site (16px is the browser default). */
html { -webkit-text-size-adjust: 100%; font-size: 109.375%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.45 var(--font);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

a { color: var(--accent-text); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ---------- Header ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; min-height: var(--tap); }
.brand-logo { width: 62px; height: 62px; flex: none; border-radius: 10px; object-fit: contain; }
/* A brand with a light-mode logo renders both; the page's mode picks one. */
[data-mode="light"] .brand-logo-dark,
:root:not([data-mode="light"]) .brand-logo-light { display: none; }
.brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
/* The name is set like the logo's wordmark: a script face, in the wordmark colour. */
.brand-name {
  font-family: var(--font-display, var(--font));
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.05;
  color: var(--wordmark);
  white-space: nowrap;
}
/* The tagline is set like the logo's: spaced capitals. */
.brand-tagline {
  display: none;
  margin-top: 3px;
  color: var(--hot);
  text-shadow: var(--glow-hot);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.header-actions { display: flex; align-items: center; gap: 8px; }

.icon-button {
  width: var(--tap);
  height: var(--tap);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  font-size: 1.15rem;
}

/* The account control: a Sign in button, or once signed in a button with the initials and name that opens a small menu. */
.account-signin { min-height: var(--tap); padding: 0 14px; white-space: nowrap; }
.account-menu { position: relative; }
.account-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
}
.account-name { display: none; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--action);
  color: var(--on-primary);
  box-shadow: var(--glow-box);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.account-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 15rem;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.account-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
.account-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-item {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-item:hover, .account-item:focus-visible { background: var(--surface-2); }
.avatar.has-picture { background: var(--surface-2); overflow: hidden; }
.avatar.has-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The icons beside the account control: My Bars (a heart) and notifications (a bell), always there, and for an owner a store. */
.header-account { display: flex; align-items: center; gap: 2px; }
.header-icon {
  width: var(--tap);
  height: var(--tap);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
.header-icon:hover, .header-icon:focus-visible, .header-icon[aria-expanded='true'] { background: var(--surface-2); }
.line-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fill-icon { flex: none; width: 1.25em; height: 1.25em; fill: currentColor; vertical-align: -0.25em; }
.owner-icon { display: none; }
.phone-only { display: flex; }
.header-bell { position: relative; }
.notification-panel {
  position: fixed;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  left: var(--gutter);
  right: var(--gutter);
  z-index: 30;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.notification-heading { padding: 8px 10px; font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.notification-empty { margin: 0; padding: 14px 10px; color: var(--muted); }
.notification-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.notification-link { display: grid; gap: 2px; padding: 10px; border-radius: 8px; color: var(--text); text-decoration: none; }
a.notification-link:hover, a.notification-link:focus-visible { background: var(--surface-2); }
.notification.unread .notification-link { background: var(--surface-2); }
.notification-title { font-weight: 600; }
.notification.unread .notification-title { font-weight: 800; }
.notification-body { color: var(--muted); font-size: 0.9rem; }
.notification-time { color: var(--muted); font-size: 0.78rem; }

/* ---------- Layout ---------- */

.app-main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--gutter) 24px; }

.app-footer > span { display: block; }
.app-footer {
  padding: 14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
  border-top: 1px solid var(--border);
}

/* The "you seem to be in another city" card floats above the page so it works over the List and the Map. */
.city-notice { position: fixed; z-index: 40; left: var(--gutter); right: var(--gutter); bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }
.city-notice[hidden] { display: none; }
.city-notice-card { padding: 14px 16px; border: 1px solid var(--action); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.city-notice-card p { margin: 0 0 10px; }
.city-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.notice { padding: 16px; margin: 16px 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--action);
  color: var(--on-primary);
  box-shadow: var(--glow-box);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.button.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: none; }

/* ---------- List View ---------- */

/* The toolbar is shared: pinned above the list, floating over the map. */
.toolbar-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
}

.list-view .toolbar-bar {
  position: sticky;
  top: calc(var(--header-h) + env(safe-area-inset-top));
  z-index: 10;
  background: var(--bg);
}

.list-title { font-size: 1.05rem; font-weight: 700; }
.list-title .count { color: var(--accent-text); }
.list-sub { color: var(--muted); font-size: 0.85rem; }


.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.bar-row {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 14px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.bar-row.is-closed { opacity: 0.72; }
.bar-row:focus-visible { background: var(--surface-2); }

.row-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bar-name { font-size: 1.05rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.bar-address { margin-top: 2px; color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }
.bar-address.none { font-style: italic; opacity: 0.8; }
.row-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; }
.row-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text);
  white-space: nowrap;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.badge.open { color: var(--open); }
.badge.closed { color: var(--closed); }
.badge.unknown { color: var(--muted); }
.badge.unknown::before { background: transparent; border: 1.5px solid currentColor; }
.badge.busy { color: var(--busy); }
.badge.notbusy { color: var(--notbusy); }
.badge.plain::before { display: none; }
.badge.managed { color: var(--accent-text); border: 1px solid currentColor; background: transparent; }

.own-this-bar { margin-top: 4px; }
.own-this-bar a { font-weight: 700; color: var(--accent-text); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--text);
  background: transparent;
}
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip, var(--muted)); }

.feature-icons { display: inline-flex; gap: 4px; font-size: 1rem; line-height: 1; }

.list-status { display: grid; place-items: center; gap: 12px; padding: 22px 0; color: var(--muted); text-align: center; }

.skeleton { pointer-events: none; }
.skeleton .line { height: 12px; margin-top: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
.skeleton .line.title { height: 18px; width: 55%; margin-top: 0; }
.skeleton .line.short { width: 35%; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- Search, filters, sort ---------- */

.search-box { position: relative; flex: 1; min-width: 0; }

.search-input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 14px;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus-visible { outline-offset: 0; }

.filters-button { position: relative; gap: 8px; flex: none; padding: 0 14px; }
.filters-button.button { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: none; }

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--action);
  color: var(--on-primary);
  box-shadow: var(--glow-box);
  font-size: 0.78rem;
  font-weight: 800;
}

.toolbar-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 2px 0 10px; }
.toolbar-controls .hint { flex-basis: 100%; }
.toolbar-controls[data-view="map"] .sort-control { display: none; }

.result-count { padding: 4px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 0.85rem; font-weight: 700; }

.list-heading { margin: 4px 0 6px; }

.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.segmented button { min-height: 36px; min-width: 64px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-weight: 600; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--action); color: var(--on-primary); box-shadow: var(--glow-box); }
.segmented button:disabled { opacity: 0.45; cursor: not-allowed; }

/* The List | Map switch in the header: links, so each view has a real address. */
.view-switch a {
  display: inline-grid;
  place-items: center;
  min-height: var(--tap);
  min-width: 64px;
  padding: 0 14px;
  color: var(--muted);
  font-weight: 700;
  text-decoration: none;
}
.view-switch a[aria-current="page"] { background: var(--action); color: var(--on-primary); box-shadow: var(--glow-box); }

.chip.toggle { min-height: 36px; padding: 0 14px; cursor: pointer; background: var(--surface); }
.chip.toggle[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-primary); box-shadow: var(--glow-box); }
.chip.toggle[aria-pressed="true"] .dot { box-shadow: 0 0 0 2px #fff; }
.chip.toggle:disabled { opacity: 0.6; cursor: progress; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.chip.removable { gap: 4px; padding-right: 4px; background: var(--surface); }
.chip.removable button { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.chip.removable button:hover { background: var(--surface-2); color: var(--text); }
.link-button { border: 0; background: transparent; color: var(--accent-text); font-weight: 600; cursor: pointer; padding: 6px 4px; }

.distance { flex: none; color: var(--muted); font-size: 0.88rem; font-weight: 600; white-space: nowrap; }

/* ---------- Filter sheet ---------- */

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

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--tap); padding: 8px 0; cursor: pointer; border-bottom: 1px solid var(--border); }
.switch-row:last-child { border-bottom: 0; }
.switch-row > span { display: grid; gap: 2px; }
.switch-label { font-weight: 600; }
.switch-row input[type="checkbox"] { appearance: none; flex: none; width: 48px; height: 28px; border-radius: 999px; background: var(--border); position: relative; cursor: pointer; transition: background 0.15s ease; }
.switch-row input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s ease; }
.switch-row input[type="checkbox"]:checked { background: var(--action); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(20px); }

.sheet-footer { display: flex; gap: 10px; padding: 12px var(--gutter); border-top: 1px solid var(--border); background: var(--surface); flex: none; }
.sheet-footer .apply-button { flex: 1; }

/* ---------- Detail sheet ---------- */

.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.sheet-backdrop.open { opacity: 1; }

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 41;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
  max-height: 88dvh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open { transform: translateY(0); }
.sheet.dragging { transition: none; }

.sheet-handle { display: grid; place-items: center; height: 28px; cursor: grab; touch-action: none; flex: none; }
.sheet-handle::before { content: ""; width: 44px; height: 5px; border-radius: 3px; background: var(--border); }

.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 0 var(--gutter) 10px; flex: none; }
.sheet-title { font-size: 1.3rem; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) 24px; display: grid; gap: 18px; }

.section-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.kv { display: grid; gap: 8px; }
.kv a, .kv span { overflow-wrap: anywhere; }

.hours { width: 100%; border-collapse: collapse; }
.hours td { padding: 5px 0; vertical-align: top; }
.hours td:first-child { width: 4.2em; color: var(--muted); }
.hours tr.today td { font-weight: 700; color: var(--text); }
.hours tr.today td:first-child { color: var(--accent-text); }

.feature-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.feature-list li { display: flex; align-items: baseline; gap: 8px; }
.feature-list .note { color: var(--muted); font-size: 0.82rem; }

.link-row { display: flex; flex-wrap: wrap; gap: 10px; }
.bar-links { margin-top: 10px; }

/* ---------- The bar card: photos, title, actions, the folded about box, comments and tonight's activity ---------- */

/* Nearly the whole screen on a phone; the close button floats over the photos and the name is drawn under them. */
.sheet.bar-sheet { height: 96vh; height: 96dvh; max-height: none; }
.bar-sheet .sheet-head { position: absolute; top: 34px; right: calc(var(--gutter) + 6px); z-index: 3; padding: 0; }
.bar-sheet .sheet-head .icon-button { background: rgb(0 0 0 / 0.55); color: #fff; border-color: transparent; backdrop-filter: blur(6px); }
.bar-sheet .sheet-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bar-sheet .sheet-body { display: block; padding-top: 0; }

.bar-card { display: grid; gap: 22px; }
.bar-card-main, .bar-card-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.bar-card.skeleton .line { margin-top: 14px; }

/* Photos: one at a time, swiped sideways, edge to edge on a phone. */
.carousel { position: relative; margin: 0 calc(var(--gutter) * -1); background: var(--surface-2); overflow: hidden; }
.carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-cell { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.carousel-slide { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 58vh; max-height: 58dvh; }
.carousel-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-counter { position: absolute; top: 12px; left: 12px; padding: 3px 10px; border-radius: 999px; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.8rem; font-weight: 700; }
.carousel-dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.55); box-shadow: 0 0 2px rgb(0 0 0 / 0.5); transition: transform 0.15s ease; }
.carousel-dot.on { background: #fff; transform: scale(1.3); }
.carousel-arrow { position: absolute; top: 50%; width: 40px; height: 40px; margin-top: -20px; display: none; place-items: center; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.carousel-arrow.previous { left: 12px; }
.carousel-arrow.next { right: 12px; }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .carousel-arrow { display: grid; }
}
.carousel.empty { display: grid; place-items: center; align-content: center; gap: 6px; height: 200px; background: linear-gradient(160deg, color-mix(in srgb, var(--chip, var(--muted)) 55%, var(--surface-2)), var(--surface-2)); }
.carousel-initial { font-size: 4.2rem; font-weight: 800; line-height: 1; color: var(--text); }
.carousel-empty-text { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
.carousel.empty.has-stock { position: relative; display: block; overflow: hidden; }
.carousel-stock { display: block; width: 100%; height: 100%; object-fit: cover; }
.carousel-stock-note { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 4px 10px; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 0.75rem; font-weight: 700; }

/* The name, big, with what matters right now under it. */
.bar-card-title { display: grid; gap: 10px; }
.bar-card-name { font-size: 1.65rem; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.bar-card-title .row-status, .bar-card-title .row-extras { margin-top: 0; }

/* The actions in a row of pills that scrolls sideways on a narrow phone. */
.action-bar { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
.action-bar::-webkit-scrollbar { display: none; }
.action-bar > * { flex: none; }
.action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.action-pill.split { padding: 0; overflow: hidden; gap: 0; }
.action-pill.split button { min-height: calc(var(--tap) - 2px); padding: 0 16px; border: 0; background: transparent; color: inherit; font-weight: 700; cursor: pointer; }
.action-pill.split button + button { border-left: 1px solid var(--border); }
.action-pill.split button:disabled { opacity: 0.55; cursor: progress; }
.busy-buttons .report-busy { color: var(--busy); }
.busy-buttons .report-notbusy { color: var(--notbusy); }
.action-count:not(:empty) { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--action); color: var(--on-primary); font-size: 0.78rem; text-align: center; }
.action-pill.heart { display: inline-flex; width: auto; height: auto; padding: 0 14px; border: 1px solid var(--border); background: var(--surface-2); }
.action-pill[aria-pressed="true"], .action-pill.split button[aria-pressed="true"] { background: var(--action); border-color: var(--action); color: var(--on-primary); box-shadow: var(--glow-box); }
.action-pill.heart[aria-pressed="true"] { background: var(--surface-2); border-color: var(--heart, #e5384f); color: var(--heart, #e5384f); box-shadow: none; }
.action-pill.check-in { background: var(--action); border-color: var(--action); color: var(--on-primary); box-shadow: var(--glow-box); }
.action-pill.check-in.is-on { background: color-mix(in srgb, var(--action) 18%, var(--surface-2)); color: var(--text); box-shadow: none; }
.action-pill:disabled { opacity: 0.6; cursor: progress; }
.want-to-go-mark::before { content: "＋"; }
.want-to-go[aria-pressed="true"] .want-to-go-mark::before { content: "✓"; }
.add-photo-wrap { display: inline-flex; }
.bar-card-stats { color: var(--muted); font-size: 0.88rem; }
.bar-card-stats:empty { display: none; }

/* After a check-in: how busy is it, while they are standing there. */
.busy-ask { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border: 1px solid var(--action); border-radius: var(--radius); background: color-mix(in srgb, var(--action) 10%, var(--surface)); }
.busy-ask p { font-weight: 700; }

/* Who added a visitor's photo, and Report or Delete, over the picture. */
.carousel-cell { position: relative; }
.photo-overlay { position: absolute; left: 12px; right: 12px; bottom: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; pointer-events: none; }
.photo-overlay-who, .photo-overlay-action { padding: 4px 10px; border-radius: 999px; background: rgb(0 0 0 / 0.6); color: #fff; font-size: 0.8rem; font-weight: 700; }
.photo-overlay-who:empty { visibility: hidden; }
.photo-overlay-action { border: 0; pointer-events: auto; cursor: pointer; min-height: 32px; }
.action-pill.heart .heart-icon { width: 20px; height: 20px; }
.action-bar .segmented { border-radius: 999px; background: var(--surface-2); }
.action-bar .segmented button { min-height: calc(var(--tap) - 2px); }

/* The about box, folded like a video's description. */
.about-box { border-radius: var(--radius); background: var(--surface-2); }
.about-box > summary { display: grid; gap: 4px; padding: 12px 14px; cursor: pointer; list-style: none; }
.about-box > summary::-webkit-details-marker { display: none; }
.about-address { font-weight: 700; overflow-wrap: anywhere; }
.about-features, .about-usually { color: var(--muted); font-size: 0.88rem; }
.about-features { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.about-feature { display: inline-flex; align-items: center; gap: 5px; }
.about-more::before { content: "…more"; font-weight: 700; color: var(--text); }
.about-box[open] .about-more::before { content: "Show less"; }
.about-body { display: grid; gap: 16px; padding: 0 14px 14px; }

/* Comments come first beside the photos on a desktop, and right under the about box on a phone. */
.comments { display: grid; gap: 14px; scroll-margin-top: 12px; }
.comments-heading { display: flex; align-items: baseline; gap: 8px; font-size: 1.2rem; font-weight: 800; }
.comments-count { color: var(--muted); font-weight: 700; }
.comment-composer { display: grid; gap: 6px; }
.comment-input { width: 100%; box-sizing: border-box; min-height: var(--tap); max-height: 10em; padding: 10px 14px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); color: var(--text); font: inherit; resize: none; overflow-y: hidden; }
.comment-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.comment-post { min-height: 38px; padding: 0 16px; border-radius: 999px; }
.comment-post:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.comments-empty { padding: 8px 0; }
.comment-list { display: grid; gap: 16px; list-style: none; margin: 0; padding: 0; }
.comment { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start; }
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.comment-avatar.initial { display: grid; place-items: center; font-weight: 700; color: var(--muted); }
.comment-body { min-width: 0; }
.comment-meta, .comment-text { margin: 0; }
.comment-meta { color: var(--muted); font-size: 0.82rem; }
.comment-text { overflow-wrap: anywhere; }

.activity { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.activity .fold { border: 1px solid var(--border); border-radius: var(--radius); }
.activity .fold > summary { min-height: var(--tap); display: flex; align-items: center; padding: 0 14px; font-weight: 700; cursor: pointer; }
.activity .fold[open] > summary { border-bottom: 1px solid var(--border); }
.feature-voting { display: grid; gap: 10px; padding: 12px 14px; }
.fold-body { padding: 12px 14px; }

/* ---------- Tonight: a bar's activity, the city's feed above the list and over the map ---------- */

.tonight-tag { margin-left: 8px; color: var(--muted); font-size: 0.82rem; white-space: nowrap; }
.tonight-photo { display: block; margin-top: 6px; width: 100%; max-width: 240px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface-2); }
.tonight-row-button { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; width: 100%; padding: 6px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.tonight-row-button:focus-visible { background: var(--surface-2); }
.tonight-list { gap: 6px; }

.badge.comments { color: var(--accent-text); }
.row-comment { margin-top: 8px; color: var(--muted); font-size: 0.88rem; font-style: italic; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.feature-list.votable li { align-items: center; }
.feature-list.votable .feature-name { flex: 1; display: grid; }
.feature-list.votable li.off .feature-name { color: var(--muted); }
.segmented.small button { min-height: 30px; min-width: 44px; padding: 0 10px; }
.report-closed { margin: 0; }

.hint { color: var(--muted); font-size: 0.85rem; }

/* ---------- Map View ---------- */

/* The map fills the screen under the header; the toolbar and card float over it. */
body.view-map .app-main { max-width: none; padding: 0; display: flex; }
body.view-map .app-footer { display: none; }

.map-view {
  position: relative;
  flex: 1;
  height: calc(100vh - var(--header-h) - env(safe-area-inset-top));
  height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
  min-height: 320px;
  overflow: hidden;
}

/* MapLibre's own stylesheet makes its container position: relative; this selector is more specific. */
.map-view > .map-canvas { position: absolute; inset: 0; background: var(--bg); }

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  gap: 6px;
  padding: 8px var(--gutter) 0;
  pointer-events: none; /* only the controls themselves take taps; the rest of the strip is map */
}
.map-overlay > * { pointer-events: auto; justify-self: start; max-width: 100%; }
.map-overlay .toolbar-bar { justify-self: stretch; padding: 0; max-width: 560px; }
.map-overlay .search-input,
.map-overlay .filters-button.button { box-shadow: var(--shadow); }
.map-overlay .toolbar-controls { margin: 0; }
.map-overlay .toolbar-controls .chip.toggle { box-shadow: var(--shadow); }
.map-overlay .active-filters { margin: 0; }
.map-overlay .chip.removable { box-shadow: var(--shadow); }
.map-overlay .hint { padding: 6px 10px; border-radius: 10px; background: var(--surface); }

.map-status {
  position: absolute;
  inset: auto 0 50% 0;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 0 auto;
  padding: 18px 22px;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter));
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  text-align: center;
  color: var(--muted);
  transform: translateY(50%);
}

.map-card {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  gap: 8px;
  max-width: 460px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.map-card-cover { display: block; width: calc(100% + 28px); height: 150px; margin: -14px -14px 2px; border-radius: var(--radius) var(--radius) 0 0; object-fit: cover; background: var(--surface-2); }
.map-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.map-card .row-status, .map-card .row-extras { margin-top: 0; }
.map-card-actions { display: flex; justify-content: flex-end; }

/* A finger pinches to zoom; the zoom buttons are for a mouse. */
@media (pointer: coarse) {
  .maplibregl-ctrl-zoom-in, .maplibregl-ctrl-zoom-out { display: none; }
  .maplibregl-ctrl-group:has(.maplibregl-ctrl-zoom-in) { display: none; }
}
.maplibregl-ctrl-attrib { font-size: 0.7rem; }

/* ---------- Appearance sheet ---------- */

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.theme-tile {
  display: grid;
  gap: 8px;
  padding: 8px;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.theme-tile[aria-pressed="true"] { border-color: var(--action); box-shadow: var(--glow-box); }
.theme-tile .name { font-weight: 700; }
.theme-tile .hint { margin-top: -4px; }

/* The preview carries data-theme and data-mode itself, so it shows that theme's colours whatever the page is using. */
.theme-preview {
  display: grid;
  gap: 6px;
  padding: 10px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.theme-preview .row { display: flex; align-items: center; gap: 6px; }
.theme-preview .card { flex: 1; height: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.theme-preview .pill { width: 38%; height: 10px; border-radius: 999px; background: var(--action); box-shadow: var(--glow-box); }
.theme-preview .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-accent); }
.theme-preview .dot + .dot { background: var(--brand-highlight); }
.theme-preview .text { font-weight: 800; font-size: 0.9rem; color: var(--accent-text); text-shadow: var(--glow-text); }

/* ---------- Hover ---------- */

/* Things you can press lift a little, take a brand-coloured ring and (in themes that have one) a glow. Only on devices that
   can really hover, so nothing sticks on a touch screen, and not at all for people who ask for less motion. */

.bar-row,
.button,
.chip.toggle,
.icon-button,
.brand-logo,
.theme-tile,
.view-switch a,
.segmented button,
.link-button {
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, filter 0.16s ease;
}

@media (hover: hover) {
  .bar-row:hover {
    background: var(--surface-2);
    border-color: var(--action);
    box-shadow: 0 0 0 2px var(--action), var(--shadow), var(--glow-box);
    transform: translateY(-3px);
  }
  .bar-row:hover .bar-name { color: var(--accent-text); text-shadow: var(--glow-text); }
  .bar-row:active { transform: translateY(0) scale(0.995); box-shadow: 0 0 0 2px var(--action); }

  .button:hover {
    transform: translateY(-2px);
    filter: brightness(1.1) saturate(1.1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--action) 55%, transparent), var(--glow-box);
  }
  .button.secondary:hover,
  .filters-button.button:hover {
    border-color: var(--action);
    box-shadow: 0 0 0 2px var(--action), var(--glow-box);
    filter: none;
  }
  .button:active { transform: translateY(0); }

  .chip.toggle:hover:not(:disabled) {
    border-color: var(--action);
    box-shadow: 0 0 0 2px var(--action), var(--glow-box);
    transform: translateY(-2px);
  }
  .chip.removable:hover { border-color: var(--action); }

  .brand:hover .brand-logo { transform: translateY(-2px) rotate(-8deg); }

  .icon-button:hover {
    background: var(--surface-2);
    border-color: var(--action);
    box-shadow: 0 0 0 2px var(--action), var(--glow-box);
    transform: translateY(-2px) rotate(-8deg);
  }

  .view-switch a:not([aria-current="page"]):hover,
  .segmented button:not([aria-pressed="true"]):not(:disabled):hover { color: var(--text); background: var(--surface-2); }

  .theme-tile:hover {
    border-color: var(--action);
    box-shadow: 0 0 0 2px var(--action), var(--glow-box);
    transform: translateY(-3px) scale(1.02);
  }

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

@media (prefers-reduced-motion: reduce) {
  .bar-row, .button, .chip.toggle, .icon-button, .brand-logo, .theme-tile, .view-switch a, .segmented button, .link-button { transition: none; }
  .bar-row:hover, .button:hover, .chip.toggle:hover, .icon-button:hover, .brand:hover .brand-logo, .theme-tile:hover { transform: none; }
}

/* On a phone the header holds the logo, the List | Map switch, the account control and the Appearance button in 375 px (and 320),
   so the name beside the logo gives way and the controls tighten. */
@media (max-width: 479px) {
  .app-header { gap: 8px; }
  .brand-text { display: none; }
  .brand-logo { width: 48px; height: 48px; }
  .header-actions { gap: 6px; }
  .view-switch a { min-width: 52px; padding: 0 10px; }
  .account-signin { padding: 0 12px; }
  .header-icon { width: 34px; }
  .header-account { gap: 0; }
  .app-header .brand-logo { width: 40px; height: 40px; }
  .app-header .icon-button { width: 40px; }
  .view-switch a { min-width: 46px; padding: 0 8px; }
}

@media (max-width: 359px) {
  :root { --gutter: 12px; }
  .app-header { gap: 4px; }
  .header-actions { gap: 3px; }
  .view-switch a { min-width: 38px; padding: 0 5px; }
  .account-signin { padding: 0 6px; font-size: 0.9rem; }
  .header-icon { width: 30px; }
  .app-header .brand-logo { width: 34px; height: 34px; }
  .app-header .icon-button { width: 36px; }
}
/* ---------- Larger screens ---------- */

@media (min-width: 600px) {
  .account-name { display: inline; }
  .account-button { padding-right: 12px; }
  .owner-icon { display: inline-grid; }
  .phone-only { display: none; }
  /* The List | Map switch sits in the middle of the header, apart from the actions on the right. */
  .public-header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .public-header .header-actions { justify-self: end; }
  .notification-panel { position: absolute; top: calc(100% + 8px); left: auto; right: 0; width: 22rem; max-width: calc(100vw - 2 * var(--gutter)); }
  :root { --gutter: 24px; }
  .brand-tagline { display: block; }
  .bar-list { gap: 12px; }
}

@media (min-width: 900px) {
  .map-card { left: 16px; bottom: 32px; }
  .sheet {
    left: auto;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    width: 440px;
    max-height: none;
    border: 1px solid var(--border);
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    transform: translateX(100%);
  }
  .sheet.open { transform: translateX(0); }
  .sheet-handle { display: none; }
  .sheet-head { padding-top: 16px; }
  .sheet-backdrop { background: rgba(0, 0, 0, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-backdrop, .skeleton .line { transition: none; animation: none; }
}

/* ---- a person's marks on a bar: the heart, Want to go and Visited, and the short message that asks a visitor to sign in ---- */
.bar-list li { position: relative; }
.bar-list li > .heart { position: absolute; top: 2px; right: 2px; }
.bar-list li:has(> .heart) > .bar-row { padding-right: 52px; }
.bar-row:has(> .bar-thumb) { display: flex; align-items: flex-start; gap: 12px; }
.row-main { flex: 1; min-width: 0; }
.bar-thumb { flex: none; width: 96px; height: 96px; border-radius: 16px; object-fit: cover; background: var(--surface-2); }
.bar-thumb.stock { position: relative; display: block; overflow: hidden; }
.bar-thumb.stock img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bar-thumb.placeholder { display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--chip) 38%, var(--surface-2)); }
.heart {
  --heart: #e5384f;
  width: var(--tap);
  height: var(--tap);
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.heart-icon { width: 24px; height: 24px; fill: currentColor; }
.heart-solid { display: none; }
.heart[aria-pressed="true"] { color: var(--heart); }
.heart[aria-pressed="true"] .heart-solid { display: inline; }
.heart:focus-visible { outline: 2px solid var(--action); outline-offset: -4px; border-radius: 12px; }
.mark-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.map-card-actions { align-items: center; gap: 4px; }
.toast {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin-inline: auto;
  width: max-content;
  max-width: min(92vw, 420px);
  z-index: 80;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #1f2328;
  color: #fff;
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.35);
}
.toast-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toast.success .toast-icon { color: #4cc38a; }
.toast.info .toast-icon { color: #6cb4ff; }
.toast.error .toast-icon { color: #ff7b7b; }
.toast-text { display: grid; gap: 2px; min-width: 0; }
.toast-title { font-weight: 700; overflow-wrap: anywhere; }
.toast-message { color: rgb(255 255 255 / 0.78); font-size: 0.9rem; overflow-wrap: anywhere; }
.toast-link { color: #8cc7ff; font-weight: 700; margin-top: 2px; }
.toast-close { flex: none; margin: -6px -8px -6px 0; width: var(--tap); height: var(--tap); border: 0; background: transparent; color: rgb(255 255 255 / 0.75); font-size: 1rem; cursor: pointer; }
.toast-close:focus-visible { outline: 2px solid #8cc7ff; outline-offset: -6px; border-radius: 12px; }

/* ---- the confirm sheet ---- */
.sheet.confirm-sheet { z-index: 70; }
.sheet-backdrop:has(+ .sheet.confirm-sheet) { z-index: 69; }
.confirm-message { color: var(--muted); }
.sheet.confirm-sheet .sheet-body { padding-bottom: 12px; }
@media (min-width: 900px) {
  .sheet.confirm-sheet {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(440px, 92vw);
    border: 1px solid var(--border);
    border-radius: 20px;
    opacity: 0;
    transform: translate(-50%, -46%);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .sheet.confirm-sheet.open { opacity: 1; transform: translate(-50%, -50%); }
}

/* On a tablet the bar card's photos are wider than tall, and the list thumbnails grow. */
@media (min-width: 600px) {
  .carousel-slide { aspect-ratio: 16 / 10; }
  .bar-thumb { width: 112px; height: 112px; }
  .bar-sheet .sheet-body { padding-left: var(--gutter); padding-right: var(--gutter); }
}

/* On a desktop the bar card is a large card in the middle of the screen: photos, title, actions and about on the left, comments and
   tonight's activity on the right. */
@media (min-width: 900px) {
  .sheet.bar-sheet {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    width: min(1180px, 94vw);
    height: min(880px, 90vh);
    height: min(880px, 90dvh);
    border: 1px solid var(--border);
    border-radius: 22px;
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -47%) scale(0.98);
    transition: transform 0.22s ease, opacity 0.22s ease;
  }
  .sheet.bar-sheet.open { opacity: 1; transform: translate(-50%, -50%); }
  .sheet-backdrop:has(+ .sheet.bar-sheet) { background: rgba(0, 0, 0, 0.6); }
  .bar-sheet .sheet-head { top: 14px; right: 14px; }
  .bar-sheet .sheet-body { flex: 1; min-height: 0; padding: 0; overflow: hidden; }
  .bar-card { grid-template-columns: minmax(0, 1.5fr) minmax(340px, 1fr); gap: 0; height: 100%; }
  .bar-card-main, .bar-card-side { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 28px; }
  .bar-card-main { padding: 0 24px; }
  .bar-card-side { padding: 24px; border-left: 1px solid var(--border); }
  .carousel { margin: 0 -24px; }
  .carousel-slide { aspect-ratio: 16 / 10; max-height: 62vh; }
  .carousel.empty { height: 260px; }
  .action-bar { margin: 0; padding: 2px 0 4px; flex-wrap: wrap; }
  .bar-card-name { font-size: 2rem; }
  .map-card { max-width: 520px; }
}
/* ---- "Save as my default" at the end of the Filters sheet ---- */
.save-default { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-top: 4px; }

.scope-inline { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.scope-inline a { font-weight: 700; }

/* ---------- LIVE Activity: the panel on the right (wide screens), the sheet and previews (phones), the Activity button ---------- */

:root { --panel-w: clamp(290px, 33vw, 460px); --live: #ff3b30; }

.app-body { flex: 1; display: flex; min-height: 0; width: 100%; }
.app-body > .app-main { min-width: 0; }
.activity-panel { display: none; }

/* "● LIVE": the word and the dot in red, the dot pulsing (still when motion is reduced). */
.live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--live); font-weight: 900; letter-spacing: 0.06em; }
.live-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); animation: live-pulse 1.8s ease-out infinite; }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.live-title { font-size: 1.15rem; font-weight: 800; }
.live-head { display: grid; gap: 2px; }
.live-bar-name { font-size: 1.35rem; font-weight: 800; overflow-wrap: anywhere; }
.live-context { font-weight: 600; }
/* The chips scroll sideways, so the row needs its own height: in the panel's or the sheet's grid it would otherwise shrink to a sliver. */
.live-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; min-height: max-content; flex-shrink: 0; }
.live-filters::-webkit-scrollbar { display: none; }
.live-filters .chip.toggle { flex: none; min-height: 32px; padding: 0 12px; }
.live-list { gap: 4px; }
.live-list .comment { padding: 6px; }
.live-empty { padding: 12px 0; }
.live-empty a { font-weight: 700; margin-left: 4px; }
/* A visitor's LIVE: the invitation to sign in or sign up, in place of the posts. */
.live-signin { display: grid; gap: 12px; justify-items: start; padding: 16px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface-2); }
.live-signin p { margin: 0; }

.activity-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
}
.activity-button .action-count:empty { display: none; }
.activity-button[aria-expanded="true"] { border-color: var(--live); box-shadow: 0 0 0 1px color-mix(in srgb, var(--live) 45%, transparent); }

/* My Bars has no Following / Discover. */
.toolbar-controls[data-view="mybars"] .scope-control { display: none; }

.back-to-results { display: none; justify-self: start; padding: 10px 0 0; font-size: 0.95rem; }

/* The button is the red dot and the count; on a phone it opens the feed as a sheet. */
@media (max-width: 599px) {
  .activity-button { gap: 4px; padding: 0 7px; }
  .activity-button .action-count { min-width: 0; padding: 0 5px; }
}

/* Tablets and wider: the main area and the panel side by side; the panel stays the height of the window and scrolls on its own. */
@media (min-width: 768px) {
  .app-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--panel-w); align-items: start; }
  body.activity-collapsed .app-body { grid-template-columns: minmax(0, 1fr); }
  .activity-panel {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + env(safe-area-inset-top));
    height: calc(100vh - var(--header-h) - env(safe-area-inset-top));
    height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
    border-left: 1px solid var(--border);
    background: var(--surface);
  }
  body.activity-collapsed .activity-panel { display: none; }
  /* Rows as tall as their content, so the filter chips (which scroll sideways) are never squeezed by the panel's fixed height. */
  .live-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-auto-rows: max-content; align-content: start; gap: 12px; padding: 18px 18px 28px; }

  /* A bar opens in the main area, beside its own LIVE Activity, rather than over everything. */
  .sheet.bar-sheet {
    left: 0;
    right: var(--panel-w);
    top: calc(var(--header-h) + env(safe-area-inset-top));
    bottom: 0;
    width: auto;
    height: auto;
    border: 0;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: translateX(-2%);
  }
  .sheet.bar-sheet.open { opacity: 1; transform: none; }
  body.activity-collapsed .sheet.bar-sheet { right: 0; border-right: 0; }
  .sheet-backdrop:has(+ .sheet.bar-sheet) { display: none; }
  .bar-sheet .back-to-results { display: inline-flex; }
  .bar-sheet .sheet-head { top: 12px; }

  /* With the panel open the bar's comments and activity are there, so the card is one column of details and actions, with
     "Does it have…?" (which the panel does not show) always open below them and its button scrolling to it. */
  body:not(.activity-collapsed) .bar-sheet .bar-card { grid-template-columns: minmax(0, 1fr); align-content: start; overflow-y: auto; overscroll-behavior: contain; }
  body:not(.activity-collapsed) .bar-sheet .bar-card-main,
  body:not(.activity-collapsed) .bar-sheet .bar-card-side { overflow: visible; }
  body:not(.activity-collapsed) .bar-sheet .bar-card-side { border-left: 0; border-top: 1px solid var(--border); padding-bottom: 40px; }
  body:not(.activity-collapsed) .bar-sheet .bar-card-side > :not(#bar-panel-features),
  body:not(.activity-collapsed) .bar-sheet .panel-button:not([data-panel="features"]) { display: none; }
  body:not(.activity-collapsed) .bar-sheet #bar-panel-features[hidden] { display: block !important; }
  body:not(.activity-collapsed) .bar-sheet .bar-card-main,
  body:not(.activity-collapsed) .bar-sheet .bar-card-side { max-width: 980px; margin: 0 auto; width: 100%; }
}

/* ---------- Celebrations: confetti and emoji from the button pressed ---------- */

.celebrate-layer { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.celebrate-piece { position: absolute; display: block; will-change: transform, opacity; }
.celebrate-emoji { position: absolute; font-size: 1.6rem; line-height: 1; will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
}

/* On a phone the header holds List | Map | My Bars and the Activity button (the only way into LIVE Activity there), so the heart (My Bars
   has its own view) and a visitor's bell (which only asks them to sign in, beside the Sign in button) give way, and the switch tightens
   without letting its labels wrap. */
@media (max-width: 599px) {
  .public-header .header-heart,
  .public-header button.header-bell { display: none; }
  .public-header .view-switch { flex-shrink: 0; }
  .public-header .view-switch a { min-width: 0; padding: 0 7px; font-size: 0.88rem; white-space: nowrap; }
}
/* On a tablet the header also holds the Activity button beside List | Map | My Bars, so the brand's name and the person's name give
   way (the logo and the picture stay) and the switch keeps its labels whole. */
@media (min-width: 600px) and (max-width: 1099px) {
  .public-header .brand-text,
  .public-header .account-name { display: none; }
  .public-header .view-switch { flex-shrink: 0; }
  .public-header .view-switch a { white-space: nowrap; }
}
@media (max-width: 479px) {
  .public-header { gap: 4px; }
  .public-header .header-actions { gap: 2px; }
  .public-header .view-switch a { padding: 0 4px; font-size: 0.84rem; }
  .public-header .account-signin { padding: 0 7px; }
  .public-header .icon-button { width: 34px; }
  .public-header .brand-logo { width: 32px; height: 32px; }
}
@media (max-width: 359px) {
  /* The smallest phones: the Activity button is the flashing dot alone. */
  .public-header .activity-button .action-count { display: none; }
  .public-header .brand-logo { width: 30px; height: 30px; }
  .public-header .view-switch a { padding: 0 4px; font-size: 0.78rem; }
  .public-header .account-signin { padding: 0 6px; font-size: 0.85rem; }
}