/* ==========================================================================
   org-html-theme — a simple, modern, responsive theme for Org-mode's
   HTML export (ox-html). See ../theme.setup and ../README.md.
   ========================================================================== */

/* -- 1. Design tokens ------------------------------------------------------ */

:root {
  /* color */
  --color-bg: #ffffff;
  --color-bg-alt: #f6f8fa;
  --color-text: #1f2328;
  --color-text-muted: #636c76;
  --color-link: #0969da;
  --color-link-hover: #0550ae;
  --color-border: #d8dee4;
  --color-code-bg: #f6f8fa;
  --color-accent: #0969da;
  --color-todo: #cf222e;
  --color-done: #1a7f37;

  /* typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
  --font-size-base: 16px;
  --line-height-base: 1.65;

  /* spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* layout */
  --sidebar-width: 280px;
  --content-max-width: 840px;

  /* elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);

  /* radius */
  --radius-sm: 4px;
  --radius-md: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d1117;
    --color-bg-alt: #161b22;
    --color-text: #e6edf3;
    --color-text-muted: #9198a1;
    --color-link: #4493f8;
    --color-link-hover: #76b3ff;
    --color-border: #30363d;
    --color-code-bg: #161b22;
    --color-accent: #4493f8;
    --color-todo: #ff7b72;
    --color-done: #3fb950;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  }
}

/* -- 2. Base reset ---------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-size-base);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: var(--line-height-base);
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* -- 3. Fixed-sidebar TOC layout --------------------------------------------
   Org wraps the whole body in #content and the TOC in #table-of-contents,
   containing a nested #text-table-of-contents with <ul>s of headline links.
   Confirm these IDs against examples/demo.html after exporting (see
   ../README.md verification steps) before relying on them in production.
   -------------------------------------------------------------------------- */

#table-of-contents {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  overflow-y: auto;
  background: var(--color-bg-alt);
  border-right: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  font-size: 0.9rem;
}

/* theme.js drags this strip to change --sidebar-width at runtime. Desktop
   only: hidden below the mobile breakpoint, where the sidebar is an
   off-canvas overlay instead of a fixed column. */
.sidebar-resizer {
  position: fixed;
  left: calc(var(--sidebar-width) - 3px);
  top: 0;
  width: 6px;
  height: 100vh;
  z-index: 1002;
  background: transparent;
  cursor: col-resize;
}

.sidebar-resizer:hover,
body.resizing .sidebar-resizer {
  background: var(--color-accent);
}

body.resizing {
  cursor: col-resize;
  user-select: none;
}

#table-of-contents h2 {
  margin: 0 0 var(--space-sm);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: none;
}

/* theme.js inserts this row between the "Table of Contents" heading and
   the list itself, only when at least one entry has sub-headings. */
.toc-controls {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.toc-controls button {
  padding: 0.2em 0.5em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: 0.75em;
  cursor: pointer;
}

.toc-controls button:hover {
  color: var(--color-link);
  border-color: var(--color-link);
}

#text-table-of-contents ul {
  list-style: none;
  margin: 0;
  padding-left: var(--space-md);
}

#text-table-of-contents > ul {
  padding-left: 0;
}

#text-table-of-contents li {
  position: relative;
  margin: var(--space-xs) 0;
  padding-left: 1.3em;
}

#text-table-of-contents a {
  display: block;
  padding: 0.2em 0;
  color: var(--color-text);
  text-decoration: none;
}

#text-table-of-contents a:hover {
  color: var(--color-link);
  text-decoration: underline;
}

/* toc.js adds one .toc-toggle button to each <li> that has a nested <ul>,
   and toggles .toc-collapsed on that <li> to hide or show it. */
.toc-toggle {
  position: absolute;
  left: -0.1em;
  top: 0.15em;
  width: 1.3em;
  height: 1.3em;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 1.1em;
  line-height: 1.3em;
  text-align: center;
  cursor: pointer;
}

