/* ══════════════════════════════════════════════════════════════════════════
   InventDB blog: the article index, the article page, ratings and comments.
   Loaded after v45.css and built only from its tokens, so light and dark
   themes and the brand accent carry over unchanged. Boxless, like the rest of
   v45: hairline rules instead of cards; the only filled panels are code.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── reading progress (article pages) ───────────────────────────────────── */
.read-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 120;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  pointer-events: none;
}

/* ── index ──────────────────────────────────────────────────────────────── */
/* .blog-hero, .post-top and .post-body sit on .shell elements: .shell owns the side gutter,
   so these set only top and bottom padding (a shorthand would zero the gutter). */
.blog-hero { padding-top: clamp(44px, 6vw, 96px); padding-bottom: clamp(18px, 3vw, 34px); }
.blog-hero h1 { font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem); margin: 0 0 .3em; }
.blog-hero p { font-size: var(--fs-lead); max-width: 640px; margin: 0; }
.blog-hero .feed-link { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--fg-3); }
.blog-hero .feed-link:hover { color: var(--accent); }

.tagbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tagbar button {
  font: 500 13px/1 var(--font-ui); color: var(--fg-2); background: transparent;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 8px 14px;
  transition: color .15s var(--ease), border-color .15s var(--ease), background-color .15s var(--ease);
}
.tagbar button:hover { color: var(--fg); border-color: var(--accent-line); }
.tagbar button[aria-pressed="true"] { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.post-lead {
  display: grid; gap: 10px 56px; grid-template-columns: minmax(0, 1fr);
  padding: 30px 0 34px; border-top: 1px solid var(--line-strong);
  text-decoration: none !important;
}
@media (min-width: 900px) { .post-lead { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; } }
.post-lead h2 {
  font-size: clamp(1.8rem, 1.3rem + 2.2vw, 3rem); margin: 0; color: var(--fg);
  transition: color .18s var(--ease); text-wrap: balance;
}
.post-lead:hover h2 { color: var(--accent); }
.post-lead p { font-size: 16px; margin: 0; color: var(--fg-2); }

.post-list { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) { .post-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; } }
.post-row {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 0 26px; border-top: 1px solid var(--line);
  text-decoration: none !important;
}
.post-row h3 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.22; margin: 0; color: var(--fg); transition: color .18s var(--ease); }
.post-row:hover h3 { color: var(--accent); }
.post-row p { font-size: 15px; margin: 0; color: var(--fg-2); }
.post-row[hidden], .post-lead[hidden] { display: none; }

.post-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px;
  font-size: 13px; color: var(--fg-3);
}
.post-meta .stars-mini { display: inline-flex; align-items: center; gap: 4px; color: var(--fg-2); }
.post-meta .stars-mini svg { width: 13px; height: 13px; fill: #e0a82e; }
.post-meta [data-empty] { display: none; }

/* ── article layout ─────────────────────────────────────────────────────── */
.post-top { padding-top: clamp(34px, 5vw, 70px); }
.post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; margin-bottom: 26px; }
.post-top .post-kicker { display: block; }
.post-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post-top h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); line-height: 1.06; max-width: 920px; margin: 10px 0 18px; text-wrap: balance; }
.post-dek { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); line-height: 1.55; color: var(--fg-2); max-width: 760px; margin: 0 0 22px; }
.post-top .post-meta { padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13.5px; }
/* a research page's film, under its introduction (brahma.html carries the same rules inline) */
.post-film { margin: 26px 0 0; max-width: 1100px; }
.post-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--r-sm); background: #0a0910; }
.post-film figcaption { font-size: 13.5px; color: var(--fg-3); margin-top: 10px; line-height: 1.5; max-width: 760px; }
.post-meta a { color: var(--fg-2); }
.post-meta a:hover { color: var(--accent); }

.post-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: clamp(28px, 4vw, 48px); padding-bottom: 20px; }
@media (min-width: 1100px) { .post-body { grid-template-columns: minmax(0, 720px) 250px; justify-content: space-between; } }
/* a page that ends with its body (no comments below, e.g. sparkle.html) keeps room above the footer */
.post-body:last-child { padding-bottom: clamp(48px, 6vw, 90px); }

