/* -- Liking a vessel ---------------------------------------------------------

   The LIKE control on a vessel's public page, and the View Likes dialog it
   shares with the builder's own editor (see vessel_likes_dialog_render() in
   includes/likes.php).

   THE CONTROL NO LONGER HAS A BAND OF ITS OWN. It used to be a full-width
   section rendered ABOVE the hero — the first thing a visitor met on a boat's
   page was an invitation to like a boat they had not yet seen. It is one panel
   of the action strip at the foot now (see .vessel-actions in site.css), so
   what is left here is the thumb, the button and the count; the panel around
   them is the strip's.
   ------------------------------------------------------------------------- */

.like-bar__form { margin: 0; }

/* IT IS A .btn IN EVERY RESPECT BUT THE THUMB. It used to be a rounded pill
   in sentence case at body size, standing in a strip where every other control
   is a square-cornered, tracked, uppercase button — one panel speaking a
   different language from the two beside it, which is most of what made the
   strip look unsettled. The metrics below are .btn plus .btn--sm exactly; only
   the icon and the pressed state are its own. It is not simply given those
   classes because the pressed state is a third thing — neither --outline nor
   --brass — and a button that swaps class on every press is a button whose
   look is decided in JavaScript. */
.like-bar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--brass);
  border-radius: var(--radius);
  background: none;
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition);
}
.like-bar__button:active { transform: translateY(1px); }
.like-bar__button:hover,
.like-bar__button:focus-visible {
  background: var(--brass);
  color: var(--navy);
}

/* Already liked: filled, so the state is legible without reading the word —
   and hover lifts to gold rather than back to nothing, because the press it
   offers is UNLIKE and should not look like a button switching off. */
.like-bar__button.is-liked {
  border-color: var(--brass);
  background: var(--brass);
  color: var(--navy);
}
.like-bar__button.is-liked:hover,
.like-bar__button.is-liked:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
}

.like-bar__thumb {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* The count sits in the panel's footnote now, under the button rather than
   wedged against it, so it no longer needs to be two sizes larger than
   everything around it to be found. */
.like-bar__count {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  color: var(--ink);
}

/* -- The Vessel Likes panel on the builder's editor ------------------------- */

.vessel-likes-panel .account-section__title {
  display: flex;
  align-items: baseline;
  gap: .4rem;
}

/* -- The View Likes dialog ---------------------------------------------------

   Deliberately the same shape as .vessel-stats in vessel-readership.css: a
   dialog, a privacy note, a figure, a map. The only addition is
   .vessel-likes__log, shown to a builder alone and carrying a moment and a
   place — never an identity.
   ------------------------------------------------------------------------- */

.vessel-likes {
  width: min(48rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 0;
  color: var(--ink);
  background: var(--ivory);
  box-shadow: 0 2rem 5rem rgb(8 23 35 / 35%);
}
.vessel-likes::backdrop { background: rgb(8 23 35 / 76%); }
.vessel-likes__panel { padding: clamp(1.25rem, 3vw, 2.5rem); }

.vessel-likes__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.vessel-likes__title { margin: .15rem 0 0; }
.vessel-likes__close {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  font: 1.75rem/1 var(--font-sans);
  cursor: pointer;
}

.vessel-likes__privacy {
  margin: 1.25rem 0;
  padding: .85rem 1rem;
  border-left: .2rem solid var(--brass);
  background: rgb(168 104 36 / 8%);
  font-size: .9rem;
}

.vessel-likes__figure {
  margin: 0 0 .75rem;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}

.vessel-likes__map {
  height: min(22rem, 46vh);
  background: #d8ddd5;
}
.vessel-likes__map > p,
.vessel-likes__no-map,
.vessel-likes__empty {
  display: grid;
  min-height: 8rem;
  margin: 0;
  place-items: center;
  text-align: center;
}

.vessel-likes__section { margin-top: 1.5rem; }

.vessel-likes__log {
  display: grid;
  gap: .5rem;
  margin: .75rem 0 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  list-style: none;
}
.vessel-likes__log li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1rem;
  padding: .55rem .75rem;
  background: rgb(8 23 35 / 5%);
  font-size: .85rem;
}
.vessel-likes__log time { color: var(--ink); }
.vessel-likes__log-place { color: var(--ink-muted); }