/* CruisingGays v2 components - the restyled canvas, visual system "H" (docs/design/pages-h/*.html,
   docs/design/canvas-update-brief.md). Every class is prefixed cg-. Depends only on tokens.css.
   Figtree 400/600 only; Instrument Serif italic only for big headings (H1, section headings, panel titles). */

/* Page-level values that are not design tokens (tokens.json has none for them). */
:root {
  --w-regular: 400;   /* Figtree: only 400 and 600 are loaded */
  --w-strong: 600;
  --page-max: 1280px;
  --gutter: 32px;
}
@media (max-width: 900px) {
  :root { --gutter: 16px; }
}

/* ---- Base ---------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cg-body { margin: 0; background: var(--ground); color: var(--ink); font: var(--w-regular) 15px/1.5 var(--font-sans); }
.cg-body [hidden] { display: none !important; }
.cg-body a { color: var(--link); text-decoration: none; }
.cg-body a:hover { color: var(--accent-hover); }
.cg-body :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Pill search boxes draw their own focus ring on the pill; the square ring on the bare input inside them doubled it. */
.cg-body .cg-search input:focus-visible, .cg-body .cg-hsearch__box input:focus-visible, .cg-body .cg-mp-city input:focus-visible { outline: none; }
.cg-body .cg-search:focus-within, .cg-body .cg-mp-city:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(208, 21, 122, .18); }
.cg-body .cg-hsearch__box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(208, 21, 122, .18), var(--shadow-map); }
.cg-body button { font: inherit; cursor: pointer; color: inherit; }
.cg-body img { max-width: 100%; }
.cg-body h1, .cg-body h2, .cg-body h3 { margin: 0; }
.cg-body strong, .cg-body b { font-weight: var(--w-strong); }
.cg-wrap { max-width: var(--page-max); margin: 0 auto; padding-inline: var(--gutter); }
.cg-num { font-variant-numeric: tabular-nums; }
.cg-icon { flex: none; display: inline-block; vertical-align: middle; }
.cg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cg-skip { position: absolute; left: -9999px; top: 8px; z-index: 3100; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--ink); color: #fff !important; font-weight: var(--w-strong); }
.cg-skip:focus { left: 8px; }
.cg-body .cg-only-narrow { display: none; }
@media (max-width: 900px) {
  .cg-body .cg-only-wide { display: none; }
  .cg-body .cg-only-narrow { display: inline; }
  .cg-body .cg-tag.cg-only-narrow { display: inline-flex; }
}

/* ---- Header: logo B · search · Events · Log in / Join free ------------------------------------ */
.cg-top { background: var(--ground); border-bottom: 1px solid var(--border); }
.cg-top .cg-wrap { display: flex; align-items: center; gap: 20px; height: 76px; }
.cg-logo { display: flex; align-items: center; flex: none; min-height: 44px; }
.cg-logo__mark { display: block; width: 120px; height: 59px; background: var(--ink);
  -webkit-mask: url(/Assets/Images/cglogo.png) center / contain no-repeat; mask: url(/Assets/Images/cglogo.png) center / contain no-repeat; }
.cg-top__fill { flex: 1; }
.cg-search { position: relative; display: flex; align-items: center; gap: 10px; flex: 1 1 300px; max-width: 480px; height: 46px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--surface); padding: 0 8px 0 18px; color: var(--ink-caption); }
.cg-search:focus-within { border-color: var(--accent); }
.cg-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: var(--w-strong) 15px/1 var(--font-sans); color: var(--ink); outline: none; }
.cg-body .cg-search__hint { flex: none; font-size: 13px; color: var(--ink-caption); padding: 0 10px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; }
.cg-body .cg-search__hint:hover { color: var(--link); }
.cg-search__list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1300; list-style: none; margin: 0; padding: 6px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-card); max-height: 60vh; overflow-y: auto; }
.cg-search__list li { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-s); color: var(--ink); cursor: pointer; font-size: 15px; }
.cg-search__list li:hover, .cg-search__list li[aria-selected="true"] { background: var(--surface-soft); }
.cg-nav { display: flex; gap: 2px; font-size: 15px; }
.cg-body .cg-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--ink-muted); }
.cg-body .cg-nav a:hover { background: var(--surface-soft); color: var(--ink); }
.cg-acct { display: flex; gap: 6px; align-items: center; font-weight: var(--w-strong); font-size: 15px; }
.cg-body .cg-acct > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--ink); }
.cg-body .cg-acct > a.cg-acct__join { height: 42px; min-height: 42px; padding: 0 20px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); }
.cg-body .cg-acct > a.cg-acct__join:hover { background: var(--ink); color: #fff; }
.cg-usermenu { position: relative; }
/* Members / Add a place duplicate the header nav inside the menu; shown only where .cg-nav is hidden (phones). */
.cg-body .cg-usermenu__panel a.cg-usermenu__narrow { display: none; }
.cg-usermenu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill); border: 1.5px solid var(--ink); cursor: pointer; }
.cg-usermenu summary::-webkit-details-marker { display: none; }
.cg-usermenu__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-usermenu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 1200; min-width: 190px; padding: 6px; border-radius: var(--radius-m); background: var(--surface); box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.cg-body .cg-usermenu__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-s); color: var(--ink); font-weight: var(--w-regular); }
.cg-body .cg-usermenu__panel a:hover { background: var(--surface-soft); }

