/* ============================================================
   Additional styles for /learn/cs/*.html — automaton & tree
   diagrams. Loaded AFTER /learn/math/_styles.css.
   ============================================================ */

.diagram-wrap {
    margin: 22px 0;
    padding: 22px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow-x: auto;
    text-align: center;
    direction: ltr;
}
.diagram-wrap svg { max-width: 100%; height: auto; display: inline-block; }
.diagram-caption {
    margin-top: 10px;
    font-size: 14px;
    color: var(--muted);
    direction: rtl;
}

/* Automaton diagram primitives */
.state-circle { fill: #fff; stroke: var(--ink-soft); stroke-width: 2; }
.state-accept { fill: #fff; stroke: var(--ink-soft); stroke-width: 2; }
.state-accept-inner { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.state-label { font: 600 16px 'Heebo', sans-serif; fill: var(--ink-soft); text-anchor: middle; dominant-baseline: central; }
.edge { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; }
.edge-label { font: 500 14px 'Heebo', sans-serif; fill: var(--accent); text-anchor: middle; }
.start-arrow { fill: none; stroke: var(--accent2); stroke-width: 2.4; }

/* Binary tree diagram primitives */
.tree-edge { stroke: var(--ink-soft); stroke-width: 1.6; }
.tree-node { fill: #fff; stroke: var(--ink-soft); stroke-width: 2; }
.tree-node-leaf { fill: var(--soft); stroke: var(--accent); stroke-width: 2; }
.tree-label { font: 600 14px 'Heebo', sans-serif; fill: var(--ink-soft); text-anchor: middle; dominant-baseline: central; }

/* Transition tables */
.trans-table {
    width: 100%;
    max-width: 520px;
    margin: 16px auto;
    border-collapse: collapse;
    font-size: 15px;
}
.trans-table th, .trans-table td {
    border: 1px solid var(--border);
    padding: 8px 12px;
    text-align: center;
}
.trans-table th { background: var(--soft); font-weight: 700; }

/* Code block */
pre.code {
    background: #0d1117;
    color: #e6e8ee;
    padding: 16px;
    border-radius: 10px;
    overflow-x: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.55;
    direction: ltr;
    text-align: left;
}
pre.code .kw { color: #ff7b72; }
pre.code .cm { color: #8b949e; font-style: italic; }
pre.code .str { color: #a5d6ff; }