/*
 * notes.css
 * Ported from frontend/src/pages/PublicNotePage.tsx (THEME_STYLES, layout,
 * --pn-* tokens), frontend/src/styles/notes/note-prose.scss (prose rhythm,
 * de-nested to plain CSS — Oppy Docs has no CSS build step), and
 * frontend/src/styles/renderedMarkdown.css (Rouge highlighting, callouts,
 * math/mermaid containers). Keep in lockstep with those three files.
 */

/* ================================================================
   THEME TOKENS — light default, dark via prefers-color-scheme or
   an explicit [data-theme] toggle (persisted client-side).
   ================================================================ */
:root {
  --pn-bg: #ffffff;
  --pn-bg2: #f8f9fa;
  --pn-text: #1a1a1a;
  --pn-text2: #5a5a5a;
  --pn-muted: #727272; /* was #8a8a8a — 3.45:1 on --pn-bg/--pn-bg2, fails WCAG AA (4.5:1) for the meta/ToC/footer text it's used on */
  --pn-border: #e5e7eb;
  --pn-border-l: #f0f0f0;
  --pn-link: #0066cc;
  --pn-code: #f5f5f5;
  --pn-toc-line: #d4d4d4;
  --pn-toc-active: #0066cc;
  --pn-btn-bg: #f3f4f6;
  --pn-btn-border: #d1d5db;
  --pn-btn-hover: #e5e7eb;
  --pn-dd-bg: #ffffff;
  --pn-row-stripe: rgba(0, 0, 0, 0.025);
  --pn-row-hover: rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pn-bg: #0d1117;
    --pn-bg2: #161b22;
    --pn-text: #e6edf3;
    --pn-text2: #8b949e;
    --pn-muted: #7b838e; /* was #6e7681 — failed WCAG AA on --pn-bg2 (4.14:1) */
    --pn-border: #30363d;
    --pn-border-l: #21262d;
    --pn-link: #58a6ff;
    --pn-code: #161b22;
    --pn-toc-line: #30363d;
    --pn-toc-active: #58a6ff;
    --pn-btn-bg: #21262d;
    --pn-btn-border: #30363d;
    --pn-btn-hover: #30363d;
    --pn-dd-bg: #161b22;
    --pn-row-stripe: rgba(255, 255, 255, 0.03);
    --pn-row-hover: rgba(255, 255, 255, 0.06);
  }
}
:root[data-theme="dark"] {
  --pn-bg: #0d1117;
  --pn-bg2: #161b22;
  --pn-text: #e6edf3;
  --pn-text2: #8b949e;
  --pn-muted: #7b838e; /* was #6e7681 — failed WCAG AA on --pn-bg2 (4.14:1) */
  --pn-border: #30363d;
  --pn-border-l: #21262d;
  --pn-link: #58a6ff;
  --pn-code: #161b22;
  --pn-toc-line: #30363d;
  --pn-toc-active: #58a6ff;
  --pn-btn-bg: #21262d;
  --pn-btn-border: #30363d;
  --pn-btn-hover: #30363d;
  --pn-dd-bg: #161b22;
  --pn-row-stripe: rgba(255, 255, 255, 0.03);
  --pn-row-hover: rgba(255, 255, 255, 0.06);
}

/* ================================================================
   PAGE SHELL
   ================================================================ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--pn-bg);
  color: var(--pn-text);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.pn-page {
  display: flex;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100vh;
}

.pn-toc-sidebar {
  width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 3rem 0 2rem 1rem;
  border-right: 1px solid var(--pn-border-l);
}
.pn-toc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  text-decoration: none;
  font-size: 0.72rem;
  line-height: 1.3;
  transition: color 0.15s;
  color: var(--pn-muted);
}
.pn-toc-item.is-active { color: var(--pn-toc-active); }
.pn-toc-item[data-depth="3"] { padding-left: 12px; }
.pn-toc-line { flex-shrink: 0; width: 12px; height: 1px; background: var(--pn-toc-line); transition: all 0.15s; }
.pn-toc-item.is-active .pn-toc-line { background: var(--pn-toc-active); }
.pn-toc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }

.pn-main {
  flex: 1;
  min-width: 0;
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.pn-header { margin-bottom: 2rem; }
.pn-h1 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; letter-spacing: -0.02em; }
.pn-meta { display: flex; align-items: center; gap: 0.5rem; color: var(--pn-muted); font-size: 0.85rem; flex-wrap: wrap; }
.pn-meta .sep { opacity: 0.6; }
.pn-account-name { color: var(--pn-text2); }

/* Share row (copy link/markdown, view as markdown, open in an LLM, theme
   toggle) — quiet by design: same pill button as the theme toggle, just
   wraps on narrow viewports instead of overflowing. */
