/*
Theme Name: Chickensoft Blog
Author: greepar
Description: A minimal black & white blog theme with warm-gray transitions, inspired by Notion / Linear.
Version: 2.0
Text Domain: chickensoft-blog
*/

:root {
  --color-fd-background: #ffffff;
  --color-fd-foreground: #18181b;
  --color-fd-muted: #fafafa;
  --color-fd-muted-foreground: #71717a;
  --color-fd-card: #ffffff;
  --color-fd-card-rgb: 255, 255, 255;
  --color-fd-border: #e5e5e5;
  --color-fd-border-strong: #d4d4d4;
  --color-fd-primary: #18181b;
  --color-fd-secondary: #f4f4f5;
  --color-fd-accent: #f4f4f5;
  --color-fd-accent-foreground: #18181b;
  --logo-text: #18181b;
  --logo-text-shimmer: #52525b;
  --shadow-color: 0, 0, 0;
  --radius-md: 6px;
  --radius-lg: 8px;
  --container-max: 1280px;
  --header-height: 55px;
}

html[data-theme="dark"] {
  --color-text: #e4e4e7;
  --logo-text: #e4e4e7;
  --logo-text-shimmer: #a1a1aa;
  --color-fd-background: #131316;
  --color-fd-foreground: var(--color-text);
  --color-fd-muted: #1c1c20;
  --color-fd-muted-foreground: #a1a1aa;
  --color-fd-card: #1c1c20;
  --color-fd-card-rgb: 28, 28, 32;
  --color-fd-border: #2a2a30;
  --color-fd-border-strong: #3f3f46;
  --color-fd-primary: #e4e4e7;
  --color-fd-secondary: #232328;
  --color-fd-accent: #2a2a30;
  --color-fd-accent-foreground: var(--color-text);
  --shadow-color: 0, 0, 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-text: #e4e4e7;
    --logo-text: #e4e4e7;
    --logo-text-shimmer: #a1a1aa;
    --color-fd-background: #131316;
    --color-fd-foreground: var(--color-text);
    --color-fd-muted: #1c1c20;
    --color-fd-muted-foreground: #a1a1aa;
    --color-fd-card: #1c1c20;
    --color-fd-card-rgb: 28, 28, 32;
    --color-fd-border: #2a2a30;
    --color-fd-border-strong: #3f3f46;
    --color-fd-primary: #e4e4e7;
    --color-fd-secondary: #232328;
    --color-fd-accent: #2a2a30;
    --color-fd-accent-foreground: var(--color-text);
    --shadow-color: 0, 0, 0;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-size: 18px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.04);
  background: var(--color-fd-background);
  scroll-behavior: smooth;
  /* Box-sizing baseline so all our percentage widths and explicit
     paddings stay inside their parent on every viewport. */
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body::-webkit-scrollbar {
  width: 8px;
}

body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
}

body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.45);
  background-clip: padding-box;
}

body {
  margin: 0;
  color: var(--color-fd-foreground);
  background: var(--color-fd-background);
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Guard against rogue wide elements (long inline code, base64 images,
     pre-formatted text) pushing the viewport wider than the device,
     which would visually offset all centered content to the left. */
  overflow-x: clip;
}

main {
  flex: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--color-fd-primary);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: var(--color-fd-foreground);
  z-index: 200;
  opacity: 0;
  transition: width 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

.page-progress.is-active {
  opacity: 1;
}

.site-header {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1400px;
  z-index: 40;
  border-bottom: 1px solid var(--color-fd-border);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  transition: transform 0.3s ease;
}

/* Browsers without backdrop-filter support fall back to a solid bg so
   the header never goes transparent on top of content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: var(--color-fd-background);
  }
}

/* Adjust header position when admin bar is present */
.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  .admin-bar .site-header {
    top: 0;
    /* Admin bar is not fixed on very small screens */
  }
}

@media (max-width: 768px) {
  .site-header.is-hidden {
    transform: translate(-50%, -100%);
  }
}

html[data-theme="dark"] .site-header {
  border-bottom: 1px solid var(--color-fd-border);
  background: rgba(19, 19, 22, 0.7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] .site-header {
    background: var(--color-fd-background);
  }
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .site-header {
    border-bottom: 1px solid var(--color-fd-border);
    background: rgba(19, 19, 22, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
  }

  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html:not([data-theme]) .site-header {
      background: var(--color-fd-background);
    }
  }
}

html[data-theme="dark"] {
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] img {
  filter: brightness(var(--dark-image-brightness, 0.92));
}

html[data-theme="dark"] body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid transparent;
  background-clip: padding-box;
}

html[data-theme="dark"] .search-backdrop {
  background: rgba(0, 0, 0, 0.7);
}

html[data-theme="dark"] .search-panel {
  box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] .copy-code {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .comment-form textarea:focus,
html[data-theme="dark"] .comment-form input[type="text"]:focus,
html[data-theme="dark"] .comment-form input[type="email"]:focus,
html[data-theme="dark"] .comment-form input[type="url"]:focus,
html[data-theme="dark"] .comment-form textarea:focus-visible,
html[data-theme="dark"] .comment-form input[type="text"]:focus-visible,
html[data-theme="dark"] .comment-form input[type="email"]:focus-visible,
html[data-theme="dark"] .comment-form input[type="url"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .comment-form textarea,
html[data-theme="dark"] .comment-form input[type="text"],
html[data-theme="dark"] .comment-form input[type="email"],
html[data-theme="dark"] .comment-form input[type="url"] {
  color: var(--color-fd-foreground);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.04);
  }

  html:not([data-theme]) img {
    filter: brightness(var(--dark-image-brightness, 0.92));
  }

  html:not([data-theme]) body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
  }

  html:not([data-theme]) body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid transparent;
    background-clip: padding-box;
  }

  html:not([data-theme]) .search-backdrop {
    background: rgba(0, 0, 0, 0.7);
  }

  html:not([data-theme]) .search-panel {
    box-shadow: 0 12px 32px -16px rgba(0, 0, 0, 0.6);
  }

  html:not([data-theme]) .copy-code {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  html:not([data-theme]) .comment-form textarea:focus,
  html:not([data-theme]) .comment-form input[type="text"]:focus,
  html:not([data-theme]) .comment-form input[type="email"]:focus,
  html:not([data-theme]) .comment-form input[type="url"]:focus,
  html:not([data-theme]) .comment-form textarea:focus-visible,
  html:not([data-theme]) .comment-form input[type="text"]:focus-visible,
  html:not([data-theme]) .comment-form input[type="email"]:focus-visible,
  html:not([data-theme]) .comment-form input[type="url"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
  }

  html:not([data-theme]) .comment-form textarea,
  html:not([data-theme]) .comment-form input[type="text"],
  html:not([data-theme]) .comment-form input[type="email"],
  html:not([data-theme]) .comment-form input[type="url"] {
    color: var(--color-fd-foreground);
  }
}

.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  min-height: var(--header-height);
  gap: 16px;
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
}

.site-logo-div {
  width: 52px;
  height: 38px;
  background-size: cover;
  background-position: top center;
  position: relative;
  /* bottom is set dynamically via inline CSS now */
  flex-shrink: 0;
  z-index: 10;
  pointer-events: all;
  background-repeat: no-repeat;
  transition: transform 0.1s ease-out;
}

/* Hover effect is now controlled via Customizer setting */

@media (max-width: 1024px) {
  .site-logo-div {
    width: 44px;
    height: 32px;
    /* Mobile override removed to allow customizer setting to take effect globally if desired, or add specific mobile setting later */
  }
}

.site-title {
  font-size: 1.1rem;
  color: var(--logo-text);
  letter-spacing: 0.02em;
  font-weight: 600;
}

.site-title:hover {
  color: var(--logo-text-shimmer);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.primary-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--color-fd-muted-foreground);
  transition: all 0.15s ease;
  font-size: 0.92rem;
}

.primary-nav a:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-accent-foreground);
}

.primary-nav .current-menu-item>a {
  background: none;
  color: var(--color-fd-primary);
}

.site-content {
  padding-top: calc(var(--header-height) + 32px);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 24px 20px 48px;
  width: 100%;
}

@media (max-width: 480px) {
  .container {
    padding: 16px 12px 32px;
  }
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-fd-border);
}

.post-grid {
  /* Default: CSS multi-column "masonry-ish" layout (works everywhere).
     Replaced by JS-driven absolute positioning on home/search when
     `assets/js/ui/post-masonry.js` runs. */
  column-count: 2;
  column-gap: 28px;
  column-fill: balance;
}

/* When JS masonry takes over, suppress the CSS column layout so the absolute
   positioning works cleanly. Scoped to home/search via the body class. */
