/* ======================================================================
   blog.css: the one stylesheet for the essays under /Blogs/<post>.
   _SiteLayout loads it after landing.css on single posts only. The post
   views carry no <style> block; every post class is defined here, scoped
   under .blog-wrapper or .post-end so nothing leaks into the landing pages
   and nothing from the landing sections (padding, reveal, h2 width) leaks in.

   Layout: one wide column (--post-wide) for diagrams, screenshots, code and
   tables, and a narrower centred measure (--post-text, about 75 characters
   per line) for headings, paragraphs, lists and callouts.
   ====================================================================== */

:root {
    --dnl-bg: var(--bg);
    --dnl-text: var(--text);
    --dnl-accent: var(--accent-2);
    --dnl-border: var(--line-strong);
    --dnl-blue: #569cd6;
    --dnl-string: #ce9178;
    --dnl-bad: #f14c4c;
    --dnl-ok: #4ec9b0;
    --post-wide: 880px;
    --post-text: 580px;
}

/* ---------- Column ---------- */
.blog-wrapper {
    max-width: calc(var(--post-wide) + 2 * var(--gutter));
    margin: 48px auto 0;
    padding: 0 var(--gutter);
    font-size: 1.1rem;
    line-height: 1.72;
}

/* Reading elements sit in the narrow measure, centred in the wide column. */
.blog-wrapper .blog-header,
.blog-wrapper .post-meta,
.blog-wrapper p,
.blog-wrapper ul,
.blog-wrapper ol,
.blog-wrapper h2,
.blog-wrapper h3,
.blog-wrapper h4,
.blog-wrapper blockquote,
.blog-wrapper .key-point,
.blog-wrapper .warn-point,
.blog-wrapper .part-title {
    max-width: var(--post-text);
    margin-left: auto;
    margin-right: auto;
}

/* Wide elements take the whole column: figures, code, console output, tables, series cards. */
.blog-wrapper figure,
.blog-wrapper pre,
.blog-wrapper .console-output,
.blog-wrapper .table-scroll,
.blog-wrapper .series-grid {
    max-width: none;
}

/* ---------- Header ---------- */
.blog-wrapper .blog-header {
    text-align: center;
    border-bottom: 2px solid var(--dnl-accent);
    margin-bottom: 40px;
    padding-bottom: 20px;
}
.blog-wrapper .blog-header h1 {
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--heading);
    margin: 0 0 12px;
}
.blog-wrapper .blog-header .subtitle {
    color: var(--muted);
    font-size: 1.08rem;
    margin: 0;
}
.blog-wrapper .series-nav {
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}
.blog-wrapper .series-nav a { color: var(--dnl-accent); text-decoration: none; }
.blog-wrapper .series-nav a:hover { text-decoration: underline; }
.blog-wrapper .post-meta { color: var(--muted); font-size: .9rem; margin-top: 10px; }
.blog-wrapper .post-meta a { color: inherit; }

/* ---------- Sections and headings ---------- */
.blog-wrapper .post-section { margin-top: 56px; }
.blog-wrapper .post-section > :last-child { margin-bottom: 0; }

.blog-wrapper h2 {
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: 1.25;
    letter-spacing: -.02em;
    color: var(--dnl-accent);
    text-align: center;
    border-bottom: 1px solid var(--dnl-border);
    padding-bottom: 10px;
    margin-bottom: 22px;
}
.blog-wrapper .step-label {
    display: block;
    font-family: var(--mono);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dnl-accent);
    opacity: .85;
    margin-bottom: 8px;
}
.blog-wrapper h3 {
    font-size: 1.25rem;
    color: var(--dnl-blue);
    margin-top: 1.8em;
    margin-bottom: .6em;
}
.blog-wrapper h3.layer {
    color: var(--heading);
    text-align: center;
    margin-top: 2.2em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--dnl-border);
}
.blog-wrapper h4 { font-size: 1.05rem; color: var(--heading); margin-top: 1.5em; margin-bottom: .5em; }

