/* The blog and its posts, after the blog and post.html of zabsoft.com (src/styles/inner.css there), dark only. Each post has its
   picture (components/PostImage.astro, .pimg in site.css): across the top of its card, large in the blog's lead card and wide under
   its title on its own page. Only pages/blog/*.astro load this file. */

.pmeta { font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.pmeta b { color:var(--mint); font-weight:400; }

/* ===== The blog: heading, filter, lead card, grid ===== */
/* section.wrap gives every section 91 px; the blog's heading sits as close under the header as a post's, and its cards follow at 36 px. */
section.bhero { padding-top:40px; padding-bottom:0; }
.bhero h1 { margin-top:14px; }
.bhero .lede { font-size:19px; margin:22px 0 0; max-width:720px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:36px; }
.chips[hidden] { display:none; }
button.chip { margin:0; background:none; cursor:pointer; transition:background .3s, color .3s, border-color .3s, opacity .3s; }
button.chip:not(.on):not([disabled]):hover { border-color:rgba(255,255,255,.4); }
button.chip.on { background:var(--ink); border-color:var(--ink); color:var(--bg); }
button.chip[disabled] { opacity:.35; cursor:default; }
.chip .n::before { content:' · '; }
.chip .n { opacity:.6; }
section.blist { padding-top:36px; }
/* The grid under the lead card is every post, taller than any window, so while the lead card is in view the grid stands its full
   24 px drift higher (lib/parallax.js): 44 px under the card leaves the 20 px between cards on the screen. */
/* The lead card's picture keeps the 16:9 box of every picture (.pimg, site.css) at every width, never the card's height: a long
   title makes the words' column taller, and the picture would lose its sides to the crop (RU at 1101-1440 px lost about 40% of its
   width). Beside the words it is framed inside the card's padding, as the home page's row of posts frames its pictures, in the
   middle of its column; from 1100 px down it runs across the top of the card, as a card's of the grid does. */
.feat { position:relative; display:grid; grid-template-columns:1.35fr 1fr; align-items:center; margin-bottom:44px; overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.feat[hidden] { display:none; }
.feat:hover { transform:translateY(-4px); }
.feat .pimg { width:auto; margin:36px 0 36px 36px; border-radius:12px; border:1px solid var(--edge); }
.feat .fx { padding:36px; display:flex; flex-direction:column; justify-content:center; gap:14px; }
.feat h2 { font-size:clamp(28px, 3vw, 44px); line-height:1.05; margin:0; }
.feat .go { margin-top:8px; font-weight:600; }
/* Cards of one size in every row, as in the other grids, the grid moving as one. */
.bgrid { display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:1fr; gap:20px; }
.pc { position:relative; display:flex; flex-direction:column; overflow:hidden; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.pc[hidden] { display:none; }
.pc:hover { transform:translateY(-4px); }
.pc .pimg { border-bottom:1px solid var(--edge); }
.pc .cap { flex:1; display:flex; flex-direction:column; gap:8px; padding:24px 32px 32px; }
.pc h3 { font-size:21px; line-height:1.15; margin:4px 0 2px; }
.pc p { font-size:15px; }
.pc .when { margin-top:auto; padding-top:12px; font-size:13px; opacity:.6; }
/* The title's link covers the whole card. */
.pc .stretch::after { content:''; position:absolute; inset:0; }

/* ===== A post ===== */
.readbar { position:fixed; left:0; top:0; z-index:70; width:100%; height:3px; transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
  background:linear-gradient(90deg, var(--mint), var(--teal)); }
.phead { padding-top:40px; padding-bottom:36px; }
.phead h1 { max-width:940px; margin-top:18px; font-size:clamp(38px, 5vw, 70px); line-height:1.02; }
.crumbs a { transition:color .2s; }
.crumbs a:hover { color:var(--mint); }
.stand { font-size:21px; font-weight:300; max-width:760px; margin-top:22px; }
.byline { display:flex; align-items:center; gap:14px 24px; margin-top:30px; flex-wrap:wrap; }
.byline .who b { display:block; font-weight:600; }
.byline .who span { font-size:14px; opacity:.75; }
.share { display:flex; gap:8px; margin-left:auto; }
.share a, .share button { position:relative; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; padding:0; cursor:pointer; color:inherit;
  background:none; border:1px solid rgba(255,255,255,.18); transition:background .35s, border-color .35s, color .35s; }
.share button[hidden] { display:none; }
.share svg { width:18px; height:18px; }
.share a:hover, .share button:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); }
.share .ok { position:absolute; bottom:calc(100% + 8px); left:50%; translate:-50% 4px; padding:4px 9px; border-radius:8px; font-size:12px; white-space:nowrap;
  color:var(--bg); background:var(--ink); opacity:0; pointer-events:none; transition:opacity .3s, translate .3s; }
.share .ok:empty { display:none; }
.share .cp.done .ok { opacity:1; translate:-50% 0; }
.tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; }
.tags .mono { margin-right:4px; }
.tags .tag { padding:5px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.14); font-family:var(--mono); font-size:12px; }
.pcover .pimg { aspect-ratio:2/1; border-radius:20px; border:1px solid var(--edge); }
/* The body column, centred. The contents column beside it exists only once scripts/post.js has filled the contents (.with-toc on
   the grid, .ready on the lists): without the script the body stays in the middle and no empty "Contents" is shown. */
