/* Component-owned styles (shipped only when this component is used) */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Blog 
--------------------------------------------------------------*/
ol {
  list-style-type: none;
}

.post-entry {
  margin-bottom: 1.875rem; /* 30px */
}

.post-entry .post-meta {
  margin-top: 1.25rem; /* 20px */
  margin-bottom: 0.625rem; /* 10px */
} 

.post-entry .post-meta .post-title {
  font-size: var(--subtitle-font-size);
}

.post-entry .post-meta .post-date {
  color: var(--text-muted);
  font-size: var(--normal-font-size);
  margin-left: 2.5rem; /* 40px */
  width: fit-content;
  white-space: nowrap;
}

.post-entry p {
  text-align: justify;
  margin-left: 1.25rem; /* 20px */
}
}/* Card-facing post primitives (.post-header/.post-title/.meta-top) render here too,
     so this partial ships wherever those cards appear. */
@layer components {

/*
 * SPDX-FileCopyrightText: 2026 The freelance-persona_theme Project Contributors
 *
 * SPDX-License-Identifier: MIT
 */

/*--------------------------------------------------------------
# Blog Post Section
--------------------------------------------------------------*/
.blog-post {
  padding-bottom: 1.875rem; /* 30px */
  margin: 0; /* Spacing handled by .section padding-top */
}

.blog-post .article {
  padding: 1.875rem; /* 30px */
  box-shadow: 0 0.25rem 1rem color-mix(in srgb, var(--default-color), transparent 90%); /* 0 4px 16px */
}

.blog-post .post-img {
  /* margin: -1.875rem -1.875rem 1.25rem -1.875rem; // -30px -30px 20px -30px */
  margin: 0 0 1.25rem 0;
  overflow: hidden;
  border-radius: 0.25rem;
  aspect-ratio: 16/9;
  position: relative; /* For attribution overlay positioning */

  /* Attribution scales with the image; the wrapper is the query
     container (inline-size) so the rail/overlay can use cqi.
     1.3cqi ≈ the pre-proportional 0.65rem at desktop article width —
     the 2.34cqi card ratio overscaled on full-width post images. */
  container-type: inline-size;
  --attribution-font-size: max(1.3cqi, var(--attribution-min-size));

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Mute brightness in dark mode to avoid glare */
    @media (prefers-color-scheme: dark) {
      :root:not(:has(.theme-state-light:checked)) & {
        filter: brightness(0.85) contrast(1.1);
        transition: filter 0.3s ease;
      }
    }

    @media (prefers-color-scheme: light) {
      :root:has(.theme-state-dark:checked) & {
        filter: brightness(0.85) contrast(1.1);
        transition: filter 0.3s ease;
      }
    }
  }
}

/* Hover to restore full brightness for hero image */
@media (prefers-color-scheme: dark) {
  :root:not(:has(.theme-state-light:checked)) .blog-post .post-img img:hover {
    filter: brightness(1) contrast(1);
  }
}

@media (prefers-color-scheme: light) {
  :root:has(.theme-state-dark:checked) .blog-post .post-img img:hover {
    filter: brightness(1) contrast(1);
  }
}

.blog-post .title {
  color: var(--heading-color);
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  padding: 0;
  margin: 1.875rem 0; /* 30px 0 */
}

.blog-post .post-content {
  margin-top: 1.25rem; /* 20px */
  display: flow-root;
}

.blog-post .post-content p {
  text-align: justify;
}

.blog-post .post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0.25rem; /* 4px */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--default-color), transparent 85%);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem; /* 20px */
  margin-top: 0.625rem; /* 10px */
}

.blog-post .post-content svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem; /* 20px */
  margin-top: 0.625rem; /* 10px */
}

.blog-post .post-content.science-layout {
  text-align: justify;

  p {
    margin-bottom: 1.25rem;
    line-height: 1.6;
  }

  @media (min-width: 768px) {
    column-count: 2;
    column-gap: 2.5rem;
    column-rule: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);

    h3, blockquote, table, iframe, pre, .expressive-code {
      column-span: all;
    }

    svg, img {
      &[style*="margin: 1.5rem auto"], &[style*="margin:1.5rem auto"] {
        column-span: all;
        max-width: 60%;
        margin: 2.5rem auto;
      }
    }
  }
}

