/* ==========================================================================
   duck-pond dark theme — pandoc markdown stylesheet
   Palette inspired by the "carbonfox" theme https://github.com/EdenEast/nightfox.nvim
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* surfaces */
  --bg:          #161616; /* page background */
  --bg-card:     #282828; /* code, quotes, tables, ToC, inputs */
  --bg-card-alt: #1d1d1d; /* alternating table rows */
  --border:      #353535; /* quiet dividers (hr, table rows) */

  /* text */
  --fg:        #dfdfe0; /* body text */
  --fg-bright: #f9fbff; /* strong text */
  --fg-dim:    #b6b8bb; /* dates, captions, comments, secondary text */

  /* accents (named by role, not just color, so usage stays intentional) */
  --accent-heading:       #6690d9; /* dim blue — headings/ToC text, sits back a touch */
  --accent-heading-solid: #78a9ff; /* vivid blue — solid fills like the table header */
  --accent-link:          #52bdff; /* bright cyan — clearly distinct from heading blue */
  --accent-link-hover:    #33b1ff;
  --accent-quote:         #be95ff; /* magenta */
  --accent-quote-dim:     #a27fd9;
  --accent-code:          #08bdba; /* teal   */
  --accent-code-bright:   #2dc7c4;
  --accent-red:           #ee5396;
  --accent-green:         #25be6a;
  --accent-green-bright:  #46c880;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN',
               'Hiragino Sans', 'Yu Gothic', Meiryo, 'Noto Sans JP', 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Source Code Pro', Consolas, Monaco, 'SF Mono', monospace;

  color-scheme: dark;
  scrollbar-color: var(--border) var(--bg);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

html {
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
}

body {
  margin: 0 auto;
  padding: 1.75rem 1.25rem 1rem;
  max-width: 100%;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

/* Responsive type scale + reading width. Kept wide on desktop on purpose —
   this is a photo-heavy personal site, not a narrow text column. */
@media (min-width: 600px) {
  html { font-size: 15px; }
  body { padding: 2rem 2rem 1.25rem; }
}
@media (min-width: 900px) {
  html { font-size: 16px; }
  body { max-width: 980px; padding: 2.5rem 2.5rem 1.5rem; }
}
@media (min-width: 1300px) {
  body { max-width: 1140px; }
}
@media (min-width: 1800px) {
  html { font-size: 17px; }
  body { max-width: 1320px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

::selection {
  background-color: #2a2a2a;
  color: #f2f4f8;
}

/* Defensive: an element left empty (or whitespace-only) by missing metadata
   (no date, no subtitle, etc.) should take up no space rather than render
   as a hollow styled bar. CSS :empty only matches truly childless elements,
   so it misses a node that contains just whitespace — :has(p) is more
   reliable here since pandoc always wraps real quote text in a <p>. */
p:empty, li:empty { display: none; }
blockquote:empty, blockquote:not(:has(p)) { display: none; }

/* --------------------------------------------------------------------------
   3. Title block (pandoc's header#title-block-header) — and a fallback for
      templates that wrap title/subtitle/date as plain header > h1/h2/h3
   -------------------------------------------------------------------------- */
#title-block-header,
body > header {
  margin-bottom: 1.3em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--border);
}

#title-block-header .title,
body > header > h1 {
  margin: 0 0 0.15em;
  font-size: 2.2em;
  line-height: 1.15;
}

#title-block-header .subtitle,
body > header > h2 {
  margin: 0 0 0.3em;
  font-size: 1.25em;
  font-weight: 500;
  color: var(--accent-code);
}

#title-block-header .author,
#title-block-header .date,
body > header > h3 {
  margin: 0.15em 0 0;
  font-size: 0.9em;
  font-weight: 400;
  font-style: normal;
  color: var(--fg-dim);
}

/* Pages with no date/author: whichever element would have carried it
   (an empty <p>, or an empty <h3>) collapses instead of leaving a hollow,
   styled bar at the top of the page. */
#title-block-header p:empty,
#title-block-header h1:empty,
#title-block-header h2:empty,
#title-block-header h3:empty,
#title-block-header p.date:not(:has(time)),
body > header p:empty,
body > header h1:empty,
body > header h2:empty,
body > header h3:empty {
  display: none;
}

/* --------------------------------------------------------------------------
   4. Headings
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.3;
  margin-top: 1.1em;
  margin-bottom: 0.4em;
  color: var(--accent-heading);
}

h1 { font-size: 1.9em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.1em; }
h5, h6 { font-size: 1em; }

h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   5. Text-level elements
   -------------------------------------------------------------------------- */
p { margin: 0.7em 0; }

strong { font-weight: 700; color: var(--fg-bright); }
em { font-style: italic; }

del, s {
  color: var(--fg-dim);
  text-decoration: line-through;
}

mark {
  background-color: var(--accent-code);
  color: var(--bg);
  padding: 0.05em 0.25em;
  border-radius: 3px;
}

sub, sup { font-size: 0.75em; }

/* --------------------------------------------------------------------------
   6. Links
   -------------------------------------------------------------------------- */
a, a:link, a:visited {
  color: var(--accent-link);
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-link);
  transition: border-bottom-style 0.15s ease, color 0.15s ease;
}

a:hover {
  border-bottom-style: solid;
  color: var(--accent-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--accent-link-hover);
  outline-offset: 2px;
  border-bottom-style: solid;
}

/* --------------------------------------------------------------------------
   7. Lists
   -------------------------------------------------------------------------- */
ul, ol {
  margin: 0.7em 0;
  padding-left: 1.6em;
  font-size: 1em; /* first-level bullets match body text */
}

ul { list-style: disc; }
ol { list-style: decimal; }

li { margin: 0.2em 0; }

/* Nested lists can read slightly smaller for visual hierarchy */
li > ul, li > ol {
  font-size: 0.92em;
  margin: 0.25em 0;
}

/* Task lists ([ ] / [x]) — keep native checkbox, themed, not boxed like a button */
ul.task-list {
  list-style: none;
  padding-left: 0.5em;
}

ul.task-list input[type="checkbox"] {
  accent-color: var(--accent-code);
  width: 0.95em;
  height: 0.95em;
  margin: 0 0.6em 0.15em -1.4em;
  vertical-align: middle;
  background: none;
  border: none;
  padding: 0;
}

/* Definition lists */
dl { margin: 0.7em 0; }
dt { font-weight: 700; color: var(--fg-bright); }
dd { margin: 0.15em 0 0.7em 1.6em; color: var(--fg); }

/* --------------------------------------------------------------------------
   8. Blockquotes
   -------------------------------------------------------------------------- */
blockquote {
  font-style: italic;
  border-left: 4px solid var(--accent-quote);
  margin: 0.8em 0;
  padding: 0.35em 0.9em;
  color: var(--accent-quote);
  background-color: var(--bg-card);
  border-radius: 0 6px 6px 0;
}

blockquote p { margin: 0.5em 0; }
blockquote p:first-child { margin-top: 0; }
blockquote p:last-child { margin-bottom: 0; }
blockquote code { font-style: normal; }
blockquote pre, ul pre, ol pre { margin-left: 0; margin-right: 0; }

/* --------------------------------------------------------------------------
   9. Code — inline & blocks
   -------------------------------------------------------------------------- */
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background-color: var(--bg-card);
  border: 1px solid var(--accent-code);
  color: var(--accent-code);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  white-space: normal; /* override pandoc's injected `code{white-space:pre-wrap}` for inline code */
}

