/* Blog — inherits theme tokens from style.css */

/* Neutralize the global `h1, h2 { max-width: 80vw; margin: auto }` rule from
   style.css, which squeezes blog titles at mid-range viewport widths. Blog
   headings should fill their (already constrained) container instead. */
.blog-index-header h1,
.blog-card-title,
.blog-article-title,
.blog-article-body h2,
.blog-article-body h3,
.blog-related h2 {
  max-width: none;
}

.blog-main {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
  color: var(--text-primary);
  flex: 1;
  /* Override the global `main { text-align: center; justify-content: center }`
     from style.css. Without these, blog text gets centered and short articles
     get vertically centered, leaving a big gap below them on tall desktop
     viewports. Children that legitimately want centering (e.g. .blog-empty
     placeholder) set it explicitly. */
  text-align: left;
  justify-content: flex-start;
}

.blog-index-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-3xl);
  text-align: center;
}

.blog-index-header h1 {
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.1;
}

.blog-index-intro {
  margin: 0;
  max-width: 40rem;
  font-size: var(--font-size-lg);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.blog-index-intro a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-empty {
  text-align: center;
  padding: var(--spacing-3xl) 0;
  color: rgba(255, 255, 255, 0.7);
}

.blog-index-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-2xl);
}

@media (min-width: 48rem) {
  .blog-index-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .blog-index-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-card {
  background: var(--glass-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  box-shadow: var(--shadow-md);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  background: var(--glass-bg-hover);
}

.blog-card-link {
  display: block;
  color: var(--text-primary);
  text-decoration: none;
}

.blog-card-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}

.blog-card-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding: var(--spacing-2xl);
}

.blog-card-title {
  font-size: var(--font-size-xl);
  line-height: 1.3;
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.blog-card-excerpt {
  font-size: var(--font-size-base);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--spacing-lg);
}

.blog-card-meta {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.6);
  display: flex;
  gap: 0.25rem;
}

/* Article (single post) */

.blog-article {
  max-width: 48rem;
  margin: 0 auto;
  /* Light theme tokens (default) */
  --panel-bg: #f8f4ec;
  --panel-text: #1a1a1a;
  --panel-text-strong: #0d0d0d;
  --panel-heading: var(--primary-bg);
  --panel-link: var(--primary-bg);
  --panel-link-hover: var(--secondary-bg);
  --panel-link-underline: rgba(61, 48, 98, 0.4);
  --panel-code-bg: rgba(61, 48, 98, 0.08);
  --panel-code-text: var(--primary-bg);
  --panel-pre-bg: #1f1933;
  --panel-pre-text: #f5f1ff;
  --panel-blockquote: #2a2a2a;
  --panel-blockquote-border: var(--secondary-bg);
  --panel-table-border: rgba(0, 0, 0, 0.15);
  --panel-table-header-bg: rgba(61, 48, 98, 0.08);
  --panel-table-header-text: var(--primary-bg);
  --panel-figcaption: #555;
  --panel-accent-border: var(--secondary-bg);
  --panel-figure-stub-border: rgba(0, 0, 0, 0.18);
}

.blog-article[data-blog-theme="dark"] {
  --panel-bg: #1d1929;
  --panel-text: #e9e6f0;
  --panel-text-strong: #ffffff;
  --panel-heading: #d8c7ff;
  --panel-link: #c2a7ff;
  --panel-link-hover: #ffffff;
  --panel-link-underline: rgba(194, 167, 255, 0.45);
  --panel-code-bg: rgba(255, 255, 255, 0.08);
  --panel-code-text: #e9e6f0;
  --panel-pre-bg: #0e0a1a;
  --panel-pre-text: #f5f1ff;
  --panel-blockquote: #d6d2e0;
  --panel-blockquote-border: #c2a7ff;
  --panel-table-border: rgba(255, 255, 255, 0.18);
  --panel-table-header-bg: rgba(255, 255, 255, 0.08);
  --panel-table-header-text: #d8c7ff;
  --panel-figcaption: #aaa;
  --panel-accent-border: #c2a7ff;
  --panel-figure-stub-border: rgba(255, 255, 255, 0.22);
}

