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 { position: relative; 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; }

/* 行前資訊 -- collapsed by default so the itinerary stays the first thing a visitor sees.
   The note body itself uses .jn-prep-content from prep.css. */
.jn-share-prep { max-width: 880px; margin: 24px auto 0; padding: 0 24px; box-sizing: border-box; }
.jn-share-prep-card { background: var(--jn-surface); border: 1px solid var(--jn-border); border-radius: var(--jn-radius-lg); box-shadow: var(--jn-shadow-sm); overflow: hidden; }
.jn-share-prep-card summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; }
.jn-share-prep-card summary::-webkit-details-marker { display: none; }
.jn-share-prep-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: var(--jn-fw-semibold); }
.jn-share-prep-title i { color: var(--jn-primary); }
.jn-share-prep-count { font-size: 12px; color: var(--jn-text-tertiary); }
.jn-share-prep-chevron { margin-left: auto; color: var(--jn-text-tertiary); transition: transform .15s; }
.jn-share-prep-card[open] .jn-share-prep-chevron { transform: rotate(180deg); }
.jn-share-prep-body { display: flex; flex-direction: column; gap: 16px; padding: 16px 18px 18px; border-top: 1px solid var(--jn-border); }
.jn-share-prep-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.jn-share-prep-files li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--jn-surface-alt); border-radius: var(--jn-radius-md); font-size: 13.5px; }
.jn-share-prep-files li > i { color: var(--jn-text-tertiary); flex-shrink: 0; }
.jn-share-prep-file-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--jn-text); }
a.jn-share-prep-file-name { color: var(--jn-primary); }
a.jn-share-prep-file-name:hover { text-decoration: underline; }
.jn-share-prep-file-note, .jn-share-prep-file-size { flex-shrink: 0; font-size: 12px; color: var(--jn-text-tertiary); }
@media (max-width: 560px) {
  .jn-share-prep { margin-top: 16px; padding: 0 16px; }
}

/* 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; }
/* .is-fit is added by JS once the pill row is measured and every pill
   already fits on one line. On mobile the bar stays visible either way --
   a single day's card list can run several screens long there, so jumping
   straight to a day matters more than on desktop, where each card is short
   enough that scrolling past a few isn't a big ask. Desktop instead
   collapses the bar when it fits, since there's nothing to jump to that
   isn't already on screen (see the @media block below). Either way, only
   the still-visible, actually-scrollable case needs the edge fade -- the
   scrollbar itself is hidden, so this is the only hint it scrolls. */
.jn-share-daynav:not(.is-fit) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
}
@media (min-width: 561px) {
  .jn-share-daynav.is-fit { 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); }

/* Proxy scrollbar for the day board (see Share.cshtml's markup + script).
   The scrollbar is styled explicitly rather than left to the platform: on
   Windows/Chrome the default is an overlay that stays invisible until the
   pointer is already on top of it, which is exactly the "there's no
   scrollbar" problem this element exists to solve. */
.jn-share-board-scrollbar { overflow-x: auto; overflow-y: hidden; height: 12px; margin: 0 24px 10px; }
.jn-share-board-scrollbar > div { height: 1px; }
.jn-share-board-scrollbar::-webkit-scrollbar { height: 10px; }
.jn-share-board-scrollbar::-webkit-scrollbar-track { background: var(--jn-surface-alt); border-radius: var(--jn-radius-pill); }
.jn-share-board-scrollbar::-webkit-scrollbar-thumb { background: var(--jn-border-strong); border-radius: var(--jn-radius-pill); }
.jn-share-board-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--jn-text-tertiary); }
/* Firefox has no ::-webkit-scrollbar, but its scrollbars don't auto-hide. */
@supports not selector(::-webkit-scrollbar) {
  .jn-share-board-scrollbar { scrollbar-width: thin; }
}

/* Day board -- one fixed-width column per day, horizontally scrolling with
   scroll-snap instead of every day stacking into one long vertical page. */
/* Snapping is `proximity`, not `mandatory`: a board only a little wider than
   the window has a scroll range far shorter than the 300px between two column
   starts, so under `mandatory` every position except the exact ends got
   dragged back to the last snap point the range could reach -- on a six-day
   trip in a ~1440px window that pinned the board at Day 2's start and left
   Day 6 permanently cut off, unreachable by wheel, drag or scrollbar.
   `proximity` still lines columns up when a scroll lands near one, but never
   refuses to stop short of the end. */