html.has-post-masonry body.home .post-grid:not(.post-grid-archive),
html.has-post-masonry body.search .post-grid:not(.post-grid-archive) {
  column-count: auto;
  column-gap: 0;
  column-fill: auto;
}

.post-grid-archive {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  column-count: 1;
}

/* ─────────────────────────────────────────────────────────────
   Magazine-style post card (used by index/archive/search)
   ───────────────────────────────────────────────────────────── */
.post-card {
  background: var(--color-fd-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.post-card-link {
  display: flex;
  flex-direction: column;
  color: inherit;
  height: 100%;
  text-decoration: none;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

/* Image area: lock to a 16:10 aspect ratio so all cards feel uniform. */
.post-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-fd-muted);
}

.post-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card-image img {
  transform: scale(1.04);
}

/* Placeholder when no thumbnail. Shows the title's initial character on a
   subtle grid background. */
.post-card-image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.post-card-image--placeholder::before {
  content: attr(data-initial);
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-fd-border-strong);
  z-index: 1;
}

.post-card-image--placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent calc(100% - 1px), var(--color-fd-border) calc(100% - 1px)),
    linear-gradient(90deg, transparent calc(100% - 1px), var(--color-fd-border) calc(100% - 1px));
  background-size: 24px 24px;
  opacity: 0.5;
}

/* Content block */
.post-card-content {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

.post-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-size: 0.78rem;
  color: var(--color-fd-muted-foreground);
  margin-bottom: 10px;
  line-height: 1.4;
}

.post-card-meta > * + * {
  position: relative;
  margin-left: 8px;
  padding-left: 8px;
}

.post-card-meta > * + *::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-fd-muted-foreground);
  opacity: 0.6;
}

.post-card-new {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-fd-foreground);
  text-transform: uppercase;
}

.post-card-date {
  font-variant-numeric: tabular-nums;
}

.post-card-cat {
  color: var(--color-fd-muted-foreground);
}

.post-card-title {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-fd-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.post-card-excerpt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-fd-muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-arrow {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--color-fd-muted);
  color: var(--color-fd-muted-foreground);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.post-card-arrow svg {
  width: 14px;
  height: 14px;
}

.post-card:hover .post-card-arrow {
  background: var(--color-fd-foreground);
  color: var(--color-fd-background);
  transform: translateX(2px);
}

/* ─────────────────────────────────────────────────────────────
   Hero card (first post on home, occupies the full grid width)
   ───────────────────────────────────────────────────────────── */
.post-card-hero {
  /* Always span the full grid width. Both the JS masonry mode and the
     CSS-fallback column mode respect column-span: all. */
  column-span: all;
  grid-column: 1 / -1;
  margin-bottom: 28px;
}

.post-card-hero .post-card-link {
  flex-direction: row;
  align-items: stretch;
}

.post-card-hero .post-card-image {
  flex: 0 0 58%;
  aspect-ratio: auto;
  height: auto;
  min-height: 100%;
}

.post-card-hero .post-card-image img,
.post-card-hero .post-card-image--placeholder {
  height: 100%;
  width: 100%;
}

.post-card-hero .post-card-content {
  flex: 1;
  padding: 28px 32px;
  justify-content: center;
}

.post-card-hero .post-card-title {
  font-size: 1.5rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  -webkit-line-clamp: 3;
}

.post-card-hero .post-card-excerpt {
  font-size: 0.95rem;
  -webkit-line-clamp: 3;
}

.post-card-hero .post-card-arrow {
  width: 36px;
  height: 36px;
  margin-top: auto;
}

.post-card-hero .post-card-arrow svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 720px) {
  .post-card-hero .post-card-link {
    flex-direction: column;
  }

  .post-card-hero .post-card-image {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .post-card-hero .post-card-content {
    padding: 16px 18px 18px;
  }

  .post-card-hero .post-card-title {
    font-size: 1.2rem;
  }
}

/* ─────────────────────────────────────────────────────────────
   Horizontal card (used by date archives)
   ───────────────────────────────────────────────────────────── */
.post-card-horizontal .post-card-link {
  flex-direction: row;
  align-items: stretch;
}

.post-card-horizontal .post-card-image {
  flex: 0 0 36%;
  aspect-ratio: auto;
  height: auto;
  min-height: 100%;
}

.post-card-horizontal .post-card-image img,
.post-card-horizontal .post-card-image--placeholder {
  height: 100%;
}

.post-card-horizontal .post-card-content {
  flex: 1;
  padding: 18px 22px;
}

.post-card-horizontal .post-card-title {
  -webkit-line-clamp: 2;
}

.post-card-horizontal .post-card-excerpt {
  -webkit-line-clamp: 2;
}

/* In horizontal cards the image height drives the row height, so the
   text column has spare vertical space. Pin the arrow to the bottom so
   it always sits in the same place across cards rather than floating
   wherever the excerpt happens to end. */
.post-card-horizontal .post-card-arrow {
  margin-top: auto;
}

@media (max-width: 600px) {
  .post-card-horizontal .post-card-link {
    flex-direction: column;
  }

  .post-card-horizontal .post-card-image {
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
    min-height: 0;
  }

  .post-card-horizontal .post-card-content {
    padding: 14px 16px 16px;
  }

  /* On mobile, fall back to the default fixed top margin so the arrow
     sits naturally below the excerpt rather than getting pushed all the
     way down by flex auto-margin. */
  .post-card-horizontal .post-card-arrow {
    margin-top: 14px;
  }
}

.comments-fragment {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin-top: 16px;
  background: transparent;
  position: relative;
  border: none;
  box-shadow: none;
}

.comments-fragment::after {
  content: "";
  display: table;
  clear: both;
}

.comments-fragment p {
  margin: 0;
}

.comments-retry,
.comments-verify-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px !important;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  color: var(--color-fd-foreground);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.comments-verify-link {
  padding: 11px 16px 5px;
}

.comments-retry.is-loading {
  cursor: progress;
}

.comments-spinner {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border-radius: 999px;
  border: 2px solid var(--color-fd-border);
  border-top-color: var(--color-fd-foreground);
  animation: comments-spin 0.7s linear infinite;
}

.comments-retry.is-loading .comments-spinner {
  display: inline-block;
}

@keyframes comments-spin {
  to {
    transform: rotate(360deg);
  }
}

.comments-retry:hover,
.comments-verify-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  background: var(--color-fd-muted);
  border-color: var(--color-fd-border-strong);
}

.comments-retry:active,
.comments-verify-link:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.post-meta {
  color: var(--color-fd-muted-foreground);
  font-size: 0.88rem;
}

.author-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--color-fd-muted);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  flex-wrap: wrap;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.author-info img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--color-fd-border);
}

.author-name {
  margin: 0;
  font-weight: 600;
}

.author-bio {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-fd-muted-foreground);
}

.prose {
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: "Catamaran", system-ui, sans-serif;
  color: var(--color-fd-foreground);
  scroll-margin-top: calc(var(--header-height) + 40px);
}

:target {
  scroll-margin-top: calc(var(--header-height) + 40px);
}

/* Adjust scroll margin when admin bar is present */
.admin-bar .prose h1,
.admin-bar .prose h2,
.admin-bar .prose h3,
.admin-bar .prose h4,
.admin-bar :target {
  scroll-margin-top: calc(var(--header-height) + 40px + 32px);
}

@media screen and (max-width: 782px) {

  .admin-bar .prose h1,
  .admin-bar .prose h2,
  .admin-bar .prose h3,
  .admin-bar .prose h4,
  .admin-bar :target {
    scroll-margin-top: calc(var(--header-height) + 40px + 46px);
  }
}

@media screen and (max-width: 600px) {

  .admin-bar .prose h1,
  .admin-bar .prose h2,
  .admin-bar .prose h3,
  .admin-bar .prose h4,
  .admin-bar :target {
    scroll-margin-top: calc(var(--header-height) + 40px);
    /* Admin bar is not fixed */
  }
}

.prose h2 {
  margin-top: 2rem;
  font-size: 1.5rem;
}

.prose h3 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.prose p {
  margin: 1rem 0;
}

.prose img {
  border-radius: var(--radius-md);
}

.wp-block-quote,
blockquote {
  border-left: 4px solid var(--color-fd-border);
  padding-left: 16px;
  color: var(--color-fd-muted-foreground);
  font-style: italic;
}

#swup {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.site-content {
  flex: 1;
}

.site-footer {
  padding: 32px 0 48px;
  text-align: center;
  color: var(--color-fd-muted-foreground);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .site-header {
    border-radius: 0;
  }

  .site-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 8px;
    height: auto;
    padding: 12px 16px;
  }

  .site-brand {
    grid-column: 1;
    grid-row: 1;
  }

  .site-content {
    /* Mobile header is a single compact row (~60px tall once safe-area
     * is accounted for). Keep the gap below it tight so the page title
     * doesn't float in dead space. */
    padding-top: calc(var(--header-height) + 16px);
  }
}