/* Article header on the gradient — now just the breadcrumb */
.blog-article-header {
  padding: 0 var(--spacing-md);
  margin: 0 0 var(--spacing-lg);
}

.blog-breadcrumbs {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.blog-breadcrumbs a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-breadcrumbs a:hover {
  color: var(--text-primary);
}

/* Panel header — title + meta inside the cream/dark panel, sits below
   the hero. Fills the panel width with body-matching horizontal padding. */
.blog-article-panel-header {
  padding: var(--spacing-3xl) clamp(1.25rem, 4vw, 3rem) 0;
}

.blog-article-title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--spacing-md);
  max-width: 100%;
  color: var(--panel-text-strong);
}

.blog-article-meta {
  font-size: var(--font-size-sm);
  color: var(--panel-figcaption);
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── Table of contents ─────────────────────────────────────────────
   Two forms: a sticky sidebar (wide viewports, on the gradient) and
   an inline collapsible block tucked inside the panel between hero
   and body (narrow viewports, on the panel surface).
   Both share most styling, then diverge by surface context. */
.blog-toc {
  margin: 0;
}

.blog-toc summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.blog-toc summary::-webkit-details-marker { display: none; }

.blog-toc summary::before {
  content: "▸";
  display: inline-block;
  transition: transform var(--transition-fast);
  font-size: 0.85em;
  opacity: 0.7;
}

.blog-toc details[open] summary::before {
  transform: rotate(90deg);
}

.blog-toc ul,
.blog-toc ol {
  list-style: none;
  list-style-type: none;
  padding: 0;
  margin: var(--spacing-md) 0 0;
}

.blog-toc li {
  padding: 0;
  margin: 0.3rem 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* Only h3 entries indent — h2 entries always sit flush left */
.blog-toc-l2 { padding-left: 0; }
.blog-toc-l3 { padding-left: 1.25rem; font-size: 0.85rem; }

.blog-toc a {
  text-decoration: none;
  display: inline-block;
}

.blog-toc a:hover { text-decoration: underline; }

/* Sidebar form (wide viewports) — sits on the gradient, white text */
.blog-toc--sidebar {
  display: none;
}

.blog-toc--sidebar summary { color: var(--text-primary); }
.blog-toc--sidebar a { color: rgba(255, 255, 255, 0.78); }
.blog-toc--sidebar a:hover { color: var(--text-primary); }
.blog-toc--sidebar a[aria-current="true"] {
  color: var(--text-primary);
  font-weight: 600;
}

/* Inline form (narrow viewports) — sits inside the cream/dark panel */
.blog-toc--inline {
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.blog-toc--inline details {
  border: 1px solid var(--panel-table-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-md) var(--spacing-lg);
  background: transparent;
}

.blog-toc--inline summary { color: var(--panel-heading); }
.blog-toc--inline a { color: var(--panel-link); }
.blog-toc--inline a:hover { color: var(--panel-link-hover); }
.blog-toc--inline a[aria-current="true"] {
  color: var(--panel-link-hover);
  font-weight: 600;
}

/* ── Blog tool-finder widget (interactive decision tree at end of article) ── */
.btf-mount {
  margin: var(--spacing-3xl) 0 var(--spacing-2xl);
  border: 1px solid var(--panel-table-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl) clamp(1rem, 3vw, 1.75rem);
  background: rgba(61, 48, 98, 0.03);
  /* Stop the browser from auto-anchoring scroll position to content below
     this widget when it grows/shrinks between steps. The JS scrolls the
     widget top into view on transitions instead. */
  overflow-anchor: none;
  scroll-margin-top: 1rem;
}

.blog-article[data-blog-theme="dark"] .btf-mount {
  background: rgba(255, 255, 255, 0.04);
}

.btf-header { margin-bottom: var(--spacing-lg); }

.btf-heading {
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 var(--spacing-xs);
  color: var(--panel-heading);
  max-width: none;
}

.btf-intro {
  margin: 0;
  color: var(--panel-figcaption);
  font-size: var(--font-size-sm);
}

.btf-question {
  font-weight: 600;
  margin: var(--spacing-md) 0 var(--spacing-md);
  color: var(--panel-text-strong);
}

.btf-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.btf-option {
  width: 100%;
  text-align: left;
  padding: 0.7rem 1rem;
  background: var(--panel-bg);
  color: var(--panel-text);
  border: 1px solid var(--panel-table-border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
}

.btf-option:hover {
  border-color: var(--panel-accent-border);
  background: rgba(61, 48, 98, 0.06);
}

.blog-article[data-blog-theme="dark"] .btf-option:hover {
  background: rgba(255, 255, 255, 0.06);
}

.btf-option:active { transform: translateY(1px); }

.btf-option--selected {
  border-color: var(--panel-accent-border);
  background: rgba(61, 48, 98, 0.08);
}

.blog-article[data-blog-theme="dark"] .btf-option--selected {
  background: rgba(255, 255, 255, 0.08);
}

.btf-option:focus-visible {
  outline: 2px solid var(--panel-accent-border);
  outline-offset: 2px;
}

.btf-show-more {
  display: inline-block;
  margin-top: var(--spacing-md);
  background: transparent;
  border: none;
  color: var(--panel-link);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-decoration-color: var(--panel-link-underline);
  text-underline-offset: 0.2em;
}

.btf-show-more:hover { color: var(--panel-link-hover); text-decoration-color: currentColor; }
.btf-show-more:focus-visible { outline: 2px solid var(--panel-accent-border); outline-offset: 2px; border-radius: 2px; }

.btf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
}

.btf-back,
.btf-reset {
  background: transparent;
  border: none;
  color: var(--panel-link);
  font-family: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  padding: 0.25rem 0;
}

.btf-back:hover,
.btf-reset:hover { color: var(--panel-link-hover); }

.btf-back:focus-visible,
.btf-reset:focus-visible {
  outline: 2px solid var(--panel-accent-border);
  outline-offset: 2px;
  border-radius: 2px;
}

.btf-crumb {
  font-size: var(--font-size-sm);
  color: var(--panel-figcaption);
  margin: 0 0 var(--spacing-md);
  letter-spacing: 0.01em;
}

.btf-result-heading {
  font-size: 1.05rem;
  margin: 0 0 var(--spacing-md);
  color: var(--panel-heading);
}

.btf-results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.btf-card {
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--panel-table-border);
  border-radius: var(--radius-md);
  background: var(--panel-bg);
  margin: 0;
}

.btf-card--footnote {
  background: transparent;
  border-style: dashed;
}

.btf-card-footnote-label {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--panel-figcaption);
  margin-bottom: 0.35rem;
}

.btf-card-name {
  display: block;
  color: var(--panel-text-strong);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.btf-card-blurb {
  margin: 0 0 var(--spacing-md);
  color: var(--panel-text);
  font-size: 0.92rem;
  line-height: 1.55;
}

.btf-card-links {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  align-items: center;
}

.btf-card-try {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--primary-bg);
  color: #ffffff !important;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  /* Force the trailing arrow glyph to render in text style instead of an
     emoji style (Safari/iOS otherwise picks emoji presentation for ↗). */
  font-variant-emoji: text;
}

.btf-card-try:hover {
  background: var(--secondary-bg);
  text-decoration: none !important;
  transform: translateY(-1px);
}

.btf-card-try:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.btf-card-anchor {
  color: var(--panel-link);
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: var(--panel-link-underline);
  text-underline-offset: 0.2em;
}

.btf-card-anchor:hover {
  color: var(--panel-link-hover);
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .btf-option,
  .btf-card-try {
    transition: none;
  }
  .btf-option:active,
  .btf-card-try:hover {
    transform: none;
  }
}

/* Reading panel — colored surface that holds hero + title + meta + body */
.blog-article-panel {
  position: relative;
  background: var(--panel-bg);
  color: var(--panel-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.4),
              0 4px 12px rgba(0, 0, 0, 0.18);
  border-top: 4px solid var(--panel-accent-border);
  transition: background var(--transition-base), color var(--transition-base);
}

.blog-article-hero {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

.blog-article-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.blog-article-body {
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--panel-text);
  padding: var(--spacing-3xl) clamp(1.25rem, 4vw, 3rem);
}

/* When the panel-header or inline-TOC sits directly above the body,
   reduce the body's top padding so they don't double up. */
.blog-article-panel-header + .blog-article-body,
.blog-toc--inline + .blog-article-body {
  padding-top: var(--spacing-xl);
}

.blog-article-body h2 {
  font-size: 1.75rem;
  margin: var(--spacing-3xl) 0 var(--spacing-lg);
  max-width: 100%;
  line-height: 1.3;
  color: var(--panel-heading);
  letter-spacing: -0.005em;
  scroll-margin-top: 6rem;
}

.blog-article-body h3 {
  font-size: 1.35rem;
  margin: var(--spacing-2xl) 0 var(--spacing-md);
  line-height: 1.3;
  color: var(--panel-heading);
  scroll-margin-top: 6rem;
}

.blog-article-body p {
  margin: 0 0 var(--spacing-lg);
}

.blog-article-body a {
  color: var(--panel-link);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--panel-link-underline);
}

