/* =====================================================================
   II-79 — Guided Tours (portal, front-end only)
   Ported from mockup II-79-Guided-Tours-v2.1.html. All classes are
   namespaced `iit-` so nothing collides with per-page portal styles.
   The engine (assets/js/portal/guided-tours.js) injects this DOM.
   ---------------------------------------------------------------------
   Colour/type tokens come from ii-theme.css; each var() carries a
   literal fallback so the tour renders correctly even in isolation.
   ===================================================================== */

:root{
  --iit-brown:      var(--brown,      #9A5327);
  --iit-brown-hov:  #7d411c;
  --iit-orange:     var(--orange,     #F97215);
  --iit-ink:        var(--ink-strong, #171717);
  --iit-body:       #4d4a46;
  --iit-muted:      var(--muted,      #7A7168);
  --iit-line:       var(--line,       #E7E1D6);
  --iit-amber-10:   var(--amber-10,   #FCF3EE);
  --iit-amber-60:   var(--amber-60,   #EBB394);
  --iit-amber:      var(--amber,      #DE804D);
  --iit-panel:      #fff;
  --iit-scrim:      rgba(28,20,17,.66);
  --iit-fdisplay:   var(--font-display, 'Montserrat', sans-serif);
  --iit-fbody:      var(--font-body,    'Lato', sans-serif);
}

/* ---- scrim + spotlight ------------------------------------------------ */
/* The scrim is pointer-events:none so the highlighted target stays clickable
   and the page is never trapped (dev guide §6/§7). Only the callout and the
   welcome/toast capture pointer events. */
.iit-scrim{position:fixed;inset:0;z-index:100000;display:none;pointer-events:none}
.iit-scrim.iit-on{display:block}

.iit-hole{position:absolute;border-radius:12px;
  box-shadow:0 0 0 9999px var(--iit-scrim);
  outline:2px solid var(--iit-orange);outline-offset:3px;
  transition:all .22s cubic-bezier(.4,0,.2,1);pointer-events:none}

/* When a step has no visible target we dim the whole viewport (no cut-out). */
.iit-hole.iit-nohole{outline:none;left:0;top:0;width:100%;height:100%;border-radius:0}

.iit-callout{position:absolute;width:322px;max-width:calc(100vw - 32px);
  background:var(--iit-panel);border-radius:13px;padding:17px 19px 15px;
  box-shadow:0 14px 40px rgba(28,20,17,.30);z-index:100001;pointer-events:auto}
.iit-callout .iit-step-n{font-family:var(--iit-fdisplay);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--iit-amber);margin-bottom:5px}
.iit-callout h3{font-family:var(--iit-fdisplay);font-weight:800;font-size:17px;
  color:var(--iit-ink);line-height:1.25;margin:0 0 6px}
.iit-callout p{margin:0;font-size:13.5px;color:var(--iit-body);line-height:1.55}
.iit-callout .iit-acts{display:flex;align-items:center;gap:9px;margin-top:15px}
.iit-callout .iit-acts .iit-sp{flex:1}
.iit-callout .iit-skip{background:none;border:none;padding:0;color:var(--iit-muted);
  font-size:13px;font-family:var(--iit-fbody);cursor:pointer}
.iit-callout .iit-skip:hover{color:var(--iit-ink);text-decoration:underline}
.iit-callout .iit-dots{display:flex;gap:5px}
.iit-callout .iit-dots i{width:6px;height:6px;border-radius:50%;background:var(--iit-line);display:block}
.iit-callout .iit-dots i.iit-dot-on{background:var(--iit-brown)}

.iit-btn-out{background:#fff;color:var(--iit-brown);border:1.5px solid var(--iit-brown);
  border-radius:999px;padding:8px 16px;font-family:var(--iit-fdisplay);font-weight:700;
  font-size:13px;white-space:nowrap;cursor:pointer}
.iit-btn-out:hover{background:var(--iit-brown);color:#fff}
.iit-btn-solid{background:var(--iit-brown);color:#fff;border:none;border-radius:999px;
  padding:9px 17px;font-family:var(--iit-fdisplay);font-weight:700;font-size:13px;cursor:pointer}
.iit-btn-solid:hover{background:var(--iit-brown-hov)}

.iit-nub{position:absolute;width:15px;height:15px;background:var(--iit-panel);transform:rotate(45deg)}

/* ---- welcome card (Tours A + B only) --------------------------------- */
.iit-wscrim{position:fixed;inset:0;z-index:100000;display:none;
  background:var(--iit-scrim);pointer-events:auto}
.iit-wscrim.iit-on{display:block}
.iit-wcard{position:fixed;z-index:100001;left:50%;top:50%;transform:translate(-50%,-50%);
  width:474px;max-width:calc(100vw - 32px);background:var(--iit-panel);border-radius:16px;
  padding:32px 34px 26px;box-shadow:0 20px 60px rgba(28,20,17,.34);text-align:center}
.iit-wcard .iit-mark{width:52px;height:52px;border-radius:14px;background:var(--iit-brown);
  margin:0 auto 15px;display:flex;align-items:center;justify-content:center}
.iit-wcard .iit-mark svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linejoin:round}
.iit-wcard h2{font-family:var(--iit-fdisplay);font-weight:800;font-size:23px;color:var(--iit-ink);margin:0 0 8px}
.iit-wcard p{margin:0 auto;font-size:14px;color:var(--iit-body);line-height:1.6;max-width:370px}
.iit-wcard .iit-wacts{display:flex;flex-direction:column;align-items:center;gap:11px;margin-top:22px}
.iit-wcard .iit-wacts .iit-btn-solid{padding:11px 24px;font-size:13.5px}

/* ---- end-of-tour toast ------------------------------------------------ */
.iit-toast{position:fixed;z-index:100002;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--iit-ink);color:#fff;border-radius:11px;padding:13px 19px;display:flex;
  align-items:center;gap:13px;box-shadow:0 12px 34px rgba(28,20,17,.34);font-size:13.5px;max-width:560px}
.iit-toast[hidden]{display:none}                 /* dev guide §6: beat display:flex */
.iit-toast b{font-family:var(--iit-fdisplay);font-weight:700}
.iit-toast button{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;
  border-radius:999px;padding:5px 13px;font-family:var(--iit-fdisplay);font-weight:700;font-size:13px;
  white-space:nowrap;cursor:pointer}
.iit-toast button:hover{background:rgba(255,255,255,.28)}

/* ---- reduced motion --------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .iit-hole{transition:none !important}
}

/* ---- dark mode -------------------------------------------------------- */
/* Portal sets .ii-dark on <html>; also honour the OS setting as a default. */
:root.ii-dark{
  --iit-panel:#241d18;
  --iit-ink:#F3EDE7;
  --iit-body:#ccc3ba;
  --iit-line:#3a2f27;
  --iit-scrim:rgba(0,0,0,.72);
}
@media(prefers-color-scheme:dark){
  :root:not(.ii-light){
    --iit-panel:#241d18;
    --iit-ink:#F3EDE7;
    --iit-body:#ccc3ba;
    --iit-line:#3a2f27;
    --iit-scrim:rgba(0,0,0,.72);
  }
}
:root.ii-dark .iit-btn-out{background:transparent}

/* ---- mobile (best-effort; mobile is formally deferred, guide §9 #5) --- */
@media(max-width:600px){
  .iit-callout{width:calc(100vw - 24px);left:12px !important;right:12px}
  .iit-nub{display:none}
}