.post-hero img {
  border-radius: var(--radius-lg);
  margin: 20px 0;
}

/* ─────────────────────────────────────────────────────────────
   Single-post article card. Wraps title, author box, hero image
   and prose; comments area stays as a sibling so we don't end up
   with a card-inside-card visual.
   ───────────────────────────────────────────────────────────── */
.post-article-card {
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  margin: 0 0 24px;
}

.post-article-card .page-title {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 8px;
  padding-bottom: 0;
  border-bottom: none;
}

.post-article-card .post-date {
  margin: 0 0 24px;
  color: var(--color-fd-muted-foreground);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.post-article-card .post-meta {
  margin: 0 0 20px;
  color: var(--color-fd-muted-foreground);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Author box becomes a soft inset rather than a nested card. Uses
   `--color-fd-secondary` (a deliberately elevated tint) instead of
   `--color-fd-muted`, because in dark mode muted == card so the inset
   would otherwise be invisible. */
.post-article-card .author-box {
  background: var(--color-fd-secondary);
  border: none;
  border-radius: var(--radius-md);
}

.post-article-card .post-hero {
  margin: 24px 0 28px;
}

.post-article-card .post-hero img {
  margin: 0;
  border-radius: var(--radius-md);
}

.post-article-card .prose {
  margin-top: 8px;
}

/* Ensure a comfortable gap between the article card and the comments
   card. .comments-area already has margin-top: 32px, but pin it here
   for clarity and so adjacent siblings inside `<div>` (no margin
   collapse trickery) behave consistently. */
.post-article-card + .comments-area {
  margin-top: 24px;
}

@media (max-width: 768px) {
  .post-article-card {
    padding: 24px 20px;
    border-radius: var(--radius-md);
  }

  .post-article-card .page-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .post-article-card {
    padding: 18px 16px;
  }

  .post-article-card .page-title {
    font-size: 1.3rem;
    line-height: 1.35;
  }
}

/* Make sure long inline elements inside the prose (URLs, monospace tokens,
   tables, large images) do not push the article card wider than the
   viewport on mobile. */
.prose img,
.prose video,
.prose iframe {
  max-width: 100%;
  height: auto;
}

.prose pre,
.prose table {
  max-width: 100%;
  overflow-x: auto;
}

.prose {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.post-navigation {
  margin-top: 32px;
  text-align: center;
}

.post-navigation .page-numbers {
  display: inline-block;
  margin: 0 4px;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  color: var(--color-fd-muted-foreground);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.post-navigation .page-numbers:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
}

.post-navigation .current {
  background: var(--color-fd-foreground);
  color: var(--color-fd-background);
  border-color: var(--color-fd-foreground);
}

@media (min-width: 1024px) {
  .site-header {
    width: calc(100% - 1rem);
    border-radius: var(--radius-lg);
    margin-top: 8px;
    border: 1px solid var(--color-fd-border);
  }
}


.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  color: var(--color-fd-muted-foreground);
  transition: all 0.15s ease;
}

.header-icon-link:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-accent-foreground);
}

.header-icon-link img,
.header-icon-link svg {
  width: 18px;
  height: 18px;
}

.header-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: transparent;
  color: var(--color-fd-muted-foreground);
  cursor: pointer;
  transition: all 0.15s ease;
}

.header-menu-toggle:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-accent-foreground);
}

.desktop-only {
  display: inline-flex;
}

.nav-mobile-utility {
  display: none;
}

.nav-mobile-utility .header-search-trigger {
  width: 100%;
  justify-content: flex-start;
  max-width: none;
}

.nav-mobile-utility .header-search-kbd {
  display: none;
}

.nav-mobile-utility .header-icon-link {
  width: auto;
  height: auto;
  justify-content: flex-start;
  padding: 8px 6px;
  border-radius: 10px;
}

.nav-mobile-utility .header-icon-link svg,
.nav-mobile-utility .header-icon-link img {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .header-actions {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
    display: contents;
  }

  .header-menu-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: none;
    margin-top: 4px;
  }

  .header-actions.is-open .primary-nav {
    display: block;
  }

  .desktop-only {
    display: none;
  }

  .header-actions>.header-search-trigger,
  .header-actions>.header-icon-link {
    display: none;
  }

  .nav-mobile-utility {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 4px 4px;
    border-top: 1px solid var(--color-fd-border);
    margin-top: 8px;
  }
}





.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: start;
}

/* Main content area entry animation */
.content-layout>div:first-child,
.site-content>.container {
  animation: content-fade-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* Ensure animation triggers on Swup page transitions */
html.is-animating .content-layout>div:first-child,
html.is-animating .site-content>.container {
  animation: none;
  opacity: 0;
}

/* Remove animation when replying to prevent stacking context trap for fixed modal */
body.replying-active .content-layout>div:first-child,
body.replying-active .site-content>.container,
body.editing-active .content-layout>div:first-child,
body.editing-active .site-content>.container {
  animation: none !important;
  transform: none !important;
}

/* Prevent animation from re-running when closing the modal */
body.has-replied .content-layout>div:first-child,
body.has-replied .site-content>.container {
  animation: none !important;
}

@keyframes content-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.sidebar {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  position: sticky;
  top: calc(var(--header-height) + 24px);
}

.sidebar h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.sidebar-section summary {
  cursor: pointer;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.sidebar-section summary::-webkit-details-marker {
  display: none;
}

.sidebar-section summary::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.sidebar-section[open] summary::after {
  transform: rotate(0deg);
}

.sidebar-section summary h2 {
  margin: 0;
}

.sidebar-section[open] summary {
  margin-bottom: 12px;
}

/* Smooth transition for details content */
.sidebar-section::details-content {
  transition: height 0.3s ease, opacity 0.3s ease, content-visibility 0.3s ease;
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.sidebar-section[open]::details-content {
  height: auto;
  opacity: 1;
}

.sidebar a {
  display: block;
  text-decoration: none;
  color: var(--color-fd-foreground);
}

.sidebar-section {
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.sidebar-section+.sidebar-section {
  margin-top: 14px;
}

/* Recent posts list inside the sidebar. */
.sidebar-post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-post-list li {
  border-top: 1px solid var(--color-fd-border);
}

.sidebar-post-list li:first-child {
  border-top: none;
}

.sidebar-post-list a {
  display: block;
  padding: 10px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-md);
  transition: background 0.15s ease;
}

.sidebar-post-list a:hover {
  background: var(--color-fd-muted);
}

.sidebar-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-fd-foreground);
}

.sidebar-post-date {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-fd-muted-foreground);
}

.sidebar-toc {
  margin: 0;
}


.sidebar-toc .toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-toc .toc-item {
  margin: 0;
}

.sidebar-toc .toc-item a {
  display: block;
  padding: 6px 0;
  text-decoration: none;
  color: var(--color-fd-muted-foreground);
  transition: color 0.3s ease, font-weight 0.3s ease;
}

.sidebar-toc .toc-item a:hover {
  color: var(--color-fd-foreground);
}

.sidebar-toc .toc-item a.active {
  color: var(--color-fd-foreground);
  font-weight: 600;
}

.sidebar-toc .toc-level-3 {
  padding-left: 14px;
  font-size: 0.92rem;
}

.post-hero img {
  border-radius: var(--radius-lg);
  margin: 20px 0;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

@media (max-width: 980px) {
  .content-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    width: 100%;
  }

  /* On narrow viewports, drop the comments-area horizontal padding a
     bit and let it span the full width of its grid track so the inner
     content lines up with the article card above it. */
  .comments-area {
    width: 100%;
    padding: 20px 16px;
  }
}

@media (max-width: 480px) {
  .comments-area {
    padding: 16px 14px;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 720px) {
  .header-search-kbd {
    display: none;
  }
}

body {

  transition: opacity 0.18s ease;
}

/* Swup Transitions */
html.is-animating {
  pointer-events: none;
  /* 防止动画期间点击太快导致冲突 */
}

.transition-fade {
  transition: 0.3s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

/* Swup Progress Bar */
.swup-progress-bar {
  height: 2px;
  background-color: var(--color-fd-foreground);
  z-index: 9999;
}


.post-date {
  margin: -8px 0 16px;
  color: var(--color-fd-muted-foreground);
  font-size: 0.9rem;
}

.author-bio {
  font-size: 0.82rem;
}


.author-info {
  text-decoration: none;
  color: inherit;
}



.primary-nav ul li {
  position: relative;
}

.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: max-content;
  white-space: nowrap;
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-md);
  padding: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  z-index: 50;
}

