/* ==========================================================================
   InsightLense blog
   Article typography, index cards, mermaid figures and code blocks.
   Loaded only by pages under /blog/.
   ========================================================================== */

:root {
    --bl-ink:        #14162b;
    --bl-body:       #3c4160;
    --bl-muted:      #6b7396;
    --bl-rule:       #e4e5f0;
    --bl-paper:      #ffffff;
    --bl-tint:       #f6f6fb;
    --bl-violet:     #4b34e0;
    --bl-violet-w:   #efecfe;
    --bl-cyan:       #0e97b0;
    --bl-cyan-w:     #e2f5f9;
    --bl-amber:      #b4531b;
    --bl-amber-w:    #fbede3;
    --bl-code-bg:    #14162b;
    --bl-code-fg:    #e6e8f5;
}

/* ---------- shared page furniture ---------- */

.bl-hero {
    background: linear-gradient(150deg, #10122a 0%, #1b1c47 52%, #0d2f42 100%);
    color: #fff;
    padding: 74px 0 66px;
    position: relative;
    overflow: hidden;
}

.bl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}

.bl-hero > .container { position: relative; z-index: 1; }

.bl-eyebrow {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7fe4f5;
    margin-bottom: 16px;
    display: block;
}

.bl-hero h1 {
    color: #fff;
    font-size: clamp(30px, 4.6vw, 50px);
    line-height: 1.14;
    letter-spacing: -.015em;
    margin: 0 0 20px;
    max-width: 20ch;
    text-wrap: balance;
}

.bl-hero .bl-standfirst {
    font-size: 18.5px;
    line-height: 1.6;
    color: #c3c8e4;
    max-width: 62ch;
    margin: 0;
}

.bl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    align-items: center;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: #98a0c4;
}

.bl-meta strong { color: #e7eaf8; font-weight: 500; }

.bl-tag {
    display: inline-block;
    font-size: 11.5px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(127, 228, 245, .13);
    color: #7fe4f5;
    border: 1px solid rgba(127, 228, 245, .3);
    font-family: inherit;
    letter-spacing: .04em;
}

/* ---------- article body ---------- */

.bl-article {
    padding: 62px 0 74px;
    background: var(--bl-paper);
}

.bl-body {
    max-width: 720px;
    margin: 0 auto;
    color: var(--bl-body);
    font-size: 17px;
    line-height: 1.72;
}

.bl-body > * + * { margin-top: 1.15em; }

.bl-body p { margin: 0; }

.bl-body h2 {
    color: var(--bl-ink);
    font-size: 27px;
    line-height: 1.26;
    letter-spacing: -.012em;
    margin-top: 2.1em;
    margin-bottom: .1em;
    text-wrap: balance;
}

.bl-body h3 {
    color: var(--bl-ink);
    font-size: 20px;
    line-height: 1.34;
    margin-top: 1.9em;
    margin-bottom: .1em;
    text-wrap: balance;
}

.bl-body h2 + p,
.bl-body h3 + p { margin-top: .55em; }

.bl-body strong { color: var(--bl-ink); font-weight: 600; }

.bl-body a { color: var(--bl-violet); text-decoration: underline; text-underline-offset: 2px; }
.bl-body a:hover { color: var(--bl-ink); }

.bl-body ul,
.bl-body ol { padding-left: 1.3em; margin-bottom: 0; }
.bl-body li { margin-bottom: .5em; }
.bl-body li::marker { color: var(--bl-violet); }

.bl-body code {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: .87em;
    background: var(--bl-violet-w);
    color: var(--bl-violet);
    padding: 2px 6px;
    border-radius: 4px;
    word-break: break-word;
}

/* lede paragraph */
.bl-lede {
    font-size: 19.5px;
    line-height: 1.6;
    color: var(--bl-ink);
}

/* pull quote */
.bl-pull {
    border-left: 3px solid var(--bl-violet);
    padding: 4px 0 4px 22px;
    margin: 1.8em 0;
    font-size: 20px;
    line-height: 1.5;
    color: var(--bl-ink);
    font-style: italic;
}

/* callout */
.bl-note {
    background: var(--bl-tint);
    border: 1px solid var(--bl-rule);
    border-radius: 10px;
    padding: 20px 24px;
    font-size: 15.5px;
    line-height: 1.65;
}

.bl-note--warn { background: var(--bl-amber-w); border-color: #eccdb4; }
.bl-note--warn .bl-note__label { color: var(--bl-amber); }

.bl-note__label {
    display: block;
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bl-violet);
    margin-bottom: 8px;
}

.bl-note p { margin: 0; }
.bl-note p + p { margin-top: .8em; }

/* code block */
.bl-code {
    background: var(--bl-code-bg);
    color: var(--bl-code-fg);
    border-radius: 10px;
    padding: 20px 22px;
    overflow-x: auto;
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.62;
    -webkit-overflow-scrolling: touch;
}

.bl-code code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
    white-space: pre;
}

