body.jn-share { margin: 0; background: var(--jn-bg); font-family: var(--jn-font); color: var(--jn-text); }
.jn-share a { text-decoration: none; }

/* Nav + day-pill bar share one sticky wrapper so the pill bar always sits
   flush under the nav, however tall the nav actually renders -- no magic
   offset to keep in sync with it. */
.jn-share-topbar { position: sticky; top: 0; z-index: 19; background: var(--jn-surface); border-bottom: 1px solid var(--jn-border); }

.jn-share-nav { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; }
.jn-share-nav-logo { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: var(--jn-fw-bold); color: var(--jn-text); }
.jn-share-nav-logo i { color: var(--jn-primary); font-size: 20px; }
.jn-share-nav-cta { font-size: 13.5px; font-weight: var(--jn-fw-semibold); color: #fff; background: var(--jn-primary); padding: 9px 16px; border-radius: var(--jn-radius-md); white-space: nowrap; }
.jn-share-nav-cta:hover { background: var(--jn-primary-hover); }
.jn-share-nav-cta-short { display: none; }

.jn-share-hero { position: relative; min-height: 320px; display: flex; align-items: flex-end; background: linear-gradient(135deg, var(--jn-primary) 0%, var(--jn-day-3) 100%); background-size: cover; background-position: center; }
.jn-share-hero-overlay { width: 100%; padding: 48px 24px 32px; background: linear-gradient(0deg, oklch(0% 0 0 / 0.55) 0%, oklch(0% 0 0 / 0.05) 100%); color: #fff; box-sizing: border-box; }
.jn-share-hero-overlay h1 { margin: 0 0 10px; font-size: clamp(26px, 4.5vw, var(--jn-fs-hero)); font-weight: var(--jn-fw-bold); max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; text-shadow: 0 2px 10px oklch(0% 0 0 / 0.35); }
.jn-share-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; font-size: 14.5px; opacity: 0.95; }
.jn-share-hero-meta span { display: flex; align-items: center; gap: 6px; }

.jn-share-empty { width: 100%; text-align: center; color: var(--jn-text-tertiary); padding: 60px 20px; font-size: 14.5px; }

/* Sticky day-nav pill bar -- lets a visitor jump straight to a day instead of
   scrolling the board past it, and (see the page's own <script>) tracks
   whichever day column is actually in view as the board is scrolled. */
.jn-share-daynav { display: flex; gap: 8px; padding: 10px 24px; overflow-x: auto; }
.jn-share-daynav::-webkit-scrollbar { display: none; }
.jn-share-daynav-pill { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 16px; border-radius: var(--jn-radius-pill); border: 1.5px solid var(--jn-border); background: var(--jn-surface); }
.jn-share-daynav-pill .d { font-size: 12.5px; font-weight: var(--jn-fw-bold); color: var(--jn-text-secondary); }
.jn-share-daynav-pill .m { font-size: 10.5px; color: var(--jn-text-tertiary); }
.jn-share-daynav-pill.is-active { border-color: transparent; box-shadow: var(--jn-shadow-sm); background: var(--jn-day-1); }
.jn-share-daynav-pill.is-active .d, .jn-share-daynav-pill.is-active .m { color: #fff; }
.jn-share-daynav-pill:nth-of-type(6n+2).is-active { background: var(--jn-day-2); }
.jn-share-daynav-pill:nth-of-type(6n+3).is-active { background: var(--jn-day-3); }
.jn-share-daynav-pill:nth-of-type(6n+4).is-active { background: var(--jn-day-4); }
.jn-share-daynav-pill:nth-of-type(6n+5).is-active { background: var(--jn-day-5); }
.jn-share-daynav-pill:nth-of-type(6n+6).is-active { background: var(--jn-day-6); }

/* Day board -- one fixed-width column per day, horizontally scrolling with
   scroll-snap instead of every day stacking into one long vertical page. */
.jn-share-board { display: flex; gap: 20px; padding: 28px 24px 48px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; align-items: flex-start; }
.jn-share-day-col { flex: 0 0 280px; width: 280px; scroll-snap-align: start; scroll-margin-left: 24px; background: var(--jn-surface); border: 1px solid var(--jn-border); border-top: 4px solid var(--jn-day-1); border-radius: var(--jn-radius-lg); box-shadow: var(--jn-shadow-sm); overflow: hidden; }
.jn-share-day-col:nth-of-type(6n+2) { border-top-color: var(--jn-day-2); }
.jn-share-day-col:nth-of-type(6n+3) { border-top-color: var(--jn-day-3); }
.jn-share-day-col:nth-of-type(6n+4) { border-top-color: var(--jn-day-4); }
.jn-share-day-col:nth-of-type(6n+5) { border-top-color: var(--jn-day-5); }
.jn-share-day-col:nth-of-type(6n+6) { border-top-color: var(--jn-day-6); }
.jn-share-day-col-head { display: flex; align-items: baseline; gap: 10px; padding: 16px 16px 12px; }
.jn-share-day-badge { font-size: 13px; font-weight: var(--jn-fw-bold); color: #fff; background: var(--jn-day-1); padding: 3px 12px; border-radius: var(--jn-radius-pill); }
.jn-share-day-col:nth-of-type(6n+2) .jn-share-day-badge { background: var(--jn-day-2); }
.jn-share-day-col:nth-of-type(6n+3) .jn-share-day-badge { background: var(--jn-day-3); }
.jn-share-day-col:nth-of-type(6n+4) .jn-share-day-badge { background: var(--jn-day-4); }
.jn-share-day-col:nth-of-type(6n+5) .jn-share-day-badge { background: var(--jn-day-5); }
.jn-share-day-col:nth-of-type(6n+6) .jn-share-day-badge { background: var(--jn-day-6); }
.jn-share-day-date { font-size: 12.5px; color: var(--jn-text-tertiary); }
.jn-share-day-stops { display: flex; flex-direction: column; gap: 12px; padding: 0 12px 16px; }

.jn-share-stop { position: relative; background: var(--jn-surface-alt); border: 1px solid var(--jn-border); border-radius: var(--jn-radius-md); overflow: hidden; }
.jn-share-stop-thumb { height: 96px; position: relative; }
.jn-share-stop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jn-share-stop-body { padding: 10px 12px 12px; }
.jn-share-stop-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: var(--jn-fw-semibold); margin-bottom: 4px; line-height: 1.35; }
.jn-share-stop-meal-tag { color: var(--jn-primary); }
.jn-share-stop-time { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--jn-text-secondary); margin-bottom: 4px; }
.jn-share-stop-time-label { display: flex; align-items: center; gap: 4px; }
.jn-share-stop-duration { font-size: 10.5px; font-weight: 600; color: var(--jn-text-secondary); background: var(--jn-surface); padding: 1px 7px; border-radius: var(--jn-radius-pill); flex-shrink: 0; }
.jn-share-stop-reminder { display: flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--jn-danger); margin-bottom: 4px; white-space: pre-wrap; word-break: break-word; }
.jn-share-stop-note { font-size: 11.5px; color: var(--jn-text-tertiary); line-height: 1.55; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jn-share-stop-desc { font-size: 12px; color: var(--jn-text-secondary); line-height: 1.6; margin-top: 4px; word-break: break-word; cursor: pointer; }
.jn-share-stop-desc:hover { color: var(--jn-text); }

/* Clicking the name, photo, or description excerpt opens the same detail
   popup an icon button used to (see the removed .jn-share-stop-info-btn) --
   these hover cues are the replacement affordance for that. */
.jn-share-stop-title.jn-share-stop-detail-trigger, .jn-share-stop-thumb.jn-share-stop-detail-trigger { cursor: pointer; }
.jn-share-stop-title.jn-share-stop-detail-trigger:hover { color: var(--jn-primary); }
.jn-share-stop-thumb.jn-share-stop-detail-trigger:hover img { opacity: .85; }
.jn-share-stop-info-btn:hover { background: var(--jn-border); color: var(--jn-text); }

/* Stop-detail modal -- same component/class names as the editor's own
   #detailsModal (see Detail.cshtml + planner.css), duplicated here rather
   than shared since this page doesn't load planner.css at all. */
.jn-modal-overlay { position: fixed; inset: 0; background: oklch(0% 0 0 / 0.4); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; }
.jn-modal-overlay.is-open { display: flex; }
.jn-modal { background: var(--jn-surface); border-radius: var(--jn-radius-lg); box-shadow: var(--jn-shadow-modal); width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; }
body.jn-modal-open { overflow: hidden; }
.jn-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--jn-border); position: sticky; top: 0; background: var(--jn-surface); }
.jn-modal-header h5 { margin: 0; font-size: 16px; font-weight: 700; }
.jn-modal-close { background: none; border: none; color: var(--jn-text-tertiary); cursor: pointer; font-size: 16px; }
.jn-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.jn-modal-alt-names { font-size: 12.5px; color: var(--jn-text-tertiary); }
.jn-modal-gallery { display: flex; flex-direction: column; gap: 6px; }
.jn-modal-gallery-main { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--jn-radius-md); }
.jn-modal-gallery-thumbs { display: flex; gap: 6px; overflow-x: auto; }
.jn-modal-gallery-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: var(--jn-radius-sm, 6px); flex-shrink: 0; cursor: pointer; opacity: .6; border: 2px solid transparent; }
.jn-modal-gallery-thumb:hover { opacity: .85; }
.jn-modal-gallery-thumb.is-active { opacity: 1; border-color: var(--jn-primary); }
.jn-modal-description { margin: 0; color: var(--jn-text-secondary); line-height: 1.6; }

