/* ==========================================================================
   KLLD-TOUR-INDEX-RAIL-2026 — sticky in-page chapter-index rail for single
   st_tours (PNGBAY / single-5 "Emerald Nocturne" layout).

   A faithful port of the _proto/tour-cinematic-route .index#kdIndex + .prog
   rail: a slim, fixed right-edge list of THIS tour's own content sections that
   scroll-spies them (active state + a vertical green progress spine).

   Inherits the active --png-* scheme tokens (declared on body.klld-png-layout
   in item/klld-tour-pngbay/assets.php), so it recolours per tour scheme
   (islands / lake / jungle / ... / nightlife) instead of sitting on top of the
   page. Fallback literals keep it sane if a token is ever missing.

   Markup: inc/klld-tour-single-index-rail.php (wp_footer, gated to png tours).
   Behaviour: assets/js/klld-tour-index-rail.js (IntersectionObserver spy).
   Kept whole in LiteSpeed via data-no-optimize (JS-toggled .is-* states).
   ========================================================================== */

.klld-cix{
  --cix-gold:  var(--png-gold-hi, #ffcc00);
  --cix-green: var(--png-green,   #099024);
  --cix-ink:   var(--png-paper,   #16201a);  /* primary TEXT (paper=text, ink=bg in these tokens) */
  --cix-dim:   var(--png-mist2,   rgba(108,122,112,1));
  --cix-faint: var(--png-mist,    rgba(76,91,82,1));
  --cix-line:  var(--png-line-soft, rgba(22,32,26,.12));
  --cix-disp:  var(--png-disp,    "Newsreader", Georgia, serif);
  --cix-body:  var(--png-body,    "Hanken Grotesk", system-ui, sans-serif);
  --cix-mono:  var(--png-mono,    "JetBrains Mono", ui-monospace, monospace);
  --cix-ease:  cubic-bezier(.22,.61,.36,1);

  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 90000;
  display: none;                 /* revealed by JS via .is-ready + gutter fit */
  flex-direction: column;
  align-items: flex-end;
  padding-right: 16px;           /* room for the progress spine on the far right */
  text-align: right;
  pointer-events: none;          /* re-enabled on interactive children */
}
.klld-cix.is-ready{ display: flex; }

/* Reveal choreography — one soft settle-in on ready. */
.klld-cix.is-ready{ animation: cix-in .6s var(--cix-ease) both; }
@keyframes cix-in{
  from{ opacity: 0; transform: translate(10px,-50%); }
  to  { opacity: 1; transform: translate(0,-50%); }
}

/* Eyebrow / header — the mini "On this page" label. */
.klld-cix-h{
  font-family: var(--cix-body);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cix-dim);
  margin: 0 2px 14px 0;
  white-space: nowrap;
  opacity: .85;
}

.klld-cix-list{
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.klld-cix-item{ margin: 0; }

/* Each chapter link: [number] [label] [marker] — right-aligned like the proto. */
.klld-cix-link{
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 11px;
  padding: 6px 0;
  color: var(--cix-dim);
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--cix-ease), color .3s var(--cix-ease);
}
.klld-cix-link:hover{ transform: translateX(-4px); }

/* Number — mono, tiny, tracked. */
.klld-cix-n{
  font-family: var(--cix-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--cix-dim);
  transition: color .3s var(--cix-ease);
}

/* Label — Newsreader display, compact at rest, expands on hover/focus so the
   rail stays a slim ~40px column that never collides with the content column. */
.klld-cix-k{
  font-family: var(--cix-disp);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1;
  letter-spacing: .003em;
  color: var(--cix-faint);
  white-space: nowrap;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width .38s var(--cix-ease), opacity .32s var(--cix-ease), color .3s var(--cix-ease);
}
.klld-cix-link:hover .klld-cix-k,
.klld-cix-link:focus-visible .klld-cix-k,
.klld-cix-item.is-active .klld-cix-k{
  max-width: 42vw;
  opacity: 1;
}

/* Marker dot — rides the spine; lights gold on the active chapter (proto .mk). */
.klld-cix-mk{
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--cix-line);
  transition: background .3s var(--cix-ease), box-shadow .3s var(--cix-ease), transform .3s var(--cix-ease);
}

/* Hover state (non-active). */
.klld-cix-link:hover .klld-cix-n{ color: var(--cix-faint); }
.klld-cix-link:hover .klld-cix-mk{ box-shadow: inset 0 0 0 1.5px var(--cix-green); }

/* Active chapter. */
.klld-cix-item.is-active .klld-cix-n{ color: var(--cix-green); }
.klld-cix-item.is-active .klld-cix-k{ color: var(--cix-ink); font-weight: 600; }
.klld-cix-item.is-active .klld-cix-mk{
  background: var(--cix-gold);
  box-shadow: 0 0 10px rgba(255,204,0,.85), 0 0 0 1.5px rgba(22,32,26,.22);
  transform: scale(1.14);
}

/* Keyboard focus ring. */
.klld-cix-link:focus-visible{ outline: none; }
.klld-cix-link:focus-visible .klld-cix-mk{
  box-shadow: 0 0 0 2px var(--cix-gold), 0 0 0 4px rgba(22,32,26,.18);
}

/* Vertical progress spine on the far right — proto .prog / #kdProg, rotated. */
.klld-cix-prog{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--cix-line);
  overflow: hidden;
}
.klld-cix-prog i{
  display: block;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, var(--cix-green), var(--cix-gold));
  box-shadow: 0 0 10px rgba(9,144,36,.55);
  transition: height .18s linear;
}

