/* ─────────────────────────────────────────────────────────────
   blog.css — r483. The Resources side of liaisone.com: the blog
   index (hero + big category links + card grid) and the article
   page (icon tile, title, meta rail, prose).

   TWIN NOTE: the mock vocabulary is NOT duplicated here. If a post
   needs a product mock, it borrows product-lia.css by linking it.
   ───────────────────────────────────────────────────────────── */

/* ── index: hero with big category links that filter, then the strip ── */
body{background:#141413}                 /* the blog runs a shade dimmer than the product pages */
.bhero{padding:70px 0 52px;min-height:min(calc(100svh - 66px - 44px - 150px),520px);display:flex;align-items:center}
.bhero__in{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(30px,5vw,80px);align-items:center}
.bhero__l h1{display:block;font:800 19px var(--font-display);margin:0 0 18px;text-align:left;letter-spacing:0}   /* r486: the page needs one h1 and this is it */
.bhero__l p{margin:0 0 24px;font-size:15.5px;color:var(--text3);line-height:1.62;max-width:340px}
.bcats{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.bcat{display:inline-flex;align-items:baseline;gap:16px;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-display);font-size:clamp(34px,5vw,66px);font-weight:600;line-height:1.2;letter-spacing:-.02em;
  color:var(--text);transition:color .18s,opacity .18s,transform .18s}
.bcat i{font-style:normal;font-size:.5em;color:var(--text3);transition:.18s}
.bcat:hover{color:var(--accent)}   /* r812 (Egor): brand blue on hover, in both themes - white was white on white */
.bcat:hover i{transform:translateX(6px);color:var(--text)}
.bcats.is-picked .bcat{opacity:.34}
.bcats.is-picked .bcat.is-on{opacity:1;color:var(--accent)}
.bcats.is-picked .bcat.is-on i{transform:rotate(90deg)}
/* the strip of latest articles: hovering one dims the rest */
.bstrip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.bstrip::-webkit-scrollbar{display:none}
.bstrip__t{display:flex;min-width:min-content}
.bstrip__i{flex:0 0 clamp(240px,21vw,300px);padding:26px 28px 28px;border-left:1px solid var(--line);transition:opacity .2s}
.bstrip__i:first-child{border-left:0}
.bstrip__i b{display:block;font:600 15px var(--font-display);line-height:1.3;color:var(--text);margin-bottom:8px}
.bstrip__i span{font-size:12px;color:var(--text4)}
.bstrip__t:hover .bstrip__i{opacity:.38}
.bstrip__t:hover .bstrip__i:hover{opacity:1}
/* the grid */
.blist{padding:52px 0 84px}
.bcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bcard{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--ink2);border:1px solid var(--line2);
  transition:opacity .24s ease,transform .24s ease,border-color .16s}