pre {
  background-color: var(--bg-card);
  border: 1px solid var(--accent-code);
  border-radius: 8px;
  overflow-x: auto;
  padding: 0.85em 1.2em;
  margin: 1em 0;
  line-height: 1.5;
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.85em;
  color: var(--fg);
  white-space: pre;
}

div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }

/* Line numbers (pandoc --highlight or {.numberLines}) */
pre.numberSource {
  margin-left: 0;
  border-left: 3px solid var(--border);
}
pre.numberSource code > span > a:first-child::before {
  color: var(--fg-dim);
  text-decoration: none !important;
}

/* Syntax-highlighting token colors. Selectors intentionally match pandoc's
   own auto-generated `code span.xx` rules so this stylesheet — loaded after
   pandoc's inline <style> block — wins on source order without !important. */
code span.co, code span.cv, code span.do, code span.an, code span.in { color: var(--fg-dim); font-style: italic; } /* comments / docs */
code span.kw, code span.cf { color: var(--accent-quote); font-weight: 600; } /* keywords / control flow */
code span.st, code span.ss, code span.vs, code span.ch { color: var(--accent-green); } /* strings */
code span.dt, code span.at, code span.bu { color: var(--accent-link); } /* types / attributes / builtins */
code span.dv, code span.bn, code span.fl { color: var(--accent-code-bright); } /* numbers */
code span.fu { color: var(--accent-heading-solid); font-weight: 500; } /* functions */
code span.im, code span.pp { color: var(--accent-code); font-weight: 600; } /* imports / preprocessor */
code span.cn { color: var(--accent-quote-dim); } /* constants */
code span.op, code span.sc { color: var(--fg-dim); } /* operators / special chars */
code span.va, code span.ot, code span.ex { color: var(--fg); } /* variables / other */
code span.al, code span.er { color: var(--accent-red); font-weight: 600; } /* alerts / errors */
code span.wa { color: var(--accent-red); font-style: italic; } /* warnings */

@media (max-width: 600px) {
  pre { padding: 0.7em 0.9em; }
}