html[data-theme="dark"] .primary-nav .sub-menu {
  background: var(--color-fd-card);
  border-color: var(--color-fd-border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .primary-nav .sub-menu {
    background: var(--color-fd-card);
    border-color: var(--color-fd-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
}

.primary-nav .sub-menu li {
  margin: 0;
}

.primary-nav .sub-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--color-fd-muted-foreground);
  line-height: 1.2;
}

.primary-nav .sub-menu a:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-accent-foreground);
}

.primary-nav li.menu-item-has-children:hover>.sub-menu,
.primary-nav li.menu-item-has-children:focus-within>.sub-menu {
  display: block;
  animation: nav-dropdown-slide 0.2s ease-out forwards;
  transform-origin: top center;
}

@keyframes nav-dropdown-slide {
  from {
    opacity: 0;
    transform: translateY(-10px) scaleY(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1);
  }
}


@media (max-width: 900px) {
  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }

  .primary-nav a {
    width: 100%;
  }

  .primary-nav .sub-menu {
    position: static;
    box-shadow: none;
    border: none;
    padding: 6px 0 0 12px;
    background: transparent;
  }

  .primary-nav li.menu-item-has-children.open>.sub-menu {
    display: block;
    animation: nav-dropdown-slide 0.2s ease-out forwards;
    transform-origin: top center;
  }
}






.post-card {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  display: block;
  width: 100%;
  margin-bottom: 28px;
  /* Compositing layer to dodge Safari multicol balancing artifacts. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Force block layout on descendants inside multicolumn to prevent fragmenting */
.post-grid:not(.post-grid-archive) .post-card:not(.post-card-horizontal) .post-card-link {
  display: block !important;
  height: auto !important;
}

@media (max-width: 1024px) {
  .post-grid {
    column-count: 2;
  }
}

@media (max-width: 680px) {
  .post-grid {
    column-count: 1;
  }
  @supports (grid-template-rows: masonry) {
    .post-grid {
      grid-template-columns: 1fr;
    }
  }
}


.archive:not(.author) .post-grid,
.tag .post-grid {
  display: grid !important;
  gap: 16px;
  grid-template-columns: 1fr;
  column-count: 1 !important;
  column-gap: 0 !important;
  column-width: auto !important;
}

.archive:not(.author) .post-card,
.tag .post-card {
  display: flex !important;
  margin-bottom: 0;
  break-inside: auto;
}

.category .post-grid,
.category.archive .post-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px;
  column-count: 1 !important;
  column-gap: 0 !important;
  column-width: auto !important;
}

.category .post-card {
  display: flex !important;
  margin-bottom: 0;
  break-inside: auto;
}

body.author .post-grid.post-grid-archive {
  display: block !important;
  column-count: 2 !important;
  column-gap: 28px !important;
  column-fill: balance;
}

body.author .post-card {
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 24px;
  break-inside: avoid;
}

@media (min-width: 681px) {
  .post-grid.post-grid-sparse {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 24px !important;
    column-width: auto !important;
  }

  .post-grid.post-grid-sparse .post-card {
    display: flex !important;
    margin-bottom: 0;
    break-inside: auto;
  }
}


.post-grid.post-grid-archive {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  row-gap: 16px !important;
  column-gap: 0 !important;
  column-count: 1 !important;
  column-width: auto !important;
}

@media (min-width: 681px) {
  .home .post-grid.post-grid-sparse {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
    gap: 28px !important;
    column-width: auto !important;
  }

  .home .post-grid.post-grid-sparse .post-card {
    display: flex !important;
    margin-bottom: 0;
    break-inside: auto;
  }
}


.friend-subtitle {
  margin: 8px 0 0;
  color: var(--color-fd-muted-foreground);
}

.friend-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .friend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.friend-grid .wp-block-group,
.friend-grid .wp-block-columns,
.friend-grid .wp-block-column {
  background: var(--color-fd-card);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.friend-grid .wp-block-group:hover,
.friend-grid .wp-block-columns:hover,
.friend-grid .wp-block-column:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

.friend-grid a {
  color: var(--color-fd-foreground);
  text-decoration: none;
}

.friend-grid a:hover {
  color: var(--color-fd-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}


.friend-hero {
  text-align: left;
  margin: 0 0 32px;
}

.friend-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.friend-hero-content {
  flex: 1;
}

.friend-hero .page-title {
  margin: 8px 0 0;
}

.friend-kicker {
  margin: 0;
  color: var(--color-fd-muted-foreground);
  font-size: 0.95rem;
}

.friend-hero-action {
  margin-bottom: 16px;
  /* Align with page-title bottom roughly */
}

.friend-apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-md);
  color: var(--color-fd-foreground);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  line-height: normal;
}

.friend-apply-btn span {
  display: inline-block;
  line-height: normal;
}

.friend-apply-btn:hover {
  transform: translateY(-1px);
  border-color: var(--color-fd-border-strong);
  background: var(--color-fd-muted);
  color: var(--color-fd-foreground);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.friend-apply-btn svg {
  width: 16px;
  height: 16px;
}

/* Modal Styles */
.friend-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.friend-modal.is-active {
  display: flex;
}

.friend-modal.is-closing {
  display: flex;
}

.friend-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.friend-modal-container {
  position: relative;
  width: 90%;
  max-width: 480px;
  max-height: min(820px, calc(100vh - 48px));
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: modal-in 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.friend-modal.is-closing .friend-modal-overlay {
  animation: modal-overlay-out 0.22s ease forwards;
}

.friend-modal.is-closing .friend-modal-container {
  animation: modal-out 0.22s ease forwards;
}

#friend-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modal-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes modal-overlay-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.friend-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-fd-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.friend-modal-header h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.friend-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--color-fd-muted-foreground);
  transition: color 0.15s;
}

.friend-modal-close:hover {
  color: var(--color-fd-foreground);
}

.friend-modal-body {
  padding: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-fd-foreground);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  color: var(--color-fd-foreground);
  transition: border-color 0.2s, box-shadow 0.2s;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-fd-foreground);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.friend-modal-footer {
  padding: 16px 24px;
  background: var(--color-fd-muted);
  border-top: 1px solid var(--color-fd-border);
  text-align: right;
  flex-shrink: 0;
}

.submit-btn {
  background: var(--color-fd-foreground);
  color: var(--color-fd-background);
  border: 1px solid var(--color-fd-foreground);
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s, transform 0.15s;
  font-family: inherit;
}

.submit-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.submit-btn:active {
  transform: translateY(0);
}

/* Modal Captcha styling */
.friend-modal .comment-form-captcha {
  margin-top: 16px;
  display: block !important;
  gap: 10px;
  background: var(--color-fd-muted);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
}

.friend-modal .comment-form-captcha label {
  display: block;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-fd-foreground);
}

.friend-modal .comment-form-captcha .cs-captcha-row {
  margin: 8px 0 10px;
}

.friend-modal .comment-form-captcha input[type="text"] {
  width: 100%;
  max-width: 180px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: inherit;
}

@media (max-width: 640px) {
  .friend-hero-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .friend-hero-action {
    margin-top: 12px;
    margin-bottom: 0;
  }

  /* Mobile Modal Optimizations */
  .friend-modal-container {
    width: 95%;
    max-height: calc(100vh - 24px);
    border-radius: var(--radius-md);
  }

  .friend-modal-header {
    padding: 16px 20px;
  }

  .friend-modal-body {
    padding: 16px 20px;
  }

  .form-group {
    margin-bottom: 12px;
  }

  .form-group label {
    margin-bottom: 4px;
    font-size: 0.85rem;
  }

  .form-group input,
  .form-group textarea {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .friend-modal-footer {
    padding: 12px 20px;
  }

  .friend-modal .comment-form-captcha {
    margin-top: 12px;
    padding: 10px 14px;
  }
}

.friend-sections h2,
.friend-section-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 32px 0 16px;
  color: var(--color-fd-foreground);
}

.friend-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .friend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.friend-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--color-fd-card);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  min-height: 112px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 150ms ease-out, box-shadow 200ms ease-out;
  color: var(--color-fd-foreground);
  text-decoration: none;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .friend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
  }
}

.friend-card-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-muted);
}

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