.blog-article-body a:hover {
  color: var(--panel-link-hover);
  text-decoration-color: currentColor;
}

.blog-article-body ul,
.blog-article-body ol {
  margin: 0 0 var(--spacing-lg);
  padding-left: 1.5rem;
}

.blog-article-body li {
  margin-bottom: var(--spacing-sm);
}

.blog-article-body strong {
  color: var(--panel-text-strong);
}

.blog-article-body blockquote {
  border-left: 4px solid var(--panel-blockquote-border);
  padding: 0.25rem 0 0.25rem var(--spacing-lg);
  margin: var(--spacing-2xl) 0;
  font-style: italic;
  color: var(--panel-blockquote);
}

.blog-article-body code {
  background: var(--panel-code-bg);
  color: var(--panel-code-text);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.92em;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.blog-article-body pre {
  background: var(--panel-pre-bg);
  color: var(--panel-pre-text);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--spacing-2xl) 0;
}

.blog-article-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.blog-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-2xl) 0;
  font-size: var(--font-size-base);
}

.blog-article-body th,
.blog-article-body td {
  border: 1px solid var(--panel-table-border);
  padding: var(--spacing-md);
  text-align: left;
}

.blog-article-body th {
  background: var(--panel-table-header-bg);
  color: var(--panel-table-header-text);
  font-weight: 600;
}