/* a part divider inside long posts */
.blog-wrapper .part-title {
    margin-top: 72px;
    padding: 16px 0;
    border-top: 2px solid var(--dnl-accent);
    border-bottom: 1px solid var(--dnl-border);
    text-align: center;
    color: var(--heading);
    font-size: 1.15rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.blog-wrapper .part-title small {
    display: block;
    font-family: var(--mono);
    color: var(--dnl-accent);
    font-size: .76rem;
    letter-spacing: .14em;
    margin-bottom: 6px;
}

/* ---------- Text ---------- */
.blog-wrapper p { margin-top: 0; margin-bottom: 1.15em; }
.blog-wrapper ul, .blog-wrapper ol { margin-top: 0; margin-bottom: 1.15em; padding-left: 1.5em; }
.blog-wrapper ul { list-style: disc; }
.blog-wrapper ol { list-style: decimal; }
.blog-wrapper li { margin: .35em 0; }
.blog-wrapper li > ul, .blog-wrapper li > ol { margin: .35em 0 0; }
.blog-wrapper a { color: var(--dnl-accent); }
.blog-wrapper a:hover { text-decoration: underline; }
.blog-wrapper strong, .blog-wrapper b { color: var(--heading); }
.blog-wrapper blockquote { margin-top: 1.4em; margin-bottom: 1.4em; padding: .6em 1.2em; border-left: 3px solid var(--accent-line); color: var(--muted); }
.blog-wrapper hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.blog-wrapper code {
    font-family: var(--mono); font-size: .9em; color: #f1f5f9;
    background: rgba(148, 163, 184, .14); border-radius: 4px; padding: .1em .35em;
}

/* ---------- Callouts ---------- */
.blog-wrapper .key-point, .blog-wrapper .warn-point {
    padding: 12px 20px;
    margin-top: 24px;
    margin-bottom: 24px;
    border-left: 3px solid var(--dnl-accent);
    background: rgba(255, 255, 255, .03);
}
.blog-wrapper .key-point strong { color: var(--dnl-accent); }
.blog-wrapper .warn-point { border-left-color: var(--dnl-bad); background: rgba(241, 76, 76, .05); }
.blog-wrapper .warn-point strong { color: var(--dnl-bad); }
.blog-wrapper .key-point > :last-child, .blog-wrapper .warn-point > :last-child { margin-bottom: 0; }

/* ---------- Code and console ---------- */
.blog-wrapper pre,
.blog-wrapper pre[class*="language-"] {
    margin: 20px 0 28px;
    border-radius: 10px;
    overflow-x: auto;
    font-size: .86rem;
    line-height: 1.55;
}
.blog-wrapper pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.blog-wrapper .console-output {
    margin: 20px 0 28px;
    padding: 16px 20px;
    background: #0d0d0d;
    border: 1px solid var(--dnl-border);
    border-radius: 10px;
    color: #cccccc;
    font-family: var(--mono);
    font-size: .85rem;
    line-height: 1.55;
    white-space: pre;
    overflow-x: auto;
}
.blog-wrapper .console-output .out-accent { color: var(--dnl-accent); }
.blog-wrapper .console-output .out-ok { color: var(--dnl-ok); }
.blog-wrapper .console-output .out-bad { color: var(--dnl-bad); }

/* ---------- Tables (result, race, decision) ---------- */
.blog-wrapper table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.blog-wrapper th, .blog-wrapper td { border: 1px solid var(--dnl-border); padding: 8px 12px; vertical-align: top; text-align: left; }
.blog-wrapper th { color: var(--dnl-accent); text-transform: uppercase; letter-spacing: 1px; font-size: .78rem; }
.blog-wrapper td code { color: var(--dnl-string); }
.blog-wrapper .decision-table td:first-child { color: var(--dnl-blue); }
.blog-wrapper .race-bad { color: var(--dnl-bad); font-weight: bold; }
.blog-wrapper .race-ok { color: var(--dnl-ok); }

/* landing.js wraps every table in this box; wide tables scroll inside it, with a hint while there is more to the right */
.table-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0 28px; }
.table-scroll > table { margin: 0; }
.table-scroll.has-more::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 56px; pointer-events: none;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0), var(--bg) 85%);
}
.table-scroll.has-more::before {
    content: "scroll \2192"; position: absolute; right: 8px; top: 6px; z-index: 1; pointer-events: none;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--accent-2); background: var(--bg); border: 1px solid var(--accent-line); border-radius: 999px; padding: 2px 8px;
}

/* ---------- Figures: diagrams and screenshots ----------
   A figure is centred and never wider than the column. Vector diagrams fill the
   column (no blur when scaled). Raster screenshots keep their pixels: natural
   size up to the column, never enlarged; the figure and its caption shrink to
   the image, and the image links to the original at full size. */
.blog-wrapper figure.diagram { margin: 36px auto; max-width: 100%; }
.blog-wrapper figure.diagram img, .blog-wrapper figure.diagram svg {
    display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px;
}
.blog-wrapper figure.diagram:not(.screenshot) img, .blog-wrapper figure.diagram:not(.screenshot) svg { width: 100%; }
.blog-wrapper figure.diagram figcaption {
    margin-top: 10px; text-align: center; color: var(--muted); font-size: .85rem; line-height: 1.5;
}
.blog-wrapper figure.screenshot { display: table; }
/* the img carries width and height attributes (its pixel size): that reserves the space before a lazy image loads and caps it at its natural size */
.blog-wrapper figure.screenshot img { border: 1px solid var(--dnl-border); }
.blog-wrapper figure.screenshot figcaption { display: table-caption; caption-side: bottom; }
.blog-wrapper figure.screenshot a { display: block; cursor: zoom-in; }
.blog-wrapper figure.screenshot a:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 8px; }