.pgrid { display:grid; grid-template-columns:minmax(0, 720px); gap:72px; justify-content:center; padding-top:64px; padding-bottom:40px; }
.pgrid.with-toc { grid-template-columns:220px minmax(0, 720px); }
.toc { display:none; position:sticky; top:40px; align-self:start; }
.pgrid.with-toc .toc.ready { display:block; }
.toc-list { list-style:none; margin:14px 0 0; padding:0; border-left:1px solid rgba(255,255,255,.14); }
.toc-list a { display:block; margin-left:-1px; padding:7px 0 7px 16px; border-left:2px solid transparent; font-size:14px; line-height:1.35; opacity:.55; transition:opacity .3s, border-color .3s; }
.toc-list a:hover { opacity:.9; }
.toc-list a.on { opacity:1; border-left-color:var(--mint); }
.tocm { display:none; }
/* The body column may shrink below its content's width, so a wide table scrolls in its box and the page never moves sideways. */
.pbody { font-size:18px; line-height:1.7; min-width:0; }
.pbody > * + *, .md > * + * { margin-top:22px; }
/* A long address in a step (the developer docs link of a service) breaks where it would stick out of a phone's screen. */
.md { overflow-wrap:anywhere; }
.pbody p, .pbody li { opacity:.88; }
.pbody h2 { font-size:clamp(28px, 2.8vw, 38px); line-height:1.1; margin:64px 0 0; scroll-margin-top:40px; }
.pbody h3 { font-size:23px; margin:40px 0 0; scroll-margin-top:40px; }
.md > h2:first-child { margin-top:0; }
.md a { color:var(--mint); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.md a:hover { color:var(--ink); }
.md ul, .md ol { padding-left:24px; margin-bottom:0; }
.md li + li { margin-top:8px; }
.md li::marker { color:var(--mint); }
.md strong { font-weight:600; }
.md code { font-family:var(--mono); font-size:.85em; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.07); }
.md blockquote { margin:22px 0 0; padding:20px 24px; border-radius:16px; border:1px solid var(--edge); background:var(--glass); }
.md blockquote p { opacity:1; }
.tldr { padding:24px 32px; border-left:3px solid var(--teal); }
.tldr p { margin-top:8px; font-size:19px; opacity:1; }
.tbl { overflow-x:auto; border-radius:16px; border:1px solid var(--edge); }
.tbl table { width:100%; min-width:560px; border-collapse:collapse; font-size:16px; line-height:1.5; }
.tbl th, .tbl td { text-align:left; vertical-align:top; padding:14px 18px; border-bottom:1px solid rgba(255,255,255,.1); }
.tbl th { font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.tbl tr:last-child td { border-bottom:0; }
.tbl td:first-child { color:var(--mint); }
.incta { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:32px; margin-top:44px; }
.incta b { display:block; font-family:var(--display); font-weight:400; font-size:24px; line-height:1.15; }
.incta p { max-width:440px; margin-top:8px; font-size:16px; }
.author { display:flex; align-items:center; gap:24px; padding:32px; margin-top:64px; }
.author .mark { flex:none; display:block; color:var(--ink); --apiunicon-accent:var(--teal); }
.author .mark svg { display:block; height:22px; width:auto; }
.author b { display:block; font-size:18px; }
.author p { margin-top:6px; font-size:15px; }
.related .bgrid { margin-top:36px; }
.related h2 { margin-bottom:0; }

@media (prefers-reduced-motion: reduce) {
  .feat, .pc { transition:none; }
  .feat:hover, .pc:hover { transform:none; }
}

@media (max-width:1100px) {
  .bgrid { grid-template-columns:repeat(2, 1fr); }
  .feat { grid-template-columns:1fr; align-items:stretch; }
  .feat .pimg { margin:0; border:0; border-radius:0; border-bottom:1px solid var(--edge); }
}

@media (max-width:1000px) {
  .pgrid, .pgrid.with-toc { grid-template-columns:minmax(0, 1fr); gap:0; padding-top:40px; }
  .pgrid.with-toc .toc.ready { display:none; }
  .tocm.ready { display:block; padding:4px 18px; border-radius:14px; border:1px solid var(--edge); }
  .tocm summary { list-style:none; cursor:pointer; padding:12px 0; }
  .tocm summary::-webkit-details-marker { display:none; }
  .tocm .toc-list { margin:0 0 12px; }
}

@media (max-width:640px) {
  .bgrid { grid-template-columns:1fr; }
  .feat .fx { padding:32px; }
  .stand { font-size:18px; }
  .share { margin-left:0; }
  .pcover .pimg { aspect-ratio:16/9; }
  .pbody { font-size:17px; }
  .author { flex-direction:column; align-items:flex-start; }
}