/* Site styles for the index (index.html, from compile-site.py) and every post
   page (lib/render.js). Quartz-like reading layout in the site's original
   colors: cyan links, teal headings (darker shades of both in light mode). */

:root, [data-theme="dark"] {
  --bg: #1a1a1a; --line: #3a3a3a; --muted: #8a8a8a; --text: #cccccc;
  --strong: #ebebec; --heading: #4bb49b; --link: #00cccc; --link-hover-bg: #00ffff;
  --accent: #4bb49b; --code-bg: #2a2a2a;
  color-scheme: dark;
}
[data-theme="light"] {
  --bg: #faf8f8; --line: #e2e2e2; --muted: #6b6b6b; --text: #444444;
  --strong: #222222; --heading: #1f7a66; --link: #007f86; --link-hover-bg: #00cccc;
  --accent: #1f7a66; --code-bg: #efecec;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 23px/1.65 "Source Sans 3", system-ui, sans-serif; }
.reader { max-width: 38em; margin: 0 auto; padding: 0 1.5rem 2rem; }
a { color: var(--link); text-decoration: none; font-weight: 600; }
a:hover { background: var(--link-hover-bg); color: #000; }
strong { color: var(--strong); font-weight: 700; }
p, li { text-wrap: pretty; }

/* Top bar */
.topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 0; font: 700 0.8em "Schibsted Grotesk", sans-serif; color: var(--heading); }
.topbar .actions { display: flex; align-items: center; gap: 0.6rem; }
.topbar form { margin: 0; }
button, input { font: inherit; font-size: 0.9rem; padding: 0.3em 0.7em; border-radius: 6px; border: 1px solid var(--line); background: var(--code-bg); color: var(--text); }
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
.theme-toggle { width: 2.1rem; height: 2.1rem; padding: 0; font-size: 1.05rem; line-height: 1; }
[data-theme="dark"] .theme-toggle::before { content: "\2600\FE0E"; }
[data-theme="light"] .theme-toggle::before { content: "\263E\FE0E"; }
.error { color: #e07070; }
ul.posts { padding-left: 1.2rem; }

/* Post body */
article h1, article h2, article h3, article h4 { font-family: "Schibsted Grotesk", sans-serif; color: var(--heading); line-height: 1.25; margin: 2rem 0 0.6rem; scroll-margin-top: 1rem; }
article h1 { font-size: 1.6em; }
article h2 { font-size: 1.35em; }
article h3 { font-size: 1.15em; }
article h4 { font-size: 1em; }
article h1.title { font-size: 1.9em; margin: 1rem 0 0.2rem; }
.post-meta { color: var(--muted); font-size: 0.75em; margin: 0 0 1rem; }
article p { margin: 1.15em 0; }
article a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); }
article a:hover { text-decoration-color: currentColor; }
article ul, article ol { margin: 0.4rem 0 0.4rem 1em; padding-left: 1.8em; }
article li { margin: 0.1rem 0; }
article li > ul, article li > ol { margin: 0.1rem 0 0.1rem 1.2em; }
article blockquote { margin: 0.7rem 0; padding: 0.1rem 1rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 0 6px 6px 0; }
article blockquote p { margin: 0.6em 0; }
article hr { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }
article img { display: block; max-width: min(100%, 700px); height: auto; margin: 0.7rem 0; border-radius: 6px; }
article code { font-family: "IBM Plex Mono", monospace; font-size: 0.85em; background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 4px; }
article pre { background: var(--code-bg); border: 1px solid var(--line); padding: 0.8rem 1rem; border-radius: 6px; overflow-x: auto; }
article pre code { background: none; padding: 0; }
article table { border-collapse: collapse; margin: 1rem 0; }
article th, article td { border: 1px solid var(--line); padding: 0.3rem 0.7rem; }
mjx-container[display="true"] { overflow-x: auto; overflow-y: hidden; }

/* Heading anchors: a '#' link that shows on hover */
article .anchor { margin-left: 0.3em; color: var(--muted); background: none; font-weight: 400; text-decoration: none; opacity: 0; }
article :is(h1, h2, h3, h4):hover .anchor, article .anchor:focus { opacity: 1; }

/* Footer under a post */
.post-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 0.8em; }

/* Link hover previews (preview.js) */
.link-preview { position: absolute; z-index: 100; max-height: 22rem; overflow-y: auto; padding: 0.2rem 1rem 0.6rem; font-size: 0.72em; line-height: 1.55; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); }
.link-preview article { margin: 0; }
.link-preview article h1.title { font-size: 1.5em; margin: 0.6rem 0 0.1rem; }
.link-preview article h1, .link-preview article h2, .link-preview article h3 { margin: 1rem 0 0.3rem; }
.link-preview article p { margin: 0.6em 0; }
.link-preview article img { max-width: 100%; }
.link-preview .katex-html { display: none; } /* Quartz pages: show KaTeX's MathML, not its unstyled HTML */
.link-preview-card { max-height: none; padding: 0.5rem 0.8rem; }
.link-preview-card .host { font-weight: 600; color: var(--strong); }
.link-preview-card .url { color: var(--muted); font-size: 0.85em; word-break: break-all; }

/* Index page */
.index .topbar h1 { font-size: 1em; }
.fav-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; font-size: 0.7em; font-weight: 600; user-select: none; }
.fav-toggle .seg { padding: 0.25em 0.8em; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.fav-toggle .seg:hover { color: var(--strong); }
.index[data-filter="favs"] .seg[data-seg="favs"],
.index[data-filter="none"] .seg[data-seg="none"] { background: var(--accent); color: var(--bg); }
.index[data-filter="favs"] .post:not(.fav),
.index[data-filter="none"] .post:not(.none) { display: none; }
.post-list .post { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.post-list .post-title { font: 700 1.15em/1.3 "Schibsted Grotesk", sans-serif; }
.post-list .date { color: var(--muted); font-size: 0.72em; margin-top: 0.15rem; }
.post-list p { margin: 0.35rem 0 0; }
.post-list p a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 0.18em; }
.post-list code { font-family: "IBM Plex Mono", monospace; font-size: 0.85em; background: var(--code-bg); padding: 0.1em 0.3em; border-radius: 4px; }

@media (max-width: 600px) {
  body { font-size: 19px; }
  .reader { padding: 0 1rem 2rem; }
  article h1.title { font-size: 1.6em; }
}