/* Cloud PBX guided tours — the chaptered shell.
 *
 * The stage inside each chapter is an Academy walkthrough figure (see
 * css/academy-demo.css); nothing here restyles it beyond giving it more room
 * than a lesson column allows. Everything in this file is the frame around it:
 * the progress bar, the chapter drawer, the Back/Next rail and the end card.
 */

.pt-wrap{max-width:1180px;margin:0 auto;padding:0 20px 70px;}

/* ── the bar ──────────────────────────────────────────────────────────────
 * Sticky, because on a long chapter the progress and the way out should not
 * scroll away from the reader. */
.pt-bar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:14px;
  padding:12px 20px;margin:0 -20px 20px;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border,#E5E7EB);
}
.pt-back{
  flex-shrink:0;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--gray-500,#6B7280);text-decoration:none;
  padding:7px 11px;border-radius:9px;border:1px solid var(--border,#E5E7EB);background:#fff;
}
.pt-back:hover{color:#7B2FF2;border-color:#D8C6FF;background:#FAF7FF;}
.pt-id{min-width:0;flex:1;}
.pt-id b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7B2FF2;}
.pt-id span{display:block;font-size:13.5px;font-weight:700;color:#1F2937;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.pt-meter{flex:0 0 190px;height:7px;border-radius:99px;background:#EDE7FA;overflow:hidden;}
.pt-meter i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#7B2FF2,#A855F7);transition:width .35s ease;}
.pt-pct{flex-shrink:0;font-size:11.5px;font-weight:800;color:#7B2FF2;min-width:36px;text-align:right;
  font-variant-numeric:tabular-nums;}
.pt-menu{
  flex-shrink:0;font-size:12px;font-weight:700;cursor:pointer;
  padding:7px 12px;border-radius:9px;border:1px solid var(--border,#E5E7EB);background:#fff;color:#374151;
}
.pt-menu:hover{border-color:#D8C6FF;color:#7B2FF2;}
.pt-menu[aria-expanded="true"]{background:#7B2FF2;border-color:#7B2FF2;color:#fff;}

/* ── chapter drawer ─────────────────────────────────────────────────────── */
.pt-drawer{
  margin:0 0 22px;padding:10px;
  border:1px solid var(--border,#E5E7EB);border-radius:14px;background:#FBFAFF;
}
.pt-drawer ol{list-style:none;margin:0;padding:0;counter-reset:ptc;}
.pt-drawer li{counter-increment:ptc;}
.pt-drawer button{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;
  padding:10px 12px;border-radius:10px;border:1px solid transparent;background:none;
  font-size:13px;font-weight:600;color:#374151;font-family:inherit;
}
.pt-drawer button::before{
  content:counter(ptc);flex-shrink:0;
  width:23px;height:23px;border-radius:7px;background:#EDE7FA;color:#6D28D9;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
}
.pt-drawer button:hover{background:#F3EEFF;}
.pt-drawer li.is-now button{background:#fff;border-color:#D8C6FF;color:#5B21B6;}
.pt-drawer li.is-now button::before{background:#7B2FF2;color:#fff;}
.pt-drawer li.is-done button::before{content:"✓";background:#DCFCE7;color:#166534;}

/* ── the chapter ────────────────────────────────────────────────────────── */
.pt-ch-head{margin:0 0 4px;}
.pt-ch-head span{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9CA3AF;}
.pt-ch-head h2{font-size:clamp(20px,3vw,27px);font-weight:800;letter-spacing:-.6px;margin:3px 0 0;}

/* The Academy stage caps itself at 560px tall for a lesson column. A tour is
   the whole page, so give it the height back — the screenshots are 1400–1900px
   wide and the detail being pointed at is often a single table cell. */
.pt-ch .acad-demo{--dm-max-h:660px;margin:16px 0 0;}

/* Each figure carries its own written fallback for use inside a lesson. On a
   tour that copy already exists once, in full, further down the page — so the
   figure's version is suppressed rather than printed twice. */
.pt-ch .dm-script{display:none !important;}

/* ── prev / next ────────────────────────────────────────────────────────── */
.pt-nav{display:flex;align-items:center;gap:14px;margin:22px 0 0;}
.pt-nav .pt-count{flex:1;text-align:center;font-size:12px;font-weight:600;color:var(--gray-500,#6B7280);}
.pt-nav button{
  padding:11px 20px;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;
  border:1px solid var(--border,#E5E7EB);background:#fff;color:#374151;font-family:inherit;
}
.pt-nav button:hover:not(:disabled){border-color:#D8C6FF;color:#7B2FF2;}
.pt-nav button:disabled{opacity:.4;cursor:default;}
.pt-nav .pt-next{background:#7B2FF2;border-color:#7B2FF2;color:#fff;}
.pt-nav .pt-next:hover{background:#6822D6;border-color:#6822D6;color:#fff;}

/* ── end card ───────────────────────────────────────────────────────────── */
.pt-end{
  border:1px solid #D8C6FF;border-radius:18px;padding:30px;
  background:linear-gradient(135deg,#F7F2FF,#FDF7FF);
}
.pt-end h2{font-size:24px;font-weight:800;letter-spacing:-.5px;margin:0 0 8px;}
.pt-end .pt-goal{font-size:14px;line-height:1.75;color:#4B5563;margin:0 0 20px;max-width:62ch;}
.pt-links{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px;}
.pt-links a{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:10px 16px;border-radius:11px;font-size:13px;font-weight:700;
  background:#fff;border:1px solid #D8C6FF;color:#5B21B6;
}
.pt-links a:first-child{background:#7B2FF2;border-color:#7B2FF2;color:#fff;}
.pt-links a:hover{box-shadow:0 4px 14px rgba(123,47,242,.16);}
.pt-end .pt-again{
  background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:#7B2FF2;text-decoration:underline;
}

/* ── written walkthrough ─────────────────────────────────────────────────
 * Always in the page and always visible, whatever the animation is doing.
 * Two reasons, and the second is the one that gets forgotten: a reader who
 * would rather skim than watch, and a search engine — a tour whose every word
 * lives in JavaScript is a tour nobody can find. */
.pt-written{margin:56px 0 0;padding:28px 0 0;border-top:2px solid #F3F4F6;}
.pt-written>h2{font-size:19px;font-weight:800;letter-spacing:-.3px;margin:0 0 6px;}
.pt-written>p.pt-written-sub{font-size:13px;color:var(--gray-500,#6B7280);margin:0 0 22px;}
.pt-w-ch{margin:0 0 22px;padding:16px 18px;border:1px solid var(--border,#E5E7EB);border-radius:13px;background:#FDFDFF;}
.pt-w-ch h3{font-size:14px;font-weight:800;margin:0 0 8px;color:#4C1D95;}
.pt-w-ch p.pt-w-intro{font-size:13px;line-height:1.7;color:#4B5563;margin:0 0 10px;font-weight:600;}
.pt-w-ch ol{margin:0;padding:0 0 0 20px;}
.pt-w-ch li{font-size:13px;line-height:1.7;color:#4B5563;margin:0 0 6px;}
.pt-w-ch p.pt-w-recap{font-size:13px;line-height:1.7;color:#5B21B6;margin:10px 0 0;
  padding:9px 12px;background:#F7F2FF;border-radius:9px;}

/* ── tour index ─────────────────────────────────────────────────────────── */
.pt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:26px 0 0;}
.pt-card{
  display:flex;flex-direction:column;text-decoration:none;
  border:1px solid var(--border,#E5E7EB);border-radius:16px;padding:22px;background:#fff;
  transition:.16s;
}
.pt-card:hover{border-color:#D8C6FF;box-shadow:0 10px 30px rgba(123,47,242,.10);transform:translateY(-2px);}
.pt-card .pt-card-ico{font-size:26px;line-height:1;margin:0 0 12px;}
.pt-card h3{font-size:16px;font-weight:800;letter-spacing:-.3px;margin:0 0 7px;color:#1F2937;}
.pt-card p{font-size:13px;line-height:1.65;color:var(--gray-600,#4B5563);margin:0 0 16px;flex:1;}
.pt-card .pt-card-meta{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700;color:#9CA3AF;}
.pt-card .pt-card-meta .pt-tick{color:#166534;background:#DCFCE7;border-radius:6px;padding:2px 7px;}
.pt-card .pt-card-meta .pt-resume{color:#6D28D9;background:#EDE7FA;border-radius:6px;padding:2px 7px;}

/* ── "show me" launcher, used from the written PBX guide ────────────────── */
.pt-launch{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  margin:12px 0 0;padding:8px 14px;border-radius:10px;
  font-size:12.5px;font-weight:700;
  background:#F3EEFF;border:1px solid #D8C6FF;color:#5B21B6;
}
.pt-launch:hover{background:#7B2FF2;border-color:#7B2FF2;color:#fff;}

/* ── narrow screens ─────────────────────────────────────────────────────
 * A 1900px screenshot on a 390px phone is unreadable however it is framed, so
 * the tour does not pretend otherwise: the authored zoom steps carry the
 * detail, and the hint points at the figure's own full-screen button, which is
 * the only thing that genuinely fixes it. */
.pt-hint{display:none;}
@media(max-width:760px){
  .pt-bar{gap:9px;padding:10px 14px;}
  .pt-meter{flex-basis:70px;}
  .pt-id span{font-size:12px;}
  .pt-menu{padding:7px 9px;}
  .pt-ch .acad-demo{--dm-max-h:340px;}
  .pt-hint{
    display:block;margin:12px 0 0;padding:9px 13px;border-radius:10px;
    background:#FFF7ED;border:1px solid #FCD34D;color:#92400E;
    font-size:12px;line-height:1.6;
  }
  .pt-nav button{padding:10px 14px;font-size:12.5px;}
  .pt-end{padding:22px;}
}

/* Reduced motion: the animation never runs, so the shell should not pretend it
   is a player. Hide the chapter stage entirely and let the written walkthrough
   below carry the whole tour — it already says everything the animation does. */
@media(prefers-reduced-motion:reduce){
  .pt-stage,.pt-nav,.pt-drawer,.pt-meter,.pt-pct,.pt-menu{display:none !important;}
  .pt-written{margin-top:24px;border-top:none;padding-top:0;}
}