/* ============================================================
   Six Eighty v2 — Suite J tour booking
   Everything the multi-step booker needs. Loaded by suite-j.html
   only; the shared system stylesheet knows nothing about it.

   Note: the step indicator is .tour-rail, NOT .steps — that class
   name is spoken for elsewhere on the site.
   ============================================================ */

.tour{border:1px solid var(--ink);background:var(--paper);
  margin-top:clamp(28px,4vw,48px);scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ---------------- step rail ---------------- */
.tour-rail{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--ink)}
.tour-rail .st{display:flex;align-items:center;gap:12px;min-width:0;
  padding:15px clamp(12px,1.8vw,22px);border-right:1px solid var(--line);
  font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);transition:color .3s var(--ease)}
.tour-rail .st:last-child{border-right:0}
.tour-rail .st i{flex:0 0 auto;font-style:normal;width:26px;height:26px;display:grid;
  place-items:center;border:1px solid var(--line);font-size:.66rem;letter-spacing:.02em;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.tour-rail .st span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-rail .st.on{color:var(--ink)}
.tour-rail .st.on i{background:var(--volt);border-color:var(--ink);color:var(--ink)}
.tour-rail .st.done{color:var(--mute)}
.tour-rail .st.done i{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---------------- panes ---------------- */
.tour-pane{display:none;padding:clamp(22px,3.6vw,44px)}
.tour-pane.on{display:block}
.tour-pane h3{text-transform:uppercase;letter-spacing:-.022em;line-height:.98;
  font-size:clamp(1.3rem,2.9vw,2.1rem)}
.tour-pane .sub{color:var(--mute);font-size:1rem;line-height:1.62;max-width:62ch;margin-top:14px}

/* the shared .form grid carries the fields; only the extras live here */
.tour .form{margin-top:clamp(22px,3vw,34px)}
.tour .fg{min-width:0}
/* at label size a bare asterisk reads as a middot; lift and enlarge it */
.tour .req{color:var(--ink);font-size:1.25em;line-height:0;vertical-align:-.16em}
.tour .fg select.empty{color:var(--faint)}
.tour .fg.err input,.tour .fg.err select,.tour .fg.err textarea{
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tour .emsg{display:none;font-size:.78rem;font-weight:500;margin-top:7px}
.tour .fg.err .emsg{display:block}
.tour .hint{font-size:.78rem;line-height:1.5;color:var(--faint);margin-top:8px}
.tour-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.tour-err{display:none;margin-top:22px;padding:14px 16px;background:var(--wash);
  border-left:3px solid var(--ink);font-size:.93rem;line-height:1.5}
.tour-err.on{display:block}

.pane-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:clamp(26px,3.6vw,40px)}
.tour .btn{margin-top:0}
.tour .btn[disabled]{opacity:.34;pointer-events:none}

/* ---------------- calendar ---------------- */
.tour-calhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-top:clamp(24px,3vw,34px);padding-bottom:12px;
  border-bottom:1px solid var(--ink)}
.tour-calhead .k{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.tour-calhead .tz{font-size:.78rem;color:var(--mute)}

.tour-days{display:flex;overflow-x:auto;overscroll-behavior-x:contain;
  border:1px solid var(--line);border-top:0;-webkit-overflow-scrolling:touch}
.tday{flex:0 0 auto;width:92px;padding:14px 8px 12px;text-align:center;
  border-right:1px solid var(--line);background:var(--paper);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease)}
.tday:last-child{border-right:0}
.tday .dw{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tday .dd{font-size:1.5rem;font-weight:500;letter-spacing:-.03em;line-height:1.14;margin-top:3px}
.tday .dm{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.tday .dc{font-size:.66rem;letter-spacing:.04em;color:var(--faint);margin-top:9px}
.tday:hover:not(.on):not(.full){background:var(--wash)}
.tday.on{background:var(--ink);color:#fff}
.tday.on .dw,.tday.on .dm,.tday.on .dc{color:rgba(255,255,255,.66)}
.tday.full{opacity:.38;cursor:default}

.tour-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:9px;margin-top:20px}
.tslot{border:1px solid var(--line);padding:15px 8px;text-align:center;cursor:pointer;
  font-size:.96rem;font-weight:500;letter-spacing:-.01em;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.tslot:hover{border-color:var(--ink)}
.tslot.on{background:var(--volt);border-color:var(--ink)}
.tslot.taken{cursor:default;color:var(--faint);border-style:dashed;background:transparent}
.tslot.taken:hover{border-color:var(--line)}
.tslot small{display:block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;margin-top:5px}

.tour-note{font-size:.82rem;color:var(--faint);margin-top:16px}
.tour-msg{border:1px solid var(--line);padding:34px 20px;margin-top:18px;text-align:center;
  color:var(--mute);font-size:.98rem;line-height:1.6}
.tour-msg a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* ---------------- review ---------------- */
.tour .specs{margin-top:clamp(22px,3vw,32px)}
.tour .specs .row.big .v{font-size:clamp(1.05rem,2.1vw,1.35rem);font-weight:600;
  text-transform:uppercase;letter-spacing:-.02em}
.agree{display:flex;align-items:flex-start;gap:12px;margin-top:24px;cursor:pointer;
  font-size:.9rem;line-height:1.56;color:var(--mute);max-width:70ch}
.agree input{flex:0 0 auto;width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}

/* ---------------- confirmation ---------------- */
.done{max-width:640px;margin:0 auto;text-align:center}
.done-mark{width:56px;height:56px;margin:0 auto 24px;background:var(--volt);
  display:grid;place-items:center;font-size:1.5rem;line-height:1;color:var(--ink)}
.done .pending-pill{display:inline-block;margin-top:20px;padding:9px 15px;
  border:1px solid var(--ink);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase}
.done-when{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);
  margin:22px 0 14px;padding:19px 0;font-weight:600;text-transform:uppercase;
  letter-spacing:-.022em;line-height:1.1;font-size:clamp(1.1rem,2.6vw,1.6rem)}
.done .where{font-size:.88rem;color:var(--mute)}
.done-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.done-next{text-align:left;border-top:1px solid var(--line);margin-top:36px;padding-top:26px}
.done-next h4{font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute)}
.done-next ol{list-style:none;counter-reset:dn;margin-top:16px}
.done-next li{counter-increment:dn;position:relative;padding-left:40px;
  font-size:.97rem;line-height:1.6;color:var(--mute)}
.done-next li + li{margin-top:16px}
.done-next li::before{content:"(0" counter(dn) ")";position:absolute;left:0;top:0;
  font-size:.76rem;color:var(--faint)}
.done-next li b{color:var(--ink);font-weight:600}
.done-next .after{font-size:.84rem;color:var(--faint);line-height:1.6;margin-top:20px}
.done-next .after a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------------- narrow ---------------- */
@media(max-width:720px){
  .tour-rail .st{gap:7px;padding:12px 6px;font-size:.55rem;letter-spacing:.015em}
  .tour-rail .st i{width:22px;height:22px;font-size:.56rem}
  .tour-slots{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))}
  /* stacked full-width buttons: the label fills, the arrow square stays square */
  .pane-nav{flex-direction:column;align-items:stretch}
  .pane-nav > span{display:none}
  .tour .pane-nav .btn{width:100%}
  .tour .pane-nav .btn b{flex:1 1 auto;justify-content:center}
  .tour .pane-nav .btn i{flex:0 0 54px}
}
@media(max-width:360px){
  .tour-rail .st span{display:none}
  .tour-rail .st{justify-content:center}
  .tday{width:80px}
}