.jn-share-board { display: flex; gap: 20px; padding: 28px 24px 48px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; align-items: flex-start; }
/* Same "centered when it doesn't fill the row" treatment as .jn-share-daynav above. */
.jn-share-board.is-centered { justify-content: center; }
.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: 130px; position: relative; }
.jn-share-stop-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Multi-photo stops: native scroll-snap carousel inside the thumb. Tapping
   still opens the lightbox (a scroll gesture does not fire click). */
.jn-share-stop-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.jn-share-stop-track::-webkit-scrollbar { display: none; }
.jn-share-stop-slide { flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
/* Arrows only where there is no touch to swipe with. */
.jn-share-stop-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border: 0; border-radius: 50%; background: oklch(0% 0 0 / 0.5); color: #fff; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.jn-share-stop-nav.is-prev { left: 6px; }
.jn-share-stop-nav.is-next { right: 6px; }
@media (hover: hover) and (pointer: fine) {
  .jn-share-stop-nav { display: inline-flex; }
}
.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); }
/* B3: the place's own local-language name, a secondary line under the main
   title -- tertiary color/smaller size so the two never compete for the eye. */
.jn-share-stop-original-name { font-size: 11.5px; color: var(--jn-text-tertiary); margin-bottom: 4px; margin-top: -2px; }
.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-secondary); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.jn-share-stop-note a { color: var(--jn-primary); text-decoration: underline; word-break: break-all; }
/* Deliberately fainter AND a different voice (italic) than .jn-share-stop-note
   above it -- the owner's own note should read as "the important bit", this
   auto-fetched blurb as background trivia you can skip. opacity on top of the
   already-light --jn-text-tertiary pushes it past what another token step
   would give (2026-10-23 feedback: wanted it lighter still, not just whatever
   the next token down happens to be). The dashed rule only appears when a
   note is actually sitting right above it (adjacent-sibling, matching the
   markup's fixed reminder → note → desc order in Share.cshtml) -- otherwise
   it would be a divider between this and the stop's own title/time instead
   of between the two kinds of text it's meant to separate. */
.jn-share-stop-desc { font-size: 11px; font-style: italic; color: var(--jn-text-tertiary); opacity: .72; line-height: 1.55; margin-top: 4px; word-break: break-word; cursor: pointer; }
.jn-share-stop-desc:hover { opacity: 1; color: var(--jn-text-secondary); }
.jn-share-stop-note + .jn-share-stop-desc { margin-top: 8px; padding-top: 6px; border-top: 1px dashed var(--jn-border); }

/* 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-thumb[data-gallery]: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); }
/* The owner's own text for this leg, in the slot the dead route summary used
   to occupy. background: var(--jn-surface) is load-bearing, exactly as it was
   there -- it masks .jn-share-leg::before's centre line running behind it. */
.jn-share-leg-note, .jn-share-leg-reminder { position: relative; max-width: 100%; font-size: 12px; line-height: 1.6; background: var(--jn-surface); padding: 2px 6px; border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
.jn-share-leg-note { color: var(--jn-text-secondary); }
.jn-share-leg-reminder { display: flex; align-items: flex-start; gap: 4px; color: var(--jn-danger); font-weight: 600; }
.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; }
  /* nowrap -- letting "Journee 揪你" break onto a second line (the browser's
     default CJK line-break rule, which doesn't need a space to break on) ate
     into the row's remaining width and was part of why the action buttons
     beside it had no room left (see .jn-share-nav-actions's own comment). */
  .jn-share-nav-logo { font-size: 15px; white-space: nowrap; }
  .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; }
  /* Nothing left to scroll sideways, and the sticky topbar is worth more of
     the short viewport than a scrollbar for an axis that no longer exists. */
  .jn-share-board-scrollbar { display: none; }

  .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; }
  /* The leg's own text tracks the stop description rather than the smaller
     gap/route labels it sits next to: it is prose a visitor actually reads
     and follows on the day, not a label they glance at. */
  .jn-share-stop-desc, .jn-share-leg-note, .jn-share-leg-reminder { font-size: 13px; }
}