/* =============================================================
   BraceCoder — Blog (listing, category, tag, post)
   Loaded only on blog pages, after style.css.
   ============================================================= */

/* -------------------------------------------------------------
   Text colour tokens — tuned per theme for WCAG AA contrast
   (ratios measured against the card background of each theme)
   ------------------------------------------------------------- */
:root {
  --bc-heading:    #0f172a;  /* 17.9:1 on #fff */
  --bc-body:       #334155;  /* 10.4:1 */
  --bc-soft:       #475569;  /*  7.6:1 — excerpts, table cells */
  --bc-meta:       #64748b;  /*  4.8:1 — dates, counts, labels */
  --bc-link:       #4f46e5;  /*  6.3:1 */
  --bc-link-hover: #3730a3;
  --bc-accent:     #b45309;  /*  4.6:1 on its amber tint — "latest" kicker */
  --bc-code-bg:    #eef2ff;
  --bc-code-fg:    #4338ca;  /*  7.1:1 on code bg */
  --bc-code-bd:    #e0e7ff;
}
html.dark {
  --bc-heading:    #f8fafc;  /* 14.0:1 on #1e293b */
  --bc-body:       #d7dee8;  /* 10.8:1 */
  --bc-soft:       #b6c2d1;  /*  8.1:1 */
  --bc-meta:       #94a3b8;  /*  5.7:1 */
  --bc-link:       #a5b4fc;  /*  7.3:1 */
  --bc-link-hover: #c7d2fe;
  --bc-accent:     #fbbf24;  /*  8.8:1 */
  --bc-code-bg:    rgba(129,140,248,.14);
  --bc-code-fg:    #c7d2fe;
  --bc-code-bd:    rgba(129,140,248,.25);
}