.toc { display: none; }
@media (min-width: 1100px) {
  .toc { display: block; align-self: start; position: sticky; top: calc(var(--nav-h) + 28px); max-height: calc(100vh - var(--nav-h) - 56px); overflow-y: auto; }
}
.toc b, .toc-inline summary { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 10px; }
.toc a, .toc-inline a {
  display: block; font-size: 13.5px; line-height: 1.4; color: var(--fg-3);
  padding: 6px 0 6px 12px; border-left: 2px solid var(--line); text-decoration: none !important;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.toc a:hover, .toc-inline a:hover { color: var(--fg); }
.toc a.on { color: var(--fg); border-left-color: var(--accent); }
/* the same contents, folded, above the article on screens without the side column */
.toc-inline { margin: 0 0 2em; padding: 14px 0 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc-inline summary { cursor: pointer; margin: 0 0 8px; list-style: none; }
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: " +"; }
.toc-inline[open] summary::after { content: " \2212"; }
@media (min-width: 1100px) { .toc-inline { display: none; } }

/* ── prose ──────────────────────────────────────────────────────────────── */
.prose { font-size: 17px; line-height: 1.75; color: var(--fg-2); min-width: 0; }
.prose > :first-child { margin-top: 0; }
.prose h2 {
  font-size: clamp(1.45rem, 1.25rem + .9vw, 1.9rem); line-height: 1.18;
  margin: 2.1em 0 .6em; scroll-margin-top: calc(var(--nav-h) + 20px);
}
.prose h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.8em 0 .5em; scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose p { margin: 0 0 1.15em; }
.prose strong { color: var(--fg); }
.prose a { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--accent); }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin: .4em 0; padding-left: .2em; }
.prose li::marker { color: var(--fg-3); }
.prose code {
  font-family: var(--font-mono); font-size: .86em; color: var(--fg); font-variant-ligatures: none;
  background: var(--inset); padding: .14em .4em; border-radius: 6px; overflow-wrap: anywhere;
}
.prose pre {
  margin: 1.4em 0 1.6em; padding: 18px 20px; overflow-x: auto;
  background: #120d22; color: #e8e2f6; border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.65; tab-size: 2;
}
html[data-theme="dark"] .prose pre { background: #0b0816; box-shadow: inset 0 0 0 1px var(--line); }
.prose pre code { background: none; padding: 0; border-radius: 0; color: inherit; font-size: inherit; overflow-wrap: normal; }
.prose pre .c { color: #8c84a8; }      /* comment */
.prose pre .k { color: #c4a5f5; }      /* keyword */
.prose pre .s { color: #9fe0b7; }      /* string */
.prose pre .n { color: #f5c98a; }      /* number or bind */
.prose .lead { font-size: 1.12em; color: var(--fg); }

.prose .note {
  margin: 1.6em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent);
  color: var(--fg-2); font-size: 16px;
}
.prose .note b { color: var(--fg); }

.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0 1.8em; font-size: 14.5px; line-height: 1.5; }
.prose .table-wrap { overflow-x: auto; margin: 1.4em 0 1.8em; }
.prose .table-wrap table { margin: 0; }
.prose th { text-align: left; font-weight: 600; color: var(--fg); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.prose td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose td code { font-size: .82em; }
.prose td:first-child code { white-space: nowrap; }
.prose table.rules td:first-child { white-space: nowrap; color: var(--fg); font-weight: 500; }
.prose table.rules td:nth-child(2) { min-width: 180px; }

.prose figure { margin: 2em 0 2.2em; }
.prose figure svg { display: block; width: 100%; height: auto; }
.prose figcaption { font-size: 13.5px; color: var(--fg-3); margin-top: 10px; line-height: 1.5; }

/* diagram palette: drawn with currentColor and tokens so both themes work */
.dg text { font-family: var(--font-ui); fill: var(--fg-2); }
.dg .t-strong { fill: var(--fg); font-weight: 600; }
.dg .t-mono { font-family: var(--font-mono); }
.dg .t-accent { fill: var(--accent); font-weight: 600; }
.dg .box { fill: var(--surface); stroke: var(--line-strong); }
.dg .box-accent { fill: var(--accent-tint); stroke: var(--accent-line); }
.dg .box-core { fill: var(--accent-tint); stroke: var(--accent-line); }
.dg .box-inner { fill: var(--surface); stroke: var(--line-strong); }
.dg .on-core { fill: var(--fg); }
.dg .on-core-2 { fill: var(--fg-2); }
.dg .label { fill: var(--accent); font-weight: 700; letter-spacing: 1.4px; }
.dg .ln { stroke: var(--fg-3); fill: none; }
.dg .ln-accent { stroke: var(--accent); fill: none; }
.dg .ah { fill: var(--fg-3); }
.dg .ah-accent { fill: var(--accent); }

/* ── article end: rating, share, comments ───────────────────────────────── */
.post-end { max-width: 720px; padding: 10px 0 clamp(48px, 6vw, 90px); }
.post-end h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin: 0 0 6px; }
.end-block { border-top: 1px solid var(--line-strong); padding: 30px 0 34px; }

.rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.stars { display: inline-flex; gap: 2px; }
.stars button {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 999px; padding: 0; color: var(--line-strong);
}
.stars button svg { width: 26px; height: 26px; fill: currentColor; transition: transform .12s var(--ease), color .12s var(--ease); }
.stars button.on { color: #e0a82e; }
.stars button:hover svg { transform: scale(1.12); }
.stars button:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.rate-sum { font-size: 14px; color: var(--fg-3); }
.rate-sum b { font-family: var(--font-display); font-size: 20px; color: var(--fg); margin-right: 4px; }
.rate-note { font-size: 13.5px; color: var(--fg-3); margin: 8px 0 0; min-height: 1.4em; }

.cm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px; margin-bottom: 18px; }
.cm-sort { display: inline-flex; gap: 4px; }
.cm-sort button {
  font: 500 13px/1 var(--font-ui); color: var(--fg-3); background: none; border: 0;
  padding: 7px 10px; border-radius: var(--r-pill);
}
.cm-sort button[aria-pressed="true"] { color: var(--fg); background: var(--accent-tint); }

.cm-signin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.cm-signin p { margin: 0; font-size: 15px; }
.cm-who { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; color: var(--fg-3); margin-bottom: 10px; }
.cm-who b { color: var(--fg); font-weight: 600; }
.cm-who button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); }
.cm-who button:hover { text-decoration: underline; }

.composer { margin: 0 0 8px; }
.composer textarea {
  width: 100%; min-height: 104px; resize: vertical; display: block;
  font: 15.5px/1.6 var(--font-ui); color: var(--fg);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 15px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-2); }