.blog-article-body hr {
  border: 0;
  border-top: 1px solid var(--panel-table-border);
  margin: var(--spacing-3xl) 0;
}

/* In-article figures (heading thumbnails + inline body images) */
.blog-figure {
  margin: var(--spacing-2xl) 0;
  position: relative;
}

.blog-figure--heading {
  margin: var(--spacing-md) 0 var(--spacing-2xl);
}

.blog-figure img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
}

.blog-figure figcaption {
  font-size: var(--font-size-sm);
  color: var(--panel-figcaption);
  margin-top: var(--spacing-sm);
}

.blog-figure-toggle {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.3rem 0.7rem;
  border: none;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.65);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity var(--transition-fast), background var(--transition-fast);
}

.blog-figure:hover .blog-figure-toggle,
.blog-figure:focus-within .blog-figure-toggle,
.blog-figure[data-collapsed="true"] .blog-figure-toggle {
  opacity: 1;
}

.blog-figure-toggle:hover {
  background: rgba(0, 0, 0, 0.85);
}

.blog-figure-toggle-icon::before {
  content: "▾";
  font-size: 0.9em;
}

.blog-figure[data-collapsed="false"] .blog-figure-toggle-icon::before { content: "▾"; }
.blog-figure[data-collapsed="true"] .blog-figure-toggle-icon::before { content: "▸"; }

.blog-figure[data-collapsed="true"] {
  padding: var(--spacing-md);
  border: 1px dashed var(--panel-figure-stub-border);
  border-radius: var(--radius-md);
}

.blog-figure[data-collapsed="true"] img {
  display: none;
}

.blog-figure[data-collapsed="true"] figcaption {
  font-style: italic;
  opacity: 0.85;
  margin-top: 0;
  text-align: left;
  padding-right: 5rem;
}

