/* Plyveo inner pages (guida, privacy, delete-account, 404) — built on the landing
   system. Each page loads landing.css first for tokens, nav, footer and theme,
   then this file adds the reading components (wiki layout, cards and prose).
   The filename stays style.css: scripts/check-wiki.mjs asserts it. */

:root {
  --line: rgba(31, 26, 46, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root { --line: rgba(255, 255, 255, 0.1); }
}

.container {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---------- Page scaffold ---------- */
.wiki-page,
.content-page {
  padding: 56px 0 88px;
}

.kicker {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet);
  margin: 0 0 10px;
}

.wiki-page h1,
.content-page h1 {
  font-size: clamp(30px, 4.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.lede {
  color: var(--mut);
  font-size: 16.5px;
  margin: 14px 0 0;
  max-width: 58ch;
}

/* ---------- Wiki layout ---------- */
.wiki-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 16rem) minmax(0, 44rem);
  justify-content: center;
  align-items: start;
  gap: 56px;
}

.wiki-intro {
  margin-bottom: 40px;
}

.wiki-toc {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--card);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(31, 26, 46, 0.07);
}

.wiki-toc-title {
  margin: 0 0 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
}

.wiki-toc ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  font-size: 13.5px;
  color: var(--mut);
}

.wiki-toc a {
  color: var(--mut);
  text-decoration: none;
  transition: color 0.15s ease;
}

.wiki-toc a:hover {
  color: var(--ink);
}

.wiki-content {
  min-width: 0;
  max-width: 44rem;
}

.wiki-section {
  border-top: 1px solid var(--line);
  padding: 30px 0 22px;
  scroll-margin-top: 80px;
}

.wiki-section h2 {
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0 0 14px;
}

/* ---------- Prose ---------- */
.wiki-content p,
.content-card p {
  color: var(--mut);
  margin: 0 0 14px;
}

.wiki-content p:last-child,
.content-card p:last-child {
  margin-bottom: 0;
}

.wiki-content h3 {
  font-size: 17px;
  font-weight: 800;
  margin: 20px 0 8px;
  color: var(--ink);
}

.wiki-content ul,
.wiki-content ol,
.content-card ul,
.content-card ol {
  color: var(--mut);
  margin: 0 0 14px;
  padding-left: 22px;
}

.wiki-content li,
.content-card li {
  margin-bottom: 7px;
}

.wiki-content strong,
.content-card strong {
  color: var(--ink);
}

.wiki-content a,
.content-card a {
  color: var(--violet);
  font-weight: 600;
}

/* ---------- Callouts & figures ---------- */
.wiki-callout {
  margin: 20px 0;
  padding: 16px 20px;
  background: var(--card);
  border-left: 4px solid var(--violet);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(31, 26, 46, 0.06);
}

.wiki-callout h3 {
  margin: 0 0 6px;
}

.wiki-callout--note {
  border-left-color: var(--violet);
}

.wiki-callout--important {
  background: var(--mist);
  border-left-color: var(--teal);
}

.wiki-figure {
  margin: 20px 0;
  padding: 16px;
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(31, 26, 46, 0.06);
  text-align: center;
}

.wiki-figure img {
  display: block;
  width: auto;
  max-width: min(100%, 20rem);
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
}

.wiki-figure figcaption {
  margin-top: 10px;
  color: var(--mut);
  font-size: 13px;
}

.wiki-steps {
  color: var(--mut);
  margin: 0 0 14px;
  padding-left: 22px;
}

.wiki-steps li {
  margin-bottom: 8px;
}

/* ---------- Content page (delete-account) ---------- */
.content-page .container {
  max-width: 760px;
}

.content-page .lede {
  margin-bottom: 28px;
}

.content-card {
  background: var(--card);
  border-radius: 18px;
  padding: 26px 24px;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(31, 26, 46, 0.07);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.35s ease;
}

.content-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(31, 26, 46, 0.1);
}

.content-card h2 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 10px;
}

.steps {
  color: var(--mut);
  margin: 0 0 14px;
  padding-left: 22px;
}

.steps li {
  margin-bottom: 8px;
}

.back-link {
  display: inline-block;
  margin-top: 12px;
  color: var(--violet);
  font-weight: 700;
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .wiki-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .wiki-toc {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .wiki-content {
    max-width: none;
  }
}