.composer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.composer-bar .count { font-size: 12.5px; color: var(--fg-3); }
.composer-bar .count.over { color: #b42318; }
.composer-bar .acts { display: flex; gap: 8px; }
.btn-sm { padding: 9px 18px; font-size: 14px; }
.btn[disabled] { opacity: .55; cursor: default; transform: none !important; }
.cm-msg { font-size: 14px; margin: 10px 0 0; min-height: 0; }
.cm-msg.error { color: #b42318; }
.cm-msg.ok { color: var(--green); }
html[data-theme="dark"] .cm-msg.error, html[data-theme="dark"] .composer-bar .count.over { color: #ff9b8f; }

.cm-rules { font-size: 12.5px; color: var(--fg-3); margin: 12px 0 0; line-height: 1.55; }

.cm-list { margin-top: 10px; }
.cm { padding: 18px 0 4px; border-top: 1px solid var(--line); }
.cm .cm { border-top: 0; padding-top: 12px; }
.cm-replies { margin-left: 18px; padding-left: 18px; border-left: 2px solid var(--line); }
@media (max-width: 560px) { .cm-replies { margin-left: 6px; padding-left: 12px; } }
.cm-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--fg-3); }
.cm-line b { font-size: 14.5px; color: var(--fg); font-weight: 600; }
.cm-line .you { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cm-body { font-size: 15.5px; line-height: 1.65; color: var(--fg-2); margin: 6px 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-gone { font-size: 14px; font-style: italic; color: var(--fg-3); margin: 4px 0; }
.cm-acts { display: flex; gap: 14px; margin: 2px 0 8px; }
.cm-acts button { background: none; border: 0; padding: 4px 0; font: 600 13px var(--font-ui); color: var(--fg-3); }
.cm-acts button:hover { color: var(--accent); }
.cm .composer { margin: 8px 0 12px; }
.cm-empty { font-size: 15px; color: var(--fg-3); padding: 18px 0; margin: 0; }
.cm-list > .cm:first-child { border-top: 0; }
.cm-loading { font-size: 14px; color: var(--fg-3); padding: 18px 0; }

.more-posts { border-top: 1px solid var(--line-strong); padding-top: 30px; }
.more-posts h2 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); margin: 0 0 4px; }

/* sign-in dialog: reuses the v45 .wl-* modal; only the extras live here */
.wl-modal .bl-step[hidden] { display: none; }
.wl-modal .bl-email { word-break: break-all; }
.wl-modal .bl-back { display: block; margin: 12px auto 0; background: none; border: 0; font: 13px var(--font-ui); color: var(--fg-3); cursor: pointer; }
.wl-modal .bl-back:hover { color: var(--fg); }