/* ============================================================================
   VidAI Guide — shared design system.
   SINGLE SOURCE OF TRUTH for all styling across every /guide/*.html page.
   No build step: every page links this one file. Changing a token here
   updates the whole guide. Do NOT inline page-specific styles in the HTML
   files — add a class here instead, so the guide can't visually drift.
   ============================================================================ */

:root {
  /* Brand */
  --vd-purple:        #6c5ce7;
  --vd-purple-deep:   #4834d4;
  --vd-purple-soft:   #f3f0ff;
  --vd-purple-line:   #d8d3f5;

  /* Accents (per-feature color coding, mirrors the extension) */
  --vd-comments:      #6c5ce7;
  --vd-titles:        #2563eb;
  --vd-desc:          #0891b2;
  --vd-chapters:      #d97706;
  --vd-tags:          #16a34a;
  --vd-translation:   #db2777;
  --vd-channel:       #7c3aed;
  --vd-credits:       #ca8a04;

  /* Surface */
  --vd-bg:            #ffffff;
  --vd-bg-alt:        #f8fafc;
  --vd-ink:           #0f172a;
  --vd-ink-soft:      #475569;
  --vd-ink-faint:     #94a3b8;
  --vd-border:        #e2e8f0;

  /* Shape */
  --vd-radius:        14px;
  --vd-radius-sm:     8px;
  --vd-shadow:        0 10px 30px -12px rgba(15,23,42,0.18);
  --vd-shadow-sm:     0 4px 14px -6px rgba(15,23,42,0.12);
  --vd-maxw:          1080px;

  --vd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--vd-font);
  color: var(--vd-ink);
  background: var(--vd-bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--vd-purple-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; letter-spacing: -0.02em; color: var(--vd-ink); margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 750; margin-top: 2.2em; }
h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.6em; }
p  { margin: 0 0 1.1em; }
:focus-visible { outline: 3px solid var(--vd-purple); outline-offset: 2px; border-radius: 4px; }

/* ---- Layout ---------------------------------------------------------------- */
.vd-container { max-width: var(--vd-maxw); margin: 0 auto; padding: 0 22px; }
.vd-narrow   { max-width: 760px; }
.vd-section  { padding: 64px 0; }
.vd-section--alt { background: var(--vd-bg-alt); }
.vd-eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--vd-purple-deep); margin-bottom: 10px;
}
.vd-lede { font-size: 1.18rem; color: var(--vd-ink-soft); }

/* ---- Header / nav (SHARED MARKUP — keep identical across every page) -------- */
.vd-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--vd-border);
}
.vd-nav {
  display: flex; align-items: center; gap: 18px;
  max-width: var(--vd-maxw); margin: 0 auto; padding: 11px 22px;
  min-height: 62px;
}
.vd-brand {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-weight: 800; font-size: 1.05rem; color: var(--vd-ink);
  white-space: nowrap;
}
.vd-brand:hover { text-decoration: none; }
.vd-brand-logo {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--vd-purple-soft);
  display: grid; place-items: center;
  color: var(--vd-purple-deep); font-weight: 900; font-size: 14px;
  border: 1px solid var(--vd-purple-line);
}
.vd-nav-links {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto; flex-wrap: nowrap;
}
.vd-nav-links > a {
  color: var(--vd-ink-soft); font-size: .92rem; font-weight: 600;
  padding: 9px 13px; border-radius: 999px; line-height: 1;
  transition: background-color .16s ease, color .16s ease;
}
.vd-nav-links > a:hover { background: var(--vd-purple-soft); color: var(--vd-purple-deep); text-decoration: none; }
.vd-nav-links > a.is-active { background: var(--vd-purple-soft); color: var(--vd-purple-deep); }
.vd-nav-cta {
  background: var(--vd-purple); color: #fff !important;
  padding: 8px 14px !important; border-radius: 9px !important;
}
.vd-nav-cta:hover { background: var(--vd-purple-deep); }

/* Nav dropdown / submenu (native <details> — works without JS).
   guide.js adds accordion + outside-click + Esc on top. */