/* ---- Breadcrumb: Home › Country › City › Category › Name --------------------------------------- */
.cg-crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 14px; color: var(--ink-caption); }
.cg-crumbs li + li::before { content: "\203A"; margin-right: 8px; }
.cg-crumbs li[aria-current] { color: var(--ink); }
.cg-body .cg-crumbs a { color: var(--ink-caption); display: inline-block; padding: 12px 0; margin: -12px 0; }
.cg-body .cg-crumbs a:hover { color: var(--link); }

/* ---- Buttons: one pink primary per region, soft pills for the rest -------------------------------- */
.cg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; font-weight: var(--w-strong); white-space: nowrap; text-decoration: none; }
.cg-body .cg-btn--primary { height: 48px; padding: 0 22px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 16px; box-shadow: var(--shadow-primary); }
.cg-body .cg-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.cg-body .cg-btn--soft { height: 48px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--surface-soft); color: var(--ink); font-size: 16px; }
.cg-body .cg-btn--soft:hover { background: var(--surface-warm-strong); color: var(--ink); }
.cg-body .cg-btn--round { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-card); }
.cg-body .cg-btn--icon { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--surface-soft); color: var(--ink); }
.cg-body .cg-btn--icon:hover { background: var(--surface-warm-strong); }
.cg-body .cg-btn--outline { height: 44px; padding: 0 20px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); }
.cg-btn[disabled] { opacity: .6; cursor: progress; }
.cg-linkbtn { background: none; border: 0; padding: 0; min-height: 44px; color: var(--link); font-weight: var(--w-strong); }

/* ---- Chips and tags --------------------------------------------------------------------------- */
.cg-chip, .cg-body a.cg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: var(--w-strong); line-height: 1.3; box-shadow: var(--shadow-card); white-space: nowrap; }
.cg-chip--ok { color: var(--on-live); }
.cg-chip--warn { background: var(--warn-tint); color: var(--on-warn); }
.cg-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-warm); color: var(--ink-muted); font-size: 13px; font-weight: var(--w-strong); }
.cg-livedot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--live-dot); margin-right: 6px; vertical-align: 1px; }

/* ---- Section heading ---------------------------------------------------------------------------- */
.cg-secrow { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; }
.cg-h2 { font: italic var(--w-regular) 40px/1.05 var(--font-display); }
.cg-body .cg-secrow > a { font-weight: var(--w-strong); font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }
.cg-secmeta { margin: 0; font-size: 14px; color: var(--ink-caption); }

/* ---- Cheat sheet (3 x 2 apricot panel) ----------------------------------------------------------- */
.cg-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; padding: 2px 16px; border-radius: 22px; background: var(--surface-warm); font-size: 14px; }
.cg-facts > div { display: flex; flex-direction: column; gap: 1px; padding: 9px 0; min-width: 0; }
.cg-facts > div:nth-child(n+4) { border-top: 1px solid var(--surface-divider); }
/* Four cells (Privacy / Cost unknown): a clean 2 x 2. */
.cg-facts--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cg-facts--2col > div:nth-child(3) { border-top: 1px solid var(--surface-divider); }
.cg-facts dt { font-size: 13px; font-weight: var(--w-strong); color: var(--ink-muted); }
.cg-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.cg-facts .cg-tone-warn { color: var(--warn); font-weight: var(--w-strong); }
.cg-facts .cg-tone-ok { color: var(--on-live); font-weight: var(--w-strong); }
.cg-facts__unknown dd { color: var(--ink-caption); }
.cg-body a.cg-facts__edit { display: block; width: fit-content; font-size: 13px; color: var(--ink-caption); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; padding: 6px 0; margin: -6px 0; }
.cg-body a.cg-facts__edit:hover { color: var(--link); }

