/* ============================================================
   route-builder.css — homepage Classic Route builder (hh-rb)
   Consumed by ui_kits/marketing/index.html (RouteBuilder.jsx)
   ============================================================ */
.hh-rb{background:var(--parchment);border-top:1px solid var(--parchment-deep);padding:88px 40px 96px}
.hh-rb__inner{max-width:1180px;margin:0 auto}
.hh-rb__title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-top:14px;flex-wrap:wrap}
.hh-rb__title{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:700;line-height:var(--lh-tight);letter-spacing:var(--tracking-tight);color:var(--ink);margin:0}
.hh-rb__sub{font-family:var(--font-sans);font-size:15px;line-height:var(--lh-body);color:var(--ink-soft);max-width:440px;margin:0;text-wrap:pretty}
.hh-rb__grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:40px;margin-top:44px;align-items:start}

/* ---------- timeline ---------- */
.hh-rb__line{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px;position:relative}
.hh-rb__line::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:repeating-linear-gradient(to bottom,var(--brand-navy) 0 6px,transparent 6px 12px);opacity:0.35}
.hh-rb__stop{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:start;position:relative}
.hh-rb__node{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding-top:20px}
.hh-rb__dot{width:24px;height:24px;border-radius:50%;background:var(--brand-red);border:5px solid var(--parchment);box-shadow:0 0 0 2px var(--brand-red);transition:all var(--dur-base) var(--ease-out)}
.hh-rb__days{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:0.06em;color:var(--brand-navy);background:var(--parchment-deep);padding:3px 7px;border-radius:var(--r-stamp)}
.hh-rb__stop.is-off .hh-rb__dot{background:var(--ink-mute);box-shadow:0 0 0 2px var(--rule);opacity:0.5}
.hh-rb__card{background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);padding:20px 22px;transition:all var(--dur-base) var(--ease-out)}
.hh-rb__stop.is-off .hh-rb__card{background:transparent;box-shadow:none;border-style:dashed;opacity:0.72}

.hh-rb__card-head{display:flex;align-items:center;gap:16px}
.hh-rb__city{flex:1;min-width:0}
.hh-rb__city h3{font-family:var(--font-display);font-size:23px;font-weight:700;color:var(--ink);margin:0;line-height:1.15}
.hh-rb__city h3 .hh-cn{font-size:16px;font-weight:500;color:var(--ink-mute);margin-left:6px}
.hh-rb__city p{font-family:var(--font-sans);font-size:12.5px;color:var(--ink-mute);margin:3px 0 0}

/* switch */
.hh-rb__switch{flex:none;width:44px;height:24px;border-radius:var(--r-pill);border:none;background:var(--rule);cursor:pointer;position:relative;transition:background var(--dur-fast) var(--ease-out);padding:0}
.hh-rb__switch[aria-checked="true"]{background:var(--brand-navy)}
.hh-rb__knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:transform var(--dur-fast) var(--ease-out)}
.hh-rb__switch[aria-checked="true"] .hh-rb__knob{transform:translateX(20px)}

/* nights stepper */
.hh-rb__nights{flex:none;display:flex;align-items:center;gap:10px;border:1px solid var(--rule);border-radius:var(--r-pill);padding:4px 6px;background:var(--parchment-soft)}
.hh-rb__nights button{width:28px;height:28px;border-radius:50%;border:none;background:var(--brand-navy);color:#fff;font-size:17px;line-height:1;cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
.hh-rb__nights button:hover:not(:disabled){background:var(--brand-red)}
.hh-rb__nights button:disabled{background:var(--rule);cursor:default}
.hh-rb__nights span{font-family:var(--font-sans);font-size:13px;color:var(--ink-soft);min-width:62px;text-align:center}
.hh-rb__nights strong{font-size:15px;color:var(--ink)}
.hh-rb__skipped{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-mute)}