.pn-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 0.75rem; }

.pn-footer {
  margin-top: 4rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--pn-border-l);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  color: var(--pn-muted);
  font-size: 0.8rem;
}
.pn-footer a { color: var(--pn-muted); text-decoration: none; }
.pn-footer a:hover { color: var(--pn-text2); }

.pn-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  color: var(--pn-text2);
  background: transparent;
  border: 1px solid var(--pn-btn-border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.pn-theme-toggle:hover { background: var(--pn-btn-hover); }

/* ================================================================
   PROSE — de-nested port of note-prose.scss
   ================================================================ */
.note-prose {
  max-width: 100%;
  overflow-x: hidden;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pn-text);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.note-prose h1, .note-prose h2, .note-prose h3, .note-prose h4, .note-prose h5, .note-prose h6 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;
  color: var(--pn-text);
  scroll-margin-top: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.note-prose > h1:first-child, .note-prose > h2:first-child, .note-prose > h3:first-child { margin-top: 0; }
.note-prose h1 { font-size: 1.875rem; letter-spacing: -0.01em; }
.note-prose h2 { font-size: 1.5rem; margin-top: 2.5rem; }
.note-prose h3 { font-size: 1.25rem; }
.note-prose h4 { font-size: 1.05rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.note-prose h5 { font-size: 0.95rem; }
.note-prose h6 { font-size: 0.88rem; color: var(--pn-text2); text-transform: uppercase; letter-spacing: 0.04em; }

.note-prose p { margin: 1rem 0; }
.note-prose p:first-child { margin-top: 0; }
.note-prose p:last-child { margin-bottom: 0; }

.note-prose a { color: var(--pn-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; word-break: break-word; }
.note-prose a:hover { opacity: 0.7; }

.note-prose strong { font-weight: 600; }
.note-prose em { font-style: italic; }
.note-prose s { text-decoration: line-through; }

.note-prose ul, .note-prose ol { padding-left: 1.5rem; margin: 1rem 0; }
.note-prose ul { list-style-type: disc; }
.note-prose ol { list-style-type: decimal; }
.note-prose li { margin: 0.35rem 0; }
.note-prose li > p { margin: 0; }

.note-prose blockquote {
  border-left: 3px solid var(--pn-border);
  margin: 1.25rem 0;
  padding: 0.5rem 1.25rem;
  color: var(--pn-text2);
  font-style: italic;
}
.note-prose blockquote > :first-child { margin-top: 0; }
.note-prose blockquote > :last-child { margin-bottom: 0; }

.note-prose code {
  background: var(--pn-code);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  word-break: break-word;
}

.note-prose pre {
  background: var(--pn-code);
  border: 1px solid var(--pn-border-l);
  border-radius: 8px;
  padding: 1rem;
  margin: 1.25rem 0;
  font-size: 0.88rem;
  line-height: 1.6;
  position: relative;
  overflow-x: auto;
  max-width: 100%;
}
.note-prose pre code { background: none; padding: 0; border: none; font-size: inherit; white-space: pre; word-break: normal; }

.note-prose table {
  border-collapse: collapse;
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}
.note-prose th, .note-prose td {
  border: 1px solid var(--pn-border);
  padding: 0.55rem 0.85rem;
  text-align: left;
  vertical-align: top;
  word-break: normal;
  overflow-wrap: normal;
  max-width: 28em;
}
.note-prose th { background: var(--pn-bg2); font-weight: 600; color: var(--pn-text); }
.note-prose tr:nth-of-type(even) td { background: var(--pn-row-stripe); }
.note-prose tbody tr:hover td { background: var(--pn-row-hover); }

.note-prose img, .note-prose video, .note-prose iframe { max-width: 100%; height: auto; border-radius: 6px; display: block; }
.note-prose hr { border: none; border-top: 1px solid var(--pn-border-l); margin: 2.5rem 0; }

.task-list-item { list-style-type: none; position: relative; margin-left: -1.5rem; }
.task-list-item input[type="checkbox"] { margin-right: 0.5rem; vertical-align: middle; }

@media (max-width: 600px) {
  .note-prose { font-size: 0.9375rem; }
  .note-prose h1 { font-size: 1.6rem; }
  .note-prose h2 { font-size: 1.3rem; }
  .note-prose h3 { font-size: 1.15rem; }
  .note-prose th, .note-prose td { padding: 0.4rem 0.6rem; }
}

/* ================================================================
   CALLOUTS / ADMONITIONS (ported from renderedMarkdown.css)
   ================================================================ */
.callout { margin: 1.25rem 0; border-radius: 8px; border-left: 4px solid; padding: 0.75rem 1rem; }
.callout .callout-title { font-weight: 600; font-size: 0.95rem; margin: 0 0 0.25rem; }
.callout .callout-content { font-size: 0.95rem; }
.callout .callout-content > :first-child { margin-top: 0; }
.callout .callout-content > :last-child { margin-bottom: 0; }

details.callout > summary { cursor: pointer; list-style: none; }
details.callout > summary::-webkit-details-marker { display: none; }
details.callout > summary::before {
  content: ""; display: inline-block; width: 0; height: 0;
  border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  margin-right: 6px; transition: transform 0.15s;
}
details.callout[open] > summary::before { transform: rotate(90deg); }

.callout-note      { border-color: #448aff; background: rgba(68,138,255,0.08); }
.callout-tip       { border-color: #00c853; background: rgba(0,200,83,0.08); }
.callout-warning   { border-color: #ff9100; background: rgba(255,145,0,0.08); }
.callout-important { border-color: #aa00ff; background: rgba(170,0,255,0.08); }
.callout-caution   { border-color: #ff1744; background: rgba(255,23,68,0.08); }
.callout-bug       { border-color: #ff1744; background: rgba(255,23,68,0.08); }
.callout-example   { border-color: #aa00ff; background: rgba(170,0,255,0.08); }
.callout-question  { border-color: #ffd600; background: rgba(255,214,0,0.08); }
.callout-quote     { border-color: #78909c; background: rgba(120,144,156,0.08); }

/* Light-mode title colors are darkened per-hue from the border/bg accent
   above (which stays as-is — a decorative wash only needs the 3:1 non-text
   minimum). The raw accents (#448aff etc.) read at 1.4–4.4:1 on their own
   8%-tint backgrounds in light mode — well under WCAG AA's 4.5:1 for text
   (worst: callout-question's gold at 1.37:1, essentially invisible). Dark
   mode already clears 4.5:1+ with the original accents (bg is much darker),
   so it keeps them via the override below — same pattern as the Rouge
   syntax-highlighting theme swap further down this file. */
.callout-note .callout-title      { color: #0261ff; }
.callout-tip .callout-title       { color: #008135; }
.callout-warning .callout-title   { color: #a35d00; }
.callout-important .callout-title { color: #a300f5; }
.callout-caution .callout-title   { color: #d9002a; }
.callout-bug .callout-title       { color: #d9002a; }
.callout-example .callout-title   { color: #a300f5; }
.callout-question .callout-title  { color: #856f00; }
.callout-quote .callout-title     { color: #5b717c; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .callout-note .callout-title      { color: #448aff; }
  :root:not([data-theme="light"]) .callout-tip .callout-title       { color: #00c853; }
  :root:not([data-theme="light"]) .callout-warning .callout-title   { color: #ff9100; }
  :root:not([data-theme="light"]) .callout-important .callout-title { color: #aa00ff; }
  :root:not([data-theme="light"]) .callout-caution .callout-title   { color: #ff1744; }
  :root:not([data-theme="light"]) .callout-bug .callout-title       { color: #ff1744; }
  :root:not([data-theme="light"]) .callout-example .callout-title   { color: #aa00ff; }
  :root:not([data-theme="light"]) .callout-question .callout-title  { color: #ffd600; }
  :root:not([data-theme="light"]) .callout-quote .callout-title     { color: #78909c; }
}
:root[data-theme="dark"] .callout-note .callout-title      { color: #448aff; }
:root[data-theme="dark"] .callout-tip .callout-title       { color: #00c853; }
:root[data-theme="dark"] .callout-warning .callout-title   { color: #ff9100; }
:root[data-theme="dark"] .callout-important .callout-title { color: #aa00ff; }
:root[data-theme="dark"] .callout-caution .callout-title   { color: #ff1744; }
:root[data-theme="dark"] .callout-bug .callout-title       { color: #ff1744; }
:root[data-theme="dark"] .callout-example .callout-title   { color: #aa00ff; }
:root[data-theme="dark"] .callout-question .callout-title  { color: #ffd600; }
:root[data-theme="dark"] .callout-quote .callout-title     { color: #78909c; }

/* ================================================================
   MATH (KaTeX containers, rendered client-side — see below)
   ================================================================ */
.math-inline { font-family: "KaTeX_Main", serif; font-style: italic; }
.math-block { display: block; text-align: center; margin: 1.25rem 0; padding: 0.5rem; font-family: "KaTeX_Main", serif; font-style: italic; overflow-x: auto; }

/* ================================================================
   MERMAID (rendered client-side)
   ================================================================ */
.mermaid { margin: 1.25rem 0; text-align: center; }
.mermaid svg { max-width: 100%; height: auto; }

/* ================================================================
   ROUGE SYNTAX HIGHLIGHTING — GitHub Light (default)
   ================================================================ */
.highlighter-rouge { margin: 1.25rem 0; }
.highlight { border-radius: 8px; overflow-x: auto; }
.highlight pre.highlight { margin: 0; padding: 1rem; font-size: 0.88rem; line-height: 1.6; border-radius: 8px; }

.highlight, .highlight .w { color: #24292f; background-color: #f6f8fa; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv { color: #cf222e; }
.highlight .gr { color: #f6f8fa; }
.highlight .gd { color: #82071e; background-color: #ffebe9; }
.highlight .nb, .highlight .nc, .highlight .no, .highlight .nn { color: #953800; }
.highlight .sr, .highlight .na, .highlight .nt { color: #116329; }
.highlight .gi { color: #116329; background-color: #dafbe1; }
.highlight .ges { font-weight: bold; font-style: italic; }
.highlight .kc { color: #0550ae; }
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf,
.highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx { color: #0550ae; }
.highlight .sb, .highlight .bp, .highlight .ne, .highlight .nl, .highlight .py { color: #0550ae; }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm { color: #0550ae; }
.highlight .o, .highlight .ow { color: #0550ae; }
.highlight .gh, .highlight .gu { color: #0550ae; font-weight: bold; }
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd,
.highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss { color: #0a3069; }
.highlight .nd, .highlight .nf, .highlight .fm { color: #8250df; }
.highlight .err { color: #f6f8fa; background-color: #82071e; }
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp,
.highlight .cpf, .highlight .c1, .highlight .cs { color: #6e7781; }
.highlight .gl, .highlight .gt { color: #6e7781; }
.highlight .ni, .highlight .si { color: #24292f; }
.highlight .ge { color: #24292f; font-style: italic; }
.highlight .gs { color: #24292f; font-weight: bold; }

/* ROUGE — GitHub Dark (system preference + explicit toggle) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .highlight, :root:not([data-theme="light"]) .highlight .w { color: #c9d1d9; background-color: #161b22; }
  :root:not([data-theme="light"]) .highlight .k, :root:not([data-theme="light"]) .highlight .kd, :root:not([data-theme="light"]) .highlight .kn, :root:not([data-theme="light"]) .highlight .kp, :root:not([data-theme="light"]) .highlight .kr, :root:not([data-theme="light"]) .highlight .kt, :root:not([data-theme="light"]) .highlight .kv { color: #ff7b72; }
  :root:not([data-theme="light"]) .highlight .gr { color: #f0f6fc; }
  :root:not([data-theme="light"]) .highlight .gd { color: #ffdcd7; background-color: #67060c; }
  :root:not([data-theme="light"]) .highlight .nb, :root:not([data-theme="light"]) .highlight .nc, :root:not([data-theme="light"]) .highlight .no, :root:not([data-theme="light"]) .highlight .nn { color: #ffa657; }
  :root:not([data-theme="light"]) .highlight .sr, :root:not([data-theme="light"]) .highlight .na, :root:not([data-theme="light"]) .highlight .nt { color: #7ee787; }
  :root:not([data-theme="light"]) .highlight .gi { color: #aff5b4; background-color: #033a16; }
  :root:not([data-theme="light"]) .highlight .kc { color: #79c0ff; }
  :root:not([data-theme="light"]) .highlight .l, :root:not([data-theme="light"]) .highlight .ld, :root:not([data-theme="light"]) .highlight .m, :root:not([data-theme="light"]) .highlight .mb, :root:not([data-theme="light"]) .highlight .mf, :root:not([data-theme="light"]) .highlight .mh, :root:not([data-theme="light"]) .highlight .mi, :root:not([data-theme="light"]) .highlight .il, :root:not([data-theme="light"]) .highlight .mo, :root:not([data-theme="light"]) .highlight .mx { color: #79c0ff; }
  :root:not([data-theme="light"]) .highlight .sb, :root:not([data-theme="light"]) .highlight .bp, :root:not([data-theme="light"]) .highlight .ne, :root:not([data-theme="light"]) .highlight .nl, :root:not([data-theme="light"]) .highlight .py { color: #79c0ff; }
  :root:not([data-theme="light"]) .highlight .nv, :root:not([data-theme="light"]) .highlight .vc, :root:not([data-theme="light"]) .highlight .vg, :root:not([data-theme="light"]) .highlight .vi, :root:not([data-theme="light"]) .highlight .vm { color: #79c0ff; }
  :root:not([data-theme="light"]) .highlight .o, :root:not([data-theme="light"]) .highlight .ow { color: #79c0ff; }
  :root:not([data-theme="light"]) .highlight .gh, :root:not([data-theme="light"]) .highlight .gu { color: #1f6feb; font-weight: bold; }
  :root:not([data-theme="light"]) .highlight .s, :root:not([data-theme="light"]) .highlight .sa, :root:not([data-theme="light"]) .highlight .sc, :root:not([data-theme="light"]) .highlight .dl, :root:not([data-theme="light"]) .highlight .sd, :root:not([data-theme="light"]) .highlight .s2, :root:not([data-theme="light"]) .highlight .se, :root:not([data-theme="light"]) .highlight .sh, :root:not([data-theme="light"]) .highlight .sx, :root:not([data-theme="light"]) .highlight .s1, :root:not([data-theme="light"]) .highlight .ss { color: #a5d6ff; }
  :root:not([data-theme="light"]) .highlight .nd, :root:not([data-theme="light"]) .highlight .nf, :root:not([data-theme="light"]) .highlight .fm { color: #d2a8ff; }
  :root:not([data-theme="light"]) .highlight .err { color: #f0f6fc; background-color: #8e1519; }
  :root:not([data-theme="light"]) .highlight .c, :root:not([data-theme="light"]) .highlight .ch, :root:not([data-theme="light"]) .highlight .cd, :root:not([data-theme="light"]) .highlight .cm, :root:not([data-theme="light"]) .highlight .cp, :root:not([data-theme="light"]) .highlight .cpf, :root:not([data-theme="light"]) .highlight .c1, :root:not([data-theme="light"]) .highlight .cs { color: #8b949e; }
  :root:not([data-theme="light"]) .highlight .gl, :root:not([data-theme="light"]) .highlight .gt { color: #8b949e; }
  :root:not([data-theme="light"]) .highlight .ni, :root:not([data-theme="light"]) .highlight .si { color: #c9d1d9; }
  :root:not([data-theme="light"]) .highlight .ge { color: #c9d1d9; font-style: italic; }
  :root:not([data-theme="light"]) .highlight .gs { color: #c9d1d9; font-weight: bold; }
}
:root[data-theme="dark"] .highlight, :root[data-theme="dark"] .highlight .w { color: #c9d1d9; background-color: #161b22; }
:root[data-theme="dark"] .highlight .k, :root[data-theme="dark"] .highlight .kd, :root[data-theme="dark"] .highlight .kn, :root[data-theme="dark"] .highlight .kp, :root[data-theme="dark"] .highlight .kr, :root[data-theme="dark"] .highlight .kt, :root[data-theme="dark"] .highlight .kv { color: #ff7b72; }
:root[data-theme="dark"] .highlight .nb, :root[data-theme="dark"] .highlight .nc, :root[data-theme="dark"] .highlight .no, :root[data-theme="dark"] .highlight .nn { color: #ffa657; }
:root[data-theme="dark"] .highlight .sr, :root[data-theme="dark"] .highlight .na, :root[data-theme="dark"] .highlight .nt { color: #7ee787; }
:root[data-theme="dark"] .highlight .gi { color: #aff5b4; background-color: #033a16; }
:root[data-theme="dark"] .highlight .gd { color: #ffdcd7; background-color: #67060c; }
:root[data-theme="dark"] .highlight .kc { color: #79c0ff; }
:root[data-theme="dark"] .highlight .l, :root[data-theme="dark"] .highlight .ld, :root[data-theme="dark"] .highlight .m, :root[data-theme="dark"] .highlight .mb, :root[data-theme="dark"] .highlight .mf, :root[data-theme="dark"] .highlight .mh, :root[data-theme="dark"] .highlight .mi, :root[data-theme="dark"] .highlight .il, :root[data-theme="dark"] .highlight .mo, :root[data-theme="dark"] .highlight .mx { color: #79c0ff; }
:root[data-theme="dark"] .highlight .sb, :root[data-theme="dark"] .highlight .bp, :root[data-theme="dark"] .highlight .ne, :root[data-theme="dark"] .highlight .nl, :root[data-theme="dark"] .highlight .py { color: #79c0ff; }
:root[data-theme="dark"] .highlight .nv, :root[data-theme="dark"] .highlight .vc, :root[data-theme="dark"] .highlight .vg, :root[data-theme="dark"] .highlight .vi, :root[data-theme="dark"] .highlight .vm { color: #79c0ff; }
:root[data-theme="dark"] .highlight .o, :root[data-theme="dark"] .highlight .ow { color: #79c0ff; }
:root[data-theme="dark"] .highlight .gh, :root[data-theme="dark"] .highlight .gu { color: #1f6feb; font-weight: bold; }
:root[data-theme="dark"] .highlight .s, :root[data-theme="dark"] .highlight .sa, :root[data-theme="dark"] .highlight .sc, :root[data-theme="dark"] .highlight .dl, :root[data-theme="dark"] .highlight .sd, :root[data-theme="dark"] .highlight .s2, :root[data-theme="dark"] .highlight .se, :root[data-theme="dark"] .highlight .sh, :root[data-theme="dark"] .highlight .sx, :root[data-theme="dark"] .highlight .s1, :root[data-theme="dark"] .highlight .ss { color: #a5d6ff; }
:root[data-theme="dark"] .highlight .nd, :root[data-theme="dark"] .highlight .nf, :root[data-theme="dark"] .highlight .fm { color: #d2a8ff; }
:root[data-theme="dark"] .highlight .err { color: #f0f6fc; background-color: #8e1519; }
:root[data-theme="dark"] .highlight .c, :root[data-theme="dark"] .highlight .ch, :root[data-theme="dark"] .highlight .cd, :root[data-theme="dark"] .highlight .cm, :root[data-theme="dark"] .highlight .cp, :root[data-theme="dark"] .highlight .cpf, :root[data-theme="dark"] .highlight .c1, :root[data-theme="dark"] .highlight .cs { color: #8b949e; }
:root[data-theme="dark"] .highlight .gl, :root[data-theme="dark"] .highlight .gt { color: #8b949e; }
:root[data-theme="dark"] .highlight .ni, :root[data-theme="dark"] .highlight .si { color: #c9d1d9; }
:root[data-theme="dark"] .highlight .ge { color: #c9d1d9; font-style: italic; }
:root[data-theme="dark"] .highlight .gs { color: #c9d1d9; font-weight: bold; }
:root[data-theme="dark"] .highlight .gr { color: #f0f6fc; }

/* ================================================================
   PASSWORD GATE
   ================================================================ */
.pn-lock-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 70vh; text-align: center; padding: 2rem; max-width: 380px; margin: 0 auto; }
.pn-lock-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 4px; color: var(--pn-text); }
.pn-lock-sub { font-size: 0.85rem; color: var(--pn-muted); margin: 0 0 20px; }
.pn-lock-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--pn-border);
  background: var(--pn-bg2); color: var(--pn-text); font-size: 0.95rem; margin-bottom: 12px;
}
.pn-lock-input.has-error { border-color: #ef4444; }
.pn-lock-submit {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: none;
  background: var(--pn-text); color: var(--pn-bg); font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.pn-lock-error { color: #ef4444; font-size: 0.78rem; margin: 0 0 12px; }

/* ================================================================
   ERROR PAGES
   ================================================================ */
.pn-error-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; text-align: center; padding: 2rem; max-width: 420px; margin: 0 auto; }
.pn-error-code { font-size: 4rem; margin: 0; }
.pn-error-msg { font-size: 1.1rem; color: var(--pn-text2); line-height: 1.6; }
.pn-error-hr { border: none; border-top: 1px solid var(--pn-border); width: 100%; margin: 2rem 0 1.5rem; }
.pn-error-plug { font-size: 0.92rem; color: var(--pn-text2); }
.pn-error-plug a { color: var(--pn-link); text-decoration: none; }

/* ================================================================
   GALLERY / CARDS — account pages (/:handle), the home page, and the
   note page's "Similar notes" rail. Reuses the same --pn-* tokens as the
   note page; no new tokens, no JS.
   ================================================================ */
.pn-gallery-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.pn-gallery-header { margin-bottom: 2.5rem; }
.pn-gallery-header .pn-h1 { margin: 0 0 0.5rem; }
.pn-gallery-pitch { color: var(--pn-text2); font-size: 1.05rem; margin: 0; max-width: 640px; }

.pn-home-wordmark { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem; }
.pn-home-wordmark span { color: var(--pn-text2); font-weight: 500; }

.pn-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.pn-gallery--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }

.pn-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pn-border-l);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--pn-bg2);
  transition: border-color 0.15s;
}
.pn-card:hover { border-color: var(--pn-border); }
.pn-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background-color: var(--pn-code); }
.pn-card-protected { font-weight: 600; letter-spacing: 0.02em; opacity: 0.7; }
.pn-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.pn-card-title { font-size: 1.05rem; font-weight: 600; margin: 0; line-height: 1.3; color: var(--pn-text); }
.pn-card-preview { font-size: 0.88rem; color: var(--pn-text2); margin: 0; line-height: 1.5; flex: 1; }
.pn-card-meta { font-size: 0.75rem; color: var(--pn-muted); display: flex; align-items: center; gap: 0.4rem; }
.pn-card-meta .sep { opacity: 0.6; }

.pn-empty-state {
  border: 1px dashed var(--pn-border);
  border-radius: 10px;
  padding: 3.5rem 1.5rem;
  text-align: center;
  color: var(--pn-muted);
}

.pn-similar { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--pn-border-l); }
.pn-similar-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 1rem; color: var(--pn-text); }

/* Knowledge-base gallery section (/:handle) and KB/page breadcrumb. */
.pn-kb-section { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--pn-border-l); }
.pn-kb-section-title { font-size: 1.1rem; font-weight: 600; margin: 0 0 1rem; color: var(--pn-text); }
.pn-kb-breadcrumb { font-size: 0.85rem; margin: 0 0 0.75rem; }
.pn-kb-breadcrumb a { color: var(--pn-muted); text-decoration: none; }
.pn-kb-breadcrumb a:hover { color: var(--pn-text2); text-decoration: underline; }

/* ================================================================
   RESPONSIVE + PRINT
   ================================================================ */
@media (max-width: 900px) {
  .pn-toc-sidebar { display: none; }
}
@media (max-width: 600px) {
  .pn-main { padding: 2rem 1.25rem 4rem; }
  .pn-h1 { font-size: 1.6rem; }
  .pn-gallery-shell { padding: 2rem 1.25rem 4rem; }
  .pn-gallery, .pn-gallery--compact { grid-template-columns: 1fr; }
}
@media print {
  .pn-toc-sidebar, .pn-theme-toggle, .pn-footer { display: none; }
  .pn-main { max-width: 100%; }
  /* Force light-mode tokens regardless of an active dark data-theme —
     printers default to skipping background-color, so dark-mode's near-
     white text would otherwise print as illegible pale ink on white paper.
     !important is required here: :root[data-theme="dark"] (further up this
     file) matches with higher specificity than a bare :root, so without it
     this print override loses the cascade and silently does nothing.
     Doesn't reach the hardcoded (non-token) Rouge/.callout dark-mode color
     rules further down this file; printing a code-heavy page while in dark
     mode can still look faded — narrow enough to leave for now. */
  :root {
    --pn-bg: #ffffff !important;
    --pn-bg2: #f8f9fa !important;
    --pn-text: #1a1a1a !important;
    --pn-text2: #5a5a5a !important;
    --pn-muted: #727272 !important;
    --pn-border: #e5e7eb !important;
    --pn-border-l: #f0f0f0 !important;
    --pn-link: #0066cc !important;
    --pn-code: #f5f5f5 !important;
    color-scheme: light;
  }
}