/* ---- Map (Leaflet + tiles), shared by the hero ------------------------------------------------- */
.cg-mapbox { position: relative; height: 320px; border-radius: var(--radius-xxl); overflow: hidden; box-shadow: var(--shadow-map); background: var(--map); isolation: isolate; }
.cg-map { position: absolute; inset: 0; background: var(--map); z-index: 1; }
.cg-map .leaflet-tile-pane { filter: var(--map-tile-filter); }
.cg-map.leaflet-container { font-family: var(--font-sans); background: var(--map); }
.cg-map .leaflet-bar { border: 0; box-shadow: 0 4px 14px rgba(61, 15, 36, .15); border-radius: 16px; overflow: hidden; }
.cg-map .leaflet-bar a { color: var(--ink); width: 34px; height: 34px; line-height: 34px; }
.cg-map .leaflet-control-attribution { font-size: 11px; background: rgba(255, 253, 252, .85); color: var(--ink-caption); }
.cg-map .leaflet-control-attribution a { color: var(--ink-muted); }
.cg-maplock, .cg-body .cg-maplock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1100; border: 0; border-radius: var(--radius-pill); background: rgba(61, 15, 36, .82); color: #fff; font: var(--w-strong) 15px/1 var(--font-sans); min-height: 44px; padding: 0 18px; white-space: nowrap; }
.cg-pin { width: 22px !important; height: 22px !important; border-radius: 50%; background: var(--accent); border: 4px solid #fff; box-shadow: 0 0 0 8px rgba(208, 21, 122, .22), 0 6px 18px rgba(208, 21, 122, .5); cursor: pointer; }
.cg-npin { width: 14px !important; height: 14px !important; border-radius: 50%; background: var(--pin-secondary); border: 3px solid var(--ink); box-shadow: 0 2px 6px rgba(61, 15, 36, .35); }
.cg-map .leaflet-tooltip.cg-pinlabel { padding: 4px 12px; border: 0; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: var(--w-strong) 13px/1.4 var(--font-sans); box-shadow: var(--shadow-card); white-space: nowrap; }
.cg-map .leaflet-tooltip.cg-pinlabel::before { display: none; }
.cg-map .leaflet-popup-content-wrapper { border-radius: 16px; font-family: var(--font-sans); }
.cg-map .leaflet-popup-content { margin: 10px 14px; font-size: 15px; line-height: 1.4; color: var(--ink); }
.cg-map .leaflet-popup-content b { font-weight: var(--w-strong); }
.cg-map .leaflet-popup-content a { color: var(--link); font-weight: var(--w-strong); }
/* The hero map's first view as plain images (Ui/_HeroMap, Ui/StaticMap.cs), over the empty map until location.js has the
   interactive one drawn. Not clickable itself: a tap or hover on the box starts the interactive map. */
.cg-mapstatic { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; background: var(--map); }
.cg-mapstatic__tiles { position: absolute; inset: 0; filter: var(--map-tile-filter); }
.cg-mapstatic__tiles img { position: absolute; width: 256px; height: 256px; max-width: none; }
.cg-mapstatic .cg-pin { position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -11px; }
.cg-mapstatic .cg-npin { position: absolute; }
.cg-mapstatic__label { position: absolute; left: 50%; top: calc(50% + 21px); transform: translateX(-50%); padding: 4px 12px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink); font: var(--w-strong) 13px/1.4 var(--font-sans); box-shadow: var(--shadow-card); white-space: nowrap; }
.cg-mapstatic__attr { position: absolute; right: 0; bottom: 0; padding: 0 5px; font-size: 11px; line-height: 1.5; background: rgba(255, 253, 252, .85); color: var(--ink-caption); pointer-events: auto; }
.cg-mapstatic__attr a { color: var(--ink-muted); }
.cg-mapchip { position: absolute; z-index: 1100; }
.cg-mapchip--fresh { left: 16px; top: 16px; max-width: calc(100% - 172px); white-space: normal; }
.cg-body a.cg-mapchip--open { right: 16px; top: 16px; min-height: 32px; }
.cg-mapchip--transit, .cg-mapchip--note { left: 16px; bottom: 26px; max-width: calc(100% - 72px); white-space: normal; }
.cg-mapbar { display: none; }