.blog-figure[data-collapsed="true"] .blog-figure-toggle {
  position: static;
  margin-top: 0;
  background: rgba(0, 0, 0, 0.55);
}

/* Related posts at bottom */

.blog-related {
  margin-top: var(--spacing-3xl);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--spacing-3xl);
}

.blog-related h2 {
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xl);
  max-width: 100%;
}

.blog-related-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--spacing-lg);
}

.blog-related-list li a {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--spacing-lg);
  align-items: center;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.blog-related-list li a:hover {
  background: var(--glass-bg);
}

.blog-related-list img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.blog-related-list h3 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
}

.blog-related-list p {
  font-size: var(--font-size-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 30rem) {
  .blog-related-list li a {
    grid-template-columns: 1fr;
  }
  .blog-article-title {
    font-size: 1.75rem;
  }
  .blog-article-body h2 {
    font-size: 1.5rem;
  }
  .blog-figure[data-collapsed="true"] figcaption {
    padding-right: 0;
    margin-bottom: var(--spacing-sm);
  }
  .blog-figure[data-collapsed="true"] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
}

/* Wide viewports: sticky-sidebar TOC alongside the article panel.
   The inline form (inside the panel) hides at this breakpoint. */
@media (min-width: 80rem) {
  .blog-article {
    display: grid;
    grid-template-columns: 14rem minmax(0, 48rem);
    column-gap: 3rem;
    max-width: 66rem;
    justify-content: center;
    align-items: start;
  }
  .blog-article-header,
  .blog-article-panel,
  .blog-related {
    grid-column: 2;
  }
  .blog-toc--sidebar {
    display: block;
    grid-column: 1;
    grid-row: 2 / span 3;
    margin: 0;
    padding: 0;
    max-width: none;
    align-self: start;
    position: sticky;
    top: 6rem;
  }
  .blog-toc--sidebar details {
    background: transparent;
    padding: 0;
    border: none;
  }
  .blog-toc--sidebar summary {
    margin-bottom: var(--spacing-md);
  }
  .blog-toc--inline {
    display: none;
  }
}

/* ── Theme switch (Uiverse, prefixed with bts-) ────────────────────
   Position: absolute, top-right of the article panel. The .blog-article-panel
   ancestor is position:relative (above), so the switch anchors to its corner. */
.blog-theme-switch-wrap {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  z-index: 5;
}

.blog-theme-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}

.blog-theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.bts-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #2196f3;
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.bts-slider.bts-round { border-radius: 34px; }
.bts-slider.bts-round .bts-sun-moon { border-radius: 50%; }

.bts-sun-moon {
  position: absolute;
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: yellow;
  transition: 0.4s;
}

.blog-theme-switch input:checked + .bts-slider {
  background-color: black;
}

.blog-theme-switch input:focus-visible + .bts-slider {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--secondary-bg);
}

.blog-theme-switch input:checked + .bts-slider .bts-sun-moon {
  transform: translateX(26px);
  background-color: white;
  animation: bts-rotate-center 0.6s ease-in-out;
}

.bts-moon-dot {
  opacity: 0;
  transition: 0.4s;
  fill: gray;
}

.blog-theme-switch input:checked + .bts-slider .bts-sun-moon .bts-moon-dot {
  opacity: 1;
}

#bts-moon-dot-1 { left: 10px; top: 3px; position: absolute; width: 6px; height: 6px; z-index: 4; }
#bts-moon-dot-2 { left: 2px; top: 10px; position: absolute; width: 10px; height: 10px; z-index: 4; }
#bts-moon-dot-3 { left: 16px; top: 18px; position: absolute; width: 3px; height: 3px; z-index: 4; }

#bts-light-ray-1 { left: -8px; top: -8px; position: absolute; width: 43px; height: 43px; z-index: -1; fill: white; opacity: 0.1; }
#bts-light-ray-2 { left: -50%; top: -50%; position: absolute; width: 55px; height: 55px; z-index: -1; fill: white; opacity: 0.1; }
#bts-light-ray-3 { left: -18px; top: -18px; position: absolute; width: 60px; height: 60px; z-index: -1; fill: white; opacity: 0.1; }