.friend-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.friend-card-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-fd-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-card-desc {
  margin-top: 4px;
  color: var(--color-fd-muted-foreground);
  font-size: 0.85rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.friend-empty {
  text-align: center;
  color: var(--color-fd-muted-foreground);
  margin: 32px 0;
}

.friend-empty a {
  color: var(--color-fd-foreground);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.friend-intro {
  margin: 16px 0 24px;
  color: var(--color-fd-muted-foreground);
}

.friend-form-error {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-fd-muted);
  border: 1px solid var(--color-fd-border-strong);
  color: var(--color-fd-foreground);
  font-size: 0.9rem;
}

.form-hint {
  font-weight: normal;
  color: var(--color-fd-muted-foreground);
  font-size: 0.82rem;
  margin-left: 4px;
}

.friend-success-icon {
  width: 64px;
  height: 64px;
  background: var(--color-fd-muted);
  border: 1px solid var(--color-fd-border);
  border-radius: 50%;
  color: var(--color-fd-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* ========================================
   Shuoshuo (说说) Styles
   ======================================== */

.shuoshuo-hero {
  text-align: left;
  margin: 0 0 32px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.shuoshuo-hero-content {
  flex: 1;
}

.shuoshuo-hero .page-title {
  margin: 8px 0 0;
}

.shuoshuo-publish-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  color: var(--color-fd-foreground);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  white-space: nowrap;
  flex-shrink: 0;
}

.shuoshuo-publish-btn:hover {
  background: var(--color-fd-muted);
  border-color: var(--color-fd-border-strong);
  color: var(--color-fd-foreground);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

.shuoshuo-publish-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.shuoshuo-publish-btn svg {
  width: 15px;
  height: 15px;
  opacity: 0.8;
}

.shuoshuo-kicker {
  margin: 0;
  color: var(--color-fd-muted-foreground);
  font-size: 0.95rem;
}

.shuoshuo-timeline {
  position: relative;
  display: grid;
  gap: 28px;
  max-width: 860px;
  margin: 0 auto;
}

.shuoshuo-timeline::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 112px;
  width: 1px;
  background: var(--color-fd-border);
}

.shuoshuo-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 88px 48px minmax(0, 1fr);
  align-items: start;
  gap: 0;
}

.shuoshuo-timeline-date {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-top: 8px;
  color: var(--color-fd-muted-foreground);
  line-height: 1;
  text-align: right;
}

.shuoshuo-timeline-day {
  color: var(--color-fd-foreground);
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.shuoshuo-timeline-month {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.shuoshuo-timeline-marker {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

.shuoshuo-timeline-marker span {
  width: 12px;
  height: 12px;
  border: 3px solid var(--color-fd-background);
  border-radius: 50%;
  background: var(--color-fd-foreground);
  box-shadow: 0 0 0 1px var(--color-fd-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shuoshuo-card {
  position: relative;
  background: var(--color-fd-card);
  border-radius: var(--radius-lg);
  overflow: visible;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s ease, box-shadow 0.2s ease;
}

.shuoshuo-card::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -6px;
  width: 12px;
  height: 12px;
  background: var(--color-fd-card);
  transform: rotate(45deg);
  box-shadow: -1px 1px 0 rgba(0, 0, 0, 0.02);
}

.shuoshuo-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.08);
}

.shuoshuo-timeline-item:hover .shuoshuo-timeline-marker span {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px var(--color-fd-muted);
}

.shuoshuo-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 0;
}

.shuoshuo-card-avatar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-fd-border);
}

.shuoshuo-card-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.shuoshuo-card-author {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.shuoshuo-card-time {
  font-size: 0.8rem;
  color: var(--color-fd-muted-foreground);
  line-height: 1.3;
}

.shuoshuo-card-body {
  padding: 14px 22px 4px;
}

.shuoshuo-card-content.prose {
  font-size: 1rem;
  line-height: 1.78;
}

.shuoshuo-card-content.prose p:first-child {
  margin-top: 0;
}

.shuoshuo-card-content.prose p:last-child {
  margin-bottom: 0;
}

.shuoshuo-card-image {
  margin-top: 14px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-fd-border);
}

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

.shuoshuo-image-gallery {
  --gallery-gap: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gallery-gap);
  margin-top: 14px;
}

.shuoshuo-image-gallery[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
}

.shuoshuo-image-gallery[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shuoshuo-image-gallery__item {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-muted);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.shuoshuo-image-gallery[data-count="1"] .shuoshuo-image-gallery__item {
  aspect-ratio: 4 / 3;
}

.shuoshuo-image-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease;
}

.shuoshuo-image-gallery__item:hover .shuoshuo-image-gallery__image {
  transform: scale(1.035);
}

.shuoshuo-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px 18px;
}

.shuoshuo-comment-btn,
.shuoshuo-toggle-comments-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-muted);
  color: var(--color-fd-muted-foreground);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1.4;
}

.shuoshuo-comment-btn:hover,
.shuoshuo-toggle-comments-btn:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-accent-foreground);
  border-color: var(--color-fd-accent);
}

.shuoshuo-toggle-comments-btn svg {
  transition: transform 0.2s ease;
}

.shuoshuo-toggle-comments-btn.is-expanded svg {
  transform: rotate(180deg);
}

.shuoshuo-card-comments {
  border-top: 1px solid var(--color-fd-border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 14px 22px;
  background: var(--color-fd-muted);
}

.shuoshuo-card-comments .comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.shuoshuo-card-comments .comment-body {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-fd-border);
  font-size: 0.9rem;
}

.shuoshuo-card-comments .comment-body:last-child {
  border-bottom: none;
}

.shuoshuo-card-comments .comment-meta {
  margin-bottom: 4px;
}

.shuoshuo-card-comments .comment-author {
  font-weight: 600;
  font-size: 0.85rem;
}

.shuoshuo-card-comments .comment-metadata {
  font-size: 0.78rem;
  color: var(--color-fd-muted-foreground);
}

.shuoshuo-card-comments .reply {
  display: none;
}

.shuoshuo-comments-loading {
  text-align: center;
  padding: 12px;
  color: var(--color-fd-muted-foreground);
  font-size: 0.9rem;
}

/* Shuoshuo Comment Modal (reuses comment-modal styles) */
#shuoshuo-comment-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

#shuoshuo-comment-modal.is-active,
#shuoshuo-comment-modal.is-closing {
  display: flex;
}

#shuoshuo-comment-modal.is-closing .comment-modal-overlay {
  animation: modal-overlay-out 0.22s ease forwards;
}

#shuoshuo-comment-modal.is-closing .comment-modal-container {
  animation: comment-modal-out 0.22s ease forwards;
}

#shuoshuo-comment-modal .comment-modal-container {
  animation: comment-modal-in 0.26s ease-out;
}

/* Shuoshuo Pagination */
.shuoshuo-pagination {
  margin-top: 32px;
  text-align: center;
}

.shuoshuo-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  margin: 0 3px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  color: var(--color-fd-foreground);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.shuoshuo-pagination .page-numbers:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
  transform: translateY(-1px);
}

.shuoshuo-pagination .page-numbers.current {
  background: var(--color-fd-foreground);
  border-color: var(--color-fd-foreground);
  color: var(--color-fd-background);
}

/* Shuoshuo Empty State */
.shuoshuo-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-fd-muted-foreground);
}

.shuoshuo-empty svg {
  margin: 0 auto 16px;
  opacity: 0.4;
}

.shuoshuo-empty p {
  font-size: 1rem;
  margin: 0;
}

/* Single Shuoshuo Page - Distinct Redesign */
.shuoshuo-single-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px;
}

.shuoshuo-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 30px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-fd-muted-foreground);
  transition: color 0.15s ease;
  text-decoration: none;
}

.shuoshuo-back-link:hover {
  color: var(--color-fd-foreground);
}

.shuoshuo-single-article {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-fd-border);
}

.shuoshuo-single-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.shuoshuo-single-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--color-fd-border);
}

.shuoshuo-single-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shuoshuo-single-author {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-fd-foreground);
  line-height: 1.2;
}

.shuoshuo-single-time {
  font-size: 0.9rem;
  color: var(--color-fd-muted-foreground);
}

.shuoshuo-single-content.prose {
  font-size: 1.15rem; /* Larger, more legible text for single view */
  line-height: 1.8;
  color: var(--color-fd-foreground);
}

.shuoshuo-single-content.prose p {
  margin-bottom: 1.2em;
}

.shuoshuo-single-image {
  margin-top: 24px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-fd-border);
}

.shuoshuo-single-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Shuoshuo Mobile styles for single page */
@media (max-width: 600px) {
  .shuoshuo-single-wrap {
    padding: 24px 16px;
  }
  
  .shuoshuo-single-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .shuoshuo-single-avatar img {
    width: 54px;
    height: 54px;
  }
  
  .shuoshuo-single-content.prose {
    font-size: 1.05rem;
  }
}