/* ---- Speech-bubble comments ------------------------------------------------------------------------ */
.cg-comments { display: flex; flex-direction: column; gap: 14px; }
.cg-comment { display: flex; gap: 14px; }
.cg-av { flex: none; position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-warm-strong); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--w-strong); font-size: 15px; }
.cg-bubble { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 14px 18px 8px; border-radius: var(--radius-bubble); background: var(--surface); }
.cg-bubble__who { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-caption); }
.cg-bubble__who b, .cg-body .cg-bubble__who a { color: var(--ink); font-weight: var(--w-strong); font-size: 14px; }
.cg-bubble__text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.cg-bubble__foot { margin: 0; display: flex; justify-content: flex-end; }
.cg-body a.cg-bubble__report { font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; }
.cg-body a.cg-bubble__report:hover { color: var(--link); }
.cg-comment--new .cg-bubble { box-shadow: 0 0 0 3px var(--surface-warm-strong); }
/* Own comments (and any, for admins): Edit / Delete instead of Report, the in-place editor and the delete question
   (location.js). "edited" is a quiet label after the date; its title has the time. */
.cg-bubble__edited { font-size: 12px; color: var(--ink-caption); cursor: help; }
.cg-bubble__acts { display: inline-flex; align-items: center; gap: 4px; }
.cg-bubble__act { background: none; border: 0; font: inherit; font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); display: inline-flex; align-items: center; min-height: 32px; padding: 0 6px; cursor: pointer; }
.cg-bubble__act:hover, .cg-bubble__act:focus-visible { color: var(--link); }
.cg-bubble__act--danger:hover, .cg-bubble__act--danger:focus-visible { color: var(--on-warn); }
.cg-bubble__ask { margin: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
.cg-bubble__ask b { font-weight: var(--w-strong); }
.cg-bubble__ask .cg-btn { height: 36px; padding: 0 16px; font-size: 14px; box-shadow: none; }
.cg-bubble__editor { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 6px; }
.cg-bubble__editor textarea { width: 100%; min-height: 110px; resize: vertical; padding: 10px 14px; border-radius: var(--radius-m); border: 1.5px solid var(--border); background: var(--ground); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5; }
.cg-bubble__editor textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(208, 21, 122, .2); }
.cg-bubble__editbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.cg-bubble__editbar .cg-btn { height: 40px; padding: 0 18px; font-size: 15px; box-shadow: none; }
.cg-bubble__error { margin: 0 auto 0 0; font-size: 14px; font-weight: var(--w-strong); color: var(--on-warn); }
.cg-prompt, .cg-commentform { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 18px 18px 20px; border-radius: var(--radius-l); background: var(--surface); margin-top: 4px; }
.cg-prompt__ic { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--surface-warm-strong); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.cg-prompt__tx { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-prompt__tx b, .cg-prompt__tx label { font-size: 17px; font-weight: var(--w-strong); color: var(--ink); }
.cg-prompt__tx > span { font-size: 14px; color: var(--ink-caption); }
.cg-prompt__btns { display: flex; gap: 8px; flex: none; }
.cg-prompt .cg-btn { height: 46px; font-size: 15px; }
.cg-commentform { flex-direction: column; align-items: stretch; scroll-margin-top: 90px; }
.cg-commentform__head { display: flex; align-items: center; gap: 16px; }
.cg-commentform textarea { width: 100%; min-height: 120px; resize: vertical; padding: 12px 16px; border-radius: var(--radius-m); border: 1.5px solid var(--border); background: var(--ground); color: var(--ink); font: inherit; font-size: 16px; }
.cg-commentform textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(208, 21, 122, .2); }
.cg-commentform__foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.cg-commentform__foot .cg-btn { height: 46px; font-size: 15px; }
.cg-commentform__error { margin: 0 auto 0 0; font-size: 15px; font-weight: var(--w-strong); color: var(--on-warn); }