/* Between-stop connector -- a single centered line (unlike the editor's
   two-sided one, which is built for a much wider card) running the height of
   the gap. The mode icon sits directly on the line (its own solid background
   cuts it), while the gap label sits beside the icon rather than stacked on
   the line -- keeps it from ever visually crossing the line at all, instead
   of relying on the label's own background to mask it. */
.jn-share-leg { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 16px; }
.jn-share-leg::before { content: ''; position: absolute; top: 0; bottom: 8px; left: 50%; width: 2px; background: var(--jn-primary); opacity: .3; transform: translateX(-50%); }
.jn-share-leg-mode-row { position: relative; width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; }
.jn-share-leg-mode { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--jn-surface); border: 2px solid var(--jn-primary); color: var(--jn-primary); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.jn-share-leg-gap { position: absolute; left: calc(50% + 19px); white-space: nowrap; font-size: 10.5px; font-weight: 600; color: var(--jn-text-secondary); display: flex; align-items: center; gap: 4px; }
.jn-share-leg-gap i { color: var(--jn-text-tertiary); }
.jn-share-leg-summary { position: relative; font-size: 10.5px; color: var(--jn-text-tertiary); background: var(--jn-surface); padding: 0 6px; }
.jn-share-leg-arrow { position: absolute; bottom: 0; color: var(--jn-primary); opacity: .6; font-size: 13px; }