.bl-code .c { color: #7a83ad; }   /* comment */
.bl-code .k { color: #b9a6ff; }   /* keyword */
.bl-code .s { color: #7fe4f5; }   /* string  */
.bl-code .n { color: #ffc98a; }   /* number  */
.bl-code .g { color: #6ee7a8; }   /* good    */
.bl-code .r { color: #ff9c9c; }   /* bad     */

/* figures: mermaid + tables */
/* Figures break out wider than the 720px reading measure -- a sequence diagram
   with six participants is unreadable squeezed into a text column. */
.bl-figure {
    margin: 2.2em 0;
    border: 1px solid var(--bl-rule);
    border-radius: 12px;
    background: var(--bl-tint);
    overflow: hidden;
    width: min(1060px, 92vw);
    margin-left: 50%;
    transform: translateX(-50%);
}

.bl-figure__body {
    padding: 26px 22px;
    overflow-x: auto;
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

.bl-figure__body .mermaid { display: inline-block; min-width: 0; margin: 0; }
.bl-figure__body .mermaid svg { max-width: 100%; height: auto; }

/* code blocks must never inherit centring, and <code> needs to be a block so
   long lines scroll rather than wrap mid-token */
.bl-code, .bl-code code { text-align: left; }
.bl-code code { display: block; }

.bl-figure figcaption {
    padding: 12px 22px 14px;
    border-top: 1px solid var(--bl-rule);
    background: var(--bl-paper);
    font-size: 13.5px;
    color: var(--bl-muted);
    text-align: left;
}

.bl-figure figcaption b { color: var(--bl-ink); font-weight: 600; }

.bl-table-wrap { overflow-x: auto; margin: 1.8em 0; -webkit-overflow-scrolling: touch; }

.bl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14.5px;
    min-width: 520px;
}

.bl-table th {
    text-align: left;
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bl-muted);
    font-weight: 500;
    padding: 0 14px 9px 0;
    border-bottom: 1px solid var(--bl-rule);
}

.bl-table td {
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid var(--bl-rule);
    color: var(--bl-body);
    vertical-align: top;
}

.bl-table td:first-child { color: var(--bl-ink); font-weight: 600; }
.bl-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* key figure strip */
.bl-figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--bl-rule);
    border: 1px solid var(--bl-rule);
    border-radius: 10px;
    overflow: hidden;
    margin: 2em 0;
}

.bl-figures > div { background: var(--bl-paper); padding: 20px 18px; }

.bl-figures dt {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--bl-muted);
    margin-bottom: 7px;
}

.bl-figures dd {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--bl-ink);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.bl-figures dd small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--bl-muted);
    margin-top: 4px;
}

/* end-of-post CTA */
.bl-cta {
    margin-top: 3em;
    padding: 30px 32px;
    border-radius: 14px;
    background: linear-gradient(120deg, #4b34e0 0%, #6b4de8 46%, #17b8d4 100%);
    color: #fff;
}

.bl-cta h3 { color: #fff; margin: 0 0 10px; font-size: 21px; line-height: 1.3; }
.bl-cta p { margin: 0 0 18px; color: rgba(255, 255, 255, .9); font-size: 15.5px; }

.bl-cta__btn {
    display: inline-block;
    background: #fff;
    color: #3a27b8;
    padding: 11px 24px;
    border-radius: 40px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

.bl-cta__btn:hover { background: #f0eeff; color: #3a27b8; text-decoration: none; }

/* related posts */
.bl-related { border-top: 1px solid var(--bl-rule); margin-top: 3em; padding-top: 26px; }

.bl-related__label {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bl-muted);
    margin-bottom: 14px;
}

.bl-related ul { list-style: none; padding: 0; margin: 0; }
.bl-related li { margin-bottom: 9px; }

.bl-related a {
    color: var(--bl-ink);
    font-weight: 600;
    font-size: 15.5px;
    text-decoration: none;
}

.bl-related a:hover { color: var(--bl-violet); }

/* ---------- index ---------- */

.bl-index { padding: 58px 0 74px; background: var(--bl-tint); }

.bl-group { margin-bottom: 52px; }
.bl-group:last-child { margin-bottom: 0; }

.bl-group__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--bl-rule);
}

.bl-group__head h2 {
    margin: 0;
    font-size: 25px;
    color: var(--bl-ink);
    letter-spacing: -.01em;
}

.bl-group__head span {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 11px;
    letter-spacing: .09em;
    color: var(--bl-muted);
    text-transform: uppercase;
}

.bl-group__note {
    width: 100%;
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--bl-muted);
}

.bl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 20px;
}

.bl-card {
    background: var(--bl-paper);
    border: 1px solid var(--bl-rule);
    border-radius: 12px;
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.bl-card:hover {
    transform: translateY(-3px);
    border-color: #c9c4f7;
    box-shadow: 0 12px 30px -14px rgba(75, 52, 224, .38);
    text-decoration: none;
}

.bl-card__kicker {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--bl-violet);
}

.bl-card h3 {
    margin: 0;
    font-size: 18.5px;
    line-height: 1.34;
    color: var(--bl-ink);
    letter-spacing: -.008em;
}