/* Shuoshuo Mobile */
@media (max-width: 600px) {
  .shuoshuo-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .shuoshuo-timeline {
    gap: 22px;
    margin: 0;
    padding-left: 2px;
  }

  .shuoshuo-timeline::before {
    left: 13px;
  }

  .shuoshuo-timeline-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .shuoshuo-timeline-date {
    position: static;
    grid-column: 2;
    grid-row: 1;
    align-items: flex-start;
    flex-direction: row;
    gap: 6px;
    padding: 0 0 8px;
    text-align: left;
  }

  .shuoshuo-timeline-day {
    font-size: 0.9rem;
    letter-spacing: 0;
  }

  .shuoshuo-timeline-month {
    align-self: center;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .shuoshuo-timeline-marker {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-content: flex-start;
    padding-top: 4px;
  }

  .shuoshuo-timeline-marker span {
    width: 14px;
    height: 14px;
    border-width: 3px;
  }

  .shuoshuo-card {
    grid-column: 2;
    grid-row: 2;
    border-radius: var(--radius-md);
  }

  .shuoshuo-card::before {
    top: 18px;
    left: -7px;
    width: 14px;
    height: 14px;
  }

  .shuoshuo-card-header {
    padding: 16px 16px 0;
  }

  .shuoshuo-card-body {
    padding: 12px 16px 4px;
  }

  .shuoshuo-card-footer {
    align-items: flex-start;
    flex-direction: column;
    padding: 10px 16px 14px;
  }

  .shuoshuo-card-comments {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: 12px 16px;
  }

  .shuoshuo-image-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shuoshuo-image-gallery[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .shuoshuo-card-avatar img {
    width: 36px;
    height: 36px;
  }
}


.comment-form-captcha {
  margin-top: 12px;
}

.comment-form-captcha label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.comment-form-captcha .cs-captcha-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.comment-form-captcha .cs-captcha-image {
  width: 160px;
  height: 52px;
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-md);
  background: var(--color-fd-muted);
}

.comment-form-captcha .cs-captcha-refresh {
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  color: var(--color-fd-muted-foreground);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.comment-form-captcha .cs-captcha-refresh:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
}

.comment-form-captcha input[type="text"] {
  width: 180px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 520px) {
  .comment-form-captcha .cs-captcha-row {
    flex-wrap: wrap;
  }
}


.comments-area {
  margin-top: 32px;
  padding: 24px;
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-lg);
  background: var(--color-fd-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-family: inherit;
}

.comment-content {
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}

.comments-fragment .comments-area {
  margin-top: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.comments-title {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 600;
}

.comment-reply-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.comment-user-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-secondary);
  color: var(--color-fd-foreground);
  font-size: 0.85rem;
  text-decoration: none;
  vertical-align: middle;
  margin-left: auto;
  transition: transform 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
  line-height: 1;
  min-height: 36px;
}

.comment-user-link .comment-user-name {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.comment-user-link:hover,
.comment-user-link:focus {
  color: var(--color-fd-foreground);
  background: var(--color-fd-accent);
  border-color: var(--color-fd-border-strong);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

.comment-user-link img {
  border-radius: 999px;
}

.comment-notes-inline {
  margin-left: 4px;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-fd-muted-foreground);
}

.comment-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
}

.comment-list li {
  scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Comment Nesting & Threads */
.comment-list .children {
  margin-left: 1.6rem;
  padding: 0;
  list-style: none;
  position: relative;
}

@media (max-width: 640px) {
  .comment-list .children {
    margin-left: 0.8rem;
  }
}

.comment-list .children li {
  position: relative;
}

/* The vertical thread line */
.comment-list .children li::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -0.8rem;
  width: 1px;
  height: calc(100% + 8px);
  background: var(--color-fd-border);
  border-radius: 1px;
}

@media (max-width: 640px) {
  .comment-list .children li::before {
    left: -0.4rem;
  }
}

/* L-shaped connector for the last child */
.comment-list .children li:last-child::before {
  height: 36px;
  border-bottom-left-radius: 8px;
  border-left: 1px solid var(--color-fd-border);
  border-bottom: 1px solid var(--color-fd-border);
  background: transparent;
  width: 0.8rem;
  top: -8px;
}

@media (max-width: 640px) {
  .comment-list .children li:last-child::before {
    width: 0.4rem;
  }
}

/* Horizontal connector for non-last children */
.comment-list .children li:not(:last-child)>.comment-body::before {
  content: "";
  position: absolute;
  top: 24px;
  left: -0.8rem;
  width: 0.8rem;
  height: 1px;
  background: var(--color-fd-border);
  z-index: 1;
  border-radius: 1px;
}

@media (max-width: 640px) {
  .comment-list .children li:not(:last-child)>.comment-body::before {
    left: -0.4rem;
    width: 0.4rem;
  }
}

/* From the third nesting level onward, stop pushing children further to
   the right. Replace the per-item connector lines with a single left
   border on the level wrapper so the thread is still visible without
   eating horizontal space. This keeps deep conversations readable
   instead of squeezing them into a sliver on the right. */
.comment-list .children .children .children {
  margin-left: 0;
  padding-left: 12px;
  border-left: 2px solid var(--color-fd-border);
}

.comment-list .children .children .children li::before,
.comment-list .children .children .children li:last-child::before,
.comment-list .children .children .children li:not(:last-child)>.comment-body::before {
  display: none;
}

.comment-list .comment-body {
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-md);
  padding: 16px 18px 44px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.comment-list .comment-body:hover {
  transform: translateY(-1px);
  border-color: var(--color-fd-border-strong);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Nested child cards get a subtly different look */
.comment-list .children .comment-body {
  background: var(--color-fd-muted);
  border-color: var(--color-fd-border);
  padding: 14px 16px 40px;
  margin-bottom: 10px;
}

.comment-metadata {
  font-size: 0.78rem;
  color: var(--color-fd-muted-foreground);
  opacity: 0.8;
  letter-spacing: 0.01em;
}

.comment-metadata a {
  pointer-events: none;
  color: inherit;
  text-decoration: none;
  cursor: default;
}

/* Avatar ring effect */
.comment-list .comment-author img {
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--color-fd-border);
  transition: box-shadow 0.2s ease;
}

.comment-list .comment-body:hover .comment-author img {
  box-shadow: 0 0 0 1px var(--color-fd-border-strong);
}

.comment-author .fn {
  font-weight: 600;
  font-size: 0.92rem;
}

.comment-author .fn a {
  color: var(--color-fd-foreground);
  text-decoration: none;
}

.comment-list .comment-content {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-fd-foreground);
}

.comment-list .comment-content p {
  margin: 0 0 6px;
}

.comment-list .comment-content p:last-child {
  margin-bottom: 0;
}

.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  padding: 8px 12px;
  background: var(--color-fd-muted);
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#commentform textarea {
  min-height: 120px;
  height: 120px;
}

.comment-form textarea {
  resize: none;
}

.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
  border-color: var(--color-fd-foreground);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  outline: none;
}

.comment-form textarea:focus-visible,
.comment-form input[type="text"]:focus-visible,
.comment-form input[type="email"]:focus-visible,
.comment-form input[type="url"]:focus-visible {
  border-color: var(--color-fd-foreground);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  outline: none;
}

.comment-form .submit {
  border: 1px solid var(--color-fd-foreground);
  border-radius: var(--radius-md);
  background: var(--color-fd-foreground);
  color: var(--color-fd-background);
  padding: 10px 20px;
  cursor: pointer;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

.comment-form .submit:hover,
.comment-form .submit:focus {
  opacity: 0.9;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.comment-form .submit:active {
  transform: translateY(1px);
}


#commentform .comment-form-captcha {
  display: none;
}

#commentform.captcha-open .comment-form-captcha {
  display: grid;
}


#commentform {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

#commentform .comment-form-author,
#commentform .comment-form-email,
#commentform .comment-form-url {
  flex: 1 1 220px;
  margin: 0;
}

#commentform .comment-form-comment,
#commentform .comment-form-cookies-consent {
  flex: 1 1 100%;
  margin: 0;
}

#commentform .comment-form-captcha {
  flex: 1 1 auto;
  margin: 0;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "label label"
    "image input";
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
}

#commentform .comment-form-captcha label {
  grid-area: label;
  margin-bottom: 0;
}

#commentform .comment-form-captcha .cs-captcha-row {
  grid-area: image;
  margin-bottom: 0;
}

#commentform .comment-form-captcha input[type="text"] {
  grid-area: input;
  width: 140px;
  max-width: 100%;
}

#commentform .form-submit {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
  align-items: flex-end;
}

#commentform .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 10px;
}

#commentform .comment-form-cookies-consent label {
  font-size: 0.9rem;
  color: var(--color-fd-muted-foreground);
  line-height: 1.5;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

#commentform .comment-form-cookies-consent input[type="checkbox"] {
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--color-fd-border);
  border-radius: 4px;
  background: var(--color-fd-muted);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

