/* The community controls share the page toolbar so there is one compact top row. */
.community-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #203b33;
  color: #fff;
  border-bottom: 1px solid #45665a;
  box-shadow: 0 5px 18px rgba(25, 52, 42, .12);
}

.community-bar .bar,
.community-bar .wrap {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.community-bar .brand,
.community-bar .community-brand {
  color: #fff;
  flex: 0 1 auto;
  min-width: 0;
  font-size: 13px;
  letter-spacing: .1em;
  white-space: nowrap;
}

.community-bar .brand span {
  color: #bfd3c8;
}

.community-bar > .wrap > .actions,
.community-bar .community-source-actions:empty {
  display: none;
}

.community-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex: 1 1 auto;
  min-width: 0;
}

.community-controls > button,
.community-controls .trip-switcher > #trip-switch {
  height: 38px;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, .27);
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.community-controls > button:hover,
.community-controls > button:focus-visible,
.community-controls .trip-switcher > #trip-switch:hover,
.community-controls .trip-switcher > #trip-switch:focus-visible,
.community-controls .trip-switcher.is-open > #trip-switch {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .58);
  color: #fff;
}

.community-controls > button.primary {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .27);
}

/* The page stylesheet hides this class on small screens when it lives in the old toolbar. */
.community-bar .community-controls .download-top {
  display: inline-flex;
}

.community-controls .trip-switcher {
  position: relative;
  flex: 0 1 220px;
  min-width: 130px;
}

.community-controls .trip-switcher > #trip-switch {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.trip-switch-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.trip-switch-chevron {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
}

.trip-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 70;
  width: max-content;
  min-width: min(245px, calc(100vw - 28px));
  max-width: min(340px, calc(100vw - 28px));
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(29, 59, 49, .97);
  box-shadow: 0 13px 30px rgba(11, 29, 22, .28);
}

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

.trip-menu a,
.trip-menu .trip-menu-empty {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  color: #f5faf6;
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
  white-space: normal;
}

.trip-menu a:hover,
.trip-menu a:focus-visible,
.trip-menu a[aria-current="page"] {
  background: rgba(255, 255, 255, .16);
  color: #fff;
}

.trip-menu .trip-menu-empty {
  color: #c6d5cb;
}

.profile-trigger {
  flex: 0 1 auto;
}

.profile-trigger .avatar {
  width: 30px;
  height: 30px;
  margin: -4px 0;
}

.profile-name {
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  letter-spacing: .01em;
}

.avatar {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e8f0e9;
  font-size: 21px;
  vertical-align: middle;
  object-fit: cover;
  flex-shrink: 0;
}

.comment-anchor {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}

.comment-add,
.comment-bubble {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
}

.comment-add {
  opacity: 0;
  transition: opacity .15s;
}

.hero:hover .comment-add,
.day-panel:hover > .comment-anchor .comment-add,
.time-row:hover .comment-add,
.comment-anchor:focus-within .comment-add,
.comment-add:focus-visible {
  opacity: 1;
}

.comment-bubble .avatar {
  width: 22px;
  height: 22px;
  font-size: 16px;
}

.time-row[data-kind="transport"] {
  border-left-color: #bd8a4d;
}

.time-row[data-kind="transport"]:before {
  background: #bd8a4d;
}

.time-row[data-kind="transport"] time {
  color: #986a31;
}

.time-row[data-kind="visit"] {
  border-left-color: #377852;
}

/* Keep the main itinerary readable while removing the large default gaps. */
.hero {
  padding-top: 28px;
  padding-bottom: 20px;
  gap: 28px;
}

.section {
  margin-top: 28px;
}

.section-head {
  margin-bottom: 14px;
}

.card,
.day-panel {
  padding: 20px;
}

.timeline {
  margin-top: 14px;
}

.time-row {
  padding-bottom: 14px;
}

.stay-box {
  margin-top: 16px;
}

.cut-box {
  margin-top: 10px;
}