.bl-card p { margin: 0; font-size: 14.8px; line-height: 1.6; color: var(--bl-body); }

.bl-card__foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px dashed var(--bl-rule);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bl-card__figure {
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: var(--bl-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.bl-card__read {
    font-size: 12.5px;
    color: var(--bl-muted);
    white-space: nowrap;
}

/* featured card spans the row on wide screens */
.bl-card--lead { grid-column: 1 / -1; border-color: #c9c4f7; }
.bl-card--lead h3 { font-size: 25px; line-height: 1.24; }
.bl-card--lead p { font-size: 16px; max-width: 68ch; }

@media (max-width: 767px) {
    .bl-hero { padding: 50px 0 44px; }
    .bl-article { padding: 42px 0 54px; }
    .bl-body { font-size: 16.3px; }
    .bl-body h2 { font-size: 23px; }
    .bl-figures { grid-template-columns: 1fr; }
    .bl-cta { padding: 24px 22px; }
    .bl-pull { font-size: 18px; }
}

/* ==========================================================================
   Product panel
   A mock of the InsightLense view relevant to the post, so a reader sees the
   product doing the work rather than only reading about the idea.
   ========================================================================== */

.bl-ui {
    margin: 2.2em 0;
    width: min(1060px, 92vw);
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 12px;
    overflow: hidden;
    background: #14162b;
    border: 1px solid #2a2d4a;
    box-shadow: 0 18px 44px -22px rgba(20, 22, 43, .55);
}

.bl-ui__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 18px;
    background: #1b1e3a;
    border-bottom: 1px solid #2a2d4a;
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 11.5px;
}

.bl-ui__mark {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(135deg, #6b4de8, #17b8d4);
    flex-shrink: 0;
}

.bl-ui__view { color: #e7eaf8; font-weight: 500; letter-spacing: .03em; }

.bl-ui__filter {
    color: #7fe4f5;
    background: rgba(127, 228, 245, .1);
    border: 1px solid rgba(127, 228, 245, .26);
    border-radius: 20px;
    padding: 2px 10px;
    white-space: nowrap;
}

.bl-ui__filter--warn {
    color: #ffb98a;
    background: rgba(255, 185, 138, .1);
    border-color: rgba(255, 185, 138, .3);
}

.bl-ui__body { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bl-ui table {
    width: 100%;
    border-collapse: collapse;
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    min-width: 620px;
}

.bl-ui th {
    text-align: left;
    padding: 10px 16px;
    color: #7a83ad;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .11em;
    text-transform: uppercase;
    border-bottom: 1px solid #2a2d4a;
    white-space: nowrap;
}

.bl-ui td {
    padding: 10px 16px;
    color: #c3c8e4;
    border-bottom: 1px solid rgba(42, 45, 74, .6);
    white-space: nowrap;
    vertical-align: top;
}

.bl-ui tr:last-child td { border-bottom: 0; }
.bl-ui .num { font-variant-numeric: tabular-nums; text-align: right; }
.bl-ui .dim { color: #7a83ad; }
.bl-ui .em { color: #e7eaf8; }

.bl-ui .pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 20px;
    font-size: 11px;
    border: 1px solid transparent;
}

.bl-ui .pill--ok    { color: #6ee7a8; background: rgba(110, 231, 168, .12); border-color: rgba(110, 231, 168, .3); }
.bl-ui .pill--warn  { color: #ffb98a; background: rgba(255, 185, 138, .12); border-color: rgba(255, 185, 138, .32); }
.bl-ui .pill--stop  { color: #ff9c9c; background: rgba(255, 156, 156, .12); border-color: rgba(255, 156, 156, .32); }
.bl-ui .pill--agent { color: #b9a6ff; background: rgba(185, 166, 255, .12); border-color: rgba(185, 166, 255, .3); }
.bl-ui .pill--human { color: #7fe4f5; background: rgba(127, 228, 245, .12); border-color: rgba(127, 228, 245, .3); }

.bl-ui tr.hl td { background: rgba(255, 185, 138, .07); }
.bl-ui tr.hl td:first-child { box-shadow: inset 3px 0 0 #b4531b; }

.bl-ui figcaption {
    padding: 12px 18px 14px;
    background: #10122a;
    border-top: 1px solid #2a2d4a;
    color: #98a0c4;
    font-size: 13px;
    line-height: 1.6;
    white-space: normal;
}

.bl-ui figcaption b { color: #e7eaf8; font-weight: 600; }

/* narrative rows, for views that are not tabular */
.bl-ui__rows { padding: 6px 0; }

.bl-ui__row {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 9px 18px;
    font-family: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #c3c8e4;
    border-bottom: 1px solid rgba(42, 45, 74, .6);
}

.bl-ui__row:last-child { border-bottom: 0; }
.bl-ui__row .t { color: #7a83ad; flex-shrink: 0; }
.bl-ui__row .s { color: #b9a6ff; flex-shrink: 0; min-width: 108px; }

@media (max-width: 767px) {
    .bl-ui figcaption { font-size: 12.5px; }
}