.bcard:hover{border-color:#4a4a47;transform:translateY(-2px)}
.bcard.is-out{opacity:0;transform:scale(.97);pointer-events:none}
.bcard[hidden]{display:none!important}   /* display:flex overrides [hidden] - always guard */
.bcard__art{height:180px;display:flex;align-items:center;justify-content:center;background:var(--tint,#c8622f)}
.bcard__art svg{width:86px;height:86px}
.bcard__b{padding:17px 19px 19px;display:flex;flex-direction:column;gap:8px;flex:1}
.bcard__d{font-size:12px;color:var(--text4)}
.bcard__t{font:800 16.5px var(--font-display);line-height:1.3;color:var(--text)}
.bcard__c{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text3)}
.bcard__c i{font-size:13px}

/* ── article ──────────────────────────────────────────────── */
/* the article hero follows the same viewport law as the product pages:
   ONE element owns the height, and the rail starts where the title does */
.bart{padding:84px 0 26px;min-height:min(calc(100svh - 240px),560px);display:flex;align-items:flex-end}
.bart__in{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,72px);align-items:end;max-width:1120px;width:100%}
.bart__ico{width:180px;height:180px;border-radius:38px;display:flex;align-items:center;justify-content:center;background:var(--tint,#c8622f);margin-bottom:34px}
.bart__ico svg{width:102px;height:102px}
.bart h1{font-size:clamp(34px,4.6vw,56px);line-height:1.08;letter-spacing:-.02em;margin:0;text-align:left}
.brail{display:flex;flex-direction:column;gap:22px;margin-bottom:10px;max-height:100%;justify-content:flex-end}
.brail__b{display:flex;flex-direction:column;gap:5px}
.brail__l{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text4)}
.brail__l i{font-size:14px}
.brail a,.brail span.v{font-size:15px;color:var(--text)}
.brail a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.brail a:hover{color:var(--text);text-decoration-color:var(--text3)}
.bbody{border-top:1px solid var(--line);padding:124px 0 88px}
.bbody__in{max-width:700px}
/* r499: prose rules are scoped to the DIRECT children of .bbody__in. They
   used to be `.bbody p` and so on, which reached inside the mocks: the MCP
   card in the article was rendered with 18px prose type, grey ink and
   underlined links, and it came out taller and paler than the same mock on
   the tools page. A mock is a screenshot, not prose. */
.bbody__in > p{margin:0 0 24px;font-size:18px;line-height:1.78;color:var(--text2);letter-spacing:.002em}
.bbody__in > h2{font-size:27px;font-weight:800;line-height:1.24;margin:46px 0 16px;text-align:left}
.bbody__in > h3{font-size:20px;font-weight:800;margin:32px 0 10px;text-align:left}
.bbody__in > ul,.bbody__in > ol{margin:0 0 24px;padding-left:22px;color:var(--text2);font-size:18px;line-height:1.78}
.bbody__in > ul > li,.bbody__in > ol > li{margin-bottom:8px}
.bbody__in > ul > li::marker,.bbody__in > ol > li::marker{color:var(--text4)}
.bbody__in > p code,.bbody__in > ul code,.bbody__in > ol code{font:500 13.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--ink2);border:1px solid var(--line2);border-radius:6px;padding:2px 6px;color:var(--text)}
.bbody__in > p strong,.bbody__in > ul strong,.bbody__in > ol strong,.bbody__in > h2 strong{color:var(--text);font-weight:600}
.bnote{border-left:2px solid #007EF7;padding:2px 0 2px 16px;margin:0 0 22px}
.bnote p{margin:0;font-size:16.5px;color:var(--text3)}
.bnext{border-top:1px solid var(--line);padding:34px 0 0;margin-top:10px}
.bnext b{display:block;font:600 11.5px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--text4);margin-bottom:16px}
.bnext__g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

@media (max-width:900px){
  .bhero__in{grid-template-columns:1fr;gap:30px}
  .bcards{grid-template-columns:1fr 1fr}
  .bart__in{grid-template-columns:1fr;gap:26px}
  /* r485: on a phone the rail stops being a column and becomes a two-column
     meta table under the title - a wrapping flex row leaves orphans and the
     last item drifts to the middle of a line */
  .brail{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;border-top:1px solid var(--line);padding-top:20px;margin-top:0;margin-bottom:0;max-height:none}
  .brail__b{gap:4px;min-width:0}
  .brail__l{font-size:11.5px}
  .brail a,.brail span.v{font-size:14px;overflow-wrap:anywhere}
  .bart{min-height:0;padding:26px 0 22px}
}
@media (max-width:600px){
  .bhero{padding:34px 0 26px;min-height:0;display:block}
  .bcards,.bnext__g{grid-template-columns:1fr}
  .bcard__art{height:160px}
  .bart{padding:34px 0 16px}
  .bart__ico{width:72px;height:72px;border-radius:18px;margin-bottom:22px}
  .bart__ico svg{width:42px;height:42px}
  .bbody{padding:30px 0 56px}
}

/* ── product mocks inside an article ───────────────────────── */
.bmock{margin:6px 0 30px}
.bmock .lx-rule{padding:16px 18px!important;border:1px solid #e8e6df!important;border-radius:16px}
/* r491: bmock--wide once spanned into the right grid cell - that cell was
   empty. The reading rail owns it now, so a wide mock sat under the rail and
   past the article edge. The article column is the mock's whole world. */
.bmock--wide{width:100%}
.bmock .app{box-shadow:0 26px 60px -32px rgba(0,0,0,.6)}
.bmock .kpis{grid-template-columns:repeat(4,1fr)}
@media (max-width:600px){
  .bmock .kpis{grid-template-columns:repeat(2,1fr)}
  .bmock .lx-pk span:nth-child(3),.bmock .lx-pk span:nth-child(4){display:none}
  .bmock .lx-pill{display:none}
}

/* the prose shares the hero grid, so it starts on the same vertical as the
   icon and the title instead of drifting to the wrap edge */
.bbody .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(28px,4vw,72px);max-width:1120px}
@media (max-width:900px){
  .bbody .wrap{display:block}
  .bart{align-items:flex-start}
  .bart__ico{width:104px;height:104px;border-radius:24px;margin-bottom:24px}
  .bart__ico svg{width:60px;height:60px}
  .bbody{padding:44px 0 60px}
  .bmock--wide{width:100%}
  .bhero__in{grid-template-columns:1fr}
}

/* the MCP mock keeps its own proportions; the bleed above gives it the room */
.bmock .mres__k{flex-wrap:wrap;row-gap:8px}

@media (max-width:600px){
  /* the crumb keeps one line and ends in an ellipsis instead of wrapping into
     the hero; the article title is right underneath anyway */
  .crumb__in{white-space:nowrap;overflow:hidden}
  /* the reading measure: 18px over a 354px column runs seven words a line and
     the eye loses the return sweep - 16px with tighter leading reads better */
  .bbody__in > p,.bbody__in > ul,.bbody__in > ol{font-size:16px;line-height:1.68}
  .bbody__in > h2{font-size:23px;margin:34px 0 12px}
  .bbody__in > h3{font-size:18px}
  .bnote p{font-size:15px}
  .crumb__in b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .bart{padding:26px 0 20px}
  .bart__ico{width:88px;height:88px;border-radius:22px;margin-bottom:20px}
  .bart__ico svg{width:52px;height:52px}
  .bart h1{font-size:clamp(27px,7.6vw,34px);line-height:1.14}
  .brail{grid-template-columns:1fr 1fr;gap:16px 18px;padding-top:18px}
  .bbody{padding-top:30px}
  .bnext__g{gap:14px}
}

/* ── r490: the reading rail ───────────────────────────────────────────────
   .bbody .wrap is ALREADY a two column grid (prose + 300px) and the second
   cell was empty on every article. No card and no panel here on purpose: the
   column has to read as ONE rail with the meta block in the hero above it, so
   the type, the ink and the left edge are the brail's, not a widget's. */
.btoc{position:relative}
.btoc__in{position:sticky;top:127px;display:flex;flex-direction:column;gap:18px}
/* the ruler hangs in the GUTTER: the padding that makes room for it is pulled
   back by the negative margin, so the words line up with Category and Date */
.btoc__list{position:relative;display:flex;flex-direction:column;gap:1px;padding-left:16px;margin-left:-16px}
.btoc__rail{position:absolute;left:0;top:2px;bottom:2px;width:2px;border-radius:2px;background:var(--line2);overflow:hidden}
.btoc__prog{position:absolute;left:0;top:0;width:100%;height:0;background:#007EF7;border-radius:2px;transition:height .18s ease}
.btoc__i{display:block;font:400 15px/1.42 var(--font);color:var(--text3);padding:6px 0;text-decoration:none;transition:color .15s}
.btoc__i:hover{color:var(--text2)}
.btoc__i--sub{padding-left:14px;font-size:14px}
.btoc__i.is-on{color:var(--text)}
.btoc__reads{display:flex;flex-direction:column;gap:5px}
.btoc__reads[hidden]{display:none!important}
.btoc__l{font-size:12.5px;color:var(--text4)}
.btoc__reads .v{font-size:15px;color:var(--text)}
/* the phone has no second column at all (the grid collapses at 900), and a
   contents list above a three minute article is noise */
@media (max-width:900px){.btoc{display:none}}
/* r492 (Egor): in an ARTICLE the MCP mock ends at the setup steps at every
   width, not only on the phone. The "and then, in the assistant" half is a
   tall vertical block: it fitted the tools page, where the stage is wide, and
   never fitted a 700px reading column. The tools page keeps it on desktop. */
.bmock .mafter{display:none}

/* r492: a second attempt at Safari Reader. aria-hidden did not keep the mocks
   out (r491), because Reader scores DOM shape and text, not ARIA. These are
   the levers a Readability-style extractor actually reads: a container tag it
   treats as chrome, and class tokens on its own unlikely-candidate list.
   Unverified from here - Safari's heuristics are closed and there is no Safari
   in this sandbox. If it still folds them in, the certain cure is to ship the
   mocks as images, and that is a bigger job. */
.bmock,.bmock *{-webkit-user-select:none;user-select:none}
/* r493 (Egor): a link inside the prose was invisible - same colour, no rule.
   A grey underline marks it, and the underline goes white under the cursor;
   the word itself does not move or change colour, so the line stays calm. */
.bbody__in > p a,.bbody__in > ul > li a,.bbody__in > ol > li a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--text4);transition:text-decoration-color .15s,color .15s}
@media (hover:hover){
  .bbody__in > p a:hover,.bbody__in > ul > li a:hover,.bbody__in > ol > li a:hover{color:var(--text);text-decoration-color:var(--text)}
}

/* r811: light-theme twins of the hand-written dark chrome above */
html[data-theme="light"] body{background:#F2F2EF}   /* the blog runs a shade dimmer than the product pages, in light too */
html[data-theme="light"] .bcard:hover{border-color:#B9B8B2}
html[data-theme="light"] .bmock .app{box-shadow:0 26px 60px -32px rgba(17,20,23,.3);outline:1px solid var(--line)}