.vd-dd { position: relative; display: inline-flex; }
.vd-dd > summary {
  list-style: none; -webkit-appearance: none; appearance: none;
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--vd-ink-soft); font-size: .92rem; font-weight: 600;
  padding: 9px 13px; border-radius: 999px; line-height: 1;
  transition: background-color .16s ease, color .16s ease;
}
/* Kill the native disclosure triangle in every engine */
.vd-dd > summary::-webkit-details-marker { display: none; }
.vd-dd > summary::marker { content: ''; font-size: 0; }
.vd-dd > summary:hover { background: var(--vd-purple-soft); color: var(--vd-purple-deep); }
.vd-dd[open] > summary,
.vd-dd.vd-dd-has-active > summary { background: var(--vd-purple-soft); color: var(--vd-purple-deep); }
.vd-dd-caret { flex: none; opacity: .55; transition: transform .2s ease, opacity .16s ease; }
.vd-dd > summary:hover .vd-dd-caret { opacity: .85; }
.vd-dd[open] .vd-dd-caret { transform: rotate(180deg); opacity: 1; }

.vd-dd-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 248px;
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--vd-border);
  border-radius: 16px; padding: 8px;
  box-shadow: 0 18px 44px -16px rgba(15,23,42,.28), 0 2px 8px -4px rgba(15,23,42,.12);
  animation: vd-menu-in .17s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes vd-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* Big menus (Features) become a tidy 2-column panel */
