/* =========================
   Elegant, readable theme
   ========================= */
:root{
  --bg: #ffffff;
  --text: #0f172a;             /* slate-900 */
  --muted: #475569;            /* slate-600 */
  --border: #e5e7eb;           /* gray-200 */
  --link: #1f6feb;             /* accessible blue */
  --link-hover: #0b66e3;
  --accent: #111827;           /* for headings */
  --code-bg: #f6f8fa;          /* light code bg */
  --kbd-bg: #f3f4f6;
  --kbd-border: #d1d5db;
  --shadow: 0 8px 24px rgba(0,0,0,.06);

  --content-width: 72ch;
  --line: 1.6;
  --radius: 10px;
}

/* Base layout / typography */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body{
  margin: 0;
  padding: 2.5rem 1.25rem 3rem;
  color: var(--text);
  background: var(--bg);
  font: 16px/var(--line) system-ui,-apple-system,"Segoe UI",Roboto,Inter,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
main, article, .content{ max-width: var(--content-width); margin: 0 auto; }
img, svg, video{ max-width: 100%; height: auto; }

/* Headings */
h1,h2,h3,h4,h5,h6{
  color: var(--accent);
  line-height: 1.25;
  margin: 2rem 0 0.75rem;
  letter-spacing: .2px;
}
h1{ font-size: 2rem; margin-top: 0; }
h2{ font-size: 1.5rem; }
h3{ font-size: 1.25rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: 1rem; }
h6{ font-size: .95rem; color: var(--muted); }

/* Text elements */
p{ margin: 0 0 1rem; }
small, .muted{ color: var(--muted); }
a{ color: var(--link); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
hr{ border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Lists */
ul,ol{ margin: .5rem 0 1rem 1.25rem; }
li + li{ margin-top: .25rem; }

/* Quotes / callouts */
blockquote{
  margin: 1.25rem 0;
  padding: .75rem 1rem;
  background: #fafafa;
  border-left: 4px solid var(--link);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #374151;
}

/* Code & pre */
code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
code{
  background: var(--code-bg);
  border: 1px solid #eaeef2;
  border-radius: 6px;
  padding: .15rem .35rem;
  font-size: .92em;
}
pre{
  background: var(--code-bg);
  border: 1px solid #eaeef2;
  border-radius: 8px;
  padding: 1rem;
  overflow: auto;
  box-shadow: var(--shadow);
}
pre code{ background: transparent; border: 0; padding: 0; }
kbd{
  background: var(--kbd-bg);
  border: 1px solid var(--kbd-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: 0 .35rem;
  font-size: .9em;
}

/* Figures / captions */
figure{ margin: 1.25rem 0; }
figcaption, caption{
  caption-side: bottom;
  color: var(--muted);
  font-size: .9rem;
  margin-top: .5rem;
}

/* ======= Tables (clear & readable) ======= */
table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden; /* clip radius for first/last rows */
  box-shadow: var(--shadow);
  margin: 1rem 0 1.5rem;
}
thead th{
  background: #f3f6fb;
  color: #1f2937;
  font-weight: 600;
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding: .75rem .9rem;
}
tbody td{
  padding: .7rem .9rem;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
tbody tr:nth-child(2n){
  background: #fbfdff;
}
tbody tr:last-child td{
  border-bottom: 0;
}
td.numeric, th.numeric{ text-align: right; }
td.center, th.center{ text-align: center; }

.theme-grid { table-layout: fixed; width: 100%; }
.theme-grid td { width: 25%; vertical-align: top; }
.theme-grid img { display:block; width:100%; max-width:180px; height:auto; margin:0 auto; }

/* Optional: compact tables */
.table-compact td, .table-compact th{ padding: .5rem .65rem; }

/* Alerts (optional helpers) */
.note, .tip, .warn{
  border: 1px solid var(--border);
  border-left: 4px solid #3b82f6;
  background: #f8fbff;
  padding: .75rem .9rem;
  border-radius: 8px;
  margin: 1rem 0;
}
.warn{ border-left-color:#ef4444; background:#fff7f7; }
.tip{ border-left-color:#10b981; background:#f6fffb; }

/* Anchored headings (Pandoc adds ids on headings) */
h2[id]::before, h3[id]::before{
  content: "";
  display: block;
  height: 72px;           /* offset for fixed headers, if any */
  margin-top: -72px;
  visibility: hidden;
}

/* Print */
@media print{
  body{ padding: 0.5in; color: #000; }
  a{ color: #000; text-decoration: underline; }
  pre{ box-shadow: none; }
  table{ box-shadow: none; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1020;
    --text: #e5e7eb;
    --muted: #9aa4b2;
    --border: #253048;
    --link: #76a9ff;
    --link-hover: #a4c2ff;
    --accent: #f3f4f6;
    --code-bg: #0f172a;
  }
  blockquote{ background:#0e162c; border-left-color:#3b82f6; color:#cbd5e1; }
  pre{ border-color:#1f2a44; }
  table{ background:#0b1020; border-color: var(--border); }
  thead th{ background:#0f172a; border-bottom-color: var(--border); color:#e5e7eb; }
  tbody tr:nth-child(2n){ background:#0e1628; }
}

/* === TOC sidebar + centered content with dynamic gap === */
:root{
  /* responsive TOC width + gap */
  --toc-width: clamp(240px, 20vw, 320px);
  --toc-gap:  clamp(16px, 5vw, 48px);
}

/* two columns: TOC | content */
body{
  display: grid;
  grid-template-columns: var(--toc-width) 1fr;
  gap: var(--toc-gap);
  align-items: start;
}

/* sticky TOC card (use your own card styles if you already have them) */
#TOC{
position: sticky;
top: 1rem;
max-height: calc(100vh - 2rem);
overflow: auto;
margin: 0;                 /* lets the grid gap control spacing */
}

/* center the reading column inside its grid track */
body > :not(#TOC){
  max-width: var(--content-width);   /* e.g., 72ch from your theme */
  width: min(100%, var(--content-width));
  margin-left: auto;                 /* <- centers the content */
  margin-right: auto;
}

/* Mobile: stack TOC above content */
@media (max-width: 900px){
  body{ display: block; }
  #TOC{
  position: static;
  max-height: none;
  margin: 0 0 1rem 0;
  }
}