/* ----- Itjob: design tokens, dark mode, article body ----- */

/* Color tokens (RGB triplets so Tailwind's <alpha-value> works) */
:root {
  --paper:   255 255 255;
  --cream:   250 249 255;
  --line:    231 230 243;
  --mute:    107 111 135;
  --surface: 255 255 255;
  --fg:      14 14 63;

  --code-bg: 14 14 63;
  --th-bg:   250 249 255;
}
[data-theme="dark"] {
  --paper:   12 12 22;     /* page bg */
  --cream:   18 18 32;     /* tinted section bg */
  --line:    36 36 64;     /* borders */
  --mute:    158 161 184;  /* muted text */
  --surface: 22 22 38;     /* cards */
  --fg:      232 232 248;  /* main text */

  --code-bg: 6 6 16;
  --th-bg:   22 22 38;
}

/* Smooth theme transition */
html { color-scheme: light; }
[data-theme="dark"] html, html[data-theme="dark"] { color-scheme: dark; }
body, .bg-paper, .bg-cream, .bg-surface, .border-line, .text-fg, .text-mute {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* Fade-up entrance for cards */
.fade-up {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.fade-up.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
}

/* Sticky header: shrinks slightly after scroll */
#site-header.is-scrolled { backdrop-filter: blur(8px); background: rgba(14,14,63,0.92); }
#site-header.is-scrolled #site-header-inner { height: 2.75rem; }

/* TOC active state */
#toc a.is-active {
  color: rgb(var(--fg));
  border-left-color: #6c5cff;
}

/* Anchor link icons on h2/h3 */
.article-body h2 .anchor-link,
.article-body h3 .anchor-link {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  color: rgb(var(--mute));
  text-decoration: none;
  opacity: 0;
  transform: translateY(-1px);
  transition: opacity 0.15s ease, color 0.15s ease;
  vertical-align: middle;
}
.article-body h2:hover .anchor-link,
.article-body h3:hover .anchor-link { opacity: 1; }
.article-body .anchor-link:hover { color: #6c5cff; }

/* Article body */
.article-body {
  color: rgb(var(--fg) / 0.88);
  font-size: 1.075rem;
  line-height: 1.75;
}

.article-body h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: rgb(var(--fg));
  margin: 2.5rem 0 1rem;
  letter-spacing: -0.01em;
  scroll-margin-top: 5rem; /* avoid sticky header */
}

.article-body h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: rgb(var(--fg));
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 5rem;
}

.article-body p { margin: 1rem 0; }

.article-body a {
  color: #6c5cff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-body a:hover { color: #4f3fd6; }

.article-body ul, .article-body ol { margin: 1rem 0 1rem 1.5rem; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin: 0.4rem 0; }

.article-body blockquote {
  border-left: 3px solid #6c5cff;
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 1.5rem 0;
  color: rgb(var(--mute));
  font-style: italic;
}

.article-body code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgb(108 92 255 / 0.10);
  color: #6c5cff;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-size: 0.9em;
}

.article-body pre {
  background: rgb(var(--code-bg)) !important;
  color: #e7e6f3;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  overflow-x: auto;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  line-height: 1.65;
  border: 1px solid rgb(var(--line));
}

/* Code blocks break out beyond the prose column on wide screens —
   but only below xl (1280px), where the fixed right-side TOC appears
   and would overlap the right-side breakout. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .article-body pre {
    margin-left: -88px;
    margin-right: -88px;
  }
}

.article-body pre code {
  background: transparent !important;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.article-body img {
  margin: 1.5rem auto;
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}

.article-body hr {
  border: none;
  border-top: 1px solid rgb(var(--line));
  margin: 2rem 0;
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.article-body th, .article-body td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgb(var(--line));
}

.article-body th {
  font-weight: 600;
  color: rgb(var(--fg));
  background: rgb(var(--th-bg));
}

/* Toast (link-copied etc.) */
#toast.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Print styles — strip chrome, optimize ink */
@media print {
  #site-header, #back-to-top, #reading-progress, #toast, aside, .fade-up.is-visible { animation: none !important; }
  #site-header, #back-to-top, #reading-progress, #toast, aside[id="toc"], aside:has(#toc),
  aside, .mt-14.flex.flex-col.sm\:flex-row.gap-4,
  #search-modal { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .article-body { color: #000; font-size: 11pt; }
  .article-body a { color: #000; text-decoration: underline; }
  .article-body pre { background: #f4f4f4 !important; color: #000 !important; border: 1px solid #ccc; }
  @page { margin: 1.5cm; }
}