.toc-toggle:hover {
  color: var(--color-link);
}

.toc-toggle::before {
  content: "\25be"; /* ▾ expanded */
}

li.toc-collapsed > .toc-toggle::before {
  content: "\25b8"; /* ▸ collapsed */
}

li.toc-collapsed > ul {
  display: none;
}

/* #preamble and #postamble are siblings of #content, not nested inside it
   (see org-html-template), so all three need the same sidebar offset. */
#preamble,
#content,
#postamble {
  margin-left: var(--sidebar-width);
  max-width: var(--content-max-width);
  padding-left: var(--space-lg);
  padding-right: var(--space-xl);
}

#content {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.sidebar-toggle {
  display: none;
}

.sidebar-overlay {
  display: none;
}

@media screen and (max-width: 768px) {
  #table-of-contents {
    z-index: 1000;
    width: min(var(--sidebar-width), 85vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-md);
  }

  body.sidebar-open #table-of-contents {
    transform: translateX(0);
  }

  .sidebar-resizer {
    display: none;
  }

  #preamble,
  #content,
  #postamble {
    margin-left: 0;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  #content {
    padding-top: calc(var(--space-xl) + 40px);
    padding-bottom: var(--space-xl);
  }

  .sidebar-toggle {
    display: block;
    position: fixed;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 1001;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
    box-shadow: var(--shadow-sm);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
  }

  body.sidebar-open .sidebar-overlay {
    display: block;
  }
}

/* -- 4. Sectioning and headlines -------------------------------------------- */

[class^="outline-"] {
  margin-top: var(--space-xl);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
}

h1.title {
  margin-bottom: var(--space-xs);
  font-size: 2.2rem;
}

h2 {
  font-size: 1.6rem;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

h3 {
  font-size: 1.3rem;
}
h4 {
  font-size: 1.1rem;
}
h5 {
  font-size: 1rem;
}
h6 {
  font-size: 0.95rem;
  color: var(--color-text-muted);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
  text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover {
  text-decoration: underline;
}

[class^="section-number-"] {
  margin-right: 0.5em;
  color: var(--color-text-muted);
  font-weight: 400;
}

/* -- 5. Title and metadata --------------------------------------------------- */

.subtitle {
  margin-top: 0;
  color: var(--color-text-muted);
  font-size: 1.2rem;
  font-weight: 400;
}

/* Org never puts .author/.date/.creator next to <h1 class="title"> itself
   (see org-html-template): they only ever appear inside #preamble and
   #postamble. theme.setup binds org-html-preamble-format to show
   author/date up here, above the title, styled the same way the default
   postamble already styles them. */
#preamble {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xs);
}

p.author,
p.date,
p.creator {
  margin: var(--space-xs) 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* -- 6. TODO and tag chips ---------------------------------------------------
   Only the two classes Org always emits are styled here. Custom TODO
   keywords get their own class (e.g. .WAITING) but are left unstyled by
   design — add your own rule in HTML_HEAD_EXTRA if you use one. */

.todo,
.done {
  display: inline-block;
  padding: 0 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
}

.todo {
  color: #fff;
  background: var(--color-todo);
}

.done {
  color: #fff;
  background: var(--color-done);
}

/* Org wraps each headline's tags in one outer .tag span, with one inner
   span per tag named after that tag (e.g. .draft, .review). Style the
   inner spans generically, since tag names are unbounded and user-defined
   just like TODO keywords. */
.tag {
  margin-left: 0.4em;
  font-size: 0.75em;
}

.tag > span {
  display: inline-block;
  padding: 0 0.5em;
  border-radius: 999px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
}

/* -- 7. Links and timestamps -------------------------------------------------- */

a {
  color: var(--color-link);
}

a:hover {
  color: var(--color-link-hover);
}

.timestamp,
.timestamp-kwd {
  color: var(--color-text-muted);
  font-size: 0.9em;
}

.timestamp-wrapper {
  white-space: nowrap;
}

/* -- 8. Code blocks ------------------------------------------------------------
   highlight.js owns token colors (.hljs-*) via the CDN stylesheet in
   theme.setup. This file only supplies the surrounding box. */

pre.src,
pre.example {
  margin: var(--space-md) 0;
  padding: var(--space-md);
  overflow-x: auto;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.9em;
}

pre.src code,
pre.example code {
  padding: 0;
  background: none;
  font-family: var(--font-mono);
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

:not(pre) > code {
  padding: 0.1em 0.35em;
  background: var(--color-code-bg);
  border-radius: var(--radius-sm);
}

/* -- 9. Tables ------------------------------------------------------------- */

table {
  width: 100%;
  margin: var(--space-md) 0;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

caption {
  margin-bottom: var(--space-xs);
  text-align: left;
  color: var(--color-text-muted);
  font-size: 0.9em;
}

th,
td {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  text-align: left;
}

th {
  background: var(--color-bg-alt);
}

tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}

[class^="table-number"] {
  color: var(--color-text-muted);
}

/* -- 10. Figures and images -------------------------------------------------- */

div.figure {
  margin: var(--space-lg) 0;
  text-align: center;
}

div.figure p {
  margin-top: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.9em;
}

[class^="figure-number"] {
  color: var(--color-text-muted);
}

/* -- 11. Blockquotes, verse, and footnotes ----------------------------------- */

blockquote {
  margin: var(--space-md) 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--color-accent);
  background: var(--color-bg-alt);
  color: var(--color-text-muted);
}

p.verse {
  white-space: pre-line;
  font-family: var(--font-mono);
}

#footnotes {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  font-size: 0.9em;
}

h2.footnotes {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: none;
}

.footdef {
  padding-left: 1.5em;
  text-indent: -1.5em;
}

.footref,
.footnum {
  color: var(--color-link);
  font-size: 0.8em;
  vertical-align: super;
}

/* -- 12. Postamble ------------------------------------------------------------ */

#postamble {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85em;
}

