/* Shared reading styles for notes, AI replies, and the Markdown reference. */
:root {
    --md-gray: #a8b1c0; --md-blue: #8eb7fa; --md-green: #8bc8a0; --md-teal: #70ccc5;
    --md-purple: #bba2f2; --md-pink: #eaa4c9; --md-amber: #e9bf77; --md-red: #f09c9f;
}
:root.light {
    --md-gray: #57647b; --md-blue: #285db3; --md-green: #237544; --md-teal: #137770;
    --md-purple: #7650ba; --md-pink: #ad407d; --md-amber: #97630e; --md-red: #b73b47;
}
.md-color-gray, .grid-element[data-note-color="gray"] { --md-accent: var(--md-gray); }
.md-color-blue, .grid-element[data-note-color="blue"], .admonition-note { --md-accent: var(--md-blue); }
.md-color-green, .grid-element[data-note-color="green"], .admonition-tip { --md-accent: var(--md-green); }
.md-color-teal, .grid-element[data-note-color="teal"] { --md-accent: var(--md-teal); }
.md-color-purple, .grid-element[data-note-color="purple"], .admonition-important { --md-accent: var(--md-purple); }
.md-color-pink, .grid-element[data-note-color="pink"] { --md-accent: var(--md-pink); }
.md-color-amber, .grid-element[data-note-color="amber"], .admonition-warning { --md-accent: var(--md-amber); }
.md-color-red, .grid-element[data-note-color="red"], .admonition-caution { --md-accent: var(--md-red); }
.grid-element[data-note-color] { background: color-mix(in srgb, var(--md-accent) 7%, var(--bg2)); border-color: color-mix(in srgb, var(--md-accent) 36%, var(--b1)); box-shadow: inset 0 3px var(--md-accent), 0 4px 20px #0001; }
.grid-element[data-note-color] > .markdown-preview-area { background: transparent; }
:is(.markdown-preview-area, .md-content) { min-width: 0; line-height: 1.75; overflow-wrap: anywhere; }
:is(.markdown-preview-area, .md-content) :is(h1, h2, h3, h4, h5, h6) { color: var(--c1); font-family: 'Host Grotesk', sans-serif; font-weight: 650; line-height: 1.35; letter-spacing: -.025em; margin: 1.35em 0 .55em; padding: 0; overflow: visible; text-wrap: pretty; }
:is(.markdown-preview-area, .md-content) h1 { font-size: 1.9em; }
:is(.markdown-preview-area, .md-content) h2 { font-size: 1.55em; }
:is(.markdown-preview-area, .md-content) h3 { font-size: 1.28em; }
:is(.markdown-preview-area, .md-content) h4 { font-size: 1.12em; }
:is(.markdown-preview-area, .md-content) h5 { font-size: 1em; letter-spacing: 0; }
:is(.markdown-preview-area, .md-content) h6 { font-size: .92em; color: var(--c2); letter-spacing: .015em; }
:is(.markdown-preview-area, .md-content) :is(p, ul, ol, blockquote, pre, table, dl, details) { margin: 0 0 1em; }
:is(.markdown-preview-area, .md-content) > :first-child { margin-top: 0; }
:is(.markdown-preview-area, .md-content) > :last-child { margin-bottom: 0; }
:is(.markdown-preview-area, .md-content) :is(ul, ol) { padding-left: 1.65em; }
:is(.markdown-preview-area, .md-content) li { margin: .3em 0; padding-left: .15em; }
:is(.markdown-preview-area, .md-content) li > :is(ul, ol) { margin: .35em 0; }
:is(.markdown-preview-area, .md-content) li > p { margin-bottom: .45em; }
:is(.markdown-preview-area, .md-content) li:has(> input[type="checkbox"]) { list-style: none; padding-left: 0; }
:is(.markdown-preview-area, .md-content) input[type="checkbox"] { width: 14px; height: 14px; padding: 0; border-radius: 4px; margin-right: 6px; vertical-align: baseline; }
/* Quotes and callouts are distinct elements. No pseudo-element draws a second stripe. */
:is(.markdown-preview-area, .md-content) blockquote { position: static; border: 0; border-left: 3px solid var(--b1); border-radius: 0; padding: 4px 0 4px 16px; color: var(--c2); background: none; }
:is(.markdown-preview-area, .md-content) blockquote::before,
:is(.markdown-preview-area, .md-content) .admonition::before { content: none; display: none; }
:is(.markdown-preview-area, .md-content) blockquote > p { margin: 0 0 .75em; }
:is(.markdown-preview-area, .md-content) blockquote > :last-child { margin-bottom: 0; }
:is(.markdown-preview-area, .md-content) .admonition { position: static; display: block; border: 1px solid color-mix(in srgb, var(--md-accent) 20%, var(--b1)); border-left: 3px solid var(--md-accent); border-radius: 8px; padding: 13px 15px; margin: 1em 0; background: color-mix(in srgb, var(--md-accent) 6%, var(--bg2)); color: var(--c1); }
:is(.markdown-preview-area, .md-content) .admonition-title { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; color: var(--md-accent); font-size: .94em; line-height: 1.6; font-weight: 650; }
.callout-symbol { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; width: 17px; height: 17px; margin-top: 2px; font-family: sans-serif; font-size: 11px; line-height: 1; }
.admonition-content > :first-child, .md-color-block > :first-child { margin-top: 0; }
.admonition-content > :last-child, .md-color-block > :last-child { margin-bottom: 0; }
:is(.markdown-preview-area, .md-content) .md-color-block { border: 1px solid color-mix(in srgb, var(--md-accent) 25%, var(--b1)); border-left: 3px solid var(--md-accent); border-radius: 8px; padding: 14px 16px; margin: 1em 0; background: color-mix(in srgb, var(--md-accent) 6%, var(--bg2)); }
:is(.markdown-preview-area, .md-content) code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88em; line-height: inherit; padding: .15em .35em; border-radius: 4px; background: var(--b1); color: inherit; }
:is(.markdown-preview-area, .md-content) .md-code { border: 1px solid var(--b1); background: var(--bg1); border-radius: 8px; margin: 1em 0; overflow: hidden; min-width: 0; }
.md-code-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 12px; min-height: 34px; border-bottom: 1px solid var(--b1); background: var(--b2); color: var(--c2); font-size: 10px; line-height: 1.4; }
.md-code-header > span { overflow: hidden; text-overflow: ellipsis; }
.md-code-header .md-code-copy { flex-shrink: 0; width: auto; font-size: 10px; padding: 4px 7px; border: 1px solid var(--b1); border-radius: 5px; color: var(--c2); line-height: 1.4; }
.md-code-copy:hover { color: var(--c1); background: var(--b1); }
:is(.markdown-preview-area, .md-content) pre { white-space: pre; overflow-x: auto; max-width: 100%; tab-size: 4; }
:is(.markdown-preview-area, .md-content) .md-code > pre { margin: 0; border: 0; border-radius: 0; padding: 12px 14px; background: transparent; font-size: 1em; }
:is(.markdown-preview-area, .md-content) pre code { display: block; width: max-content; min-width: 100%; padding: 0; background: transparent; border: 0; font-size: .88em; line-height: 1.65; white-space: pre; overflow-wrap: normal; }
:is(.markdown-preview-area, .md-content) table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .95em; }
:is(.markdown-preview-area, .md-content) :is(th, td) { padding: 9px 12px; border: 1px solid var(--b1); vertical-align: top; min-width: 60px; }
:is(.markdown-preview-area, .md-content) th { background: var(--b2); font-weight: 600; }
:is(.markdown-preview-area, .md-content) [align="right"] { text-align: right; }
:is(.markdown-preview-area, .md-content) [align="center"] { text-align: center; }
:is(.markdown-preview-area, .md-content) [align="left"] { text-align: left; }
:is(.markdown-preview-area, .md-content) hr { border: 0; border-top: 1px solid var(--b1); margin: 1.5em 0; }
:is(.markdown-preview-area, .md-content) a { color: var(--primary-color); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(.markdown-preview-area, .md-content) summary { cursor: pointer; font-weight: 550; margin-bottom: 8px; }
:is(.markdown-preview-area, .md-content) details { border: 1px solid var(--b1); padding: 10px 14px; border-radius: 8px; }
.md-math-inline { display: inline; }
.md-math-display { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 8px 4px; margin: 1em 0; }
.md-math-display .katex-display { margin: .4em 0; }
.md-math .katex { font-size: 1.08em; line-height: 1.2; overflow-wrap: normal; text-indent: 0; }
.math-error { color: var(--md-red); white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: .9em; }
.sidebar .markdown-help-button { min-height: 36px; padding: 8px 12px; margin-top: 10px; justify-content: flex-start; gap: 8px; font-size: 11px; color: var(--c2); border-top: 1px solid var(--b1); border-radius: 0; }
.markdown-guide { margin: auto; padding: 24px; width: min(720px, calc(100vw - 40px)); max-height: 88dvh; background: var(--bg2); color: var(--c1); border: 1px solid var(--b1); border-radius: 14px; overscroll-behavior: contain; }
.markdown-guide::backdrop { background: #0009; backdrop-filter: blur(4px); }
.markdown-guide > header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; color: var(--c2); font-size: 12px; }
.markdown-guide .md-content { font-size: 14px; }
:is(.markdown-preview-area, .md-content) :is(pre, table, .md-math-display):focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }