/* ==========================================================================
   IndieBI blog (blog/assets/blog.css, served at /blog/assets/blog.css)
   Loads after the site's a.css and legal.css and uses their tokens and surfaces
   (s-dark, s-light, s-soft, s-tint). Post pages reuse the legal pages' layout:
   .lg-layout, .lg-prose, .lg-toc, .lg-callout. Everything here is .bl-*.
   ========================================================================== */

/* ---------- Post head: headline and byline, with the post's cover beside them */
.bl-head__grid{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); align-items:center; gap:clamp(32px, 4.4vw, 64px)}
.bl-head .bl-title{max-width:22ch}
.bl-head__cover > img{width:100%; aspect-ratio:2 / 1; object-fit:cover; border:1px solid var(--d-line); border-radius:var(--r3)}
.bl-head__cover > .bl-pic{border:1px solid var(--d-line); border-radius:var(--r3)}

/* ---------- Picture cover: one image from the post on the link preview's dark ground, with its
   violet and orange glows. Any image shape fits; it scales with the cover (container units). */
.bl-pic{display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:2 / 1; overflow:hidden; container-type:inline-size;
  background:radial-gradient(55% 90% at 100% 0%, rgba(100,54,208,.6), transparent 70%), radial-gradient(45% 75% at 100% 100%, rgba(253,108,57,.34), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(100,54,208,.18), transparent 70%), #0E0F17}
.bl-pic img{display:block; width:auto; height:auto; max-width:80cqi; max-height:38cqi; border-radius:max(3px, 1cqi); box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 3cqi 7cqi rgba(0,0,0,.55)}
.bl-pic--plain img{max-width:56cqi; max-height:28cqi; border-radius:0; box-shadow:none}  /* a transparent picture (a logo): no frame */
@media (max-width:900px){
  .bl-head__grid{grid-template-columns:minmax(0, 1fr)}
  .bl-head__cover{order:-1}
}
.bl-byline{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; margin-top:var(--s4)}
.bl-byline__who{display:flex; flex-direction:column; gap:2px}
.bl-byline__name{font-weight:600; font-size:15px; line-height:1.3; color:var(--text)}
.bl-byline__role{font-size:13px; line-height:1.3; color:var(--text-3)}
.bl-byline__when{display:flex; flex-basis:100%; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:14px; line-height:1.4; color:var(--text-3)}
.bl-byline__when time{color:var(--text-2)}

/* The site's pixel between bits of metadata (date, reading time) */
.bl-px{flex:0 0 auto; width:4px; height:4px; background:var(--lav)}

/* ---------- Author pictures: a photo, or initials on lavender */
.bl-avatar{display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border-radius:50%; object-fit:cover; background:var(--lav-200); color:var(--ink); font-weight:700; letter-spacing:.02em}
.bl-avatar--lg{width:44px; height:44px; font-size:13px}
.bl-avatar--sm{width:28px; height:28px; font-size:10px}
.bl-avatar--org{background:var(--lav)}
img.bl-avatar{background:linear-gradient(180deg, var(--lav-200), var(--lav))}  /* photos are grayscale cutouts, as on the About page */

/* ---------- Post body: the prose column with a side column on wide screens */
.bl-side{position:sticky; top:calc(var(--hh) + 32px); display:flex; flex-direction:column; gap:var(--s4)}
.bl-side .lg-toc{position:static; max-height:none; overflow:visible}
.bl-contents{display:none}
@media (max-width:1100px){
  /* The side column now sits under the post. 72ch at the prose's 17px, so its boxes line up with the
     post's (its own text sizes are all set in px) */
  .bl-side{position:static; max-width:72ch; font-size:17px}
  .bl-contents{display:block; margin-bottom:var(--s4); border:1px solid var(--border); border-radius:var(--r2); background:var(--soft); font-size:15px}
  .bl-contents summary{display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 16px; cursor:pointer; list-style:none; font:600 12px/1.3 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--text)}
  .bl-contents summary::-webkit-details-marker{display:none}
  .bl-contents summary::after{content:""; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:transform var(--t-fast)}
  .bl-contents[open] summary::after{transform:rotate(-135deg)}
  .bl-contents ol{list-style:none; margin:0; padding:0 16px 14px}
  .bl-contents a{display:block; padding:7px 0; color:var(--text-2); text-decoration:none; font-weight:400}
}

/* Headings start sections on their own: no rule above them (legal.css draws one) */
.bl-prose h2{padding-top:0; border-top:0}
.bl-prose h2::before{content:none}

/* Links inside the prose are underlined (legal.css); boxes and buttons inside it aren't */
.lg-prose .btn,.lg-prose .bl-readalso,.lg-prose .bl-arrow{text-decoration:none}
.lg-prose .btn{color:var(--ink); font-weight:700}
.bl-arrow{font:600 14px/1.4 var(--font); color:var(--link); text-decoration:none}
.bl-arrow:hover{text-decoration:underline; text-underline-offset:3px}

/* Spacing inside boxes (a.css zeroes paragraph margins) */
.bl-rule > * + *,.bl-note > * + *,.bl-cta__text > * + *,.bl-quote blockquote > * + *,.bl-bq > * + *{margin-top:.7em}

/* ---------- :::rule (the site's .lg-callout, without its orange edge) and :::note */
.lg-prose > .bl-rule{margin-block:1.6em}
.bl-rule{border-left:1px solid rgba(72,67,208,.16)}
.bl-note{margin:1.6em 0; padding:18px 22px; border:1px solid var(--border); border-radius:var(--r2); background:var(--soft); font-size:.95em}
.bl-note__t{margin-bottom:6px; font:600 12px/1.3 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}

/* ---------- :::quote and > blockquote */
.bl-quote{margin:1.8em 0}
.bl-quote blockquote{position:relative; padding-top:24px; font-size:1.2em; font-weight:500; line-height:1.5; color:var(--text)}
.bl-quote blockquote::before{content:""; position:absolute; top:0; left:0; width:12px; height:12px; border-radius:1px; background:var(--orange)}
.bl-quote figcaption{margin-top:12px; font-size:14px; color:var(--text-3)}
.bl-quote__by{display:flex; align-items:center; gap:12px}
.bl-quote__photo{flex:0 0 auto; width:44px; height:44px; border-radius:50%; object-fit:cover}  /* a plain photo: the lavender cutout marks IndieBI's own people */
.bl-bq{margin:1.4em 0; padding:2px 0 2px 20px; border-left:2px solid var(--border-2); color:var(--text)}

/* ---------- Lists: numbered steps and the checklist */
.bl-ol{padding-left:1.4em}
.bl-ol > li::marker{color:var(--text); font-weight:600}
.bl-ol > li + li{margin-top:.55em}
.bl-check{list-style:none; padding:0}
.bl-check > li{display:flex; align-items:flex-start; gap:12px}
.bl-check > li + li{margin-top:.6em}
.bl-check__box{flex:0 0 auto; width:16px; height:16px; margin-top:.38em; border:1.5px solid var(--accent); border-radius:2px}

/* ---------- Images, tables and :::chart */
.lg-prose > .bl-figure,.lg-prose > .bl-chart,.lg-prose > .bl-table{margin-block:1.8em}
.bl-figure img{width:100%; border:1px solid var(--border); border-radius:var(--r2); background:var(--soft)}
.bl-figure figcaption{margin-top:10px; font-size:13.5px; line-height:1.5; color:var(--text-3)}

/* Images open larger (blog.js): a lightbox over the page, the image filling the screen (blog.js caps
   it at twice its size); a click on the image shows it at actual size when it's bigger, and the box scrolls */
.bl-zoom{display:block; cursor:zoom-in}
.bl-zoom:focus-visible{outline:none}
.bl-zoom:focus-visible img{outline:2px solid var(--focus); outline-offset:3px}
html.bl-noscroll{overflow:hidden}
.bl-lightbox{width:100vw; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0; padding:clamp(16px, 3vw, 40px); box-sizing:border-box; border:0; background:rgba(14,15,23,.97); overflow:auto; overscroll-behavior:contain}
.bl-lightbox::backdrop{background:transparent}
.bl-lightbox[open]{display:flex}
.bl-lightbox__img{display:block; margin:auto; width:100%; height:100%; object-fit:contain; cursor:zoom-out}
.bl-lightbox.can-zoom .bl-lightbox__img{cursor:zoom-in}
.bl-lightbox.is-full .bl-lightbox__img{width:auto; height:auto; max-width:none !important; max-height:none !important; cursor:zoom-out}
.bl-lightbox__x{position:fixed; top:16px; right:16px; z-index:1; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border:1px solid rgba(255,255,255,.28); border-radius:var(--r1); background:rgba(14,15,23,.7); color:var(--white); font:400 28px/1 var(--font); cursor:pointer}
.bl-lightbox__x:hover{border-color:var(--lav)}
.bl-lightbox__x:focus-visible{outline:2px solid var(--lav); outline-offset:2px}
.bl-table{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r2)}
.bl-table table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5}
.bl-table th,.bl-table td{padding:10px 14px; text-align:left; vertical-align:top}
.bl-table th{background:var(--soft); font-weight:600; color:var(--text)}
.bl-table td{border-top:1px solid var(--border)}
.bl-chart{padding:clamp(18px, 2vw, 26px); border:1px solid var(--border); border-radius:var(--r2); background:var(--surface)}
.bl-chart__t{margin-bottom:18px; font-weight:600; font-size:15px; line-height:1.4; color:var(--text)}
.bl-chart__rows{display:flex; flex-direction:column; gap:14px}
.bl-chart__row{display:grid; grid-template-columns:minmax(0, 190px) minmax(0, 1fr); align-items:center; gap:6px 16px}
.bl-chart__l{font-size:14px; line-height:1.35; color:var(--text-2)}
.bl-chart__track{display:flex; align-items:center; gap:12px}
.bl-chart__bar{display:block; height:22px; border-radius:1px; background:var(--lav)}
.bl-chart__bar.is-hi{background:var(--orange)}
.bl-chart__v{font-weight:700; font-size:15px; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap}
.bl-chart__src{margin-top:16px; font-size:13px; color:var(--text-3)}
@media (max-width:640px){ .bl-chart__row{grid-template-columns:minmax(0, 1fr)} }

/* ---------- :::read-also */
.bl-readalso{display:flex; align-items:stretch; margin-block:1.6em; border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; background:var(--soft); color:var(--text); transition:border-color var(--t-fast), box-shadow var(--t-base) var(--ease-out)}
.bl-readalso:hover{border-color:var(--accent); box-shadow:var(--sh-2)}
.bl-readalso__img{flex:0 0 clamp(104px, 24%, 180px)}
.bl-readalso__img > img{width:100%; height:100%; object-fit:cover}
.bl-readalso__img > .bl-pic{height:100%; aspect-ratio:auto}
.bl-readalso__b{display:flex; flex-direction:column; justify-content:center; gap:4px; padding:14px 20px}
.bl-readalso__k{font:600 10.5px/1.2 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.bl-readalso__t{font-weight:600; font-size:16px; line-height:1.35; color:var(--text)}

/* ---------- :::cta and :::service */
.bl-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-block:1.8em; padding:clamp(20px, 2.2vw, 28px); border-radius:var(--r2); font-size:16px; line-height:1.6}
.bl-cta__text{flex:1 1 320px}
.bl-cta__actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px}
.bl-cta--trial{background:var(--d0); color:var(--on-d-2)}
.bl-cta--trial strong{color:var(--white)}
.bl-cta--talk,.bl-cta--service{border:1px solid rgba(72,67,208,.16); background:var(--lav-tint); color:var(--text-2)}
.bl-cta--talk strong,.bl-cta--service strong{color:var(--text)}

/* ---------- Side column: related service and share */
.bl-svc{display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--border); border-radius:var(--r2); background:var(--soft)}
.bl-svc__k{display:inline-flex; align-items:center; gap:8px; font:600 11px/1.3 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.bl-svc__k::before{content:""; width:7px; height:7px; border-radius:1px; background:var(--orange)}
.bl-svc__t{font-weight:600; font-size:17px; line-height:1.3; color:var(--text)}
.bl-svc__d{font-size:14px; line-height:1.5; color:var(--text-2)}
.bl-share .label{margin-bottom:10px}
.bl-share__row{display:flex; gap:8px}
.bl-share__b{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border); border-radius:var(--r1); background:var(--surface); color:var(--text-2); cursor:pointer; transition:color var(--t-fast), border-color var(--t-fast)}
.bl-share__b:hover{border-color:var(--accent); color:var(--text)}
.bl-share__b svg{width:16px; height:16px}
.bl-share__ok{margin-top:8px; font-size:13px; color:var(--green-ink)}

/* ---------- Index: the featured post */
/* The page title is just "Blog": the eyebrow style, a size up, with the featured post right under it */
.bl-ihead__t{display:flex; align-items:center; gap:14px; margin-top:var(--s3); font:600 clamp(20px, 2vw, 26px)/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--lav)}
.bl-ihead__px{flex:0 0 auto; width:12px; height:12px; border-radius:2px; background:var(--orange)}
.bl-feature{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); margin-top:clamp(24px, 3vw, 40px); border:1px solid var(--d-line); border-radius:var(--r3); overflow:hidden; background:var(--d1)}
.bl-feature__cover{display:block}
.bl-feature__cover > img{display:block; width:100%; height:100%; aspect-ratio:2 / 1; object-fit:cover}
.bl-feature__cover > .bl-pic{height:100%}
.bl-feature__b{display:flex; flex-direction:column; justify-content:center; gap:16px; padding:clamp(24px, 2.8vw, 40px)}
.bl-feature__k{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font:600 12px/1.3 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--lav)}
.bl-feature__t{font:700 clamp(22px, 2vw, 28px)/1.25 var(--font); letter-spacing:-.01em}
.bl-feature__t a{color:var(--white); text-decoration:none}
.bl-feature__t a:hover{text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px}
.bl-feature__m{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--on-d-2)}
@media (max-width:900px){ .bl-feature{grid-template-columns:minmax(0, 1fr)} }

/* ---------- Index and the related posts: heading row, topic chips, cards */
.bl-list__head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 32px; margin-bottom:clamp(28px, 3vw, 40px)}
.bl-list__head .eyebrow + .t-h2{margin-top:var(--s2)}
.bl-chips{display:flex; flex-wrap:wrap; gap:8px}
.bl-chip{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:4px 14px; border:1px solid var(--border); border-radius:var(--r1); background:var(--chip); color:var(--text-2); font:400 13px/1.3 var(--font); cursor:pointer}
.bl-chip span{color:var(--text-3); font-variant-numeric:tabular-nums}
.bl-chip[aria-pressed="true"]{border-color:var(--indigo); background:var(--lav-tint); color:var(--indigo); font-weight:600}
.bl-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:24px; list-style:none; margin:0; padding:0}
.bl-card[hidden]{display:none}
.bl-card__a{display:flex; flex-direction:column; height:100%; border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; background:var(--surface); color:var(--text); text-decoration:none; box-shadow:0 1px 2px rgba(18,19,26,.04); transition:transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast)}
.bl-card__a:hover{transform:translateY(-2px); border-color:var(--border-2); box-shadow:var(--sh-2)}
.bl-card__cover{display:block}
.bl-card__cover > img{width:100%; aspect-ratio:2 / 1; object-fit:cover}
.bl-card__b{flex:1 1 auto; display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px}
.bl-card__k{display:flex; gap:8px; font:600 10.5px/1.2 var(--font); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3)}
.bl-card__f{color:var(--indigo)}
.s-dark .bl-card__f{color:var(--accent)}
.bl-card__t{font:600 17px/1.35 var(--font)}
.bl-card__m{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:8px; font-size:13px; color:var(--text-2)}
.bl-card__who{display:inline-flex; align-items:center; gap:8px; min-width:0}
.bl-card__m time{flex:0 0 auto; color:var(--text-3)}
.bl-empty{margin-top:24px; color:var(--text-2)}
.bl-band-actions{display:flex; flex-wrap:wrap; gap:12px}

/* ---------- Preview only: marks a draft */
.bl-draft{position:fixed; left:16px; bottom:16px; z-index:300; padding:8px 14px; border-radius:var(--r1); background:#F3D98A; color:var(--ink); font:600 13px/1.4 var(--font); box-shadow:var(--sh-2)}

@media (prefers-reduced-motion:reduce){
  .bl-card__a,.bl-readalso{transition:none}
  .bl-card__a:hover{transform:none}
}
@media print{
  .bl-side,.bl-more,.cta-band,.bl-contents{display:none}
}