/* spot chips */
.hh-rb__spots{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--rule-soft)}
.hh-rb__chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:var(--r-pill);border:1.5px solid var(--rule);background:var(--paper);font-family:var(--font-sans);font-size:13px;color:var(--ink-soft);cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
.hh-rb__chip:hover{border-color:var(--brand-navy)}
.hh-rb__chip.is-on{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.hh-rb__chip-check{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--rule);font-size:10px;line-height:13px;text-align:center;color:transparent;flex:none;transition:all var(--dur-fast) var(--ease-out)}
.hh-rb__chip.is-on .hh-rb__chip-check{background:var(--brand-red);border-color:var(--brand-red);color:#fff}
.hh-rb__chip-name{font-weight:600}
.hh-rb__chip-name .hh-cn{font-weight:400;opacity:0.75;margin-left:2px}
.hh-rb__chip-badge{font-size:9.5px;font-weight:800;letter-spacing:0.08em;padding:2px 6px;border-radius:var(--r-stamp);text-transform:uppercase}
.hh-rb__chip-badge.is-unesco{background:var(--brand-gold);color:var(--brand-navy-ink)}
.hh-rb__chip-badge.is-5a{background:var(--brand-red);color:#fff}
.hh-rb__chip-badge.is-viral{background:var(--brand-sunset);color:#fff}
.hh-rb__chip-badge.is-season{background:var(--brand-navy);color:#fff;text-transform:none;letter-spacing:0.03em}
.hh-rb__chip.is-on .hh-rb__chip-badge.is-season{background:#fff;color:var(--brand-navy)}
.hh-rb__chip.is-on .hh-rb__chip-badge.is-5a{background:#fff;color:var(--brand-red)}
.hh-rb__chip-time{font-size:11px;color:var(--ink-mute)}
.hh-rb__chip.is-on .hh-rb__chip-time{color:rgba(255,255,255,0.7)}

/* ---------- summary ---------- */
.hh-rb__sum{position:sticky;top:96px}
.hh-rb__sum-card{background:var(--brand-navy-deep);color:var(--fg-on-navy);border-radius:var(--r-sm);padding:26px 26px 24px;box-shadow:var(--shadow-md)}
.hh-rb__sum-eyebrow{font-family:var(--font-sans);font-size:11.5px;font-weight:700;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--brand-gold)}
.hh-rb__sum-eyebrow .hh-cn{letter-spacing:0.1em;margin-left:4px}
.hh-rb__sum-total{font-family:var(--font-display);font-size:30px;font-weight:700;margin-top:12px}
.hh-rb__sum-total strong{color:var(--brand-gold)}
.hh-rb__sum-list{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid rgba(247,242,233,0.16);display:flex;flex-direction:column;gap:9px}
.hh-rb__sum-list li{display:flex;align-items:baseline;gap:10px;font-family:var(--font-sans);font-size:13.5px}
.hh-rb__sum-days{font-family:var(--font-mono);font-size:11px;color:var(--brand-gold);min-width:52px}
.hh-rb__sum-city{font-weight:600}
.hh-rb__sum-n{margin-left:auto;color:var(--fg-on-navy-mute);font-size:12px}
.hh-rb__sum-note{font-family:var(--font-sans);font-size:12.5px;line-height:1.55;color:var(--fg-on-navy-mute);margin:14px 0 18px;text-wrap:pretty}
.hh-rb__sum-empty{font-family:var(--font-sans);font-size:13.5px;line-height:1.55;color:var(--fg-on-navy-mute);margin:14px 0 4px}
.hh-rb__copy{width:100%;justify-content:center;background:var(--brand-red)}
.hh-rb__copy:hover{background:var(--brand-red-bright)}
.hh-rb__copy.is-copied{background:#2E7D4F}
.hh-rb__send{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.hh-rb__send-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 6px;border-radius:var(--r-xs);border:1px solid rgba(247,242,233,0.25);color:var(--fg-on-navy);text-decoration:none;font-family:var(--font-sans);font-size:11.5px;font-weight:600;transition:all var(--dur-fast) var(--ease-out)}
.hh-rb__send-btn:hover{background:rgba(247,242,233,0.1);border-color:var(--brand-gold);color:var(--brand-gold)}
.hh-rb__send-btn svg{width:19px;height:19px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hh-rb__grid{grid-template-columns:1fr}
  .hh-rb__sum{position:static}
}
@media (max-width:640px){
  .hh-rb{padding:60px 18px 64px}
  .hh-rb__stop{grid-template-columns:44px minmax(0,1fr)}
  .hh-rb__card{padding:16px}
  .hh-rb__card-head{flex-wrap:wrap}
  .hh-rb__nights{order:3;margin-left:60px}
  .hh-rb__days{display:none}
}

/* ---------- static export: no-JS fallback + hidden mount ---------- */
.hh-rb__grid[hidden]{display:none}
.hh-rb__fallback{margin-top:36px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);padding:20px 24px;font-family:var(--font-sans);font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:820px}
.hh-rb__fallback p{margin:0 0 8px}
.hh-rb__fallback p:last-child{margin-bottom:0}
.hh-rb__fallback strong{color:var(--ink)}
.hh-rb__fallback a{color:var(--link);font-weight:600}
.hh-rb__fallback a:hover{color:var(--link-hover)}