#commentform .comment-form-cookies-consent input[type="checkbox"]:checked {
  background: var(--color-fd-foreground);
  border-color: var(--color-fd-foreground);
}

#commentform .comment-form-cookies-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--color-fd-background);
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center / contain;
}

#commentform .comment-form-cookies-consent input[type="checkbox"]:hover {
  border-color: var(--color-fd-foreground);
}

/* Comments Header */
.comments-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-fd-border);
}

.comments-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.add-comment-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  color: var(--color-fd-foreground);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
}

.add-comment-button:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Hide comment form by default, show only in modal */
#respond {
  display: none;
}

.comment-uploaded-image {
  max-width: 240px;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  margin-top: 8px;
  display: block;
}

/* Inline images that users paste/embed inside comment content (markdown
   img tags or pasted media). Avatars are excluded so headshots stay at
   their native size. Gallery images are also excluded so they can use
   their own cover-fill rules without this fallback overriding them. */
.comment-content img:not(.avatar):not(.comment-uploaded-image):not(.comment-image-gallery__image) {
  max-width: 240px;
  max-height: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.comment-image-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 112px));
  gap: 8px;
  margin-top: 10px;
}

.comment-image-gallery[data-count="1"] {
  grid-template-columns: minmax(0, max-content);
}

.comment-image-gallery[data-count="2"] {
  grid-template-columns: repeat(2, minmax(0, 140px));
}

.comment-image-gallery__item {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-muted);
}

/* Single image: respect the actual aspect ratio of the uploaded image
   rather than forcing 4:3 / 1:1, so portrait shots are not cropped.
   Cap the dimensions so giant verticals do not dominate the comment. */
.comment-image-gallery[data-count="1"] .comment-image-gallery__item {
  aspect-ratio: auto;
  max-width: 220px;
  max-height: 220px;
  width: auto;
  height: auto;
}

.comment-image-gallery__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s ease;
}

/* Override the multi-image cover/full-fill rules for the single-image
   case: render at the image's natural size within the cap. */
.comment-image-gallery[data-count="1"] .comment-image-gallery__image {
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 220px;
  object-fit: contain;
}

.comment-image-gallery__item:hover .comment-image-gallery__image {
  transform: scale(1.04);
}

.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.85);
}

.cs-lightbox.is-active {
  display: flex;
}

.cs-lightbox__image {
  display: block;
  max-width: min(1100px, 94vw);
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.cs-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 40px;
  transition: background 0.15s ease;
}

.cs-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
}

#comment-modal,
#shuoshuo-comment-modal,
#shuoshuo-publish-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

#comment-modal.is-active,
#comment-modal.is-closing,
#shuoshuo-comment-modal.is-active,
#shuoshuo-comment-modal.is-closing,
#shuoshuo-publish-modal.is-active,
#shuoshuo-publish-modal.is-closing {
  display: flex;
}

.comment-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
}

.comment-modal-container {
  position: relative;
  background: var(--color-fd-card, #fff);
  width: 92%;
  max-width: 540px;
  height: auto;
  max-height: 85vh;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--color-fd-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  z-index: 1;
  animation: comment-modal-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#comment-modal.is-closing .comment-modal-overlay,
#shuoshuo-comment-modal.is-closing .comment-modal-overlay,
#shuoshuo-publish-modal.is-closing .comment-modal-overlay {
  animation: modal-overlay-out 0.22s ease forwards;
}

#comment-modal.is-closing .comment-modal-container,
#shuoshuo-comment-modal.is-closing .comment-modal-container,
#shuoshuo-publish-modal.is-closing .comment-modal-container {
  animation: comment-modal-out 0.22s ease forwards;
}

.comment-modal-header {
  padding: 18px 24px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
}

.comment-modal-header span {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  color: var(--color-fd-foreground);
}

.comment-modal-close {
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fd-muted-foreground);
  transition: all 0.2s ease;
}

.comment-modal-close:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
  transform: rotate(90deg);
}

.comment-modal-iframe {
  display: block;
  border: none;
  width: 100%;
  min-height: 480px;
  flex-shrink: 0;
  background: transparent;
  transition: height 0.25s ease-out; /* Smooth resizing when height changes */
}

html.comment-form-iframe-html,
body.comment-form-iframe {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}

@keyframes comment-modal-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes comment-modal-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Comment Actions */
.comment-user-actions,
.comment-body .reply {
  position: absolute;
  bottom: 12px;
  right: 16px;
  display: flex !important;
  align-items: center;
  gap: 6px;
  z-index: 10;
  margin: 0;
  padding: 0;
}

/* Offset Reply link if Edit/Delete actions are present */
.comment-body:has(.comment-user-actions) .reply {
  right: 110px;
}

.comment-reply-link,
.comment-action-btn {
  background: var(--color-fd-muted);
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-md);
  padding: 5px 12px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--color-fd-muted-foreground);
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: normal;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.comment-action-btn.edit-comment-btn {
  background: var(--color-fd-muted);
  color: var(--color-fd-foreground);
}

.comment-action-btn.delete-comment-btn {
  color: var(--color-fd-muted-foreground);
}

.comment-reply-link:hover,
.comment-action-btn:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Edit Comment Modal */
body.editing-active {
  overflow: hidden;
}

body.editing-active::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  animation: fade-in 0.2s ease;
}

#edit-comment-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1002;
  width: min(600px, 90%);
  background: var(--color-fd-card);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-fd-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  animation: slide-up 0.2s ease;
}

body.editing-active #edit-comment-modal {
  display: block;
}

#edit-comment-modal h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 1.2rem;
}

#edit-comment-modal textarea {
  width: 100%;
  min-height: 150px;
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-muted);
  color: var(--color-fd-foreground);
  resize: vertical;
  font-family: inherit;
}

#edit-comment-modal textarea:focus {
  outline: none;
  border-color: var(--color-fd-foreground);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

#edit-comment-modal .edit-comment-images {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

#edit-comment-modal .edit-comment-images.has-images {
  display: grid;
}

#edit-comment-modal .edit-comment-image-item {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--color-fd-muted);
  border: 1px solid var(--color-fd-border);
}

#edit-comment-modal .edit-comment-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

#edit-comment-modal .edit-comment-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 24px;
}

#edit-comment-modal .edit-modal-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  padding: 8px 16px;
  border: 1px dashed var(--color-fd-border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-fd-foreground);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

#edit-comment-modal .edit-modal-upload-btn:hover {
  background: var(--color-fd-muted);
  border-color: var(--color-fd-foreground);
}

#edit-comment-modal .edit-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

#edit-comment-modal .edit-modal-btn {
  padding: 10px 24px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid var(--color-fd-border);
}

#edit-comment-modal .edit-modal-btn.cancel {
  background: var(--color-fd-card);
  color: var(--color-fd-foreground);
}

#edit-comment-modal .edit-modal-btn.cancel:hover {
  background: var(--color-fd-muted);
  border-color: var(--color-fd-border-strong);
}

#edit-comment-modal .edit-modal-btn.save {
  background: var(--color-fd-foreground);
  border-color: var(--color-fd-foreground);
  color: var(--color-fd-background);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#edit-comment-modal .edit-modal-btn.save:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.save-comment-btn,
.cancel-edit-btn {
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  cursor: pointer;
  border: 1px solid var(--color-fd-border);
}

.save-comment-btn {
  background: var(--color-fd-foreground);
  border-color: var(--color-fd-foreground);
  color: var(--color-fd-background);
}

.cancel-edit-btn {
  background: transparent;
  color: var(--color-fd-muted-foreground);
}

/* Comment Reply Modal */
body.replying-active {
  overflow: hidden;
}

body.replying-active::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  animation: fade-in 0.2s ease;
}

body.replying-active #respond {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: min(600px, 90%);
  background: var(--color-fd-card);
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-fd-border);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  animation: slide-up 0.2s ease;
  margin: 0;
}

/* Ensure title doesn't overlap with close button */
body.replying-active #reply-title {
  padding-right: 0;
}

/* Force show captcha in modal */
body.replying-active #commentform .comment-form-captcha {
  display: grid !important;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translate(-50%, -45%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* Adjust cancel button in modal */
body.replying-active #cancel-comment-reply-link {
  display: flex !important;
  /* Force show even if WP hides it */
  position: absolute;
  bottom: 24px;
  right: 24px;
  top: auto;
  font-size: 0;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: var(--color-fd-muted);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-md);
  color: var(--color-fd-muted-foreground);
}

body.replying-active #cancel-comment-reply-link::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") no-repeat center / contain;
}

body.replying-active #cancel-comment-reply-link:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
}

#commentform label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