/* ---- Place cards (photo or map-tile thumbnail) ---------------------------------------------------- */
.cg-card, .cg-body a.cg-card { display: flex; flex-direction: column; gap: 8px; color: var(--ink); }
.cg-card__media { position: relative; display: block; height: 140px; border-radius: var(--radius-m); overflow: hidden; background: var(--surface-soft); }
.cg-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-card__media--none { display: flex; align-items: center; justify-content: center; color: var(--ink-caption); background: var(--surface-warm); }
.cg-card__name { font-size: 17px; font-weight: var(--w-strong); line-height: 1.3; }
.cg-card:hover .cg-card__name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.cg-card__meta { font-size: 14px; color: var(--ink-caption); margin-top: -4px; }
.cg-tile { overflow: hidden; }
/* Map thumbnails stand in for a missing photo: calm, like the map page's base map (map.css .leaflet-tile-pane), so the
   category badge is the one strong colour. A dark theme can set --map-tile-filter-calm. */
.cg-tile .cg-tiles { position: absolute; width: 768px; height: 768px; filter: var(--map-tile-filter-calm, saturate(.25) brightness(1.06) contrast(.92) sepia(.12)); }
.cg-tile .cg-tiles img { position: absolute; width: 256px; height: 256px; max-width: none; }
.cg-thumb__pin { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(208, 21, 122, .5); z-index: 2; }
/* Category badge of a place card without a photo (CategoryBadge.cs): bottom-left of the media box, over the map tile or the
   plain block. Cards with a photo carry it too, hidden while the photo is there (a failed photo is removed by the page script). */
.cg-catbadge { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; color: #fff; background: linear-gradient(150deg, #5c5560, #9a8f9e);
  box-shadow: 0 6px 14px -6px rgba(40, 10, 25, .55), 0 1px 3px rgba(40, 10, 25, .22); pointer-events: none; }