.blog-post .post-content h3 {
  font-size: 1.375rem; /* 22px */
  margin-top: 1.875rem; /* 30px */
  font-weight: bold;
}

.blog-post .post-content table {
  /* Tables can't shrink below min-content — block + scroll keeps wide
     tables INSIDE the article instead of overflowing the page (which
     made mobile browsers zoom out and shrink everything). */
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 1.25rem 0; /* 20px 0 */
  background-color: var(--surface-color);
  text-align: left;
}

.blog-post .post-content th {
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  color: var(--heading-color);
  padding: 0.75rem; /* 12px */
}

.blog-post .post-content td {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 0.75rem; /* 12px */
}

.blog-post .post-content tr:nth-child(even) td {
  background-color: color-mix(in srgb, var(--default-color), transparent 97%);
}

.blog-post .post-content tr:hover td {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

/* ====================================================
   === MOBILE TABLE TREATMENTS (phones only, ≤767px) ===
   Markdown tables can't shrink below min-content; the base
   block+scroll above keeps them inside the article but hides
   columns with zero affordance. The treatment is selected via
   visuals.tables.mobile_style (body[data-tables-mobile]):
   - cards (default): each row becomes a self-describing card —
     remarkTableDataLabels copies the column headers into
     data-label attributes
   - scroll: the grid stays, first column pinned, right-edge
     fade as the scroll affordance (the tag-rail peek idiom)
   - native: no extra rules (base block+scroll only)
   ==================================================== */
@media (max-width: 767px) {
  /* --- "cards": labeled row cards, no horizontal scroll --- */
  body[data-tables-mobile="cards"] .blog-post .post-content table {
    display: block;
    border-collapse: separate;
    background-color: transparent;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content thead {
    display: none; /* column names live on each cell as data-label */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody {
    display: block;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody tr {
    display: block;
    background-color: var(--surface-color);
    border: 1px solid var(--card-border);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody tr:last-child {
    margin-bottom: 0;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td {
    display: block;
    padding: 0.25rem 0;
    border-bottom: none;
    background-color: transparent;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody tr:last-child td:last-child {
    border-bottom: none;
  }

  /* Column label as an overline above each cell's content. */
  body[data-tables-mobile="cards"] .blog-post .post-content tbody td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.6875rem; /* 11px */
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--default-color), transparent 45%);
    margin-bottom: 0.125rem;
  }

  /* --- Per-column accents: visual anchors so grouped columns
     (e.g. two colony columns in a schedule table) are pattern-
     scannable. Each column gets a hue for its label and a soft
     left bar on its blocks; the first column stays the neutral
     card header. Override any column via the custom properties,
     e.g. --table-col-3-color: #d97706. --- */
  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(2) {
    --table-col-color: var(--table-col-2-color, #0284c7); /* sky-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(3) {
    --table-col-color: var(--table-col-3-color, #d97706); /* amber-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(4) {
    --table-col-color: var(--table-col-4-color, #16a34a); /* green-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(5) {
    --table-col-color: var(--table-col-5-color, #dc2626); /* red-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(6) {
    --table-col-color: var(--table-col-6-color, #7c3aed); /* violet-600 */
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(7) {
    --table-col-color: var(--table-col-7-color, #0284c7);
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(8) {
    --table-col-color: var(--table-col-8-color, #d97706);
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(n + 2) {
    border-left: 0.1875rem solid color-mix(in srgb, var(--table-col-color, var(--accent-color)), transparent 60%);
    padding-left: 0.5rem;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:nth-child(n + 2)::before {
    color: var(--table-col-color, color-mix(in srgb, var(--default-color), transparent 45%));
  }

  /* First column = the row identifier ("Day 0 — The Split"):
     emphasize it as the card header. */
  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:first-child {
    padding-bottom: 0.5rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    color: var(--heading-color);
    font-weight: 700;
  }

  body[data-tables-mobile="cards"] .blog-post .post-content tbody td:first-child strong {
    color: var(--accent-color);
  }

  /* --- "scroll": compact data-grid for structured content
     (statistics, price lists — content that reads like a sheet).
     Dense typography, pinned first column, thin column separators,
     right-edge fade as the swipe affordance (the tag-rail peek
     idiom). Note: a sticky TOP header row is impossible inside an
     overflow-x scroll container (the spec forces overflow-y to auto,
     so there is no page-scroll to stick against) — the header row
     scrolls away vertically by design. */
  body[data-tables-mobile="scroll"] .blog-post .post-content table {
    font-size: 0.8125rem; /* 13px — sheet-density body */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent);
  }

  body[data-tables-mobile="scroll"] .blog-post .post-content th {
    padding: 0.5rem 0.625rem; /* 8px 10px */
    background-color: var(--surface-color); /* solid: sticky head */
    border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 75%);
    font-weight: 700;
    white-space: nowrap;
  }

  body[data-tables-mobile="scroll"] .blog-post .post-content td {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  }

  /* Thin column separators give the grid its spreadsheet feel. */
  body[data-tables-mobile="scroll"] .blog-post .post-content th:not(:first-child),
  body[data-tables-mobile="scroll"] .blog-post .post-content td:not(:first-child) {
    border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
  }

  /* Pinned first column: row identifiers stay readable while the
     remaining columns scroll. box-shadow instead of border — with
     border-collapse the td borders live on the table and would not
     travel with a sticky cell. */
  body[data-tables-mobile="scroll"] .blog-post .post-content th:first-child,
  body[data-tables-mobile="scroll"] .blog-post .post-content td:first-child {
    position: sticky;
    left: 0;
    background-color: var(--surface-color);
    font-weight: 600;
    z-index: 1;
    box-shadow: inset -1px 0 0 color-mix(in srgb, var(--default-color), transparent 88%);
  }

  /* Zebra rows must stay behind the pinned column: use the opaque
     composite so the sticky cell doesn't turn see-through. */
  body[data-tables-mobile="scroll"] .blog-post .post-content tr:nth-child(even) td:first-child {
    background-color: color-mix(in srgb, var(--default-color) 3%, var(--surface-color));
  }

  body[data-tables-mobile="scroll"] .blog-post .post-content thead th:first-child {
    z-index: 2; /* corner cell above pinned tds */
  }
}

/* Quote — paragraph-friendly: the accent bar (blockquote:after)
   is the signature; text sits left and reads like prose. For the
   big centered "pop" look use the :::pullquote directive instead. */
.blog-post .post-content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 1rem 1.25rem;
  position: relative;
  text-align: left;
  margin: 1.25rem 0; /* 20px 0 */
}

.blog-post .post-content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 400;
  font-size: 1.0625rem; /* 17px */
  text-align: left;
}

/* Opt-in pop quote (:::pullquote) — one-liners meant to stand out. */
.blog-post .post-content blockquote.pullquote {
  text-align: center;
  padding: 1.875rem; /* 30px */
}

.blog-post .post-content blockquote.pullquote p {
  font-size: 1.375rem; /* 22px */
  font-weight: 500;
  text-align: center;
}

.blog-post .post-content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0.1875rem; /* 3px */
  background-color: var(--accent-color);
  margin-top: 1.25rem; /* 20px */
  margin-bottom: 1.25rem; /* 20px */
}

/* ====================================================
   === ADMONITIONS (markdown container directives) ===
   :::warning[Title] … ::: / :::tip / :::info / :::note /
   :::important / :::caution — semantic hues are fixed on
   purpose (universal callout semantics); transparency keeps
   them dark-mode safe. See docs/features/admonitions.md.
   ==================================================== */
.blog-post .post-content .admonition {
  --admonition-color: var(--accent-color);
  margin: 1.25rem 0; /* 20px 0 */
  padding: 1rem 1.25rem;
  border-left: 0.1875rem solid var(--admonition-color);
  background-color: color-mix(in srgb, var(--admonition-color), transparent 92%);
  border-radius: 0.375rem;
  overflow: hidden;
}

.blog-post .post-content .admonition p {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  text-align: left;
}

.blog-post .post-content .admonition p:last-child {
  margin-bottom: 0;
}

.blog-post .post-content .admonition-title {
  margin: 0 0 0.5rem !important;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--admonition-color);
}

/* The bracket line (:::info[Subtitle]) — follows the theme's subtitle
   idiom (mono, size/weight like .section-title em) but takes the
   admonition's semantic hue instead of the accent, matching the type
   title above it. */
.blog-post .post-content .admonition .admonition-subtitle {
  margin: 0 0 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--admonition-color);
}

.blog-post .post-content .admonition.admonition-warning {
  --admonition-color: #d97706; /* amber-600: readable on both themes */
}

.blog-post .post-content .admonition.admonition-caution {
  --admonition-color: #dc2626; /* red-600 */
}

.blog-post .post-content .admonition.admonition-tip {
  --admonition-color: #16a34a; /* green-600 */
}

.blog-post .post-content .admonition.admonition-info {
  --admonition-color: #0284c7; /* sky-600 */
}

.blog-post .post-content .admonition.admonition-note {
  --admonition-color: var(--default-color);
}

/* meta top styles */

.meta-top-divider {
  height: 1px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0.625rem 0; /* 10px 0 */
  padding: 0;
}

.blog-post .meta-top {
  margin-top: 0.625rem; /* 10px */
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0.625rem; /* 10px */
}

.blog-post .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-post .meta-top #info li+li {
  padding-left: 1.25rem; /* 20px */
}

.blog-post .meta-top #action li+li {
  padding-left: 0.625rem; /* 10px */
}

.blog-post .meta-top #info li [data-icon] {
  font-size: 1rem; /* 16px */
  margin-right: 0.5rem; /* 8px */
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-post .meta-top time,
.blog-post .meta-top span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 0.875rem; /* 14px */
  display: inline-block;
  line-height: 1;
}

.blog-post .meta-bottom {
  padding-top: 0.625rem; /* 10px */
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-post .meta-bottom [data-icon] {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-post .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-post .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-post .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 1.25rem 0 0; /* 0 20px 0 0 */
  font-size: 0.875rem; /* 14px */
}

.blog-post .meta-bottom .cats li {
  display: inline-block;
}

.blog-post .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 0.875rem; /* 14px */
}

.blog-post .meta-bottom .tags li {
  display: inline-block;
}

.blog-post .meta-bottom .tags li+li::before {
  padding-right: 0.375rem; /* 6px */
  color: var(--default-color);
  content: ",";
}

.blog-post .meta-bottom .share {
  font-size: 1rem; /* 16px */
}

.blog-post .meta-bottom .share [data-icon] {
  padding-left: 0.3125rem; /* 5px */
}


.blog-post .post-top-content img,
.blog-post .post-content img {
  border-radius: 0.25rem; /* 4px */

  /* Mute brightness in dark mode to avoid glare */
  @media (prefers-color-scheme: dark) {
    :root:not(:has(.theme-state-light:checked)) & {
      filter: brightness(0.85) contrast(1.1);
      transition: filter 0.3s ease;
    }
  }

  @media (prefers-color-scheme: light) {
    :root:has(.theme-state-dark:checked) & {
      filter: brightness(0.85) contrast(1.1);
      transition: filter 0.3s ease;
    }
  }
}

/* Hover to restore full brightness */
@media (prefers-color-scheme: dark) {
  :root:not(:has(.theme-state-light:checked)) .blog-post img:hover {
    filter: brightness(1) contrast(1);
  }
}

@media (prefers-color-scheme: light) {
  :root:has(.theme-state-dark:checked) .blog-post img:hover {
    filter: brightness(1) contrast(1);
  }
}

.blog-post .post-tags {
  margin-top: 0.5em;
  position: relative;
  transition: max-height 0.35s ease-out;
}

/* ============================================================
   Clamped post tags — native reveal/collapse (checkbox pattern,
   theme-consistent with the radio theme switcher; works without JS).
   1 row on mobile, 2 on desktop; the label renders server-side only
   when the tag count can overflow (BlogPostTemplate).
   ============================================================ */
.blog-post {
  --post-tags-clamp: 1.75rem;      /* mobile: 1 badge row */
  --post-tags-clamp-desktop: 3.5rem; /* desktop: 2 rows */
}

@media (min-width: 768px) {
  .blog-post {
    --post-tags-clamp: var(--post-tags-clamp-desktop);
  }
}

.blog-post .tags-toggle-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Collapsed: 1 row (mobile) / 2 rows (desktop) fully crisp, plus a
   small PEEK strip where the next row's badge tops fade out (real
   hidden tags, not a fake hint) — via mask, so there is no overlay
   gradient (a gradient read as a dirty shadow in the dark theme).
   The toggle label sits centered below. */
.blog-post .tags-toggle-cb:not(:checked) ~ .post-tags {
  max-height: calc(var(--post-tags-clamp) + var(--post-tags-peek, 0.625rem));
  overflow: hidden;
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - var(--post-tags-peek, 0.625rem)),
    transparent
  );
}

/* Expanded */
.blog-post .tags-toggle-cb:checked ~ .post-tags {
  max-height: 40rem;
}

/* Toggle label — subtitle idiom (mono + accent) */
.blog-post .tags-toggle {
  /* Full row + centered: sits under the tag block, aligned with it */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 0.5rem;
  margin-top: 0.375rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent-color);
  cursor: pointer;
  user-select: none;
}

.blog-post .tags-toggle .tags-chevron {
  display: inline-block;
  transition: transform 0.35s ease-out;
}

.blog-post .tags-toggle-cb:checked ~ .tags-toggle .tags-chevron {
  transform: rotate(180deg);
}

.blog-post .tags-toggle .when-open {
  display: none;
}

.blog-post .tags-toggle-cb:checked ~ .tags-toggle .when-closed {
  display: none;
}

.blog-post .tags-toggle-cb:checked ~ .tags-toggle .when-open {
  display: inline;
}

/* The label renders per tag count: 4–10 = mobile only (desktop fits
   two rows), ≥11 = always. ≤3: no label at all. */
.blog-post .tags-toggle--mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .blog-post .tags-toggle--mobile-only {
    display: inline-flex;
  }
}

