/* Tables and code blocks inside blog posts */

/* ---------- Tables ---------- */
.blog-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin: 1.25rem 0 1.75rem;
    border-collapse: collapse;
    border: 1px solid var(--bs-gray-300);
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

.blog-content th,
.blog-content td {
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--bs-gray-300);
    vertical-align: top;
}

.blog-content th + th,
.blog-content td + td {
    border-left: 1px solid var(--bs-gray-200);
}

.blog-content thead th {
    background: var(--bs-gray-100);
    font-weight: 600;
    white-space: nowrap;
}

.blog-content tbody tr:last-child td {
    border-bottom: none;
}

.blog-content tbody tr:nth-child(even) td {
    background: #fafbfc;
}

/* ---------- Code blocks ---------- */
.blog-content div.highlighter-rouge {
    position: relative;
    margin: 1.25rem 0 1.75rem;
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 0.5rem;
    overflow: hidden;
}

.blog-content .code-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.5rem 0.35rem 0.9rem;
    background: #161b22;
    border-bottom: 1px solid #30363d;
    font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.72rem;
    color: #8b949e;
    text-transform: lowercase;
}

.blog-content .code-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    background: transparent;
    color: #c9d1d9;
    border: 1px solid #30363d;
    border-radius: 0.3rem;
    font: inherit;
    text-transform: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.blog-content .code-copy:hover {
    background: #21262d;
    border-color: #8b949e;
}

.blog-content .code-copy:focus-visible {
    outline: 2px solid #58a6ff;
    outline-offset: 2px;
}

.blog-content .code-copy.copied {
    color: #3fb950;
    border-color: #3fb950;
}

.blog-content .highlight {
    background: #0d1117;
    margin: 0;
}

/* Unlabelled code blocks render as a bare <pre>; the script wraps them, this covers the no-JS case */
.blog-content > pre {
    margin: 1.25rem 0 1.75rem;
    border: 1px solid #30363d;
    border-radius: 0.5rem;
}

.blog-content pre {
    margin: 0;
    padding: 1rem 1.1rem;
    overflow-x: auto;
    background: #0d1117;
    color: #e6edf3;
    font-size: 0.82rem;
    line-height: 1.6;
}

.blog-content pre code {
    color: inherit;
    background: none;
    padding: 0;
    white-space: pre;
}

/* Token colours (GitHub dark), overriding the light rouge theme */
.blog-content .highlight .c,
.blog-content .highlight .c1,
.blog-content .highlight .cm,
.blog-content .highlight .cd,
.blog-content .highlight .cs,
.blog-content .highlight .cp { color: #8b949e; font-style: italic; font-weight: normal; }
.blog-content .highlight .k,
.blog-content .highlight .kc,
.blog-content .highlight .kd,
.blog-content .highlight .kn,
.blog-content .highlight .kp,
.blog-content .highlight .kr,
.blog-content .highlight .kv,
.blog-content .highlight .ow { color: #ff7b72; font-weight: normal; }
.blog-content .highlight .kt { color: #ff7b72; font-weight: normal; }
.blog-content .highlight .o { color: #e6edf3; font-weight: normal; }
.blog-content .highlight .s,
.blog-content .highlight .s1,
.blog-content .highlight .s2,
.blog-content .highlight .sb,
.blog-content .highlight .sc,
.blog-content .highlight .sd,
.blog-content .highlight .sh,
.blog-content .highlight .sx { color: #a5d6ff; }
.blog-content .highlight .se,
.blog-content .highlight .si,
.blog-content .highlight .sr,
.blog-content .highlight .ss { color: #79c0ff; }
.blog-content .highlight .m,
.blog-content .highlight .mb,
.blog-content .highlight .mf,
.blog-content .highlight .mh,
.blog-content .highlight .mi,
.blog-content .highlight .mo,
.blog-content .highlight .mx,
.blog-content .highlight .il { color: #79c0ff; }
.blog-content .highlight .nf,
.blog-content .highlight .fm { color: #d2a8ff; font-weight: normal; }
.blog-content .highlight .nc,
.blog-content .highlight .nn,
.blog-content .highlight .ne { color: #ffa657; font-weight: normal; }
.blog-content .highlight .nb,
.blog-content .highlight .bp,
.blog-content .highlight .no,
.blog-content .highlight .nv,
.blog-content .highlight .vc,
.blog-content .highlight .vg,
.blog-content .highlight .vi { color: #79c0ff; }
.blog-content .highlight .na,
.blog-content .highlight .nd { color: #d2a8ff; }
.blog-content .highlight .nt { color: #7ee787; }
.blog-content .highlight .nl,
.blog-content .highlight .ni { color: #ffa657; }
.blog-content .highlight .n,
.blog-content .highlight .nx,
.blog-content .highlight .p,
.blog-content .highlight .w { color: #e6edf3; }
.blog-content .highlight .err { color: #f85149; background: none; }
.blog-content .highlight .gd { color: #ffa198; background: #490202; }
.blog-content .highlight .gi { color: #7ee787; background: #04260f; }
.blog-content .highlight .gh,
.blog-content .highlight .gu { color: #79c0ff; font-weight: bold; }
.blog-content .highlight .gp,
.blog-content .highlight .go { color: #8b949e; }
.blog-content .highlight .gr,
.blog-content .highlight .gt { color: #f85149; }