/* Additions layered on top of the Stitch screens: toasts, busy states and a
   couple of accessibility fixes. Everything else comes from the design. */

.hostus-toast-host {
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.hostus-toast {
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  background: rgba(11, 28, 48, 0.92);
  backdrop-filter: blur(12px);
  padding: 12px 18px;
  border-radius: 9999px;
  box-shadow: 0 10px 40px rgba(0, 102, 255, 0.18);
  animation: hostus-toast-in 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hostus-toast.is-error {
  background: rgba(186, 26, 26, 0.94);
}

.hostus-toast.is-leaving {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms ease, transform 280ms ease;
}

@keyframes hostus-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-busy {
  opacity: 0.6;
  cursor: progress;
}

[data-error]:empty {
  display: none;
}

[data-error] {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #ba1a1a;
  background: #ffdad6;
  border-radius: 12px;
  padding: 10px 14px;
}

:focus-visible {
  outline: 2px solid #0050cb;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* The double-tap heart (wp15): blooms over the photo, then gets out of the way. */
.hostus-heartburst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.4);
  font-size: 96px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  z-index: 30;
  animation: hostus-heartburst 700ms ease-out forwards;
}

@keyframes hostus-heartburst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .hostus-heartburst { animation: none; opacity: 0; }
}

/* -------------------------------------------------------- header panels */

/*
 * The account / menu / notification dropdowns the runtime attaches to the
 * design export's header buttons.
 *
 * These are appended to <body> and positioned in script, because the header
 * markup differs on every screen and several of them are not positioned
 * ancestors. Colours are declared here rather than borrowed from a screen's
 * Tailwind theme for the same reason — the same panel opens over a dark feed
 * and a light host console, so it carries its own surface and follows the
 * document's colour scheme instead of any one screen's palette.
 */
.hostus-panel {
  position: fixed;
  z-index: 100;
  min-width: 232px;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  color: #0f172a;
  font-size: 14px;
}

.hostus-panel-head {
  padding: 10px 12px 8px;
  font-weight: 600;
  line-height: 1.25;
}
.hostus-panel-head span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hostus-panel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  color: inherit;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.hostus-panel-item:hover,
.hostus-panel-item:focus-visible {
  background: rgba(15, 23, 42, 0.07);
}
.hostus-panel-item .material-symbols-outlined {
  font-size: 20px;
  opacity: 0.65;
  flex: none;
}

/* A notification is a title over its body, not a labelled icon. */
.hostus-panel-note span {
  display: block;
  min-width: 0;
  font-weight: 500;
}
.hostus-panel-note em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  opacity: 0.65;
}

.hostus-panel-empty {
  padding: 14px 12px;
  opacity: 0.6;
}

.hostus-panel-rule {
  margin: 6px 8px;
  border: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
}

@media (prefers-color-scheme: dark) {
  .hostus-panel {
    background: #0b111a;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    color: #e8edf5;
  }
  .hostus-panel-item:hover,
  .hostus-panel-item:focus-visible { background: rgba(255, 255, 255, 0.1); }
  .hostus-panel-rule { border-top-color: rgba(255, 255, 255, 0.12); }
}

/*
 * The account button the runtime adds to headers that ship without one.
 * Deliberately unstyled beyond shape — it inherits the surrounding header's
 * colour, so it looks native on a light host console and a dark feed alike.
 */
.hostus-account-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: inherit;
  cursor: pointer;
}
.hostus-account-fallback:hover,
.hostus-account-fallback:focus-visible { background: rgba(127, 127, 127, 0.16); }
.hostus-account-fallback .material-symbols-outlined { font-size: 24px; }

/* ------------------------------------------------------- host dashboard */

/*
 * The shared host header (views/partials/host-header.ejs).
 *
 * Written as plain CSS rather than Tailwind because every screen compiles
 * its own theme from the design export and those themes disagree — a header
 * that must look identical on all thirteen host screens cannot be built from
 * classes that only three of them define.
 */
.hostbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-family: Inter, system-ui, sans-serif;
}

.hostbar-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  max-width: 1400px;
  margin: 0 auto;
}

.hostbar-brand { display: flex; align-items: center; flex: none; }
.hostbar-brand img { height: 30px; width: auto; object-fit: contain; display: block; }

.hostbar-nav { display: none; align-items: center; gap: 2px; margin-left: 12px; }

.hostbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  white-space: nowrap;
}
.hostbar-link:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }
.hostbar-link.is-current { background: #0f172a; color: #ffffff; }
.hostbar-link .material-symbols-outlined { font-size: 18px; }

.hostbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.hostbar-switch {
  display: none;
  padding: 7px 14px;
  margin-right: 4px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.14);
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
  white-space: nowrap;
  /* It became a <button> when it became a real switch (2026-08-25). */
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.hostbar-switch:hover { background: rgba(15, 23, 42, 0.06); }

/* The same switch on the traveller side, injected by the runtime while a
   host wears the traveller hat (2026-08-26). Plain CSS on purpose: the
   traveller screens compile different Tailwind themes, and this pill must
   look identical on all of them. */
.hostus-mode-pill {
  padding: 6px 12px;
  margin-right: 6px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  align-self: center;
}
.hostus-mode-pill:hover { background: rgba(15, 23, 42, 0.06); }

.hostbar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #475569;
  cursor: pointer;
}
.hostbar-icon:hover { background: rgba(15, 23, 42, 0.06); color: #0f172a; }
.hostbar-icon .material-symbols-outlined { font-size: 24px; }

/* Hidden until the runtime learns there is something unread. */
.hostbar-dot {
  position: absolute;
  top: 8px;
  right: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #e11d48;
  border: 2px solid #ffffff;
}

.hostbar-nav-mobile {
  display: flex;
  gap: 2px;
  padding: 0 12px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.hostbar-nav-mobile::-webkit-scrollbar { display: none; }

/* The burger is redundant once the links are on screen; it stays for the
   account menu the runtime hangs off it on narrow screens. */
@media (min-width: 900px) {
  .hostbar-nav { display: flex; }
  .hostbar-switch { display: inline-block; }
  .hostbar-nav-mobile { display: none; }
  .hostbar-burger { display: none; }
  .hostbar-inner { padding: 0 24px; }
}

@media (prefers-color-scheme: dark) {
  .hostbar {
    background: rgba(11, 17, 26, 0.9);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  .hostbar-brand img { filter: invert(1) brightness(2); }
  .hostbar-link { color: #94a3b8; }
  .hostbar-link:hover { background: rgba(255, 255, 255, 0.08); color: #e8edf5; }
  .hostbar-link.is-current { background: #e8edf5; color: #0f172a; }
  .hostbar-icon { color: #94a3b8; }
  .hostbar-icon:hover { background: rgba(255, 255, 255, 0.08); color: #e8edf5; }
  .hostbar-switch { color: #e8edf5; border-color: rgba(255, 255, 255, 0.18); }
  .hostbar-dot { border-color: #0b111a; }
}

/* ------------------------------------------------------------- lightbox */

/*
 * Full-screen photo viewer. Plain CSS, like the header panels, because it
 * opens over screens whose Tailwind themes disagree about what a colour is.
 */
.hostus-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hostus-lightbox-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hostus-lightbox-track::-webkit-scrollbar { display: none; }

.hostus-lightbox-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.hostus-lightbox-slide img {
  max-width: 100%;
  max-height: 100%;
  /* `contain`, not `cover`: full length is the point of opening it. */
  object-fit: contain;
  cursor: default;
}

.hostus-lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
}
.hostus-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }

.hostus-lightbox-dots {
  position: absolute;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.hostus-lightbox-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.4);
  transition: width 150ms ease, background 150ms ease;
}
.hostus-lightbox-dots span.is-on { width: 20px; background: #ffffff; }

/* --------------------------------------------------------- share sheet */

/*
 * Where to share a stay. Plain CSS for the same reason as the lightbox and
 * the header panels: it opens over a dark feed and a light stay page, and
 * neither screen's compiled theme is available to it.
 *
 * A bottom sheet on a phone (thumb reach) and a centred card above that.
 */
.hostus-share {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(2, 6, 15, 0.6);
  backdrop-filter: blur(2px);
}

.hostus-share-panel {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
  animation: hostus-share-in 180ms ease-out;
}

@keyframes hostus-share-in {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.hostus-share-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hostus-share-head p {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hostus-share-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: inherit;
  cursor: pointer;
}
.hostus-share-close:hover { background: rgba(15, 23, 42, 0.12); }

.hostus-share-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.hostus-share-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.hostus-share-target:hover { background: rgba(15, 23, 42, 0.05); }
.hostus-share-target:active { transform: scale(0.96); }

/* The brand marks. Monochrome white on the network's own colour, which is
   how every share row is drawn and what makes them recognisable at 44px. */
.hostus-share-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #475569;
}
.hostus-share-mark svg { width: 24px; height: 24px; fill: #ffffff; }

.hostus-share-mark.is-whatsapp  { background: #25d366; }
.hostus-share-mark.is-facebook  { background: #1877f2; }
.hostus-share-mark.is-instagram { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.hostus-share-mark.is-x         { background: #0f172a; }
.hostus-share-mark.is-telegram  { background: #229ed9; }
.hostus-share-mark.is-pinterest { background: #e60023; }
.hostus-share-mark.is-email     { background: #64748b; }

.hostus-share-link {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.hostus-share-link input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.03);
  color: inherit;
  font: inherit;
  font-size: 13px;
}
.hostus-share-link button {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: #0f172a;
  color: #ffffff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.hostus-share-more {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid rgba(15, 23, 42, 0.15);
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.hostus-share-more:hover { background: rgba(15, 23, 42, 0.05); }

@media (min-width: 560px) {
  .hostus-share { align-items: center; }
  .hostus-share-panel { border-radius: 18px; padding-bottom: 16px; }
}

@media (prefers-color-scheme: dark) {
  .hostus-share-panel { background: #0f1620; color: #e8edf5; }
  .hostus-share-close { background: rgba(255, 255, 255, 0.1); }
  .hostus-share-close:hover { background: rgba(255, 255, 255, 0.18); }
  .hostus-share-target:hover { background: rgba(255, 255, 255, 0.07); }
  .hostus-share-link input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
  .hostus-share-link button { background: #e8edf5; color: #0f172a; }
  .hostus-share-more { border-color: rgba(255, 255, 255, 0.16); }
  .hostus-share-more:hover { background: rgba(255, 255, 255, 0.07); }
  .hostus-share-mark.is-x { background: #ffffff; }
  .hostus-share-mark.is-x svg { fill: #0f172a; }
}

@media (prefers-reduced-motion: reduce) {
  .hostus-share-panel { animation: none; }
}