/* ---------- Series cards (end of a series post) ---------- */
.blog-wrapper .series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; }
.blog-wrapper .series-card {
    position: relative; display: flex; flex-direction: column;
    padding: 24px; border: 1px solid var(--dnl-border); border-radius: 10px; background: rgba(255, 255, 255, .02);
}
.blog-wrapper .series-card .part-label {
    font-family: var(--mono); color: var(--dnl-accent); font-size: .76rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em; margin-bottom: 8px;
}
.blog-wrapper .series-card h3 { margin: 0 0 12px; font-size: 1.15rem; color: var(--heading); }
.blog-wrapper .series-card p { font-size: .9rem; opacity: .85; flex-grow: 1; margin-bottom: 0; }
.blog-wrapper .series-card .tags { font-size: .78rem; opacity: .6; margin-top: 12px; }
.blog-wrapper .series-card .soon-badge {
    position: absolute; top: 16px; right: 16px;
    border: 1px solid var(--dnl-border); border-radius: 999px; color: var(--dnl-text); opacity: .6;
    font-family: var(--mono); font-size: .68rem; padding: 2px 10px; text-transform: uppercase; letter-spacing: 1px;
}
.blog-wrapper a.series-card { text-decoration: none; color: var(--dnl-text); transition: border-color .15s ease; }
.blog-wrapper a.series-card:hover { border-color: var(--dnl-accent); text-decoration: none; }

/* ---------- Utilities the posts use ---------- */
.blog-wrapper .text-center { text-align: center; }
.blog-wrapper .text-muted { color: var(--muted); }
.blog-wrapper .small { font-size: .875em; }
.blog-wrapper .mb-2 { margin-bottom: .5rem; }
.blog-wrapper .mb-3 { margin-bottom: 1rem; }
.blog-wrapper .px-3 { padding-left: 1rem; padding-right: 1rem; }
.blog-wrapper .text-reset { color: inherit; }
.blog-wrapper .text-decoration-none { text-decoration: none; }

/* ---------- End of a post: call to action, more posts, navigation (_PostEnd.cshtml) ---------- */
.post-end {
    max-width: calc(var(--post-wide) + 2 * var(--gutter));
    margin: 64px auto 0;
    padding: 0 var(--gutter) 96px;
}
.post-end .post-end-rule { border: 0; border-top: 1px solid rgba(255, 255, 255, .18); margin: 0 0 28px; }
.post-end .post-end-title { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; opacity: .6; margin-bottom: 14px; }
.post-end ul { list-style: none; padding: 0; margin: 0 0 32px; }
.post-end li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.post-end li a { color: var(--text); text-decoration: none; }
.post-end li a:hover { text-decoration: underline; }
.post-end li time { opacity: .55; font-size: .85rem; white-space: nowrap; }
.post-end .post-cta {
    border: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid var(--dnl-accent); border-radius: 8px;
    padding: 22px 26px; margin: 0 0 36px; background: rgba(255, 255, 255, .03);
}
.post-end .post-cta .post-cta-eyebrow { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; opacity: .6; margin: 0 0 8px; }
.post-end .post-cta h3 { font-size: 1.25rem; color: var(--heading); margin: 0 0 10px; }
.post-end .post-cta p { margin: 0 0 16px; opacity: .85; }
.post-end .post-cta .post-cta-alt { margin: 16px 0 0; font-size: .9rem; opacity: .7; }
.post-end .post-cta .post-cta-alt a { color: var(--dnl-accent); }
.post-end .post-cta .post-cta-btn {
    display: inline-block; padding: 10px 18px; border: 1px solid var(--dnl-accent); border-radius: 6px;
    color: var(--dnl-accent); text-decoration: none; font-weight: bold;
}
.post-end .post-cta .post-cta-btn:hover { background: var(--dnl-accent); color: #0d1117; }
.post-end .post-end-nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: .85rem; opacity: .75; }
.post-end .post-end-nav a { color: var(--text); text-decoration: none; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
    .blog-wrapper { margin-top: 28px; font-size: 1rem; }
    .blog-wrapper .blog-header { margin-bottom: 32px; padding-bottom: 16px; }
    .blog-wrapper .post-section { margin-top: 44px; }
    .blog-wrapper h2 { font-size: 1.4rem; }
    .blog-wrapper .part-title { margin-top: 56px; }
    .blog-wrapper figure.diagram { margin: 28px auto; }
    .blog-wrapper pre, .blog-wrapper pre[class*="language-"], .blog-wrapper .console-output { font-size: .8rem; }
    .table-scroll > table { min-width: 560px; }
    .blog-wrapper .series-grid { grid-template-columns: minmax(0, 1fr); }
    .post-end { margin-top: 48px; padding-bottom: 72px; }
    .post-end .post-cta { padding: 18px 18px; }
}