/* Article body */
.post-body,
.post-body p,
.post-body li      { color: var(--bc-body); }
.post-body h1, .post-body h2, .post-body h3,
.post-body h4, .post-body strong, .post-body b { color: var(--bc-heading); }
.post-body h5      { color: var(--bc-meta); }
.post-body a       { color: var(--bc-link); text-decoration-color: color-mix(in srgb, var(--bc-link) 45%, transparent); }
.post-body a:hover { color: var(--bc-link-hover); text-decoration-color: currentColor; }
.post-body blockquote,
.post-body blockquote p { color: var(--bc-soft); }
.post-body table td { color: var(--bc-soft); }
.post-body table th { color: var(--bc-heading); }
.post-body figcaption { color: var(--bc-meta); }
.post-body :not(pre) > code {
  background: var(--bc-code-bg); color: var(--bc-code-fg);
  border: 1px solid var(--bc-code-bd);
}
html.dark .post-body pre { color: #e2e8f0; }

/* Content pasted from Word/other editors carries hard-coded near-black text
   (<font color="#0a0a0a">, style="color: rgb(30, 41, 59)"), which vanishes in
   dark mode. Let it follow the theme instead. Cells with their own light
   background (e.g. #e2efd9 tables) keep their black text on purpose. */
.post-body font[color] { color: inherit; }
html.dark .post-body [style*="color: rgb(30, 41, 59)"],
html.dark .post-body [style*="color:rgb(30,41,59)"],
html.dark .post-body [style*="color: #222"],
html.dark .post-body [style*="color:#222"] { color: inherit !important; }
/* Highlighted inline text (e.g. pink marks) keeps dark ink on its light
   highlight; white highlights are dropped on dark cards instead */
html.dark .post-body :is(span, font, strong, em)[style*="background-color"],
html.dark .post-body mark { color: #1e293b; }
html.dark .post-body :is(span, font, p, strong, em)[style*="background-color:white"],
html.dark .post-body :is(span, font, p, strong, em)[style*="background-color: white"],
html.dark .post-body :is(span, font, p, strong, em)[style*="background-color:#fff"],
html.dark .post-body :is(span, font, p, strong, em)[style*="background-color: #fff"],
html.dark .post-body :is(span, font, p, strong, em)[style*="background-color:rgb(255, 255, 255)"],
html.dark .post-body :is(span, font, p, strong, em)[style*="background-color: rgb(255, 255, 255)"] { background-color: transparent !important; color: inherit; }

/* Sidebar */
.blog-sidebar .widget-title     { color: var(--bc-meta); }
.blog-sidebar .widget-post-title { color: var(--bc-heading); }
.blog-sidebar .widget-post-title:hover { color: var(--bc-link); }
.blog-sidebar .widget-post-meta { color: var(--bc-meta); }
.blog-sidebar .widget-tag       { color: var(--bc-soft); }
.blog-sidebar .widget-tag:hover { color: var(--bc-link); border-color: var(--bc-link); }
.blog-sidebar a[href*="/category/"] > span:first-child { color: var(--bc-body); }
.blog-sidebar a[href*="/category/"] > span:last-child  { color: var(--bc-meta) !important; }

/* Comments, share, prev/next */
.comment-author, .comments-header h3, .post-nav-title { color: var(--bc-heading); }
.comment-text      { color: var(--bc-body); }
.comment-time, .post-nav-label, .post-share-label, .comment-login-prompt p { color: var(--bc-meta); }
.comment-login-prompt a { color: var(--bc-link); }

/* -------------------------------------------------------------
   Listing hero
   ------------------------------------------------------------- */
.bc-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 85% -10%, rgba(99,102,241,.28), transparent 60%),
    radial-gradient(600px 300px at 0% 110%, rgba(16,185,129,.16), transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #172036 100%);
  color: #e2e8f0;
  padding: 2.25rem 0 2rem;
}
.bc-hero::after {
  /* faint grid, a nod to terminal paper */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
}
.bc-hero .container { position: relative; z-index: 1; }

.bc-crumbs { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: #94a3b8; margin-bottom: 1.75rem; }
.bc-crumbs a { color: #cbd5e1; }
.bc-crumbs a:hover { color: #fff; }
.bc-crumbs i { font-size: .55rem; opacity: .6; }

.bc-hero-kicker {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 500;
  color: #6ee7b7; letter-spacing: .02em; margin-bottom: .75rem;
}
.bc-hero-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; color: #fff; max-width: 780px; margin-bottom: .75rem;
}
.bc-hero-sub { font-size: 1.08rem; color: #b6c2d1; max-width: 640px; line-height: 1.65; }

.bc-hero-search {
  display: flex; align-items: center; gap: .5rem;
  max-width: 560px; margin-top: 1.75rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: .35rem .35rem .35rem 1rem;
  transition: border-color .2s, background .2s;
}
.bc-hero-search:focus-within { border-color: var(--primary-light); background: rgba(255,255,255,.09); }
.bc-hero-search i { color: #94a3b8; }
.bc-hero-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: #fff; font: inherit; font-size: .95rem; padding: .55rem 0;
}
.bc-hero-search input::placeholder { color: #8b9ab0; }
.bc-hero-search button {
  background: var(--primary); color: #fff; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: .88rem;
  padding: .6rem 1.1rem; border-radius: 10px; transition: background .2s;
}
.bc-hero-search button:hover { background: var(--primary-dark); }

.bc-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.bc-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .42rem .9rem; border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: #cbd5e1;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  transition: all .2s;
}
.bc-chip span { font-size: .72rem; color: #94a3b8; font-weight: 600; }
.bc-chip:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.bc-chip.is-active { background: #fff; color: #0f172a; border-color: #fff; }
.bc-chip.is-active span { color: #4f46e5; }

/* -------------------------------------------------------------
   Listing body
   ------------------------------------------------------------- */
.bc-list { padding: 2.5rem 0 4rem; }
.bc-list-layout { margin-top: 2.5rem; }
.bc-list-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.bc-list-head h2 { font-size: 1.2rem; font-weight: 700; color: var(--bc-heading); }
.bc-list-head span { font-size: .82rem; color: var(--bc-meta); }
.bc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.bc-pager { margin-top: 2.5rem; }
.bc-ad { text-align: center; margin-bottom: 2rem; }
.bc-ad > span { display: block; font-size: .65rem; color: var(--bc-meta); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4rem; }

/* Sidebar spacing (was missing: widgets touched each other) */
.blog-sidebar { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }

/* -------------------------------------------------------------
   Post card
   ------------------------------------------------------------- */
.bc-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-hover); }

.bc-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0f172a; }
.bc-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.bc-card:hover .bc-card-media img { transform: scale(1.04); }
.bc-card-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 2.5rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #312e81, #0f172a);
}
.bc-card-placeholder span { color: var(--primary-light); }
.bc-card-cat {
  position: absolute; left: .85rem; top: .85rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(15,23,42,.72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
  padding: .3rem .65rem; border-radius: 999px;
}

.bc-card-body { flex: 1; display: flex; flex-direction: column; padding: 1.25rem 1.35rem 1.1rem; }
.bc-card-title { font-size: 1.08rem; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; margin-bottom: .55rem; }
.bc-card-title a { color: var(--bc-heading); }
/* whole card is clickable via the title link */
.bc-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.bc-card:hover .bc-card-title a { color: var(--bc-link); }
.bc-card-title a:focus-visible { outline: none; }
.bc-card:has(.bc-card-title a:focus-visible) { outline: 3px solid var(--primary-light); outline-offset: 2px; }
.bc-card-excerpt {
  font-size: .9rem; color: var(--bc-soft); line-height: 1.65; margin-bottom: 1.1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-card-foot {
  margin-top: auto; display: flex; align-items: center; gap: .65rem;
  padding-top: .9rem; border-top: 1px solid var(--border-light);
}
.bc-avatar {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .78rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), #10b981);
}
.bc-card-by { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.bc-card-by strong { font-size: .82rem; color: var(--bc-heading); font-weight: 600; }
.bc-card-by span { font-size: .75rem; color: var(--bc-meta); }
.bc-card-views { font-size: .75rem; color: var(--bc-meta); white-space: nowrap; }
.bc-card-views i { margin-right: .2rem; }

/* Featured (lead) card */
.bc-card--featured { display: grid; grid-template-columns: 1.15fr 1fr; }
/* covers carry text, so show the whole 16:9 image instead of cropping it */
.bc-card--featured .bc-card-media { aspect-ratio: auto; min-height: 320px; display: grid; place-items: center; }
.bc-card--featured .bc-card-media img { height: auto; aspect-ratio: 16 / 9; }
.bc-card--featured .bc-card-body { padding: 2rem 2.25rem; justify-content: center; }
.bc-card-kicker {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--bc-accent); background: rgba(245,158,11,.12);
  padding: .3rem .7rem; border-radius: 999px; margin-bottom: 1rem;
}
.bc-card--featured .bc-card-title { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.25; margin-bottom: .85rem; }
.bc-card--featured .bc-card-excerpt { font-size: 1rem; -webkit-line-clamp: 4; margin-bottom: 1.5rem; }
.bc-card--featured .bc-card-foot { border-top: 0; padding-top: 0; margin-top: 0; }
.bc-card--featured .bc-avatar { width: 38px; height: 38px; }

/* -------------------------------------------------------------
   Post page
   ------------------------------------------------------------- */
.bc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100; pointer-events: none; }
.bc-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), #10b981); transition: width .1s linear; }

.post-hero-inner { max-width: 860px; }
.bc-post-lede { font-size: 1.12rem; color: #b6c2d1; line-height: 1.65; margin: -.25rem 0 1.5rem; max-width: 720px; }
.bc-post-byline { display: flex; align-items: center; gap: .85rem; }
.bc-post-byline-text { display: flex; flex-direction: column; line-height: 1.4; }
.bc-post-byline-text strong { color: #fff; font-size: .95rem; }
.bc-post-byline-text span { color: #b6c2d1; font-size: .85rem; }
.bc-post-byline-text a { color: #c7d2fe; }
.bc-post-byline-text a:hover { color: #fff; }

/* Reading comfort */
.bc-article .post-body-wrap { padding: 2.25rem 2.75rem 1.5rem; }
.bc-article .post-body { font-size: 1.08rem; line-height: 1.85; }
.bc-article .post-body > * { max-width: 72ch; }
.bc-article .post-body > pre,
.bc-article .post-body > .code-block-wrap,
.bc-article .post-body > figure,
.bc-article .post-body > table,
.bc-article .post-body > img { max-width: none; }
.bc-article .post-body h2 { scroll-margin-top: calc(var(--header-height) + 1.5rem); font-size: 1.55rem; letter-spacing: -.01em; margin-top: 2.75rem; }
.bc-article .post-body h3,
.bc-article .post-body h4 { scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.bc-article .post-body img { border-radius: var(--radius-sm); }

/* Code blocks: copy button */
.code-block-wrap .bc-copy {
  position: absolute; top: .45rem; right: .6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .35rem;
  font: 600 .72rem/1 var(--font); color: #cbd5e1;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: .38rem .6rem; cursor: pointer;
  opacity: 0; transition: opacity .2s, background .2s;
}
.code-block-wrap:hover .bc-copy, .bc-copy:focus-visible { opacity: 1; }
.bc-copy:hover { background: rgba(255,255,255,.16); color: #fff; }
.code-block-wrap .code-lang { right: auto; left: .75rem; }
@media (hover: none) { .code-block-wrap .bc-copy { opacity: 1; } }

/* Table of contents */
.bc-sidebar-toc { align-self: stretch; }
.bc-toc { position: sticky; top: calc(var(--header-height) + 1.25rem); max-height: calc(100vh - var(--header-height) - 2.5rem); overflow: auto; }
.bc-toc-links { display: flex; flex-direction: column; border-left: 2px solid var(--border); }
.bc-toc-links a {
  display: block; padding: .38rem 0 .38rem .9rem; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .85rem; line-height: 1.45; color: var(--bc-soft);
  transition: color .15s, border-color .15s;
}
.bc-toc-links a.is-sub { padding-left: 1.7rem; font-size: .8rem; }
.bc-toc-links a:hover { color: var(--bc-heading); }
.bc-toc-links a.is-active { color: var(--bc-link); border-left-color: var(--bc-link); font-weight: 600; }

/* Related */
.bc-related { padding: 2rem 2.75rem; border-top: 1px solid var(--border); }
.bc-related h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1.25rem; color: var(--bc-heading); }
.bc-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.bc-related-card {
  display: flex; flex-direction: column; gap: .35rem;
  color: var(--bc-heading); border-radius: var(--radius); transition: transform .2s;
}
.bc-related-card:hover { transform: translateY(-3px); color: var(--bc-heading); }
.bc-related-img { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: linear-gradient(135deg, #312e81, #0f172a); margin-bottom: .35rem; border: 1px solid var(--border); }
.bc-related-img img { width: 100%; height: 100%; object-fit: cover; }
.bc-related-cat { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bc-link); }
.bc-related-title { font-size: .92rem; font-weight: 600; line-height: 1.4; }
.bc-related-card:hover .bc-related-title { color: var(--bc-link); }
.bc-related-meta { font-size: .75rem; color: var(--bc-meta); }

/* -------------------------------------------------------------
   Dark mode
   ------------------------------------------------------------- */
html.dark .bc-card:hover { border-color: #475569; }

/* -------------------------------------------------------------
   Responsive
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
  .bc-sidebar-toc { align-self: start; }
  .bc-sidebar-toc .bc-toc { display: none; }
}
@media (max-width: 860px) {
  .bc-card--featured { grid-template-columns: 1fr; }
  .bc-card--featured .bc-card-media { min-height: 0; aspect-ratio: 16 / 9; }
  .bc-card--featured .bc-card-body { padding: 1.5rem; }
}
@media (max-width: 640px) {
  .bc-hero { padding: 1.5rem 0 1.5rem; }
  .bc-crumbs { margin-bottom: 1.1rem; }
  .bc-hero-search button { padding: .6rem .85rem; }
  .bc-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: -1rem; padding-right: 1rem; scrollbar-width: none; }
  .bc-chips::-webkit-scrollbar { display: none; }
  .bc-chip { flex: none; }
  .bc-grid { grid-template-columns: 1fr; }
  .bc-article .post-body-wrap { padding: 1.5rem 1.15rem 1rem; }
  .bc-article .post-body { font-size: 1.02rem; }
  .bc-related { padding: 1.5rem 1.15rem; }
  .bc-related-grid { grid-template-columns: 1fr; }
  .bc-related-card { display: grid; grid-template-columns: 110px 1fr; column-gap: .9rem; grid-template-rows: auto auto 1fr; }
  .bc-related-img { grid-row: 1 / 4; margin: 0; }
}

/* The site-wide fx3d script draws its own scroll bar under the navbar;
   show ours only when that one is absent (e.g. reduced motion). */
html.fx .bc-progress { display: none; }

/* -------------------------------------------------------------
   At a glance (post hero)
   ------------------------------------------------------------- */
.bc-glance {
  display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.35rem 0 0;
}
.bc-glance > div {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .55rem .9rem; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
}
.bc-glance dt { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.bc-glance dt i { margin-right: .3rem; }
.bc-glance dd { margin: 0; font-size: .9rem; font-weight: 600; color: #f1f5f9; }
.bc-level::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
.bc-level--beginner::before     { background: #4ade80; }
.bc-level--intermediate::before { background: #fbbf24; }
.bc-level--advanced::before     { background: #f87171; }

/* -------------------------------------------------------------
   Quick fix card (top of article)
   ------------------------------------------------------------- */
:root {
  --bc-fix-bg:      #f8fafc;
  --bc-fix-border:  #e2e8f0;
  --bc-symptom:     #b91c1c;  /* 6.2:1 on #f8fafc */
  --bc-cause:       #b45309;  /* 4.8:1 */
  --bc-fixed:       #047857;  /* 5.2:1 */
}
html.dark {
  --bc-fix-bg:      #172033;
  --bc-fix-border:  #334155;
  --bc-symptom:     #fca5a5;  /* 8.6:1 on #172033 */
  --bc-cause:       #fcd34d;  /* 11.3:1 */
  --bc-fixed:       #6ee7b7;  /* 10.7:1 */
}
.bc-fix {
  margin: 1.5rem 1.5rem 0; padding: 1.25rem 1.4rem 1.1rem;
  background: var(--bc-fix-bg); border: 1px solid var(--bc-fix-border);
  border-left: 4px solid var(--success); border-radius: var(--radius);
}
.bc-fix-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.bc-fix-head h2 { font-size: 1.05rem; font-weight: 800; color: var(--bc-heading); margin: 0; }
.bc-fix-head h2 i { color: var(--accent); margin-right: .35rem; }
.bc-fix-codes { display: flex; flex-wrap: wrap; gap: .35rem; }
.bc-fix-codes a {
  font: 600 .75rem/1 var(--font-mono); padding: .35rem .55rem; border-radius: 6px;
  color: var(--bc-symptom); background: color-mix(in srgb, var(--bc-symptom) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-symptom) 30%, transparent);
}
.bc-fix-codes a:hover { background: color-mix(in srgb, var(--bc-symptom) 18%, transparent); }
.bc-fix-steps { display: flex; flex-direction: column; gap: .7rem; margin: 0; }
.bc-fix-step { display: grid; grid-template-columns: 84px 1fr; gap: .75rem; align-items: baseline; }
.bc-fix-step dt { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.bc-fix-step dd { margin: 0; font-size: .97rem; line-height: 1.65; color: var(--bc-body); }
.bc-fix-step--symptom dt { color: var(--bc-symptom); }
.bc-fix-step--cause dt   { color: var(--bc-cause); }
.bc-fix-step--fix dt     { color: var(--bc-fixed); }
.bc-fix-step--fix dd     { color: var(--bc-heading); font-weight: 500; }
.bc-fix-cmd { margin-top: .9rem; }
.bc-fix-cmd pre {
  background: #0f172a; color: #e2e8f0; border: 1px solid #334155;
  padding: 1rem 1.2rem; border-radius: var(--radius-sm); overflow-x: auto;
  font-family: var(--font-mono); font-size: .86rem; line-height: 1.7; margin: 0;
}
.bc-fix-cmd .code-block-wrap pre { padding-top: 2.25rem; }
.bc-fix-more { display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem; font-size: .85rem; font-weight: 600; color: var(--bc-link); }
.bc-fix-more:hover { color: var(--bc-link-hover); }
.post-body-wrap#article { scroll-margin-top: calc(var(--header-height) + 1rem); }

/* -------------------------------------------------------------
   Error code index (/errors)
   ------------------------------------------------------------- */
.bc-chip--errors { border-color: rgba(252,165,165,.35); color: #fecaca; }
.bc-chip--errors:hover { border-color: #fca5a5; color: #fff; }
.bc-err-count { font-size: .8rem; color: #94a3b8; white-space: nowrap; padding-right: .75rem; }
.bc-err-group { margin-bottom: 2.25rem; scroll-margin-top: calc(var(--header-height) + 1rem); }
.bc-err-group-title {
  display: flex; align-items: baseline; gap: .6rem;
  font: 800 1.1rem/1.2 var(--font-mono); color: var(--bc-heading);
  padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.bc-err-group-title span { font: 500 .8rem var(--font); color: var(--bc-meta); }
.bc-err-list { display: flex; flex-direction: column; gap: .75rem; }
.bc-err {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 1.25rem; align-items: center;
  padding: 1rem 1.25rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); scroll-margin-top: calc(var(--header-height) + 1rem);
  transition: border-color .2s, box-shadow .2s;
}
.bc-err:hover { border-color: var(--border-hover); box-shadow: var(--shadow); }
.bc-err.is-target { border-color: var(--bc-symptom); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-symptom) 20%, transparent); }
.bc-err-code {
  font: 700 1.02rem/1.2 var(--font-mono); color: var(--bc-symptom);
  padding: .5rem .65rem; border-radius: 8px; text-align: center;
  background: color-mix(in srgb, var(--bc-symptom) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--bc-symptom) 22%, transparent);
}
.bc-err-body { min-width: 0; }
.bc-err-body h3 { font-size: .98rem; font-weight: 700; line-height: 1.4; margin-bottom: .25rem; }
.bc-err-body h3 a { color: var(--bc-heading); }
.bc-err-body h3 a:hover { color: var(--bc-link); }
.bc-err-body p { font-size: .88rem; color: var(--bc-body); line-height: 1.6; margin-bottom: .35rem; }
.bc-err-body p strong { color: var(--bc-fixed); }
.bc-err-meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .76rem; color: var(--bc-meta); }
.bc-err-meta i { margin-right: .25rem; }
.bc-err-go { font-size: .84rem; font-weight: 600; color: var(--bc-link); white-space: nowrap; }
.bc-err-go:hover { color: var(--bc-link-hover); }

@media (max-width: 760px) {
  .bc-glance > div { flex: 1 1 40%; }
  .bc-fix { margin: 1rem 1rem 0; padding: 1rem; }
  .bc-fix-step { grid-template-columns: 1fr; gap: .15rem; }
  .bc-err { grid-template-columns: 1fr; gap: .6rem; }
  .bc-err-code { justify-self: start; }
  .bc-err-count { display: none; }
}

/* -------------------------------------------------------------
   Code blocks: header bar, labels, output toggle (code-blocks.js)
   The bar sits on the dark code background in both themes, so its
   colours are fixed rather than theme tokens.
   ------------------------------------------------------------- */
.bc-code {
  margin: 0 0 1.5rem; border-radius: var(--radius-sm); overflow: hidden;
  background: #1e293b; border: 1px solid #334155;
}
html.dark .bc-code { background: #020617; border-color: var(--border); }
.bc-code > pre,
.post-body .bc-code > pre,
.bc-fix-cmd .bc-code > pre {
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; padding-top: 1rem !important;
}
.bc-code-bar {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .4rem .5rem .4rem .7rem; background: #0f172a; border-bottom: 1px solid #334155;
}
html.dark .bc-code-bar { background: #0b1222; border-bottom-color: #1e293b; }
.bc-code-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.bc-code .code-lang {
  position: static; pointer-events: auto;
  font: 700 .66rem/1 var(--font-mono); letter-spacing: .06em;
  color: #94a3b8; background: none; padding: .28rem .2rem .28rem 0;
}
.bc-code-chip {
  display: inline-flex; align-items: center; gap: .32rem;
  font: 600 .7rem/1 var(--font-mono); padding: .3rem .5rem; border-radius: 5px;
  color: #cbd5e1; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  white-space: nowrap;
}
.bc-code-chip i { font-size: .65rem; opacity: .85; }
.bc-code-chip--host   { color: #c7d2fe; }                                            /* 12.0:1 on #0f172a */
.bc-code-chip--user   { color: #a7f3d0; }                                            /* 13.9:1 */
.bc-code-chip--root   { color: #fecaca; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35); }
.bc-code-chip--tool   { color: #fde68a; }                                            /* 14.3:1 */
.bc-code-chip--warn   { color: #fcd34d; background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); font-family: var(--font); }
.bc-code-chip--danger { color: #fecaca; background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.45); font-family: var(--font); }
.bc-code-actions { display: flex; gap: .3rem; margin-left: auto; }
.bc-code-btn,
.bc-code .bc-copy {
  position: static; opacity: 1;
  display: inline-flex; align-items: center; gap: .35rem;
  font: 600 .72rem/1 var(--font); color: #cbd5e1; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px; padding: .38rem .6rem; transition: background .15s, color .15s;
}
.bc-code-btn:hover { background: rgba(255,255,255,.14); color: #fff; }
.bc-code-btn:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 1px; }
.bc-code-btn[aria-pressed="true"] { color: #a5b4fc; border-color: rgba(165,180,252,.45); }

/* lines */
.bc-ln--out   { color: #a3b1c6; }                     /* output, dimmer than commands: 6.7:1 on #1e293b */
.bc-prompt    { color: #86efac; user-select: none; -webkit-user-select: none; }
.bc-code.is-output-hidden .bc-ln--out,
.bc-code.is-output-hidden .bc-ln--blank { display: none; }

/* -------------------------------------------------------------
   Glossary tooltips (article.js)
   ------------------------------------------------------------- */
.bc-term {
  cursor: help; border-bottom: 1.5px dotted color-mix(in srgb, var(--bc-link) 70%, transparent);
  transition: background .15s;
}
.bc-term:hover, .bc-term[aria-describedby] { background: color-mix(in srgb, var(--bc-link) 12%, transparent); border-bottom-style: solid; }
.bc-term:focus-visible { outline: 2px solid var(--bc-link); outline-offset: 2px; border-radius: 2px; }
.bc-tip {
  position: absolute; z-index: 1200; width: max-content; max-width: min(320px, calc(100vw - 16px));
  padding: .75rem .9rem .8rem; border-radius: 10px;
  background: #0f172a; color: #e2e8f0; border: 1px solid #334155;
  box-shadow: 0 12px 28px rgba(0,0,0,.28); font-size: .86rem; line-height: 1.55;
}
html.dark .bc-tip { background: #1e293b; border-color: #475569; }
.bc-tip[hidden] { display: none; }
.bc-tip strong { display: block; font: 700 .78rem/1.3 var(--font-mono); color: #a5b4fc; margin-bottom: .3rem; }
.bc-tip p { margin: 0; color: #e2e8f0; }
.bc-tip a { display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; font-size: .8rem; font-weight: 600; color: #a5b4fc; }
.bc-tip a:hover { color: #c7d2fe; }
.bc-tip::after {
  content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -6px; width: 10px; height: 10px;
  background: inherit; border-right: 1px solid; border-bottom: 1px solid; border-color: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.bc-tip.is-below::after { bottom: auto; top: -6px; transform: translateX(-50%) rotate(225deg); }

/* auto callouts keep the paragraph's own spacing tidy */
.bc-auto-callout .callout-body p { margin: .15rem 0 0; }

@media (max-width: 640px) {
  .bc-code-bar { padding: .4rem .5rem; }
  .bc-code-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}