/*
  Trang hướng dẫn — lớp trình bày cho ảnh chụp UI thật.

  Mọi toạ độ highlight/con trỏ đến từ `assets/guide/steps.json`, do
  `extension/tests/e2e/guide-*.spec.ts` (helper chung ở `tests/e2e/guide/kit.ts`)
  đo trực tiếp trên DOM lúc chụp.
  File này chỉ quyết định chúng TRÔNG thế nào, không quyết định chúng NẰM ĐÂU
  — nên khi UI đổi layout, chụp lại là đủ, không phải sửa CSS.
*/

.guide-hero {
  padding: 72px 0 28px;
  text-align: center;
}

.guide-hero h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.guide-hero p {
  color: var(--text-muted);
  max-width: 44rem;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.65;
}

/* ── Một tính năng ───────────────────────────────────────────────────── */

.guide-feature {
  padding: 40px 0 64px;
  border-top: 1px solid var(--border);
}

.guide-feature-head {
  margin-bottom: 28px;
}

.guide-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.guide-feature-head h2 {
  font-size: 1.75rem;
  letter-spacing: -0.015em;
  margin: 6px 0 8px;
}

.guide-feature-head p {
  color: var(--text-muted);
  max-width: 42rem;
  line-height: 1.65;
  margin: 0;
}

.guide-stage {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 860px) {
  .guide-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/*
  Cảnh chụp trên trang web thật là khung NGANG, không phải cửa sổ popup dọc.
  Nhét nó vào cột 440px thì chữ trong ảnh nhỏ tới mức vô dụng, nên bố cục lật
  sang một cột: ảnh full chiều rộng, các bước xếp thành hàng bên dưới.
*/
.guide-stage.wide {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.guide-stage.wide .guide-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}

.guide-stage.wide .guide-nav {
  padding-left: 0;
}

/* ── Khung ảnh + lớp chú giải ────────────────────────────────────────── */

.guide-shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  line-height: 0;
  /*
    Một tính năng có thể đi từ cảnh chụp cả trang web (ngang) sang cảnh cửa sổ
    popup (dọc). Không có transition thì khung đổi tỉ lệ đột ngột và cả trang
    giật một nhịp ngay giữa lúc người đọc đang nhìn.
  */
  transition:
    aspect-ratio 0.35s ease,
    max-width 0.35s ease;
}

/* Ảnh dọc (cửa sổ popup) trong khung ngang: giữ đúng bề rộng thật của popup. */
.guide-shot.portrait {
  max-width: 420px;
  margin-inline: auto;
}

.guide-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/*
  Spotlight bằng một cái bóng lan rộng vô hạn ra ngoài khung: vùng bên trong
  hotspot giữ nguyên ảnh, phần còn lại bị phủ tối. Rẻ hơn hẳn việc cắt mask
  và không cần biết kích thước ảnh trước.
*/
.guide-hotspot {
  position: absolute;
  border-radius: 8px;
  box-shadow:
    0 0 0 2px var(--highlight),
    0 0 0 9999px rgba(28, 25, 23, 0.52);
  transition:
    top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-hotspot.ring {
  border-radius: 999px;
}

.guide-hotspot::after {
  content: attr(data-label);
  position: absolute;
  top: -11px;
  left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--accent-fg);
  font: 600 12px/22px var(--font-sans);
  text-align: center;
  box-shadow: 0 2px 6px rgba(28, 25, 23, 0.3);
}

.guide-hotspot[data-label=""]::after {
  display: none;
}

/* Con trỏ chuột — vẽ bằng SVG inline nên không thêm một request nào. */
.guide-cursor {
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(28, 25, 23, 0.45));
  transition:
    top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.guide-cursor::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 999px;
  border: 2px solid var(--highlight);
  opacity: 0;
  animation: guide-tap 2.4s ease-out infinite;
}

@keyframes guide-tap {
  0% {
    transform: scale(0.45);
    opacity: 0.85;
  }
  55%,
  100% {
    transform: scale(1.25);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .guide-hotspot,
  .guide-cursor {
    transition: none;
  }
  .guide-cursor::before {
    animation: none;
  }
}

/* Thanh tiến trình của bước đang chạy — cũng là chỗ báo "đang tạm dừng". */
.guide-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(28, 25, 23, 0.18);
  z-index: 2;
}

.guide-progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--highlight);
}

/* ── Cột bước ────────────────────────────────────────────────────────── */

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

@media (min-width: 861px) {
  .guide-stage:not(.wide) .guide-steps {
    max-height: 520px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.guide-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.guide-step:hover {
  background: var(--surface-hover);
}

.guide-step[aria-current="true"] {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.guide-step-n {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--surface-alt);
  color: var(--text-muted);
}

.guide-step[aria-current="true"] .guide-step-n {
  background: var(--highlight);
  color: var(--accent-fg);
}

.guide-step h3 {
  margin: 2px 0 4px;
  font-size: 0.98rem;
  font-weight: 600;
}

.guide-step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.guide-nav {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-left: 16px;
}

.guide-play {
  min-width: 78px;
  font-weight: 600;
}

.guide-nav button {
  font: inherit;
  font-size: 0.875rem;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.guide-nav button:disabled {
  opacity: 0.45;
  cursor: default;
}

.guide-note {
  margin-top: 40px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ── 5 mục × kịch bản con ────────────────────────────────────────────── */

/* Thanh nhảy tới 5 mục — dính dưới nav khi cuộn. */
.guide-jump {
  position: sticky;
  top: 64px;
  z-index: 20;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
}

.guide-jump a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.guide-jump a:hover,
.guide-jump a[aria-current="true"] {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface-hover);
}

.guide-section {
  padding: 48px 0 24px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 120px;
}

.guide-section-head h2 {
  font-size: 2rem;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
}

.guide-section-head p {
  color: var(--text-muted);
  margin: 0 0 20px;
  font-size: 1.05rem;
}

/* Hàng chọn kịch bản trong một mục. */
.guide-scenarios {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}

.guide-scenario-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
}

.guide-scenario-tab:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.guide-scenario-tab[aria-selected="true"] {
  color: var(--text);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.guide-scenario-tab .n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-subtle);
}

.guide-basic {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Trong mục, kịch bản không cần gạch trên và khoảng đệm lớn như tính năng cũ. */
.guide-section .guide-feature {
  border-top: 0;
  padding: 16px 0 40px;
}

.guide-section .guide-feature-head h2 {
  font-size: 1.35rem;
}

/* Màn hẹp: một hàng cuộn ngang thay vì bảy hàng xếp chồng. */
@media (max-width: 860px) {
  .guide-scenarios {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}