.vd-dd-menu--cols {
  display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr));
  min-width: 430px;
}
/* Right-align the last dropdown so it never spills off-screen */
.vd-dd:last-of-type .vd-dd-menu { left: auto; right: 0; }
.vd-dd-menu a {
  display: flex; align-items: center;
  color: var(--vd-ink-soft); font-size: .92rem; font-weight: 600;
  padding: 10px 12px; border-radius: 10px; white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.vd-dd-menu a:hover { background: var(--vd-purple-soft); color: var(--vd-purple-deep); text-decoration: none; }
.vd-dd-menu a.is-active { background: var(--vd-purple); color: #fff; }

/* Language switcher (EN / УКР). Generated into the header by build.rb;
   links point at the same slug in the other language = same targets
   as the page's hreflang alternates. */
.vd-lang {
  display: inline-flex; align-items: center;
  border: 1px solid var(--vd-border); border-radius: 9px;
  overflow: hidden; margin-left: 6px;
}
.vd-lang a, .vd-lang .vd-lang-cur {
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  padding: 7px 10px; line-height: 1; color: var(--vd-ink-soft);
}
.vd-lang a:hover { background: var(--vd-purple-soft); color: var(--vd-purple-deep); text-decoration: none; }
.vd-lang .vd-lang-cur { background: var(--vd-purple); color: #fff; cursor: default; }
.vd-lang a + a, .vd-lang a + .vd-lang-cur, .vd-lang .vd-lang-cur + a {
  border-left: 1px solid var(--vd-border);
}
.vd-burger {
  display: none; margin-left: auto; background: none; border: 0;
  font-size: 1.5rem; cursor: pointer; color: var(--vd-ink); padding: 4px 8px;
}

/* ---- Hero ------------------------------------------------------------------ */
.vd-hero {
  background:
    radial-gradient(1100px 480px at 50% -10%, var(--vd-purple-soft), transparent 70%),
    var(--vd-bg);
  padding: 70px 0 56px; text-align: center;
}
.vd-hero h1 { max-width: 16ch; margin-inline: auto; }
.vd-hero .vd-lede { max-width: 60ch; margin: 14px auto 26px; }
.vd-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1rem; padding: 13px 22px;
  border-radius: 11px; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.vd-btn:hover { text-decoration: none; transform: translateY(-1px); }
.vd-btn--primary { background: var(--vd-purple); color: #fff; box-shadow: 0 8px 22px -8px rgba(108,92,231,.6); }
.vd-btn--primary:hover { background: var(--vd-purple-deep); }
.vd-btn--ghost { background: #fff; color: var(--vd-purple-deep); border-color: var(--vd-purple-line); }
.vd-btn--ghost:hover { background: var(--vd-purple-soft); }

/* ---- Feature grid (index) -------------------------------------------------- */
.vd-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.vd-card {
  background: #fff; border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius); padding: 24px;
  box-shadow: var(--vd-shadow-sm);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.vd-card:hover { transform: translateY(-3px); box-shadow: var(--vd-shadow); border-color: var(--vd-purple-line); text-decoration: none; }
.vd-card-ico {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; font-size: 22px; margin-bottom: 14px;
  background: var(--vd-purple-soft);
}
.vd-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.vd-card p { color: var(--vd-ink-soft); font-size: .96rem; margin: 0 0 14px; flex: 1; }
.vd-card .vd-card-go { font-weight: 700; color: var(--vd-purple-deep); font-size: .92rem; }

/* per-feature accent on icon chips */
.acc-comments   .vd-card-ico, .acc-comments.vd-feature-head .vd-fh-ico   { background:#efeaff; color:var(--vd-comments); }
.acc-titles     .vd-card-ico, .acc-titles.vd-feature-head .vd-fh-ico     { background:#e8f0fe; color:var(--vd-titles); }
.acc-desc       .vd-card-ico, .acc-desc.vd-feature-head .vd-fh-ico       { background:#e0f4f8; color:var(--vd-desc); }
.acc-chapters   .vd-card-ico, .acc-chapters.vd-feature-head .vd-fh-ico   { background:#fdf0dd; color:var(--vd-chapters); }
.acc-tags       .vd-card-ico, .acc-tags.vd-feature-head .vd-fh-ico       { background:#e4f6ea; color:var(--vd-tags); }
.acc-translation .vd-card-ico, .acc-translation.vd-feature-head .vd-fh-ico { background:#fce7f1; color:var(--vd-translation); }
.acc-channel    .vd-card-ico, .acc-channel.vd-feature-head .vd-fh-ico    { background:#f0e9fe; color:var(--vd-channel); }
.acc-credits    .vd-card-ico, .acc-credits.vd-feature-head .vd-fh-ico    { background:#fbf2d8; color:var(--vd-credits); }
.acc-analyzer   .vd-card-ico, .acc-analyzer.vd-feature-head .vd-fh-ico   { background:#e6fbf3; color:#0d9488; }
.acc-summary    .vd-card-ico, .acc-summary.vd-feature-head .vd-fh-ico    { background:#eef2ff; color:#4f46e5; }
.acc-playlist   .vd-card-ico, .acc-playlist.vd-feature-head .vd-fh-ico   { background:#fff1f2; color:#e11d48; }
.acc-calendar   .vd-card-ico, .acc-calendar.vd-feature-head .vd-fh-ico   { background:#ecfeff; color:#0e7490; }
.acc-ytinfo     .vd-card-ico, .acc-ytinfo.vd-feature-head .vd-fh-ico     { background:#fef2f2; color:#dc2626; }
.acc-automation .vd-card-ico, .acc-automation.vd-feature-head .vd-fh-ico { background:#f0fdf4; color:#15803d; }

/* ---- Feature page header --------------------------------------------------- */
.vd-feature-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.vd-fh-ico {
  width: 58px; height: 58px; border-radius: 15px; flex: none;
  display: grid; place-items: center; font-size: 28px; background: var(--vd-purple-soft);
}

/* ---- Steps (how-to) -------------------------------------------------------- */
.vd-steps { list-style: none; counter-reset: vdstep; padding: 0; margin: 28px 0; }
.vd-steps > li {
  position: relative; padding: 0 0 26px 60px; margin: 0;
}
.vd-steps > li::before {
  counter-increment: vdstep; content: counter(vdstep);
  position: absolute; left: 0; top: -2px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--vd-purple); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
}
.vd-steps > li::after {
  content: ''; position: absolute; left: 18px; top: 38px; bottom: 0;
  width: 2px; background: var(--vd-purple-line);
}
.vd-steps > li:last-child::after { display: none; }
.vd-steps h3 { margin: 4px 0 4px; font-size: 1.1rem; }
.vd-steps p  { color: var(--vd-ink-soft); margin: 0; font-size: .98rem; }

/* ---- Callouts -------------------------------------------------------------- */
.vd-callout {
  border: 1px solid var(--vd-purple-line); background: var(--vd-purple-soft);
  border-radius: var(--vd-radius-sm); padding: 16px 18px; margin: 22px 0;
  font-size: .98rem; color: var(--vd-ink);
}
.vd-callout strong { color: var(--vd-purple-deep); }
.vd-callout--tip    { border-color:#bbf7d0; background:#f0fdf4; }
.vd-callout--tip strong { color:#15803d; }
.vd-callout--note   { border-color:#fed7aa; background:#fffbeb; }
.vd-callout--note strong { color:#b45309; }

/* ---- Diagram frame --------------------------------------------------------- */
.vd-diagram {
  background: #fff; border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius); padding: 26px; margin: 28px 0;
  box-shadow: var(--vd-shadow-sm);
}
.vd-diagram figcaption {
  text-align: center; color: var(--vd-ink-faint);
  font-size: .85rem; margin-top: 14px;
}
/* Animated dashed flow connector used inside SVG diagrams */
.vd-flow-line { stroke-dasharray: 6 6; animation: vd-dash 1.1s linear infinite; }
@keyframes vd-dash { to { stroke-dashoffset: -24; } }

/* Screenshot placeholder — drop a real product image in later */
.vd-shot {
  border: 2px dashed var(--vd-purple-line); border-radius: var(--vd-radius);
  background: var(--vd-purple-soft); color: var(--vd-purple-deep);
  padding: 40px 20px; text-align: center; font-weight: 600; margin: 24px 0;
  font-size: .95rem;
}
.vd-shot small { display:block; color: var(--vd-ink-faint); font-weight: 500; margin-top: 6px; }

/* ---- "What you get" outcome band ------------------------------------------- */
.vd-outcome {
  background: linear-gradient(135deg, var(--vd-purple-soft), #fff);
  border: 1px solid var(--vd-purple-line); border-radius: var(--vd-radius);
  padding: 24px 26px; margin: 32px 0;
}
.vd-outcome h3 { margin-top: 0; }
.vd-outcome ul { margin: 0; padding-left: 20px; }
.vd-outcome li { margin: 6px 0; color: var(--vd-ink-soft); }

/* ---- Next/prev pager ------------------------------------------------------- */
.vd-pager { display: flex; justify-content: space-between; gap: 14px; margin: 44px 0 8px; flex-wrap: wrap; }
.vd-pager a {
  flex: 1; min-width: 220px; border: 1px solid var(--vd-border);
  border-radius: var(--vd-radius); padding: 16px 18px; background: #fff;
}
.vd-pager a:hover { border-color: var(--vd-purple-line); background: var(--vd-purple-soft); text-decoration: none; }
.vd-pager span { display: block; font-size: .78rem; color: var(--vd-ink-faint); text-transform: uppercase; letter-spacing: .08em; }
.vd-pager strong { color: var(--vd-purple-deep); }
.vd-pager .vd-pg-next { text-align: right; }

/* ---- Footer (SHARED MARKUP — keep identical across every page) ------------- */
.vd-footer { border-top: 1px solid var(--vd-border); background: var(--vd-bg-alt); padding: 40px 0; margin-top: 60px; }
.vd-footer-grid { display: flex; gap: 30px; flex-wrap: wrap; justify-content: space-between; }
.vd-footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--vd-ink-faint); margin: 0 0 10px; }
.vd-footer ul { list-style: none; padding: 0; margin: 0; }
.vd-footer li { margin: 5px 0; }
.vd-footer a { color: var(--vd-ink-soft); font-size: .92rem; }
.vd-footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--vd-border); color: var(--vd-ink-faint); font-size: .85rem; }

/* ---- Scroll reveal --------------------------------------------------------- */
.vd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.vd-reveal.is-in { opacity: 1; transform: none; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .vd-nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: #fff; border-bottom: 1px solid var(--vd-border);
    padding: 10px 16px; gap: 2px;
  }
  .vd-nav-links.is-open { display: flex; }
  .vd-nav-links > a { padding: 12px; border-radius: 10px; }
  /* Dropdowns flow inline on mobile (no floating card) */
  .vd-dd { display: block; width: 100%; }
  .vd-dd > summary { width: 100%; padding: 13px 12px; border-radius: 10px; justify-content: space-between; }
  .vd-dd-menu,
  .vd-dd-menu--cols {
    position: static; display: flex; flex-direction: column;
    box-shadow: none; border: 0; border-radius: 0;
    min-width: 0; padding: 2px 0 6px 14px; gap: 0; animation: none;
  }
  .vd-dd:last-of-type .vd-dd-menu { right: auto; }
  .vd-dd-menu a { padding: 11px 12px; }
  .vd-dd-menu a.is-active { background: var(--vd-purple-soft); color: var(--vd-purple-deep); }
  .vd-burger { display: block; }
  .vd-section { padding: 44px 0; }
  .vd-steps > li { padding-left: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .vd-reveal { opacity: 1; transform: none; transition: none; }
  .vd-flow-line { animation: none; }
  .vd-btn:hover, .vd-card:hover { transform: none; }
}