/* --------------------------------------------------------------------------
   10. Math (pandoc default spans, plus KaTeX / MathJax containers)
   -------------------------------------------------------------------------- */
.math.display {
  display: block;
  overflow-x: auto;
  text-align: center;
  margin: 0.9em 0;
}

.math.inline { white-space: nowrap; }

.katex-display, mjx-container[display="true"] {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.3em 0;
}

/* --------------------------------------------------------------------------
   11. Tables
   -------------------------------------------------------------------------- */
table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--fg);
  background-color: var(--bg-card);
  border: 1px solid var(--accent-heading-solid);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.95em;
}

thead tr, tr.header {
  background-color: var(--accent-heading-solid);
  color: var(--bg);
  font-weight: 700;
}

tbody tr { border-top: 1px solid var(--border); }
tr.odd  { background-color: var(--bg-card-alt); }
tr.even { background-color: var(--bg-card); }

th, td { padding: 0.6em 1em; text-align: left; }

@media (max-width: 700px) {
  table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   12. Images & figures
   -------------------------------------------------------------------------- */
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1em auto;
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

figure {
  margin: 1.3em 0;
  text-align: center;
}

figure img { margin-bottom: 0.4em; }

figcaption, caption {
  font-size: 0.85em;
  font-style: italic;
  text-align: center;
  color: var(--fg-dim);
}

/* Break an image out of the text column on wide screens.
   Usage in markdown:  ![alt](photo.jpg){.fullwidth}                */
img.fullwidth,
figure.fullwidth img,
.fullwidth img {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   13. Horizontal rule
   -------------------------------------------------------------------------- */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 1.5em 0;
}

/* --------------------------------------------------------------------------
   14. Table of contents
   -------------------------------------------------------------------------- */
#TOC {
  background-color: var(--bg);
  border: 1px solid var(--accent-heading-solid);
  border-radius: 8px;
  padding: 0.85em 1.4em;
  margin: 0 0 2em;
  max-width: 760px;
}

#TOC > strong {
  color: var(--fg-bright);
  font-size: 1.05em;
}

#TOC label[for="contents"] {
  cursor: pointer;
  display: inline-block;
  margin-left: 0.5em;
  font-weight: 700;
  font-size: 1.2em;
  color: var(--accent-heading);
  transition: color 0.2s ease, transform 0.2s ease;
}

#TOC label[for="contents"]:hover { color: var(--accent-link); }

/* Rotate the ⊕ to read like a close icon while open (no JS needed) */
#TOC:has(input[type="checkbox"]:checked) label[for="contents"] {
  transform: rotate(45deg);
}

#TOC input[type="checkbox"] { display: none; }

#TOC > ul {
  display: none;
  list-style: none;
  padding-left: 1em;
  margin: 0.6em 0 0;
  font-size: 1em;
}

#TOC input[type="checkbox"]:checked ~ ul { display: block; }

#TOC ul ul {
  padding-left: 1.25em;
  margin: 0.2em 0 0;
  border-left: 2px solid var(--accent-code);
}

#TOC li { margin: 0.25em 0; }

#TOC a {
  border-bottom-style: dashed;
}

@media (max-width: 600px) {
  #TOC { max-width: none; }
}

/* --------------------------------------------------------------------------
   15. Footnotes
   -------------------------------------------------------------------------- */
.footnotes {
  margin-top: 2em;
  padding-top: 0.8em;
  border-top: 1px solid var(--border);
  font-size: 0.85em;
  color: var(--fg-dim);
}

.footnotes ol { padding-left: 1.4em; }
.footnotes p { margin: 0.3em 0; }

.footnote-back { border-bottom: none; margin-left: 0.3em; }

/* --------------------------------------------------------------------------
   16. Forms (kept minimal — most personal sites barely use these)
   -------------------------------------------------------------------------- */
button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  background-color: var(--bg-card);
  border: 1px solid var(--accent-heading-solid);
  color: var(--fg);
  font-family: inherit;
  font-size: 1em;
  padding: 0.35em 0.7em;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

button:hover,
input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
  background-color: var(--accent-heading-solid);
  color: var(--bg);
  cursor: pointer;
}

input[type="checkbox"]:not(#contents),
input[type="radio"] {
  accent-color: var(--accent-code);
}

/* --------------------------------------------------------------------------
   17. Scrollbars (WebKit code-block scrollbars + Firefox handled via
       scrollbar-color in the :root rule above)
   -------------------------------------------------------------------------- */
pre::-webkit-scrollbar,
table::-webkit-scrollbar { height: 8px; }

pre::-webkit-scrollbar-track,
table::-webkit-scrollbar-track { background: var(--bg); }

pre::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb {
  background-color: var(--accent-code);
  border-radius: 4px;
}