/* Hard floor: never show on narrow viewports (JS also gutter-gates on width). */
@media (max-width: 1024px){
  .klld-cix{ display: none !important; }
}

/* Reduced motion — no settle-in, no smooth spine fill, no nudge. */
@media (prefers-reduced-motion: reduce){
  .klld-cix.is-ready{ animation: none; }
  .klld-cix-link,
  .klld-cix-k,
  .klld-cix-n,
  .klld-cix-mk,
  .klld-cix-prog i{ transition: none; }
  .klld-cix-link:hover{ transform: none; }
}


/* ==========================================================================
   KLLD-ORB-2026 — "Explore other regions" cross-nav strip (sibling of the
   chapter rail; ships in the same module/assets). A quiet, ledger-style band
   at the page foot linking the 5 destination buckets on the tours listing
   (Islands Tours / Khao Lak / Khao Sok / Phang Nga / Phuket). The current
   tour's own bucket is marked "you are here" (non-link). NOT hidden on mobile
   — it becomes a horizontal scroll strip. Uses the same --png-* scheme tokens
   (paper = TEXT, ink = BG, gold/green = accents) so it recolours per scheme.
   ========================================================================== */
.klld-orb{
  --orb-ease: cubic-bezier(.22,.61,.36,1);
  position: relative;
  padding: clamp(46px,7vw,88px) 0;
  border-top: 1px solid var(--png-line-soft, rgba(22,32,26,.1));
  font-family: var(--png-body, "Hanken Grotesk", system-ui, sans-serif);
  color: var(--png-paper, #16201a);
}
.klld-orb-wrap{
  max-width: var(--png-maxw, 1180px);
  margin: 0 auto;
  padding: 0 30px;
}
@media (max-width: 600px){ .klld-orb-wrap{ padding: 0 18px; } }

.klld-orb-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin-bottom: clamp(22px,3vw,34px);
}
.klld-orb-eyebrow{
  font-family: var(--png-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--png-gold, #93701f);
}
.klld-orb-note{
  font-size: clamp(.9rem,1.4vw,1.02rem);
  line-height: 1.5;
  color: var(--png-mist, #4c5b52);
}

/* The row — wraps on desktop, horizontal scroll-snap strip on mobile. */
.klld-orb-row{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 860px){
  .klld-orb-row{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--png-line, rgba(147,112,31,.3)) transparent;
    margin: 0 -18px;
    padding: 2px 18px 12px;
  }
  .klld-orb-item{ flex: 0 0 62%; max-width: 240px; scroll-snap-align: start; }
}
.klld-orb-item{ margin: 0; min-width: 0; }

/* Each chip — a slim ledger card: index numeral, place name, cue. */
.klld-orb-chip{
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 16px 16px 15px;
  border-radius: var(--png-r, 14px);
  background: rgba(var(--png-surface, 255,255,255), .6);
  border: 1px solid var(--png-line, rgba(147,112,31,.3));
  color: var(--png-paper, #16201a);
  text-decoration: none;
  overflow: hidden;
  transition: transform .32s var(--orb-ease), border-color .32s var(--orb-ease),
              background .32s var(--orb-ease), box-shadow .32s var(--orb-ease);
}
a.klld-orb-chip:hover{
  transform: translateY(-4px);
  border-color: var(--png-green, #099024);
  background: rgba(var(--png-surface, 255,255,255), .9);
  box-shadow: 0 18px 34px -22px rgba(9,144,36,.5);
}
.klld-orb-chip:focus-visible{
  outline: none;
  border-color: var(--png-gold-hi, #ffcc00);
  box-shadow: 0 0 0 2px var(--png-gold-hi, #ffcc00), 0 0 0 4px rgba(22,32,26,.15);
}
.klld-orb-n{
  flex: none;
  font-family: var(--png-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--png-mist2, #6c7a70);
  padding-top: 2px;
  transition: color .32s var(--orb-ease);
}
a.klld-orb-chip:hover .klld-orb-n{ color: var(--png-green, #099024); }
.klld-orb-name{
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--png-disp, "Newsreader", Georgia, serif);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.12;
  letter-spacing: .002em;
  color: var(--png-paper, #16201a);
}
.klld-orb-cue{
  flex: none;
  display: inline-flex;
  color: var(--png-mist2, #6c7a70);
  transform: translateX(-2px);
  transition: transform .32s var(--orb-ease), color .32s var(--orb-ease);
}
.klld-orb-cue svg{ width: 15px; height: 15px; }
a.klld-orb-chip:hover .klld-orb-cue{ transform: translateX(2px); color: var(--png-green, #099024); }

/* Current bucket — "you are here": gold marker rail + green tag, not a link. */
.klld-orb-item.is-current .klld-orb-chip{
  cursor: default;
  border-color: var(--png-gold, #93701f);
  background: rgba(var(--png-surface, 255,255,255), .82);
}
.klld-orb-item.is-current .klld-orb-chip::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--png-green, #099024), var(--png-gold-hi, #ffcc00));
}
.klld-orb-item.is-current .klld-orb-n{ color: var(--png-green, #099024); }
.klld-orb-here{
  flex: none;
  align-self: flex-start;
  font-family: var(--png-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--png-green, #099024);
  white-space: nowrap;
}

/* Parked (pre-relocation / no-JS): keep it presentable at the DOM tail. */
.klld-orb:not(.is-placed){ }

@media (prefers-reduced-motion: reduce){
  .klld-orb-chip,
  .klld-orb-n,
  .klld-orb-cue{ transition: none; }
  a.klld-orb-chip:hover{ transform: none; }
  a.klld-orb-chip:hover .klld-orb-cue{ transform: translateX(-2px); }
}