/* PythonKitchen — article typography. Light + designed dark surface. */

:root {
  --pk-bg: #ffffff;
  --pk-surface: #f9fafb;
  --pk-border: #e5e7eb;
  --pk-ink: #1f2937;
  --pk-ink-soft: #4b5563;
  --pk-ink-muted: #6b7280;
  --pk-accent: #4f46e5;
  --pk-accent-strong: #4338ca;
  --pk-code-bg: #f3f4f6;
  --pk-quote-bar: #e5e7eb;
}
html.dark {
  --pk-bg: #0b1120;
  --pk-surface: #111827;
  --pk-border: #1f2937;
  --pk-ink: #e5e7eb;
  --pk-ink-soft: #cbd5e1;
  --pk-ink-muted: #94a3b8;
  --pk-accent: #818cf8;
  --pk-accent-strong: #a5b4fc;
  --pk-code-bg: #1e293b;
  --pk-quote-bar: #334155;
}

article.prose {
  font-size: 18px;
  line-height: 1.8;
  color: var(--pk-ink);
  text-align: left;
}
article.prose > p { margin-bottom: 1.5rem; }

article.prose a {
  color: var(--pk-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--pk-accent) 30%, transparent);
  transition: border-color .2s, color .2s;
}
article.prose a:hover {
  color: var(--pk-accent-strong);
  border-bottom-color: var(--pk-accent-strong);
}

article.prose img {
  border-radius: 10px;
  display: block;
  margin: 2rem auto;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--pk-border);
}

article.prose ol { list-style-type: decimal; padding-left: 1.5rem; margin-bottom: 1.5rem; }
article.prose ul { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; }
article.prose li { margin-bottom: 0.5rem; }
article.prose li::marker { color: var(--pk-accent); font-weight: bold; }

article.prose h1, article.prose h2, article.prose h3, article.prose h4 {
  color: var(--pk-ink);
  scroll-margin-top: 6rem;
  position: relative;
}
article.prose h1 { font-weight: 800; font-size: 2.25rem; margin-top: 3rem; margin-bottom: 1.5rem; line-height: 1.2; }
article.prose h2 { font-weight: 700; font-size: 1.6rem; margin-top: 2.75rem; margin-bottom: 1.25rem; line-height: 1.3; padding-bottom: .3rem; border-bottom: 1px solid var(--pk-border); }
article.prose h3 { font-weight: 700; font-size: 1.3rem; margin-top: 2rem; margin-bottom: 1rem; }
article.prose h4 { font-weight: 600; font-size: 1.15rem; margin-top: 1.5rem; margin-bottom: 0.75rem; }

/* Heading anchor link — appears on hover, keyboard-focus visible */
article.prose h1 .anchor,
article.prose h2 .anchor,
article.prose h3 .anchor {
  position: absolute;
  left: -1.6em;
  top: 50%;
  transform: translateY(-50%);
  color: var(--pk-ink-muted);
  opacity: 0;
  border: 0 !important;
  transition: opacity .2s, color .2s;
  display: inline-flex;
}
article.prose h1:hover .anchor,
article.prose h2:hover .anchor,
article.prose h3:hover .anchor,
article.prose .anchor:focus { opacity: 1; }
article.prose .anchor:hover { color: var(--pk-accent); border: 0 !important; }
.anchor-toast {
  position: absolute; left: 0; top: -1.9em;
  font-size: .72rem; font-weight: 600;
  background: var(--pk-accent); color: #fff;
  padding: .15rem .5rem; border-radius: 6px; white-space: nowrap;
  pointer-events: none;
}

article.prose code {
  background-color: var(--pk-code-bg);
  padding: 0.18rem 0.42rem;
  border-radius: 5px;
  font-size: 0.88em;
  color: var(--pk-ink);
}
pre { border-radius: 12px; border: 1px solid var(--pk-border); overflow-x: auto; }
pre code { background-color: transparent; padding: 0; font-size: 0.9em; }
html.dark pre { background: #0f172a !important; }
html.dark pre code { color: #e2e8f0; }
html.dark .hljs { background: transparent !important; color: #e2e8f0; }

article.prose blockquote {
  background-color: var(--pk-surface);
  border-left: 4px solid var(--pk-quote-bar) !important;
  padding: 1rem 1.5rem;
  font-style: italic;
  margin: 2rem 0 !important;
  color: var(--pk-ink-soft);
  border-radius: 0 8px 8px 0;
}

article.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: .95rem;
  display: block;
  overflow-x: auto;
}
article.prose table th, article.prose table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--pk-border);
  text-align: left;
}
article.prose table th {
  background-color: var(--pk-surface);
  font-weight: 600;
  color: var(--pk-ink);
}
html.dark article.prose table td,
html.dark article.prose table th { border-color: var(--pk-border); }

/* Lightbox caption spacing fix */
.lb-outerContainer { border-radius: 8px; }

/* scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].reveal-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* TOC active link */
.toc-active { color: var(--pk-accent) !important; font-weight: 600; border-left-color: var(--pk-accent) !important; }