/* ============================================================
   Master Downloader — SEO section styles
   ------------------------------------------------------------
   Loaded after style.css, before brand.css, so brand tokens
   still win. Everything reads from the same custom properties
   as the rest of the theme, which is why dark mode needs no
   extra rules here.
   ============================================================ */

/* --- Breadcrumbs ------------------------------------------- */
.md-crumbs { font-size: 13.5px; color: var(--md-muted); }
.md-crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0;
}
.md-crumbs li { display: flex; align-items: center; gap: 8px; }
.md-crumbs li + li::before { content: "/"; color: var(--md-border-strong); }
.md-crumbs a { color: var(--md-text-3); text-decoration: none; }
.md-crumbs a:hover { color: var(--md-accent); text-decoration: underline; }
.md-crumbs [aria-current] { color: var(--md-text); font-weight: 600; }

/* --- Key takeaways / answer-first summary ------------------ */
.md-takeaways {
  padding: 22px 24px; border-radius: var(--md-r-card);
  background: var(--md-accent-soft);
  border: 1px solid color-mix(in srgb, var(--md-accent) 20%, transparent);
}
.md-takeaways h2 {
  margin: 0 0 12px; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--md-accent);
}
.md-takeaways ul { margin: 0; padding-left: 20px; }
.md-takeaways li { font-size: 16px; line-height: 1.6; color: var(--md-text-2); }
.md-takeaways li + li { margin-top: 8px; }

/* --- Table of contents ------------------------------------- */
.md-toc {
  padding: 20px 22px; border: 1px solid var(--md-border);
  border-radius: var(--md-r-card); background: var(--md-surface-alt);
}
.md-toc__title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.md-toc ol { margin: 0; padding-left: 20px; }
.md-toc li { font-size: 15px; line-height: 1.5; }
.md-toc li + li { margin-top: 7px; }
.md-toc a { color: var(--md-text-2); text-decoration: none; }
.md-toc a:hover { color: var(--md-accent); text-decoration: underline; }

/* --- Data tables (platforms, formats, comparison) ---------- */
.md-table-wrap { overflow-x: auto; border: 1px solid var(--md-border); border-radius: var(--md-r-card); }
.md-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--md-surface); }
.md-table caption {
  caption-side: bottom; padding: 12px 16px; text-align: left;
  font-size: 13px; color: var(--md-muted);
}
.md-table th, .md-table td {
  padding: 14px 16px; text-align: left; border-top: 1px solid var(--md-divider);
  vertical-align: top;
}
.md-table thead th {
  border-top: 0; background: var(--md-surface-alt);
  font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-text-3); white-space: nowrap;
}
.md-table tbody th { font-weight: 600; color: var(--md-text); }
.md-table td { color: var(--md-text-3); }
.md-table__yes { color: var(--md-accent); font-weight: 700; }
.md-table__no  { color: var(--md-muted); }

/* --- Supported platforms grid ------------------------------ */
.md-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.md-platform {
  display: block; padding: 18px 20px; text-decoration: none;
  border: 1px solid var(--md-border); border-radius: var(--md-r-card);
  background: var(--md-surface); transition: border-color .18s var(--md-ease), transform .18s var(--md-ease);
}
.md-platform:hover { border-color: var(--md-accent); transform: translateY(-2px); }
/* Both are <span>s inside an <a> — without display:block the name and
   the meta line collapse onto one line and the grid looks broken. */
.md-platform__name { display: block; font-size: 16px; font-weight: 700; color: var(--md-text); line-height: 1.3; }
.md-platform__meta { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: var(--md-text-3); }

/* --- Troubleshooting list ---------------------------------- */
.md-fixes { display: grid; gap: 14px; }
.md-fix {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 18px 20px; border: 1px solid var(--md-border);
  border-radius: var(--md-r-card); background: var(--md-surface);
}
.md-fix__num {
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  background: var(--md-accent-soft); color: var(--md-accent);
  font-size: 12px; font-weight: 800;
}
.md-fix h3 { margin: 3px 0 0; font-size: 16.5px; font-weight: 700; }
.md-fix p { margin: 7px 0 0; font-size: 15px; line-height: 1.6; color: var(--md-text-3); }

/* --- Trust / transparency ---------------------------------- */
.md-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.md-trust__item { padding: 20px; border-radius: var(--md-r-card); background: var(--md-surface-alt); }
.md-trust__k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--md-accent); }
.md-trust__v { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--md-text-2); }

/* --- Quotes / first-hand experience ------------------------ */
.md-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.md-quote {
  padding: 22px; border: 1px solid var(--md-border);
  border-radius: var(--md-r-card); background: var(--md-surface);
}
.md-quote blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: var(--md-text-2); }
.md-quote figcaption { margin-top: 14px; font-size: 13.5px; color: var(--md-muted); }
.md-quote figcaption b { color: var(--md-text); font-weight: 600; }

/* --- Video block ------------------------------------------- */
.md-video { border: 1px solid var(--md-border); border-radius: var(--md-r-large); overflow: hidden; background: var(--md-surface); }
.md-video__frame {
  aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: repeating-linear-gradient(135deg, #f2f4f6 0 10px, #e9ecef 10px 20px);
  color: #8d949d; font-size: 13px; text-align: center; padding: 20px;
}
.md-video__body { padding: 22px 24px; }
.md-video__title { font-size: 17px; font-weight: 700; }
.md-video__meta { margin-top: 6px; font-size: 13.5px; color: var(--md-muted); }
.md-video__transcript { margin-top: 16px; }
.md-video__transcript summary { cursor: pointer; font-size: 14.5px; font-weight: 600; }
.md-video__transcript p { margin: 10px 0 0; font-size: 15px; line-height: 1.7; color: var(--md-text-3); }

/* --- Author box, byline, disclosure ------------------------ */
.md-author {
  display: grid; grid-template-columns: 52px 1fr; gap: 18px;
  padding: 22px 24px; border: 1px solid var(--md-border);
  border-radius: var(--md-r-card); background: var(--md-surface-alt);
}
.md-author__avatar {
  width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
  background: var(--md-accent); color: #fff; font-size: 20px; font-weight: 800;
}
.md-author__name { font-size: 16px; font-weight: 700; }
.md-author__role { margin-top: 3px; font-size: 13.5px; color: var(--md-accent); font-weight: 600; }
.md-author__bio  { margin: 10px 0 0; font-size: 15px; line-height: 1.65; color: var(--md-text-3); }
.md-author__link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; }

.md-updated { margin: 0; font-size: 13.5px; color: var(--md-muted); }
.md-disclosure {
  margin: 0; padding: 12px 16px; font-size: 13.5px; line-height: 1.6;
  color: var(--md-text-3); background: var(--md-surface-alt);
  border-radius: var(--md-r-input); border: 1px dashed var(--md-border-strong);
}

/* --- Editorial placeholder marker -------------------------- */
.md-placeholder {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; letter-spacing: .04em; color: var(--md-muted);
}

@media (max-width: 640px) {
  .md-author { grid-template-columns: 1fr; }
  .md-author__avatar { width: 44px; height: 44px; font-size: 17px; }
}

html[data-md-theme="dark"] .md-video__frame {
  background: repeating-linear-gradient(135deg, #22262c 0 10px, #1b1f24 10px 20px);
  color: #7d858e;
}
html[data-md-theme="dark"] .md-author__avatar { color: #fff; }