/**
 * Tutorial prompt and video.
 *
 * Tokens only, so it follows the theme into dark mode. Sits in a corner rather
 * than over the page: an overlay before somebody has seen the tool is both
 * hostile and, on mobile, something Google treats as an intrusive interstitial.
 */

.pcg-tut {
  position: fixed;
  z-index: 9000;
  right: var(--pcg-space-4, 20px);
  bottom: var(--pcg-space-4, 20px);
  max-width: 340px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
}
.pcg-tut.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pcg-tut { transition: none; transform: none; }
}

.pcg-tut__card {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 34px 14px 14px;
  background: var(--pcg-surface);
  color: var(--pcg-text);
  border: 1px solid var(--pcg-border-strong);
  border-radius: var(--pcg-radius-lg, 10px);
  box-shadow: var(--pcg-shadow-lg);
}

.pcg-tut__face { flex: none; width: 42px; color: var(--pcg-primary); }
.pcg-tut__face svg,
.pcg-tut__face img { display: block; width: 42px; height: 42px; object-fit: contain; }

.pcg-tut__title { display: block; margin-bottom: 2px; }
.pcg-tut__text { margin: 0 0 10px; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-tut__actions { display: flex; gap: 8px; flex-wrap: wrap; }

.pcg-tut__x {
  position: absolute; top: 4px; right: 4px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--pcg-text-muted);
}
.pcg-tut__x:hover { color: var(--pcg-text); }

/* Left behind once the prompt is dismissed, so changing your mind does not
   mean clearing browser storage. */
.pcg-tut__reopen {
  position: fixed; z-index: 8999;
  right: var(--pcg-space-4, 20px); bottom: var(--pcg-space-4, 20px);
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--pcg-border-strong);
  background: var(--pcg-surface);
  color: var(--pcg-primary);
  font-weight: 700; font-size: 18px; line-height: 1;
  cursor: pointer;
  box-shadow: var(--pcg-shadow);
}
.pcg-tut__reopen:hover { border-color: var(--pcg-primary); }

/* ── The video ──────────────────────────────────────────────────────────── */

.pcg-tut__modal {
  position: fixed; inset: 0; z-index: 9100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pcg-space-4, 20px);
}
.pcg-tut__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }

.pcg-tut__frame {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: var(--pcg-surface);
  border-radius: var(--pcg-radius-lg, 10px);
  overflow: hidden;
  box-shadow: var(--pcg-shadow-lg);
}
.pcg-tut__frametop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--pcg-border);
  color: var(--pcg-text);
}
.pcg-tut__close {
  background: none; border: 0; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--pcg-text-muted);
  width: 32px; height: 32px;
}
.pcg-tut__close:hover { color: var(--pcg-text); }

/* aspect-ratio rather than the padding-top trick: supported everywhere that
   matters now, and it does not break when the title bar changes height. */
.pcg-tut__player { aspect-ratio: 16 / 9; background: #000; }
.pcg-tut__player iframe { display: block; width: 100%; height: 100%; border: 0; }

body.pcg-tut-open { overflow: hidden; }

@media (max-width: 520px) {
  .pcg-tut { left: var(--pcg-space-3, 14px); right: var(--pcg-space-3, 14px); max-width: none; }
  .pcg-tut__modal { padding: 0; }
  .pcg-tut__frame { max-width: none; border-radius: 0; }
}