.bts-cloud-light {
  position: absolute;
  fill: #eee;
  animation: bts-cloud-move 6s infinite;
}
.bts-cloud-dark {
  position: absolute;
  fill: #ccc;
  animation: bts-cloud-move 6s infinite 1s;
}
#bts-cloud-1 { left: 30px; top: 15px; width: 40px; }
#bts-cloud-2 { left: 44px; top: 10px; width: 20px; }
#bts-cloud-3 { left: 18px; top: 24px; width: 30px; }
#bts-cloud-4 { left: 36px; top: 18px; width: 40px; }
#bts-cloud-5 { left: 48px; top: 14px; width: 20px; }
#bts-cloud-6 { left: 22px; top: 26px; width: 30px; }

@keyframes bts-cloud-move {
  0%   { transform: translateX(0px); }
  40%  { transform: translateX(4px); }
  80%  { transform: translateX(-4px); }
  100% { transform: translateX(0px); }
}

.bts-stars {
  transform: translateY(-32px);
  opacity: 0;
  transition: 0.4s;
}

.bts-star {
  fill: white;
  position: absolute;
  transition: 0.4s;
  animation: bts-star-twinkle 2s infinite;
}

.blog-theme-switch input:checked + .bts-slider .bts-stars {
  transform: translateY(0);
  opacity: 1;
}

#bts-star-1 { width: 20px; top: 2px; left: 3px; animation-delay: 0.3s; }
#bts-star-2 { width: 6px; top: 16px; left: 3px; }
#bts-star-3 { width: 12px; top: 20px; left: 10px; animation-delay: 0.6s; }
#bts-star-4 { width: 18px; top: 0px; left: 18px; animation-delay: 1.3s; }

@keyframes bts-star-twinkle {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  80%  { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes bts-rotate-center {
  0%   { transform: translateX(0) rotate(0deg); }
  100% { transform: translateX(26px) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bts-slider,
  .bts-sun-moon,
  .bts-cloud-light,
  .bts-cloud-dark,
  .bts-star,
  .bts-stars {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- Share article card ---- */

.blog-share {
  margin-top: var(--spacing-3xl);
  padding: var(--spacing-2xl) clamp(1.25rem, 4vw, 3rem) var(--spacing-3xl);
  border-top: 1px solid var(--panel-table-border);
}

.blog-share-title {
  font-size: var(--font-size-base);
  color: var(--panel-text);
  margin: 0 0 var(--spacing-md);
  font-weight: 600;
}

.blog-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.blog-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--panel-table-border);
  background: transparent;
  color: var(--panel-link);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast);
}

.blog-share-btn:hover,
.blog-share-btn:focus-visible {
  background: var(--panel-link);
  color: var(--panel-bg);
  border-color: var(--panel-link);
  transform: translateY(-1px);
  outline: none;
}

.blog-share-btn--x:hover,
.blog-share-btn--x:focus-visible        { background: #000;     border-color: #000;     color: #fff; }
.blog-share-btn--facebook:hover,
.blog-share-btn--facebook:focus-visible { background: #1877f2;  border-color: #1877f2;  color: #fff; }
.blog-share-btn--whatsapp:hover,
.blog-share-btn--whatsapp:focus-visible { background: #25d366;  border-color: #25d366;  color: #fff; }
.blog-share-btn--linkedin:hover,
.blog-share-btn--linkedin:focus-visible { background: #0a66c2;  border-color: #0a66c2;  color: #fff; }
.blog-share-btn--email:hover,
.blog-share-btn--email:focus-visible    { background: var(--panel-heading); border-color: var(--panel-heading); color: var(--panel-bg); }

.blog-share-btn--copy {
  width: auto;
  padding: 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.blog-share-btn--copy.is-copied {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
  transform: none;
}

.blog-share-btn--copy.is-error {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  transform: none;
}

@media (max-width: 30rem) {
  .blog-share-btn { width: 2.25rem; height: 2.25rem; font-size: 0.95rem; }
  .blog-share-btn--copy { width: auto; height: 2.25rem; padding: 0 var(--spacing-md); }
}