.community-board {
  margin: 22px 0 30px;
  padding: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.community-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.community-heading .actions {
  gap: 6px;
}

.friend-filter {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 0;
}

.friend-filter button {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 13px;
}

.friend-filter button[aria-pressed="true"] {
  background: var(--ink);
  color: #fff;
}

.message-card {
  border-top: 1px solid var(--line);
  padding: 14px 0;
  overflow-wrap: anywhere;
}

.message-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.message-meta time {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
}

.message-content {
  margin: 7px 0 5px;
  font-size: 14px;
  white-space: pre-wrap;
}

.message-context {
  padding: 3px 0;
  border: 0;
  background: none;
  color: var(--forest);
  font-size: 12px;
  text-align: left;
}

.message-delete {
  padding: 3px 6px;
  border: 0;
  color: var(--muted);
  font-size: 11px;
}

.community-empty {
  padding: 16px 0;
  color: var(--muted);
  font-size: 14px;
}

.community-dialog {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(460px, 100vw);
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 22px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: -12px 0 50px #203b3320;
  overflow: auto;
}

.community-dialog::backdrop {
  background: #132e2855;
}

.community-dialog .dialog-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.community-dialog .dialog-title h2 {
  font-size: 22px;
}

.community-dialog form {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.community-dialog textarea {
  width: 100%;
  min-height: 110px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.community-dialog input {
  width: 100%;
}

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

.preset-grid button {
  font-size: 25px;
}

.preset-grid button[aria-pressed="true"] {
  border-color: var(--forest);
  background: var(--light);
}

.community-status {
  min-height: 20px;
  color: var(--muted);
  font-size: 13px;
}

.community-error {
  color: #934a32;
}

.community-dialog .identity-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.profile-preview .avatar {
  width: 60px;
  height: 60px;
  font-size: 40px;
}

.board-more {
  margin-top: 12px;
}

.community-pill {
  padding: 4px 8px;
  border-radius: 99px;
  background: var(--light);
  color: var(--forest);
  font-size: 11px;
}

@media (hover: none) {
  .comment-add {
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  .community-bar .bar,
  .community-bar .wrap {
    width: calc(100% - 36px);
  }

  .community-controls .trip-switcher {
    flex-basis: 180px;
  }
}

@media (max-width: 900px) {
  .community-bar .bar,
  .community-bar .wrap {
    min-height: 0;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .community-bar .community-brand,
  .community-bar .brand {
    max-width: 100%;
  }

  .community-controls {
    width: 100%;
    flex: 1 0 100%;
    justify-content: flex-end;
  }
}

@media (max-width: 600px) {
  .community-bar .bar,
  .community-bar .wrap {
    width: calc(100% - 28px);
    gap: 6px;
  }

  .community-bar .community-brand,
  .community-bar .brand {
    font-size: 11px;
    letter-spacing: .07em;
  }

  .community-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
  }

  .community-controls .trip-switcher {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .community-controls > button,
  .community-controls .trip-switcher > #trip-switch {
    width: 100%;
    min-width: 0;
    padding: 0 5px;
    font-size: 12px;
  }

  .community-controls > button {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .trip-menu {
    right: auto;
    left: 0;
    max-width: calc(100vw - 28px);
  }

  .community-board {
    padding: 17px;
  }

  .community-dialog {
    padding: 19px;
  }

  .comment-add {
    opacity: 1;
  }

  .message-meta {
    flex-wrap: wrap;
  }
}

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

/* Identity stays visually separate from the four navigation actions. */
.community-controls > .profile-trigger,
.community-controls > .profile-trigger:hover {
  background: transparent;
  border-color: transparent;
  padding-right: 0;
}

/* Hover-only entries must not reserve an empty extra line in every time slot. */
.hero > div { position: relative; }
.hero .comment-add { position: absolute; top: 0; right: 0; }
.time-row { padding-right: 52px; }
.time-row .comment-add { position: absolute; top: 0; right: 0; min-height: 26px; padding: 2px 6px; font-size: 11px; }
.hero { padding-bottom: 12px; }
.section-nav { padding-bottom: 16px; }
@media(max-width:1100px){.community-bar .brand span{display:none}}
@media(max-width:600px){
  .community-bar .bar{position:relative;gap:8px;padding-top:8px;padding-bottom:8px}
  .community-bar .brand{display:flex;align-items:center;min-height:30px;padding-right:150px}
  .community-controls{grid-template-columns:minmax(105px,1.5fr) repeat(3,minmax(0,1fr))}
  .community-controls .trip-switcher{grid-column:auto}
  .community-controls>button,.community-controls .trip-switcher>#trip-switch{font-size:11px;padding:0 4px}
  .community-controls>.profile-trigger{position:absolute;right:0;top:6px;width:auto;max-width:52%;height:32px;min-height:32px;padding:0;overflow:visible}
  .profile-trigger .profile-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;font-size:14px}
}