/* Hangout sheet (js/sheets/hangout*.js): photo, title, facts, host row and the action block for
   the caller's relation; the MainButton carries the main action. Also the sheet listing several
   hangouts at one spot of the map. Status chips and request rows are shared with the lists
   (hangouts.css). Every control is at least 44×44 px. */

.hg [hidden],
.hg-actions [hidden],
.pin-list [hidden] {
  display: none !important;
}

.hg {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hg-photo {
  width: 100%;
  max-height: 260px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  object-fit: cover;
  background: var(--bg2);
}

.hg-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hg-emoji {
  font-size: 36px;
  line-height: 1;
}

.hg-title {
  margin: 0;
  overflow-wrap: anywhere;
}

.hg-when {
  color: var(--hint);
  font-size: 14px;
}

.hg-chip-host {
  align-self: flex-start;
  background: rgba(36, 129, 204, 0.14);
  color: var(--accent);
}

.hg-place,
.hg-facts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hg-fact {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.hg-fact-icon {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}

.hg-address {
  font-weight: 600;
}

.hg-approx {
  margin: 0 0 0 28px;
}

.hg-chat {
  align-self: flex-start;
  min-height: 44px;
  margin-left: 28px;
}

.hg-desc {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hg-host {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  background: var(--bg2);
}

.hg-host-link {
  cursor: pointer;
}

.hg-host-name {
  display: flex;
  align-items: center;
}

.hg-chevron {
  color: var(--hint);
  font-size: 22px;
}

.hg-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.hg-state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: var(--bg2);
}

.hg-state p {
  margin: 0;
}

.hg-state-title {
  font-size: 16px;
  font-weight: 600;
}

.hg-state-wait {
  background: rgba(245, 166, 35, 0.14);
}

.hg-state-in {
  background: rgba(46, 157, 71, 0.13);
}

.hg-state .btn {
  min-height: 44px;
}

/* The guest's join block: the paused banner, the rejoin hint and the optional message. */
.hg-join {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hg-join .banner {
  margin: 0;
}

.hg-join-hint {
  margin: 0;
}

.hg-message .field {
  margin-bottom: 0;
}

/* Text buttons under a state («Отменить заявку», «Не смогу пойти», «＋ Добавить сообщение…»). */
.hg-link {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  color: var(--link);
  font-weight: 500;
  text-align: left;
}

.hg-link-danger {
  color: var(--danger);
}

/* Host: «Заявки · N», the requests, then «📣 Позвать друзей» and «Изменить». */
.hg-sub {
  margin: 4px 0 0;
}

.hg-no-requests {
  margin: 0;
}

.hg-invite-slot:empty {
  display: none;
}

.hg-invite,
.hg-edit {
  min-height: 44px;
}

/* A guest's small share button (sheets/hangout-share.js shareButton). */
.hg-share {
  min-height: 44px;
  background: none;
  color: var(--link);
  font-weight: 500;
}

/* Several hangouts at one spot (js/screens/map-list.js). */
.pin-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.pin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pin-row-emoji {
  font-size: 26px;
  line-height: 1;
}

.pin-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pin-row-title {
  font-weight: 600;
}

.pin-row-sub {
  color: var(--hint);
  font-size: 13px;
}

.pin-row-go {
  color: var(--hint);
  font-size: 22px;
  line-height: 1;
}