/* Blog post right-hand sidebar (Claude Design "Blog Post.dc.html", Borong
   Design System). Applied to every /blog/* post via layouts/post.njk.
   Only this sidebar module uses the design — the article body (left column)
   keeps its original prose styling and 16px body size untouched. Scoped
   under .bp2026 so tokens/fonts don't leak into the rest of the page. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");

.bp2026 {
  --bds-grey-20: #E6E6E6;
  --bds-grey-60: #666666;
  --bds-grey-70: #585858;
  --bds-grey-80: #333333;
  --bds-brand-10: #EDEBF5;
  --bds-brand-40: #6F5FAB;
  --bds-brand-50: #524583;
  --bds-success-70: #027A48;

  --bds-fg-primary: var(--bds-grey-80);
  --bds-fg-secondary: var(--bds-grey-60);
  --bds-fg-tertiary: var(--bds-grey-70);
  --bds-border-subtle: var(--bds-grey-20);
  --bds-font-sans: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-family: var(--bds-font-sans);
  color: var(--bds-fg-primary);
}
.bp2026 a { color: var(--bds-fg-primary); text-decoration: none; }
.bp2026 p { margin: 0; }
.bp2026 *, .bp2026 *::before, .bp2026 *::after { box-sizing: border-box; }

/* ---- 8/4 split around the existing article (left column untouched) ----
   No `align-items: start` here on purpose: the aside grid cell needs to
   stretch to the full row height (the article's height) so the sticky
   element inside it has room to travel and follow the scroll — with
   `start`, the cell would only be as tall as its own content and the
   sticky child would have nowhere to go. */
.bp-post-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 48px; }
.bp-post-grid__main { grid-column: span 8; min-width: 0; order: 1; }
.bp-post-grid__aside { grid-column: span 4; min-width: 0; order: 2; }

/* Scrolls with the reader until the bottom of the aside track. */
.bp-aside__inner { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 28px; }
.bp-side-block { border-top: 1px solid var(--bds-border-subtle); padding-top: 24px; }
.bp-side-block:first-child { border-top: none; padding-top: 0; }
.bp-side-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--bds-fg-secondary); text-transform: uppercase; margin-bottom: 14px; }

/* ---- Share ---- */
.bp-share-row { display: flex; gap: 10px; }
.bp-share-btn { position: relative; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--bds-border-subtle); background: #fff; display: inline-flex; align-items: center; justify-content: center; color: var(--bds-fg-tertiary); cursor: pointer; font: inherit; padding: 0; transition: border-color .15s ease, color .15s ease; }
.bp-share-btn:hover { border-color: var(--bds-brand-40); color: var(--bds-brand-50); }
.bp-share-btn i { font-size: 20px; }
.bp-share-btn[data-copied="true"] i { color: var(--bds-success-70); }

/* Social icons: Regular fades out, Filled fades in on hover; the button
   fills solid purple with no visible border, so the (now white) Filled
   icon reads clearly against it. */
.bp-share-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .15s ease; }
.bp-share-icon--fill { opacity: 0; }
.bp-share-btn--social:hover .bp-share-icon--regular { opacity: 0; }
.bp-share-btn--social:hover .bp-share-icon--fill { opacity: 1; }
.bp-share-btn--social:hover { background: var(--bds-brand-50); border-color: var(--bds-brand-50); color: #fff; }

/* ---- On this page (TOC) — governance policy pages ---- */
.bp-toc-nav { display: flex; flex-direction: column; gap: 2px; }
.bp-toc-link { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; line-height: 1.4; font-weight: 400; color: var(--bds-fg-tertiary); transition: color .15s ease; }
.bp-toc-link__bar { flex: none; width: 3px; height: 16px; border-radius: 999px; background: transparent; transition: background .15s ease; }
.bp-toc-link.is-active { font-weight: 600; color: var(--bds-brand-50); }
.bp-toc-link.is-active .bp-toc-link__bar { background: var(--bds-brand-50); }

/* ---- Governance quick nav (pills linking to the other policy pages) ---- */
.bp-quicknav-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-quicknav-pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--bds-border-subtle);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bds-fg-primary);
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
a.bp-quicknav-pill:hover {
  color: var(--bds-brand-50);
  border-color: var(--bds-brand-40);
  background: var(--bds-brand-05, rgba(0,0,0,0.03));
}
.bp-quicknav-pill.is-current {
  color: var(--bds-fg-secondary);
  background: var(--bds-bg-subtle, rgba(0,0,0,0.04));
  border-color: var(--bds-border-subtle);
  cursor: default;
  pointer-events: none;
  opacity: 0.6;
}

/* ---- Related posts ---- */
.bp-related-list { display: flex; flex-direction: column; gap: 18px; }
/* Thumb size is set from JS (--bp-thumb-size), measured off .bp-related-copy's
   actual rendered height (pill + 2-line title + date) — CSS alone can't
   express "match a sibling's content height while staying square" without
   circular sizing bugs (aspect-ratio + stretch, or grid auto-track percentage
   heights, both fought back). 56px is the pre-JS/no-JS fallback. */
.bp-related-card { display: flex; gap: 12px; align-items: flex-start; transition: transform .15s ease; }
.bp-related-card:hover { transform: translateX(2px); }
.bp-related-thumb { display: block; flex: none; width: var(--bp-thumb-size, 56px); height: var(--bp-thumb-size, 56px); border-radius: 4px; overflow: hidden; background: var(--bds-brand-10); }
.bp-related-thumb picture, .bp-related-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-related-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bp-related-cat { display: inline-block; width: fit-content; background: var(--bds-brand-10); color: var(--bds-brand-50); padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.bp-related-title { font-weight: 600; font-size: 14px; line-height: 1.35; color: var(--bds-fg-primary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bp-related-date { font-size: 12px; color: var(--bds-fg-secondary); }

/* ---- Responsive: sidebar module moves below the article on narrow viewports ---- */
@media (max-width: 960px) {
  .bp-post-grid { grid-template-columns: 1fr; gap: 40px; }
  .bp-post-grid__main { grid-column: auto; order: 1; }
  .bp-post-grid__aside { grid-column: auto; order: 2; }
  .bp-aside__inner { position: static; }
}