/* Keyboard: focus ring on the label when the hidden checkbox focuses */
.blog-post .tags-toggle-cb:focus-visible ~ .tags-toggle {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-post .post-tags,
  .blog-post .tags-toggle .tags-chevron {
    transition: none;
  }
}



.blog-post .post-content {
  margin-top: 2em;
}

#blog-post {
  position: relative;
  z-index: 10;
}

/* Post header layout */
.post-header {
  margin-bottom: 2em;
  position: relative;
  z-index: 5;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5em;
}

.post-title {
  margin: 0;
  flex: 1;
}

.MathJax {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

.post-content .mjx-chtml {
  margin: 1em 0;
}

.post-content .mjx-chtml.MJXc-display {
  margin: 1.5em 0;
  padding: 0;
}

/* Ensure equation numbers are visible */
.post-content .mjx-chtml .mjx-right {
  margin-right: 0 !important;
  float: right !important;
  text-align: right !important;
}

/* LaTeX equation overflow handling with centered content */
.post-content .MathJax_Display,
.post-content .mjx-chtml.MJXc-display {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 1em 0;
  padding: 0.5em 0;
  width: 100% !important;
  /* Force width to ensure scrollbar works */
  max-width: 100%;
  display: flex !important;
  /* Use flexbox for centering */
  justify-content: center !important;
}

/* Center the math content while allowing it to be wider than container */
.post-content .mjx-chtml .mjx-math {
  min-width: min-content !important;
  /* Allow content to determine width */
  display: inline-block !important;
  text-align: center !important;
  margin: 0 auto !important;
}

/* Style the scrollbar for better appearance */
.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar,
.post-content .MathJax_Display::-webkit-scrollbar {
  height: 0.5rem; /* 8px */
}

.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar-track,
.post-content .MathJax_Display::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}