.jn-share-footer { text-align: center; padding: 32px 20px 48px; color: var(--jn-text-tertiary); font-size: 13.5px; }
.jn-share-footer a { color: var(--jn-primary); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 560px) {
  .jn-share-nav { padding: 10px 16px; }
  .jn-share-nav-logo { font-size: 16px; }
  .jn-share-nav-cta { padding: 8px 14px; font-size: 12.5px; }
  .jn-share-nav-cta-full { display: none; }
  .jn-share-nav-cta-short { display: inline; }

  .jn-share-daynav { padding: 0 16px 10px; gap: 6px; }

  .jn-share-hero { min-height: 200px; }
  .jn-share-hero-overlay { padding: 20px 16px 18px; }
  .jn-share-hero-overlay h1 { margin-bottom: 6px; }
  .jn-share-hero-meta { gap: 12px; font-size: 12.5px; }

  /* One day after another, top to bottom -- no more horizontal board to
     lose track of alongside the page's own vertical scroll. */
  .jn-share-board { flex-direction: column; padding: 18px 16px 40px; gap: 14px; overflow-x: visible; scroll-snap-type: none; }
  .jn-share-day-col { flex-basis: auto; width: 100%; scroll-margin-top: 112px; }

  .jn-share-stop-thumb { height: auto; aspect-ratio: 16 / 9; }
  .jn-share-stop-title { font-size: 15px; }
  .jn-share-stop-time, .jn-share-stop-reminder, .jn-share-stop-note { font-size: 13px; }
  .jn-share-stop-duration { font-size: 11.5px; }
  .jn-share-stop-desc { font-size: 13px; }
}