/* -- 13. Print ----------------------------------------------------------------
   Forces light, ink-sparing colors regardless of the screen's light or dark
   mode, since "Print to PDF" should not carry the screen's dark background
   onto paper. Turns the fixed sidebar into a normal, in-flow table of
   contents ahead of the content, instead of hiding it, and removes controls
   that only make sense on screen. */

@media print {
  :root {
    --color-bg: #ffffff;
    --color-bg-alt: #f3f3f3;
    --color-text: #000000;
    --color-text-muted: #333333;
    --color-link: #000000;
    --color-link-hover: #000000;
    --color-border: #999999;
    --color-code-bg: #f3f3f3;
    --color-accent: #000000;
    --color-todo: #333333;
    --color-done: #333333;
  }

  .sidebar-toggle,
  .sidebar-overlay,
  .sidebar-resizer,
  .toc-controls,
  .toc-toggle {
    display: none !important;
  }

  /* Print the full outline, regardless of what is collapsed on screen. */
  li.toc-collapsed > ul {
    display: block !important;
  }

  #table-of-contents {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    border-right: none;
    background: none;
    padding: 0 0 var(--space-lg) 0;
    page-break-after: always;
  }

  #preamble,
  #content,
  #postamble {
    margin-left: 0;
    max-width: none;
    padding: 0;
  }

  /* highlight.js loads a light or dark theme based on the screen's color
     scheme, a signal print does not reliably override. Force plain,
     legible text instead of risking light-on-dark code on paper. */
  pre.src,
  pre.src *,
  pre.example,
  pre.example * {
    color: #000000 !important;
    background: #ffffff !important;
  }

  pre.src,
  pre.example {
    white-space: pre-wrap;
    overflow-x: visible;
    border: 1px solid var(--color-border);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    page-break-after: avoid;
  }

  table,
  blockquote,
  pre,
  div.figure {
    page-break-inside: avoid;
  }
}