/* ================================================================
   Mount Logos — Typed Briefing
   Letterhead stylesheet for VS Code / Cursor markdown preview.
   Brand: pink #e879f9 · cyan #22d3ee · dark slate #1e293b
   Kept in sync with ~/.crossnote/style.less (MPE version)
   ================================================================ */

/* ---- PAGE ---- */
body {
    font-family: 'Cascadia Code', Consolas, 'JetBrains Mono', 'Microsoft YaHei', 'PingFang SC', monospace !important;
    font-size: 15px;
    color: #334155 !important;
    background: #ffffff !important;
    line-height: 1.6;
    max-width: 1100px;
    margin: 0 auto !important;
    padding: 12px 52px 80px !important;
}

/* ---- LETTERHEAD: logo left + 未知山 + divider ---- */
body::before {
    content: '未知山';
    display: block;
    padding-left: 30px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%231e293b' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M 50,85 L 50,15 L 34,65 Z' fill='%23e879f9'/%3E%3Cpath d='M 50,85 L 34,65 L 25,55 L 15,85 Z' fill='%23e879f9'/%3E%3Cpath d='M 50,85 L 50,15 L 72,55 Z' fill='%2322d3ee'/%3E%3Cpath d='M 50,85 L 72,55 L 85,85 Z' fill='%2367e8f9'/%3E%3Ccircle cx='50' cy='15' r='2' fill='%231e293b' stroke='none'/%3E%3Ccircle cx='34' cy='65' r='2' fill='%231e293b' stroke='none'/%3E%3Ccircle cx='25' cy='55' r='2' fill='%231e293b' stroke='none'/%3E%3Ccircle cx='72' cy='55' r='2' fill='%231e293b' stroke='none'/%3E%3C/g%3E%3C/svg%3E") left center / 22px 22px no-repeat;
    font-family: 'IBM Plex Sans', 'Microsoft YaHei', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.2em;
    line-height: 22px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e0da;
}

/* ---- HEADINGS ---- */
h1, h2, h3, h4, h5, h6 {
    font-family: 'IBM Plex Sans', 'Microsoft YaHei', 'PingFang SC', -apple-system, sans-serif !important;
    font-weight: 700;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    line-height: 1.35;
}

h1 {
    font-size: 1.7em;
    font-weight: 800;
    color: #1e293b !important;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #a5e8f0;
    margin-top: 0.8em;
}

h2 {
    font-size: 1.3em;
    color: #0891b2 !important;
    padding-bottom: 0.2em;
    border-bottom: 1px solid #e2e8f0;
}

h3 {
    font-size: 1.08em;
    color: #a21caf !important;
    border-bottom: none;
}

/* H4: callout-sized emphasis — same accent as H2, body-sized type (reads strong, not “muted meta”) */
h4 {
    font-size: 1em !important;
    color: #0891b2 !important;
    font-weight: 600;
}

h5, h6 {
    font-size: 0.98em;
    color: #64748b !important;
    font-weight: 600;
}

/* ---- PARAGRAPH & INLINE ---- */
p {
    margin-bottom: 1em;
    color: #334155;
}

strong {
    color: #1e293b !important;
    font-weight: 700;
}

em {
    color: #475569;
}

a {
    color: #0891b2 !important;
    text-decoration: none;
    border-bottom: 1px dotted #0891b2;
}

a:hover {
    color: #0e7490 !important;
    border-bottom-style: solid;
}

/* ---- LISTS ---- */
ul, ol {
    padding-left: 1.6em;
    margin-bottom: 1em;
}

ol {
    list-style-type: decimal;
}

ol ol {
    list-style-type: decimal;
}

ol ol ol {
    list-style-type: decimal;
}

li {
    margin-bottom: 0.3em;
}

li::marker {
    color: #0891b2;
}

li li::marker {
    color: #c084fc;
}

input[type="checkbox"] {
    accent-color: #0891b2;
    margin-right: 5px;
}

/* ---- BLOCKQUOTE ---- */
blockquote {
    border-left: 3px solid #22d3ee !important;
    background: #f0fdfa !important;
    margin: 1.2em 0;
    padding: 0.7em 1.2em;
    color: #334155 !important;
    font-style: italic;
    border-radius: 0 4px 4px 0;
}

blockquote p {
    margin-bottom: 0.3em;
}

/* ---- CODE ---- */
code {
    font-family: 'Cascadia Code', Consolas, 'JetBrains Mono', monospace !important;
    background: #efebe5 !important;
    color: #1e293b !important;
    padding: 1.5px 5px;
    border-radius: 3px;
    font-size: 0.92em;
}

/* ---- MERMAID DIAGRAMS ----
   Diagrams are wrapped in <pre class="mermaid"> by the publisher script.
   They must NOT inherit the typewriter beige used for code blocks,
   and per-chart theming (fills, axis labels, etc.) is controlled by each
   document via the `%%{init: {...}}%%` directive at the top of the diagram. */
pre.mermaid {
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
    text-align: center;
    overflow: visible;
    font-family: inherit;
    line-height: 1.4;
}
pre.mermaid svg {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

pre {
    background: #f3f0ea !important;
    border: 1px solid #e0dcd5 !important;
    border-radius: 4px;
    padding: 1em 1.2em;
    overflow-x: auto;
    margin: 1.2em 0;
    line-height: 1.6;
}

pre code {
    background: transparent !important;
    padding: 0;
    font-size: 0.9em;
}

/* ---- TABLE ---- */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.2em 0;
    font-size: 0.92em;
}

th {
    font-family: 'IBM Plex Sans', 'Microsoft YaHei', sans-serif !important;
    font-weight: 600;
    color: #1e293b !important;
    background: #eeebe5 !important;
    border-bottom: 2px solid #cbd5e1 !important;
    padding: 8px 12px;
    text-align: left;
}

td {
    border-bottom: 1px solid #e5e1db !important;
    padding: 7px 12px;
    color: #334155 !important;
}

tr:nth-child(even) td {
    background: rgba(250, 248, 245, 0.6) !important;
}

tr:nth-child(odd) td {
    background: rgba(243, 240, 234, 0.4) !important;
}

/* ---- HORIZONTAL RULE ---- */
hr {
    border: none !important;
    border-top: 1px solid #d6d3cd !important;
    margin: 2em 0;
}

/* ---- IMAGES ---- */
img {
    max-width: 100%;
    border-radius: 4px;
    margin: 0.8em 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* ---- KaTeX / Math ---- */
.katex {
    color: #0891b2 !important;
}

/* ---- MERMAID DIAGRAMS ---- */
.mermaid {
    text-align: center;
    margin: 1.5em 0;
}

/* Fix yellow/unreadable syntax highlighting in markdown code blocks */
.vscode-light pre code span,
.vscode-dark pre code span,
.vscode-high-contrast pre code span,
pre code span,
.language-markdown span,
.language-md span {
    color: #1e293b !important;
}

.vscode-light pre code span[class*="mtk"]:not(.mtk10),
.vscode-dark pre code span[class*="mtk"]:not(.mtk10),
pre code span.hljs-section,
pre code span.hljs-keyword,
pre code span.mtk9,
pre code span.mtk11,
pre code span.mtk12,
.language-markdown .hljs-section,
.language-md .hljs-section {
    color: #0369a1 !important;
    font-weight: bold;
}

.mermaid svg {
    background: transparent !important;
}

.mermaid .node rect,
.mermaid .node circle,
.mermaid .node polygon,
.mermaid .node path {
    fill: #ffffff !important;
    stroke: #94a3b8 !important;
    stroke-width: 1.5px !important;
}

/* Text in nodes */
.mermaid .node text,
.mermaid .label text {
    fill: #1e293b !important;
    color: #1e293b !important;
}

.mermaid text {
    color: #1e293b !important;
}

/* Subgraph/cluster containers */
.mermaid .cluster rect {
    fill: #f8fafc !important;
    stroke: #cbd5e1 !important;
    stroke-width: 1px !important;
}

/* Subgraph/cluster titles */
.mermaid .cluster text {
    fill: #0891b2 !important;
    font-weight: 600 !important;
}

/* Edges and arrows */
.mermaid .edgePath .path,
.mermaid .edgeLine {
    stroke: #94a3b8 !important;
}

.mermaid marker {
    fill: #94a3b8 !important;
    stroke: #94a3b8 !important;
}

/*
 * Edge labels: Mermaid renders `<foreignObject><div><span>`; VS Code/Cursor
 * preview theme can leak dark backgrounds into nested nodes so text vanishes.
 * Force light pill + dark text on the full chain (flowchart + stateDiagram-v2).
 */
.mermaid .edgeLabel,
.mermaid g.edgeLabel {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.mermaid .edgeLabel rect,
.mermaid g.edgeLabel rect {
    fill: #ffffff !important;
    stroke: #cbd5e1 !important;
}

.mermaid .label-container rect,
.mermaid g.label-container rect {
    fill: #ffffff !important;
    stroke: #cbd5e1 !important;
}

.mermaid .edgeLabel foreignObject,
.mermaid g.edgeLabel foreignObject {
    background-color: #ffffff !important;
    overflow: visible !important;
}

.mermaid .edgeLabel foreignObject div,
.mermaid .edgeLabel foreignObject span,
.mermaid .edgeLabel foreignObject p,
.mermaid g.edgeLabel foreignObject div,
.mermaid g.edgeLabel foreignObject span,
.mermaid g.edgeLabel foreignObject p {
    background-color: #ffffff !important;
    color: #1e293b !important;
}

/* Node labels inside foreignObject: keep transparent so node rect shows */
.mermaid .node foreignObject div,
.mermaid .node foreignObject span,
.mermaid .node foreignObject p {
    background-color: transparent !important;
    color: #1e293b !important;
}

/* stateDiagram-v2: group boxes + inner shapes */
.mermaid .stateGroup rect,
.mermaid g.stateGroup > rect {
    fill: #ffffff !important;
    stroke: #94a3b8 !important;
}

.mermaid .stateGroup .composit,
.mermaid .stateGroup .divider {
    stroke: #cbd5e1 !important;
}

.mermaid .stateGroup .basic.label-container > rect,
.mermaid .stateGroup rect.basic,
.mermaid .stateGroup rect.state-shape {
    fill: #ffffff !important;
    stroke: #94a3b8 !important;
}

.mermaid .stateGroup text,
.mermaid .stateLabel,
.mermaid .nodeLabel,
.mermaid .state-note text {
    fill: #1e293b !important;
}

.mermaid .stateGroup .start-state circle,
.mermaid .stateGroup .end-state circle,
.mermaid .stateGroup .start-state .state-start,
.mermaid .stateGroup .end-state .state-end {
    fill: #1e293b !important;
    stroke: #1e293b !important;
}