/* Override the homepage body flex layout for article pages */
.writings-body {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

.article-page {
    max-width: 720px;
    width: 100%;
}

.article-header {
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e4e4e0;
}

.article-header h1 {
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 400;
    color: #222;
    margin-bottom: 10px;
    line-height: 1.3;
}

.article-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #444;
}

.article-body h2 {
    font-family: Georgia, serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #222;
    margin: 48px 0 16px;
}

.article-body p {
    margin-bottom: 20px;
}

.article-body a {
    color: #7a5299;
    text-decoration: none;
    transition: color 0.2s;
}

.article-body a:hover {
    color: #5a3d79;
}

/* ── Diagram stage (split-view container) ─────────────────── */

.diagram-stage {
    display: flex;
    width: calc(100vw - 48px);
    margin: 48px 0;
    height: 82vh;
    border: 1.5px solid rgba(196, 170, 216, 0.55);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(122, 82, 153, 0.02);
    position: relative;
}

/* ── Diagram panel (left) ─────────────────────────────────── */

.diagram-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    min-width: 0;
    transition: flex-basis 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.diagram-stage.split .diagram-panel {
    flex: 0 0 56%;
}

.diagram-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    border-bottom: 1px solid rgba(196, 170, 216, 0.25);
    flex-shrink: 0;
}

.diagram-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: #9368b5;
    letter-spacing: 0.04em;
}

.diagram-embed {
    flex: 1;
    width: 100%;
    border: none;
    display: block;
    min-height: 0;
}

/* ── Content panel (right) ────────────────────────────────── */

.content-panel {
    flex: 0 0 0%;
    min-width: 0;
    overflow: hidden;
    border-left: 1.5px solid rgba(196, 170, 216, 0.4);
    transition: flex-basis 0.42s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    background: #fff;
}

.diagram-stage.split .content-panel {
    flex: 0 0 44%;
}

.panel-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(196, 170, 216, 0.25);
    flex-shrink: 0;
}

.panel-close {
    background: none;
    border: none;
    font-size: 0.82rem;
    color: #ae8ecc;
    cursor: pointer;
    font-family: inherit;
    padding: 2px 0;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}

.panel-close:hover { color: #7a5299; }

.panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 28px 28px 40px;
    font-size: 0.97rem;
    line-height: 1.72;
    color: #444;
}

.panel-scroll h3 {
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: #222;
    margin: 0 0 18px;
}

.panel-scroll p { margin-bottom: 16px; }

.panel-scroll a {
    color: #7a5299;
    text-decoration: none;
}

/* ── Math & code (used in panel and article) ──────────────── */

.math-block {
    margin: 22px 0;
    padding: 16px 20px;
    background: rgba(122, 82, 153, 0.04);
    border-left: 3px solid rgba(196, 170, 216, 0.7);
    border-radius: 0 6px 6px 0;
    overflow-x: auto;
}

.math-block .katex-display { margin: 5px 0; }

pre {
    margin: 22px 0;
    padding: 16px 20px;
    background: #f3f0f7;
    border-radius: 8px;
    overflow-x: auto;
}

.code-block {
    font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.83rem;
    line-height: 1.7;
    color: #3d2b54;
}

.code-comment {
    color: #ae8ecc;
    font-style: italic;
}

/* ── Accordion (details/summary) ─────────────────────────── */

details.accordion {
    margin: 18px 0;
    border: 1px solid rgba(196, 170, 216, 0.4);
    border-radius: 8px;
    overflow: hidden;
}

details.accordion summary {
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #7a5299;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(122, 82, 153, 0.04);
    user-select: none;
}

details.accordion summary::before {
    content: '▶';
    font-size: 0.65rem;
    transition: transform 0.2s;
    color: #ae8ecc;
}

details.accordion[open] summary::before {
    transform: rotate(90deg);
}

details.accordion summary::-webkit-details-marker { display: none; }

details.accordion .accordion-body {
    padding: 14px 16px;
    font-size: 0.9rem;
    line-height: 1.68;
    color: #555;
    border-top: 1px solid rgba(196, 170, 216, 0.25);
}

details.accordion .accordion-body p { margin-bottom: 12px; }
details.accordion .accordion-body p:last-child { margin-bottom: 0; }

/* ── MSA diagram SVG ─────────────────────────────────────── */

.msa-svg {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 20px auto;
}

/* ── Token visual table ───────────────────────────────────── */

.token-visual {
    margin: 22px 0;
    border: 1px solid rgba(196, 170, 216, 0.4);
    border-radius: 8px;
    overflow: hidden;
    font-size: 0.82rem;
}

.tv-row {
    display: grid;
    grid-template-columns: 1fr 70px 60px;
    align-items: center;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(196, 170, 216, 0.2);
    gap: 8px;
}

.tv-row:last-child { border-bottom: none; }

.tv-row em {
    font-style: normal;
    color: #ae8ecc;
    font-size: 0.78rem;
}

.tv-row span:nth-child(2),
.tv-row span:nth-child(3) {
    text-align: center;
}

.tv-head {
    background: rgba(122, 82, 153, 0.05);
    font-size: 0.72rem;
    font-weight: 600;
    color: #9368b5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tv-multi {
    font-weight: 700;
    color: #7a5299;
    background: rgba(122, 82, 153, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    text-align: center;
}

.tv-atom {
    font-weight: 700;
    color: #c27aa8;
    background: rgba(194, 122, 168, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    text-align: center;
}

.tv-divider {
    padding: 5px 12px;
    font-size: 0.72rem;
    color: #ae8ecc;
    font-style: italic;
    background: rgba(196, 170, 216, 0.08);
    border-bottom: 1px solid rgba(196, 170, 216, 0.2);
    letter-spacing: 0.01em;
}

/* ── Dark mode overrides ─────────────────────────────────────────────── */

body.dark .article-header {
    border-bottom-color: var(--border);
}
body.dark .article-header h1 { color: var(--text-1); }
body.dark .article-body        { color: var(--text-3); }
body.dark .article-body h2     { color: var(--text-1); }
body.dark .article-body strong { color: #c4a0e0; }
/* Keep the whole diagram stage a light "island" in dark mode —
   every inner visual is hand-drawn for a light background. */
body.dark .diagram-stage   { background: #faf8fc; }
body.dark .content-panel   { background: #fff; }
body.dark .panel-scroll    { color: #444; }
body.dark .panel-scroll h3 { color: #222; }
body.dark pre                  { background: #1e1a28; }
body.dark .code-block          { color: #c4a0e0; }
body.dark details.accordion    { border-color: rgba(196,170,216,0.2); }
body.dark details.accordion summary { background: rgba(122,82,153,0.07); }
body.dark details.accordion .accordion-body { color: var(--text-4); border-top-color: rgba(196,170,216,0.15); }
body.dark .token-visual        { border-color: rgba(196,170,216,0.2); }
body.dark .tv-row              { border-bottom-color: rgba(196,170,216,0.12); }
body.dark .tv-head             { background: rgba(122,82,153,0.08); }
body.dark .tv-divider          { background: rgba(196,170,216,0.05); border-bottom-color: rgba(196,170,216,0.12); }