@media (max-width: 700px) {

  #commentform .comment-form-author,
  #commentform .comment-form-email,
  #commentform .comment-form-url {
    flex: 1 1 100%;
  }

  #commentform .comment-form-captcha,
  #commentform .form-submit {
    flex: 1 1 100%;
  }

  #commentform .comment-form-captcha {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "image"
      "input";
    row-gap: 8px;
  }

  #commentform .form-submit {
    justify-content: flex-start;
  }
}

.comment-list .comment-body {
  padding: 14px 16px 42px;
}

.comment-list .comment-author img {
  border-radius: 50%;
}

.comment-list .comment-content {
  margin-top: 8px;
}


.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.comment-author {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.comment-author .says {
  margin-left: 4px;
}

/* User-agent + IP location badge appended to the author link via the
   `get_comment_author_link` filter. Allow it to wrap to a new line on
   narrow widths so it never pushes the timestamp out of view. */
.comment-ua {
  margin-left: 8px;
  font-weight: 400;
  font-style: normal;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-fd-muted-foreground);
  vertical-align: middle;
  display: inline-block;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.comment-metadata {
  margin-left: auto;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .comment-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .comment-metadata {
    margin-left: 0;
    padding-left: 50px;
  }
}


.says {
  display: none;
}








.search-close {
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-card);
  color: var(--color-fd-foreground);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
























@keyframes cs-search-blur-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cs-search-blur-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes cs-search-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cs-search-panel-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}

.header-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-fd-border);
  background: var(--color-fd-muted);
  color: var(--color-fd-muted-foreground);
  padding: 8px 10px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  max-width: 260px;
}


.header-search-trigger:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
}

.header-search-text {
  color: inherit;
}


.header-search-trigger:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
}

.header-search-icon {
  display: inline-flex;
}

.header-search-kbd {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  padding-left: 6px;
}

.header-search-kbd kbd {
  border: 1px solid var(--color-fd-border);
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--color-fd-background);
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.1;
}

.search-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 24px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
}

.search-modal.is-open {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.search-modal.is-open .search-backdrop {
  opacity: 1;
}

.search-modal.is-open .search-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.search-modal.is-opening .search-backdrop {
  animation: cs-search-blur-in 0.2s ease forwards;
}

.search-modal.is-closing .search-backdrop {
  animation: cs-search-blur-out 0.2s ease forwards;
}

.search-panel {
  position: relative;
  width: min(720px, 100%);
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 1;
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
}

.search-modal.is-opening .search-panel {
  animation: cs-search-panel-in 0.2s cubic-bezier(.32, .72, 0, 1) forwards;
}

.search-modal.is-closing .search-panel {
  animation: cs-search-panel-out 0.2s cubic-bezier(.32, .72, 0, 1) forwards;
}

.search-panel-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px;
}

.search-panel-icon-wrap {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-panel-spinner,
.search-panel-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.search-panel-spinner {
  opacity: 0;
  color: var(--color-fd-foreground);
  animation: spin 1s linear infinite;
}

.search-panel-icon {
  color: var(--color-fd-muted-foreground);
}

.search-panel-form {
  flex: 1;
}

.search-panel-input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1rem;
  padding: 8px 0;
  color: var(--color-fd-foreground);
}

.search-panel-esc {
  border: 1px solid var(--color-fd-border);
  background: transparent;
  color: var(--color-fd-muted-foreground);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: 0.75rem;
  cursor: pointer;
}

.search-panel-esc:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
}

body.search-open {
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

body.search-open::-webkit-scrollbar {
  width: 8px;
}

body.search-open::-webkit-scrollbar-thumb {
  background: transparent;
}

body.search-open::-webkit-scrollbar-track {
  background: transparent;
}

/* Material-ish code blocks (override copy button plugin styles). */
pre[class*="language-"],
pre.wp-block-code {
  background: var(--color-fd-muted) !important;
  border: 1px solid var(--color-fd-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
}

pre[class*="language-"]::-webkit-scrollbar,
pre.wp-block-code::-webkit-scrollbar {
  height: 8px;
}

pre[class*="language-"]::-webkit-scrollbar-track,
pre.wp-block-code::-webkit-scrollbar-track {
  background: transparent;
}

pre[class*="language-"]::-webkit-scrollbar-thumb,
pre.wp-block-code::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

pre[class*="language-"]::-webkit-scrollbar-thumb:hover,
pre.wp-block-code::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
  background-clip: padding-box;
}

pre[class*="language-"]::before,
pre.wp-block-code::before {
  content: "code";
  display: flex;
  align-items: center;
  padding: 0 14px;
  height: 36px;
  background: var(--color-fd-card);
  color: var(--color-fd-muted-foreground);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: 1px solid var(--color-fd-border);
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif;
}

code[class*="language-"],
pre.wp-block-code code {
  background: transparent !important;
  color: var(--color-fd-foreground) !important;
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  padding: 14px 16px !important;
  display: block;
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
}

pre.wp-block-code code,
.wp-block-code code,
pre[class*="language-"] code {
  font-family: "Catamaran", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

.copy-code {
  position: absolute !important;
  top: 6px !important;
  right: 8px !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 4px 10px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-fd-border) !important;
  background: var(--color-fd-card) !important;
  color: var(--color-fd-muted-foreground) !important;
  font-size: 0.75rem !important;
  font-weight: 600;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  z-index: 2;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.copy-code:hover {
  color: var(--color-fd-foreground) !important;
  background: var(--color-fd-muted) !important;
  border-color: var(--color-fd-border-strong) !important;
  transform: translateY(-1px);
}

@keyframes cs-search-blur-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cs-search-blur-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes cs-search-panel-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cs-search-panel-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
}

@media (max-width: 720px) {
  .header-search-kbd {
    display: none;
  }
}

/* Fix for mobile horizontal scrolling issues */
.prose {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.prose iframe,
.prose video,
.prose embed,
.prose object {
  max-width: 100%;
}

.prose pre {
  max-width: 100%;
  overflow-x: auto;
}

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  color: var(--color-fd-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 90;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 0;
}

.theme-mode-toggle {
  position: fixed;
  bottom: 32px;
  right: 92px;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-fd-card);
  border: 1px solid var(--color-fd-border);
  color: var(--color-fd-muted-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.2s ease;
  z-index: 90;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 0;
}

.theme-mode-toggle.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.theme-mode-toggle:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.theme-mode-toggle svg {
  width: 24px;
  height: 24px;
}

.theme-mode-toggle-icon {
  display: none;
}

.theme-mode-toggle[data-mode="system"] .theme-mode-toggle-icon-system,
.theme-mode-toggle[data-mode="light"] .theme-mode-toggle-icon-light,
.theme-mode-toggle[data-mode="dark"] .theme-mode-toggle-icon-dark {
  display: inline-flex;
}

.theme-mode-toggle-badge {
  position: absolute;
  right: 5px;
  bottom: 4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--color-fd-foreground);
  color: var(--color-fd-background);
  font-size: 9px;
  line-height: 14px;
  font-weight: 700;
  text-align: center;
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--color-fd-accent);
  color: var(--color-fd-foreground);
  border-color: var(--color-fd-border-strong);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 768px) {
  .theme-mode-toggle,
  .back-to-top {
    bottom: 20px;
    width: 40px;
    height: 40px;
  }

  .back-to-top {
    right: 20px;
  }

  .theme-mode-toggle {
    right: 68px;
  }

  .theme-mode-toggle svg,
  .back-to-top svg {
    width: 20px;
    height: 20px;
  }

  .theme-mode-toggle-badge {
    right: 3px;
    bottom: 3px;
  }
}

/* ===== View counter (post hits) =====
 * The element is server-rendered with [hidden] and only revealed once
 * the JS receives a count from /wp-json/chickensoft/v1/views. If the
 * endpoint is unreachable (origin offline in static mode) the element
 * stays hidden so the layout doesn't show a broken zero.
 */
.post-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-fd-muted-foreground);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
}

.post-views[hidden] {
  display: none !important;
}

.post-views-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.85;
}

.post-views-count {
  font-variant-numeric: tabular-nums;
}

.post-views-label {
  white-space: nowrap;
}

/* On the single-article page, sit the view counter next to the post-date. */
.post-article-card .post-date {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.post-article-card .post-date .post-views {
  font-size: 0.82rem;
}

/* Inside post cards: tuck the counter into the meta line. */
.post-card-meta .post-views {
  font-size: 0.78rem;
}

/* ===== Site-wide visit counter (footer) ===== */
.site-footer-views {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--color-fd-muted-foreground);
  opacity: 0.85;
}

.site-views {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
}

.site-views[hidden] {
  display: none !important;
}

.site-views-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.85;
}

.site-views-label {
  white-space: nowrap;
}

.site-views-count {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}