.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar-thumb,
.post-content .MathJax_Display::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.post-content .mjx-chtml.MJXc-display::-webkit-scrollbar-thumb:hover,
.post-content .MathJax_Display::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Ensure equation container doesn't overflow */
.post-content .MathJax_SVG_Display,
.post-content .MathJax {
  max-width: 100%;
}

/* Ensure container for equations has proper overflow */
.post-content .mjx-container {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
}

/* Figure-wrapper alignment: paragraphs inside .text-center/.text-end
   wrappers (used by post content for figure grouping) follow the
   wrapper's alignment instead of the post-wide justified text. */
.text-center p, .text-end p, .text-start p {
  text-align: inherit !important;
}
}@layer components {
  .posts-list[data-astro-cid-7oq26pzv] {
    max-width: 80rem;
    margin: 0 auto;
  }

  .post-entry[data-astro-cid-7oq26pzv] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }

  .post-entry-text[data-astro-cid-7oq26pzv] {
    flex: 1;
    min-width: 0;
  }

  .post-entry-thumb[data-astro-cid-7oq26pzv] {
    flex-shrink: 0;
    width: 9rem;
    aspect-ratio: 16 / 9;
    border-radius: .375rem;
    overflow: hidden;
    background: var(--surface-color);
    border: 1px solid var(--card-border);
  }

  .post-entry-thumb-img[data-astro-cid-7oq26pzv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .post-entry-link[data-astro-cid-7oq26pzv] {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .post-entry[data-astro-cid-7oq26pzv] {
    padding-bottom: 1.5rem;
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--card-border);
  }

  .post-meta[data-astro-cid-7oq26pzv] {
    margin-bottom: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }

  .post-title[data-astro-cid-7oq26pzv] {
    margin: 0;
    font-size: var(--subtitle-font-size);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--accent-color);
    transition: color var(--transition-hover-time, .2s);
  }

  .post-entry-link[data-astro-cid-7oq26pzv]:hover .post-title[data-astro-cid-7oq26pzv] {
    color: color-mix(in srgb,
      var(--accent-color),
      transparent var(--transition-hover-transparency, 20%));
  }

  .post-entry[data-astro-cid-7oq26pzv] .post-meta[data-astro-cid-7oq26pzv] .post-date[data-astro-cid-7oq26pzv] {
    font-size: var(--normal-font-size);
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    white-space: nowrap;
    margin-left: var(--spacing-sm);
    font-family: var(--font-body);
    font-weight: 500;
    transition: color .2s;
  }

  .post-entry-link[data-astro-cid-7oq26pzv]:hover .post-entry[data-astro-cid-7oq26pzv] .post-meta[data-astro-cid-7oq26pzv] .post-date[data-astro-cid-7oq26pzv] {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
  }

  .post-description[data-astro-cid-7oq26pzv] {
    text-align: justify;
    margin-bottom: 0;
    line-height: 1.6;
    color: var(--default-color);
    transition: color var(--transition-hover-time, .2s);
  }

  .post-entry-link[data-astro-cid-7oq26pzv]:hover .post-description[data-astro-cid-7oq26pzv] {
    color: var(--accent-color);
  }

  .empty-state[data-astro-cid-7oq26pzv] {
    text-align: center;
    padding: var(--spacing-xxl) 0;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    position: relative;
    min-height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .btn-return[data-astro-cid-7oq26pzv] {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    padding: .625rem 1.875rem;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    text-decoration: none;
    border: none;
    border-radius: 3.125rem;
    transition: background-color var(--transition-hover-time, .3s),
      color var(--transition-hover-time, .3s),
      transform var(--transition-hover-time, .3s);
    font-weight: 600;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translateZ(0);
    will-change: transform;
  }

  .btn-return[data-astro-cid-7oq26pzv]:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color, #fff);
    transform: translateY(-2px) translateZ(0);
  }

  @media (width <= 767px) {
    .post-meta[data-astro-cid-7oq26pzv] {
      flex-direction: column;
      align-items: flex-start !important;
    }

    .post-date[data-astro-cid-7oq26pzv] {
      margin-left: 0;
      margin-top: var(--spacing-xs);
      font-size: .9rem;
    }

    .post-entry-thumb[data-astro-cid-7oq26pzv] {
      width: 40%;
    }
  }
}