.cg-catbadge .cg-icon { width: 26px; height: 26px; }
img ~ .cg-catbadge { display: none; }
.cg-catbadge--bar { background: linear-gradient(150deg, #5a0b35, #d0157a); }
.cg-catbadge--outdoor { background: linear-gradient(150deg, #1f5e4a, #5fb38f); }
.cg-catbadge--sauna { background: linear-gradient(150deg, #4b3a8c, #a38ae0); }
.cg-catbadge--food { background: linear-gradient(150deg, #b5562a, #f0a36b); }
.cg-catbadge--stay { background: linear-gradient(150deg, #1f4f7a, #5b9bd5); }
.cg-catbadge--shop { background: linear-gradient(150deg, #7a3b12, #d98c3a); }
.cg-catbadge--gym { background: linear-gradient(150deg, #2d3a4a, #6c8299); }
.cg-catbadge--other { background: linear-gradient(150deg, #5c5560, #9a8f9e); }
@media (max-width: 899px) {
  .cg-catbadge { left: 8px; bottom: 8px; width: 36px; height: 36px; border-radius: 12px; }
  .cg-catbadge .cg-icon { width: 21px; height: 21px; }
}

/* ---- Side panels: members, stay, sponsored --------------------------------------------------------- */
.cg-members { padding: 24px; border-radius: var(--radius-xl); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.cg-members__title, .cg-stay h2 { font: italic var(--w-regular) 30px/1.05 var(--font-display); }
.cg-members p { margin: 0; }
.cg-members__count { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; }
.cg-members__count b { font-size: 22px; }
.cg-members__live { font-size: 13px; font-weight: var(--w-strong); color: var(--on-live); }
.cg-members__empty { color: var(--ink-muted); }
.cg-members__avatars { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.cg-ca, .cg-body a.cg-ca { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-warm-strong); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: var(--w-strong); }
.cg-body a.cg-ca:hover { color: var(--ink); box-shadow: 0 0 0 2px var(--border); }
.cg-ca__dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--live-dot); border: 2px solid var(--surface); }
.cg-members__last { font-size: 13px; color: var(--ink-caption); }
.cg-members__cta, .cg-body a.cg-members__cta { width: 100%; }
.cg-members__fine { font-size: 13px; color: var(--ink-caption); text-align: center; line-height: 1.45; }
.cg-stay { padding: 24px; border-radius: var(--radius-xl); background: var(--surface-warm); display: flex; flex-direction: column; gap: 6px; }
.cg-stay__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cg-stay h2 { display: flex; align-items: center; gap: 10px; }
.cg-stay__via { flex: none; font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); }
.cg-stay__list { list-style: none; margin: 0; padding: 0; }
.cg-stay__list li + li { border-top: 1px solid var(--surface-divider); }
.cg-body .cg-stay__list a { display: flex; gap: 12px; align-items: center; padding: 10px 0; color: var(--ink); font-size: 15px; }
.cg-stay__list a:hover b { text-decoration: underline; text-decoration-color: var(--accent); }
.cg-hthumb { flex: none; width: 72px; height: 56px; border-radius: var(--radius-s); overflow: hidden; background: var(--surface-warm-strong); display: grid; place-items: center; color: var(--ink-muted); }
.cg-hthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-hthumb .cg-icon { display: none; }
.cg-hthumb--noimg .cg-icon { display: block; }
.cg-htxt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cg-htxt b { line-height: 1.3; }
.cg-htxt span { font-size: 13px; color: var(--ink-caption); }
.cg-htxt em { font-style: normal; font-size: 13px; font-weight: var(--w-strong); color: var(--link); }
.cg-body a.cg-stay__all { font-weight: var(--w-strong); font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; }
.cg-stay__note { margin: 0; font-size: 13px; color: var(--ink-caption); }
.cg-sponsored { display: flex; flex-direction: column; gap: 6px; }
.cg-sponsored__label { margin: 0; font-size: 13px; font-weight: var(--w-strong); color: var(--ink-caption); }
.cg-sponsored__creative { display: flex; justify-content: center; overflow: hidden; border-radius: var(--radius-l); background: var(--surface); }

/* ---- Footer: Related row + legal row --------------------------------------------------------------- */
.cg-footer { background: var(--surface-warm); color: var(--ink-muted); border-radius: 40px 40px 0 0; }
.cg-footer .cg-wrap { display: flex; flex-direction: column; gap: 18px; padding-block: 30px; }
.cg-related { display: flex; flex-wrap: wrap; gap: 0 22px; font-size: 15px; }
.cg-related__lab { color: var(--ink); font-weight: var(--w-strong); align-self: center; }
.cg-body .cg-related a { color: var(--ink-muted); display: inline-flex; align-items: center; min-height: 44px; }
.cg-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 14px; }
.cg-related + .cg-footer__legal { padding-top: 16px; border-top: 1px solid var(--surface-divider); }
.cg-footer__adult { display: inline-flex; align-items: center; gap: 10px; }
.cg-age { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: var(--w-strong); color: var(--ink); }
.cg-footer__links { display: inline-flex; flex-wrap: wrap; gap: 0 16px; }
.cg-body .cg-footer__links a { color: var(--ink-muted); display: inline-flex; align-items: center; min-height: 44px; }

/* ---- Gate (S_Gate: pitch + warm action panel on desktop, bottom sheet on phones) --------------------- */
.cg-gate { position: fixed; inset: 0; z-index: 2600; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cg-gate__backdrop { position: absolute; inset: 0; background: rgba(40, 8, 24, .55); }
.cg-gate__dialog { position: relative; width: 880px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--radius-xxl); background: var(--surface);
  box-shadow: 0 40px 90px -20px rgba(40, 8, 24, .55); display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.cg-gate__dialog:focus { outline: none; }
.cg-gate__grip { display: none; }
.cg-gate__pitch { padding: 44px 44px 40px; display: flex; flex-direction: column; gap: 22px; }
.cg-gate__eyebrow { margin: 0; font-size: 15px; font-weight: var(--w-strong); color: var(--ink-muted); }
.cg-gate__title { font: italic var(--w-regular) 46px/1 var(--font-display); letter-spacing: -.01em; margin: 0 0 10px; }
.cg-gate__text { margin: 0; font-size: 16px; color: var(--ink-muted); }
.cg-gate__ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; font-weight: var(--w-strong); color: var(--ink); }
.cg-gate__ticks li { display: flex; gap: 12px; align-items: center; }
.cg-gate__ck { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-warm-strong); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.cg-gate__fine { margin: auto 0 0; display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.cg-gate__lock { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-warm-strong); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.cg-gate__act { position: relative; background: var(--surface-warm); padding: 40px 32px 30px; display: flex; flex-direction: column; gap: 14px; }
.cg-gate__close { position: absolute; right: 16px; top: 16px; }
.cg-gate__join { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; }
.cg-gate__join b { font: italic var(--w-regular) 34px/1.05 var(--font-display); }
.cg-gate__join span { font-size: 14px; color: var(--ink-muted); }
.cg-gate__act .cg-btn--primary { width: 100%; height: 50px; }
.cg-gate__foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--surface-divider); font-size: 14px; }
.cg-body a.cg-gate__login { font-weight: var(--w-strong); display: inline-flex; align-items: center; min-height: 44px; }
.cg-gate__age { font-size: 13px; color: var(--ink-caption); }
body.cg-gate-open { overflow: hidden; }

/* ---- Toasts ---------------------------------------------------------------------------------------- */
.cg-toasts { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 2700; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; max-width: calc(100vw - 32px); }
.cg-toast { pointer-events: auto; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: var(--w-strong); font-size: 15px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.cg-toast--show { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .cg-search { flex-basis: 220px; }
  .cg-body .cg-search__hint { display: none; }
}

@media (max-width: 900px) {
  .cg-top .cg-wrap { height: 64px; gap: 12px; }
  .cg-logo__mark { width: 96px; height: 47px; }
  .cg-search, .cg-nav { display: none; }
  .cg-body .cg-usermenu__panel a.cg-usermenu__narrow { display: flex; }
  .cg-usermenu__name { display: none; }
  .cg-h2 { font-size: 32px; }
  .cg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border-radius: var(--radius-m); font-size: 15px; }
  .cg-facts > div:nth-child(n+3) { border-top: 1px solid var(--surface-divider); }
  .cg-body a.cg-facts__edit { padding: 12px 0; margin: -12px 0; }
  .cg-comment { gap: 10px; }
  .cg-av { width: 36px; height: 36px; font-size: 13px; }
  .cg-bubble { padding: 10px 14px 4px; gap: 4px; }
  .cg-bubble__text { font-size: 15px; line-height: 1.5; }
  .cg-body a.cg-bubble__report, .cg-bubble__act { min-height: 44px; }
  .cg-bubble__ask .cg-btn, .cg-bubble__editbar .cg-btn { height: 44px; }
  .cg-prompt { padding: 16px; gap: 12px; }
  .cg-prompt__btns { width: 100%; }
  .cg-prompt__btns .cg-btn { flex: 1; }
  .cg-members { padding: 16px 16px 14px; border-radius: var(--radius-l); gap: 10px; }
  .cg-members__title { font-size: 28px; }
  .cg-members__count b { font-size: 15px; }
  .cg-members__avatars { gap: 0; }
  .cg-members__avatars li + li { margin-left: -6px; }
  .cg-ca, .cg-body a.cg-ca { width: 44px; height: 44px; border: 2px solid var(--surface); font-size: 12px; }
  .cg-body .cg-members__cta.cg-btn--primary { background: var(--surface-soft); color: var(--ink); box-shadow: none; }
  .cg-footer .cg-wrap { padding-block: 24px; }
  .cg-footer__legal { align-items: flex-start; flex-direction: column; }
  .cg-gate { align-items: flex-end; padding: 0; }
  .cg-gate__dialog { width: 100%; grid-template-columns: 1fr; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -14px 40px -10px rgba(40, 8, 24, .45); }
  .cg-gate__grip { display: block; position: absolute; left: 50%; top: 10px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--border); }
  .cg-gate__pitch { padding: 28px 20px 0; gap: 16px; }
  .cg-gate__title { font-size: 32px; line-height: 1.04; margin-bottom: 6px; padding-right: 48px; }
  .cg-gate__text { font-size: 15px; }
  .cg-gate__ticks { font-size: 15px; }
  .cg-gate__fine { display: none; }
  .cg-gate__act { background: var(--surface); padding: 16px 20px 24px; position: static; }
  .cg-gate__close { top: 16px; right: 14px; }
  .cg-gate__join { display: none; }
  .cg-gate__foot { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; border-top: 0; padding-top: 0; }
  .cg-toasts { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .cg-toast { transition: none; }
}

/* ---- Photo strip (under the intro) + lightbox -------------------------------------------------------- */
.cg-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-strip__item, .cg-strip__gated { position: relative; flex: none; width: 80px; height: 80px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; background: var(--surface-soft); cursor: zoom-in; }
.cg-strip__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-strip__more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(61, 15, 36, .55); color: #fff; font: italic var(--w-regular) 28px/1 var(--font-display); }
.cg-strip__gated { cursor: pointer; background: var(--surface-warm); color: var(--ink-muted); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 13px; font-weight: var(--w-strong); }
.cg-lb { position: fixed; inset: 0; z-index: 3000; background: var(--scrim); display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; padding: 24px; touch-action: pan-y; }
.cg-lb figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.cg-lb img { max-width: min(92vw, 1000px); max-height: 78vh; border-radius: var(--radius-m); background: #2a0f1c; }
.cg-lb figcaption { color: var(--surface-soft); font-size: 15px; }
.cg-lb__nav, .cg-lb__x { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); font: var(--w-strong) 22px/1 var(--font-sans); display: grid; place-items: center; }
.cg-lb__x { position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 18px; }
body.cg-lb-open { overflow: hidden; }

/* ---- Round account menu over the map (phones) ---------------------------------------------------------- */
.cg-usermenu--round summary { padding: 0; border: 0; min-height: 44px; }
.cg-usermenu--round .cg-usermenu__panel { top: calc(100% + 8px); }
@media (max-width: 900px) {
  .cg-strip__item, .cg-strip__gated { width: calc((100% - 24px) / 4); max-width: 84px; height: auto; aspect-ratio: 1 / 1; }
  .cg-lb { grid-template-columns: 44px 1fr 44px; padding: 12px; }
  /* The map box clips its overflow: the menu opens as a fixed panel under the button. */
  .cg-usermenu--round .cg-usermenu__panel { position: fixed; top: calc(66px + env(safe-area-inset-top, 0px)); right: 14px; z-index: 2000; }
  .cg-lb__nav { width: 44px; height: 44px; }
}

/* ---- Soft pink (owner-approved 2026-10-12): a blush wash behind the top of home, city and location pages, and plum
   section titles with a short pink rule. Text stays dark; strong pink stays reserved for buttons. Velvet keeps its own look. */
html:not([data-theme="velvet"]) { --cg-wash: radial-gradient(900px 380px at 18% 0%, rgba(240, 139, 187, .38), transparent 70%), radial-gradient(700px 320px at 92% 10%, rgba(208, 21, 122, .14), transparent 70%), linear-gradient(180deg, #fbdbe8 0%, #fdeef4 55%, var(--ground) 100%); }
html:not([data-theme="velvet"]) .cg-hhero { background: var(--cg-wash); }
html:not([data-theme="velvet"]) .cg-citypage,
html:not([data-theme="velvet"]) .cg-location { position: relative; isolation: isolate; }
html:not([data-theme="velvet"]) .cg-citypage::before,
html:not([data-theme="velvet"]) .cg-location::before { content: ""; position: absolute; z-index: -1; top: 0; left: 50%; width: 100vw; margin-left: -50vw; height: 560px; background: var(--cg-wash); pointer-events: none; }
html:not([data-theme="velvet"]) .cg-h2,
html:not([data-theme="velvet"]) .cg-hh2,
html:not([data-theme="velvet"]) .cg-members__title { color: #5a0b35; }
html:not([data-theme="velvet"]) .cg-h2::after,
html:not([data-theme="velvet"]) .cg-hh2::after { content: ""; display: block; width: 40px; height: 3px; border-radius: 3px; background: var(--accent); margin-top: 8px; }
html:not([data-theme="velvet"]) body { overflow-x: clip; } /* the 100vw wash must not add a horizontal scrollbar */
@media (max-width: 899px) {
  html:not([data-theme="velvet"]) .cg-citypage::before,
  html:not([data-theme="velvet"]) .cg-location::before { height: 420px; }
  /* Phone: the sticky city header takes the wash's top colour, so its rounded bottom flows into the pink instead of cutting it. */
  html:not([data-theme="velvet"]) .cg-citypage { --cg-wash: linear-gradient(180deg, #fbdbe8 0, #fbdbe8 190px, #fdeef4 300px, var(--ground) 100%); }
  html:not([data-theme="velvet"]) .cg-chead__top { background: #fbdbe8; box-shadow: 0 10px 18px -16px rgba(61, 15, 36, .45); }
}

/* ---- Page-change loader (Scripts/v2/loader.js): a thin pink bar at the very top while the next page loads. -------- */
.cg-loadbar { position: fixed; z-index: 10000; top: 0; left: 0; height: 3px; width: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #f08bbb, var(--accent), #a80f62); box-shadow: 0 0 10px rgba(208, 21, 122, .5);
  transition: opacity .2s ease; }
.cg-loadbar.is-on { opacity: 1; width: 92%; transition: width 8s cubic-bezier(.08, .7, .2, 1), opacity .2s ease; }
.cg-loadbar.is-on::after { content: ""; position: absolute; right: 0; top: 0; width: 80px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8)); animation: cg-loadbar-shine 1.1s ease-in-out infinite; }
@keyframes cg-loadbar-shine { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cg-loadbar.is-on { width: 100%; transition: opacity .2s ease; }
  .cg-loadbar.is-on::after { animation: none; }
}