/* 全局 CSS 变量定义 */
:root {
  color-scheme: light dark;
  /* 浅色模式 - 霜紫色系 */
  --color-primary: #6b5b9a;
  --color-primary-hover: #563f82;
  --color-primary-light: rgba(107, 91, 154, 0.08);
  --color-primary-medium: rgba(107, 91, 154, 0.13);

  --color-text-primary: #1e1830;
  --color-text-secondary: #352b4a;
  --color-text-muted: #6b6080;
  --color-text-subtle: #9a90b0;

  --color-bg-primary: #f7f5fc;
  --color-bg-white: #ffffff;
  --color-bg-environment: #ede9f8;

  --color-border-light: #ddd8f0;
  --color-border-medium: #c4bce0;

  --color-nav-text: #6b6080;
  --color-nav-hover: rgba(107, 91, 154, 0.06);

  --color-hover-opacity: 0.85;
  --color-hover-border: var(--color-primary);

  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.1);

  --paper-shadow-light:
    0 0 3px rgba(0, 0, 0, 0.2), 0 0 24px rgba(0, 0, 0, 0.15);
  --paper-shadow-dark: 0 0 8px rgba(0, 0, 0, 0.4), 0 0 32px rgba(0, 0, 0, 0.3);
  --paper-shadow: var(--paper-shadow-light);

  /* 过渡动画 */
  --transition-timing: 350ms ease-in-out;
  --transition-fast: all 0.2s ease;
  --transition-medium: all 0.3s ease;
  --transition-slow: all var(--transition-timing);

  /* 细线边框 */
  --border-hairline: 0.5px;

  /* 圆角 */
  --radius-small: 6px;
  --radius-medium: 8px;
  --radius-large: 12px;
  --radius-pill: 20px;

  --article-line-height: 1.8;

  /* 字体大小 */
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.85rem;
  --font-size-md: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.1rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  --font-size-title: 1.6rem;

  --font-family-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
    "DejaVu Sans", "Droid Sans", "Microsoft YaHei", "SimHei", "SimSun",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-family-serif:
    "PT Serif", Georgia, ui-serif, Cambria, "Times New Roman", Times,
    "Liberation Serif", "DejaVu Serif", "Droid Serif", "Source Serif Pro",
    "Noto Serif CJK SC", "SimSun", serif;
  --font-family-italic:
    "楷体", "楷体_GB2312", "SimKai", "KaiTi", "STKaiti", cursive, sans-serif;

  /* 间距 */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* 响应式断点 */
  --breakpoint-md: 768px;
  --breakpoint-lg: 1200px;

  /* 纸张与布局 */
  --paper-width: 45rem;
  --paper-bleed: 3rem;

  --body-max-width: 76rem;
  --nav-width: 12rem;
  --toc-item-expanded-height: 50vh;

  /* 深色模式 - 霜紫色系 */
  --dark-color-primary: #9b8fd4;
  --dark-color-primary-hover: #b4aadf;
  --dark-color-primary-light: rgba(155, 143, 212, 0.15);
  --dark-color-primary-medium: rgba(155, 143, 212, 0.22);

  --dark-color-text-primary: #f0eeff;
  --dark-color-text-secondary: #d0ccee;
  --dark-color-text-muted: #9890b8;
  --dark-color-text-subtle: #6a6488;

  --dark-color-bg-primary: #252038;
  --dark-color-bg-white: #1e1a2e;
  --dark-color-bg-environment: #2e2848;

  --dark-color-border-light: #38324e;
  --dark-color-border-medium: #4a4368;

  /* 状态颜色 */
  --color-status-success: #10b981;
  --color-status-warning: #f59e0b;
  --color-status-error: #ef4444;
  --color-status-info: #3b82f6;

  --dark-color-nav-text: #9890b8;
  --dark-color-nav-hover: rgba(155, 143, 212, 0.1);

  --dark-color-hover-opacity: 0.75;
  --dark-shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.4);

  --present-on-light: revert;
  --present-on-dark: none;
}

/* 深色模式 - 系统偏好（用户未强制浅色） */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --color-primary: var(--dark-color-primary);
    --color-primary-hover: var(--dark-color-primary-hover);
    --color-primary-light: var(--dark-color-primary-light);
    --color-primary-medium: var(--dark-color-primary-medium);
    --color-text-primary: var(--dark-color-text-primary);
    --color-text-secondary: var(--dark-color-text-secondary);
    --color-text-muted: var(--dark-color-text-muted);
    --color-text-subtle: var(--dark-color-text-subtle);
    --color-bg-primary: var(--dark-color-bg-primary);
    --color-bg-white: var(--dark-color-bg-white);
    --color-bg-environment: var(--dark-color-bg-environment);
    --color-border-light: var(--dark-color-border-light);
    --color-border-medium: var(--dark-color-border-medium);
    --color-nav-text: var(--dark-color-nav-text);
    --color-nav-hover: var(--dark-color-nav-hover);
    --color-hover-opacity: var(--dark-color-hover-opacity);
    --color-hover-border: var(--color-primary);
    --shadow-heavy: var(--dark-shadow-heavy);
    --paper-shadow: var(--paper-shadow-dark);
    --present-on-light: none;
    --present-on-dark: revert;
  }
}

/* 深色模式 - 用户手动选择 */
[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: var(--dark-color-primary);
  --color-primary-hover: var(--dark-color-primary-hover);
  --color-primary-light: var(--dark-color-primary-light);
  --color-primary-medium: var(--dark-color-primary-medium);
  --color-text-primary: var(--dark-color-text-primary);
  --color-text-secondary: var(--dark-color-text-secondary);
  --color-text-muted: var(--dark-color-text-muted);
  --color-text-subtle: var(--dark-color-text-subtle);
  --color-bg-primary: var(--dark-color-bg-primary);
  --color-bg-white: var(--dark-color-bg-white);
  --color-bg-environment: var(--dark-color-bg-environment);
  --color-border-light: var(--dark-color-border-light);
  --color-border-medium: var(--dark-color-border-medium);
  --color-nav-text: var(--dark-color-nav-text);
  --color-nav-hover: var(--dark-color-nav-hover);
  --color-hover-opacity: var(--dark-color-hover-opacity);
  --color-hover-border: var(--color-primary);
  --shadow-heavy: var(--dark-shadow-heavy);
  --paper-shadow: var(--paper-shadow-dark);
  --present-on-light: none;
  --present-on-dark: revert;
}

/* ── Paper ─────────────────────────────────────────────────────────────── */
.paper {
  box-shadow:
    inset 0 0 0 var(--border-hairline) var(--color-border-medium),
    var(--paper-shadow);
  min-width: 0;
  color: var(--color-text-primary);
  line-height: var(--article-line-height);
  font-family: var(--font-family-sans);
  background: var(--color-bg-white);
  padding: var(--paper-bleed);
  width: 100%;
  max-width: var(--paper-width);
  margin-left: auto;
  margin-right: auto;
}
@media (width >= 1400px) {
  .paper {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Base reset ────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  transition:
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease;
}

[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
  font-size: 16px;
  font-display: swap;
  scrollbar-gutter: stable;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;

  font-family:
    ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}
body {
  margin: 0;
  line-height: inherit;
  font-family: var(--font-family-sans);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  text-emphasis-position: under;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
ul,
ol,
dl {
  margin: 0;
}
dd {
  margin-left: 0;
}
pre,
code,
kbd,
samp {
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 1em;
}
sup {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}
a {
  color: var(--color-primary);
  text-decoration: inherit;
}
button {
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
}
img {
  max-height: 75vh;
  object-fit: contain;
}

/* ── Post content typography ───────────────────────────────────────────── */

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--font-family-sans);
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
}

.post-content h1 {
  font-size: 1.45rem;
}
.post-content h2 {
  font-size: 1.2rem;
  padding-bottom: 0.35em;
}

.post-content h2::before {
  display: block;
  content: "";
  width: 6rem;
  height: 2px;
  background: var(--color-primary);
  margin-bottom: var(--spacing-lg);
}

.post-content h3 {
  font-size: 1.05rem;
}
.post-content h4 {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.post-content p {
  margin-block-end: 0.9em;
}
.post-content ul,
.post-content ol {
  list-style-position: inside;
  padding-inline-start: 0.5em;
}
.post-content ul {
  list-style-type: disc;
  overflow-x: auto;
}
.post-content ol {
  list-style-type: decimal;
}
.post-content li {
  margin-bottom: var(--spacing-sm);
}
.post-content li > p:first-child {
  display: inline;
  margin: 0;
}
.post-content ul > li::marker,
.post-content ol > li::marker {
  color: var(--color-primary);
}
.post-content a {
  text-decoration: underline;
}
.post-content a:hover {
  color: var(--color-primary-hover);
}

.post-content blockquote {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: 3px solid var(--color-primary);
  color: var(--color-text-muted);
  font-style: italic;
}

@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .post-section > p:first-child::first-letter {
    -webkit-initial-letter: 2;
    initial-letter: 2;
    margin-right: 0.1em;
  }
}

section[role="doc-endnotes"] {
  margin-top: var(--spacing-2xl);
  border-top: 1px dashed var(--color-border-medium);
  padding-top: var(--spacing-lg);
}

section[role="doc-endnotes"] ol,
section[role="doc-endnotes"] ul {
  padding-inline-start: 0;
  list-style-position: outside;
  margin-left: 0;
}

section[role="doc-bibliography"] ul {
  list-style-type: disc !important;
}

section[role="doc-bibliography"] li > div {
  display: inline;
}

/* ── Heading anchors ───────────────────────────────────────────────────── */
.heading-anchor {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--color-text-primary);
  text-decoration: none !important;
}
.post-content .heading-anchor:hover {
  text-decoration: underline !important;
}
.post-content .heading-anchor:hover::before {
  content: "#";
  margin-left: -0.8em;
  padding-right: 0.8em;
  color: var(--color-text-muted);
  position: absolute;
}

/* ── Math ──────────────────────────────────────────────────────────────── */
.typst-block-math {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: var(--spacing-md) 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.typst-block-math > math {
  grid-column: 2;
}
.typst-block-math > p {
  grid-column: 3;
  margin: 0;
  text-align: right;
}
.typst-block-math .equation-numbering {
  font-family: var(--font-family-sans);
  white-space: nowrap;
  padding-left: 1rem;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
figure:has(> .table-wrapper) {
  margin: 0;
}

.table-wrapper {
  display: block;
  overflow-x: auto;
  margin: var(--spacing-md) 0;
}

table {
  width: auto;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--font-size-md);
  border-top: 2px solid var(--color-border-medium);
  border-bottom: 1px solid var(--color-border-medium);
}
thead {
  border-bottom: 1px solid var(--color-border-medium);
}
th {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-secondary);
}
tbody tr:last-child td {
  border-bottom: none;
}
tbody tr:hover {
  background: var(--color-primary-light);
}

/* ── SVG frame dark-mode invert ────────────────────────────────────────── */
[data-theme="dark"] figure > svg {
  filter: invert(1) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] figure > svg {
    filter: invert(1) hue-rotate(180deg);
  }
}

/* ── Environment frames ─────────────────────────────────────────────────── */
figure:has(> .environment) {
  margin: 0;
}

.environment {
  margin: var(--spacing-lg) 0;
}
.environment-header.inlined {
  display: inline-block;
}
.environment-kind {
  display: inline-block;
  color: var(--color-text-muted);
  font-family: var(--font-family-sans);
  font-weight: 600;
  margin-right: var(--spacing-sm);
}
.environment-title {
  display: inline-block;
  margin-inline-end: var(--spacing-sm);
}
.environment-body {
  display: inline;
}
.environment-body > p:first-child {
  display: inline;
}
.environment-body > p {
  margin-block-start: 0;
}
.environment-body > p:last-child {
  margin-block-end: 0;
}

.envframe-simple,
.envframe-bracket {
  border-left: 3px solid var(--color-border-medium);
  padding: var(--spacing-sm) 0 var(--spacing-sm) var(--spacing-md);
}
.envframe-shadowy,
.envframe-remark {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-bg-environment);
  border-radius: var(--radius-small);
}
.envframe-proof {
  padding: var(--spacing-sm) 0;
  font-family: var(--font-family-italic);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Semantic Layout & Page Structure (replaces Tailwind utilities)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page container ───────────────────────────────────────────────────── */
.page-container {
  display: flex;
  max-width: var(--body-max-width);
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
}

.main-column {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-left: 1rem;
  padding-right: 1rem;
}

.main-content {
  padding-top: 2rem;
  padding-bottom: 2rem;
  flex: 1 1 0%;
}

@media (width >= 1400px) {
  .main-column {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* for small device */
@media (width < 640px) {
  .main-column {
    padding-left: 0;
    padding-right: 0;
  }
  .comments-section {
    padding-left: var(--paper-bleed);
    padding-right: var(--paper-bleed);
  }
  .paper {
    box-shadow: none;
    border: 0;
    max-width: none;
  }
  .page-container {
    margin-left: 0;
    margin-right: 0;
  }
  :root {
    --paper-bleed: 1rem;
  }
  .main-content {
    padding-top: 0;
    padding-bottom: 0;
  }

  .top-header,
  .site-footer {
    padding-left: var(--paper-bleed);
    padding-right: var(--paper-bleed);
  }
}

/* ── Content grid (xl+: sidebar | article | desktop TOC) ────────────────── */
@media (width >= 1400px) {
  .content-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--paper-width)) var(--nav-width);
    column-gap: 2rem;
    justify-content: center;
  }
}

/* ── Sidebar (xl+ only, left column) ──────────────────────────────────── */
.sidebar {
  display: none;
  width: var(--nav-width);
}

@media (width >= 1400px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 1.25rem;
  }
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--color-border-light);
}

.site-title {
  display: block;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-weight: 700;
  font-size: var(--font-size-lg);
  color: var(--color-text-muted);
  text-decoration: none;
  letter-spacing: 0.025em;
}
.site-title:hover {
  color: var(--color-primary);
}

/* ── Top header (below xl, mobile/tablet) ──────────────────────────────── */
.top-header {
  display: grid;
  align-items: center;
  gap: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--color-border-light);
  grid-template-columns: auto 1fr auto;
}
@media (width >= 1400px) {
  .top-header {
    display: none;
  }
}

.site-title-header {
  font-weight: 700;
  font-size: clamp(1rem, 4vw, var(--font-size-lg));
  color: var(--color-text-muted);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: 150px;
}

.header-nav {
  display: flex;
  justify-content: center;
}

/* ── Post title & byline ───────────────────────────────────────────────── */
.post-title {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.post-title-container {
  margin-bottom: 2rem;
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1rem;
  row-gap: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.post-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
}

/* ── Tags ──────────────────────────────────────────────────────────────── */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tag {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-border-light);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  background: transparent;
  transition:
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tag:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.category-chip {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 9999px;
  font-size: var(--font-size-sm);
  text-decoration: none;
  font-weight: 500;
  background: var(--color-primary);
  color: white;
  transition:
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-chip:hover {
  background: var(--color-primary-hover);
}

/* ── Figure wrapper ────────────────────────────────────────────────────── */
.figure-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  text-align: center;
  margin-top: var(--spacing-md);
}

.figure-wrapper svg,
.figure-wrapper img {
  max-width: 100% !important;
  height: auto !important;
}

figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

/* ── Site footer ───────────────────────────────────────────────────────── */
.site-footer {
  color: var(--color-text-muted);
  padding-top: 24px;
  padding-bottom: 48px;
  font-size: var(--font-size-md);
  margin-left: auto;
  margin-right: auto;
}

@media (width < 1400px) {
  .site-footer {
    width: 100%;
    max-width: var(--paper-width);
  }
}

.site-footer p {
  margin: 0;
}

/* ── Article justify (non-listing pages) ────────────────────────────────── */
.paper--article {
  text-align: justify;
  hyphens: auto;
}

/* ── Byline icon+text inline item ───────────────────────────────────────── */
.byline-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.hidden {
  display: none !important;
}

/* Inline SVG icons — sizing, baseline, and fill via CSS (not SVG attribute)
   so that color transitions work correctly in Safari */
.ri-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: currentColor;
}
.zebraw-code-lang {
  top: calc(var(--article-line-height) * -1em - 0.25em) !important;
}

.zebraw-code-lang::before {
  content: "copy | ";
}

.zebraw-code-block {
  margin-top: calc(
    var(--spacing-md) + var(--article-line-height) * 1em - 0.25em
  );
  margin-bottom: var(--spacing-md);
}
math {
  font-family: "New Computer Modern Math", math;
  font-display: swap;
}

/* ── Typst MathML layout rules (webkit alignment bugs fixed) ──────────────── */
mtable.right-align mtd,
mtable mtd.right-align,
mtable.left-align mtd.right-align,
mtable.aligned mtd:nth-child(odd) {
  text-align: right;
  justify-items: end;
}

mtable.cases mtd,
mtable.left-align mtd,
mtable mtd.left-align,
mtable.aligned mtd:nth-child(even),
math:is(:not([display])) > mtable.multiline-equation mtd {
  text-align: left;
  justify-items: start;
}

mtable.cases mtd,
mtable.aligned mtd,
mtable mtd.flushed,
mtable mtd.left-flush {
  padding-left: 0;
}

mtable.cases mtd,
mtable.aligned mtd,
mtable mtd.flushed,
mtable mtd.right-flush {
  padding-right: 0;
}

mtable {
  math-style: inherit;
}
mtd {
  math-depth: auto-add;
  math-style: compact;
  math-shift: compact;
}

mtable.multiline-equation mtd {
  math-depth: inherit;
  math-style: inherit;
  math-shift: inherit;
  padding: 0;
}
math > mtable.multiline-equation mtr:not(:last-child) mtd {
  padding-bottom: 0.5em;
}

mfrac {
  padding-inline: 0;
  margin-inline: 0.1em;
}

mover[accent="true" i] > :first-child {
  font-feature-settings: "dtls";
}
mover.dotted[accent="true" i] > :first-child {
  font-feature-settings: "dtls" 0;
}

munder > :nth-child(2),
munderover > :nth-child(2) {
  math-shift: compact;
}
munder[accentunder="true" i] > :not(:first-child),
mover[accent="true" i] > :not(:first-child) {
  math-depth: inherit;
  math-style: inherit;
  math-shift: inherit;
}

/* ── \cancel & \phase: force background images to print ──────────────────── */
menclose {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

@supports (not (-webkit-backdrop-filter: blur(1px))) and
  (not (-moz-appearance: none)) {
  menclose {
    position: relative;
    padding: 0.5ex 0;
  }
  .mathml-overline {
    padding: 0.1em 0 0 0;
    border-top: 0.065em solid;
  }
  .mathml-underline {
    padding: 0 0 0.1em 0;
    border-bottom: 0.065em solid;
  }
}

.upstrike {
  clip-path: polygon(
    0.05em 100%,
    0em calc(100% - 0.05em),
    calc(100% - 0.05em) 0em,
    100% 0.05em
  );
}
.downstrike {
  clip-path: polygon(
    0em 0.05em,
    0.05em 0em,
    100% calc(100% - 0.05em),
    calc(100% - 0.05em) 100%
  );
}

.tml-cancel {
  display: inline-block;
  position: absolute;
  left: 0.5px;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: currentColor;
}
/* ── Theme switcher ─────────────────────────────────────────────────────── */
.theme-switcher {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-pill);
  padding: 3px;
  background: var(--color-bg-white);
  gap: 2px;
}
.theme-opt {
  flex: 1;
  border: none;
  background: transparent;
  padding: 5px 8px;
  border-radius: calc(var(--radius-pill) - 3px);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: var(--transition-fast);
  font-size: var(--font-size-md);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-opt:hover {
  color: var(--color-primary);
}
[data-theme="light"] .theme-opt[data-theme-value="light"],
[data-theme="dark"] .theme-opt[data-theme-value="dark"],
[data-theme="auto"] .theme-opt[data-theme-value="auto"] {
  background: var(--color-primary);
  color: white;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.nav-links--row {
  flex-direction: row;
  gap: 1rem;
}

.nav-link {
  color: var(--color-nav-text);
  text-decoration: none;
  font-weight: 500;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: var(--font-size-md);
  transition:
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.nav-link:hover {
  color: var(--color-primary);
}
.nav-link--row {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  border-radius: var(--radius-medium);
}
.nav-link--row:hover {
  background: var(--color-nav-hover);
}

.nav-text {
  display: none;
}
@media (width >= 48rem) {
  .nav-text {
    display: inline;
  }
}

/* ── Theme switcher inside sidebar footer ───────────────────────────────── */
.theme-switcher-sidebar {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Sidebar nav ────────────────────────────────────────────────────────── */
.sidebar-nav {
  margin-top: 0;
}

.nav-link--admin { display: none; }
[data-admin="true"] .nav-link--admin { display: flex; }/* ── PDF download button ────────────────────────────────────────────────── */
.pdf-download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--radius-small);
  transition: all;
  background: transparent;
  opacity: 0.65;
}
.pdf-download-link:hover {
  opacity: 1;
}/* ── TOC ────────────────────────────────────────────────────────────────── */
.toc-nav ol,
.toc-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc-nav nav > ol,
.toc-nav nav > ul {
  margin-left: 1em;
}

.toc-nav li {
  margin: 0.2rem 0;
}
.toc-nav a {
  padding: 0.2rem var(--spacing-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  transition: var(--transition-fast);
  border-left: 2px solid transparent;
}
.toc-nav a:hover {
  color: var(--color-primary);
}
.toc-nav li li {
  margin-left: 0.75rem;
}
.toc-nav li[data-active="true"] > a {
  color: var(--color-primary);
  border-left-color: var(--color-primary);
}
.toc-nav .prefix {
  display: none;
}

.toc-nav nav h2 .heading-anchor {
  font-size: var(--font-size-md);
}

/* ── Desktop TOC (xl+ right column) ────────────────────────────────────── */
.desktop-toc {
  width: var(--nav-width);
  max-height: calc(100vh - 4rem);
  display: none;
}
@media (width >= 1400px) {
  .desktop-toc {
    display: block;
    position: sticky;
    top: 2rem;
    flex-shrink: 0;
    overflow-y: auto;
  }
}

.toc-mobile {
  margin-bottom: 2rem;
}
@media (width >= 1400px) {
  .toc-mobile {
    display: none;
  }
}

.toc-summary {
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25em;
}

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

.toc-summary svg {
  flex-shrink: 0;
  color: var(--color-primary);
  transform: rotate(45deg);
  transform-origin: center center;
  transition: transform 0.25s ease;
}

details[open] .toc-summary svg {
  transform: rotate(0deg);
}

.toc-nav-content {
  margin-top: 1rem;
}

h2 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  font-family: var(--font-family-sans);
  color: var(--color-text-primary);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

h2,
h3,
h4 {
  font-size: var(--font-size-base);
  font-weight: 600;
  font-family: var(--font-family-sans);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}
/* ── Tag chip active state ──────────────────────────────────────────────── */
.tag-chip.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

/* ── Tag filters (collections page) ────────────────────────────────────── */
.tag-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.tag-chip {
  cursor: pointer;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-border-light);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: transparent;
  transition:
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.tag-chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Listing: post cards (home / collections) ────────────────────────────── */
.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-item {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--color-border-light);
}

.post-card-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--color-text-primary);
}

.post-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.post-card-title {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  text-decoration: none;
  transition:
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.post-card-title:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.post-card-date {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  flex-shrink: 0;
}

.post-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.post-card-category {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-right: 0.25rem;
}

.post-card-tag {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  text-decoration: none;
  transition: color 0.15s ease;
}
.post-card-tag:hover {
  color: var(--color-primary);
}

.post-card-desc {
  color: var(--color-text-secondary);
  font-size: var(--font-size-md);
  margin: 0;
}

/* ── Sub-posts list (category pages) ───────────────────────────────────── */
.sub-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sub-post-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--radius-medium);
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-border-light);
  text-decoration: none;
  transition:
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.sub-post-link:hover {
  border-color: var(--color-primary);
  background: var(--color-bg-environment);
}

.sub-post-title {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}/* ── SVG polygon fills ──────────────────────────────────────────────────── */
.curl-bg-poly {
  fill: var(--color-bg-white);
}
.curl-reveal-stop {
  stop-color: black;
  stop-opacity: 0.12;
  transition: stop-opacity var(--transition-timing);
}
.curl-reveal-shadow {
  filter: blur(0px);
  transition: filter var(--transition-timing);
}
.chapter-curl-prev:hover .curl-reveal-shadow,
.chapter-curl-next:hover .curl-reveal-shadow {
  filter: blur(5px);
}
.curl-flap-stop {
  stop-color: black;
  stop-opacity: 0.1;
}

/* ── SVG border path ────────────────────────────────────────────────────── */
.chapter-curl-reveal-border-path {
  fill: none;
  stroke: var(--color-border-light);
  stroke-width: var(--border-hairline);
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.chapter-curl-border-path {
  fill: none;
  stroke: var(--color-border-medium);
  stroke-width: var(--border-hairline);
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

/* ── SVG size transition ────────────────────────────────────────────────── */
.chapter-curl-reveal-svg,
.chapter-curl-flap-svg {
  transition:
    width var(--transition-timing),
    height var(--transition-timing);
}
.chapter-curl-flap-svg {
  transition:
    width var(--transition-timing),
    height var(--transition-timing),
    filter var(--transition-timing);
}

/* ── Depth shadow on flap SVG ───────────────────────────────────────────── */
.chapter-curl-prev .chapter-curl-flap-svg {
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.15));
}
.chapter-curl-next .chapter-curl-flap-svg {
  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.15));
}
.chapter-curl-prev:hover .chapter-curl-flap-svg {
  filter: drop-shadow(0.5px -0.5px 3.5px rgba(0, 0, 0, 0.15));
}
.chapter-curl-next:hover .chapter-curl-flap-svg {
  filter: drop-shadow(-0.5px -0.5px 3.5px rgba(0, 0, 0, 0.15));
}

/* ── Dark mode ──────────────────────────────────────────────────────────── */
[data-theme="dark"] .curl-reveal-stop {
  stop-opacity: 0.5;
}
[data-theme="dark"] .curl-flap-stop {
  stop-opacity: 0.4;
}
[data-theme="dark"] .chapter-curl-prev .chapter-curl-flap-svg {
  filter: drop-shadow(-3px 3px 12px rgba(0, 0, 0, 0.75));
}
[data-theme="dark"] .chapter-curl-next .chapter-curl-flap-svg {
  filter: drop-shadow(3px 3px 12px rgba(0, 0, 0, 0.75));
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .curl-reveal-stop {
    stop-opacity: 0.5;
  }
  [data-theme="auto"] .curl-flap-stop {
    stop-opacity: 0.4;
  }
  [data-theme="auto"] .chapter-curl-prev .chapter-curl-flap-svg {
    filter: drop-shadow(-3px 3px 12px rgba(0, 0, 0, 0.75));
  }
  [data-theme="auto"] .chapter-curl-next .chapter-curl-flap-svg {
    filter: drop-shadow(3px 3px 12px rgba(0, 0, 0, 0.75));
  }
}

/* ── Chapter navigation (prev/next) ────────────────────────────────────── */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2.5rem;
  margin-left: calc(-1 * var(--paper-bleed));
  margin-right: calc(-1 * var(--paper-bleed));
  margin-bottom: calc(-1 * var(--paper-bleed));
}

.chapter-nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-decoration: none;
  padding-top: 1.25rem;
  padding-bottom: 4rem;
}

.chapter-nav-prev {
  position: relative;
  isolation: isolate;
  padding-left: var(--paper-bleed);
  padding-right: 1.5rem;
}

.chapter-nav-next {
  position: relative;
  isolation: isolate;
  padding-left: 1.5rem;
  padding-right: var(--paper-bleed);
  align-items: flex-end;
  margin-left: auto;
}

.chapter-nav-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}

.chapter-nav-title {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  transition:
    color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    fill 0.15s cubic-bezier(0.4, 0, 0.2, 1),
    stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.chapter-nav-link:hover .chapter-nav-title {
  color: var(--color-primary);
}

/* SVG size for chapter nav curl SVGs */
.chapter-nav-svg {
  position: absolute;
  bottom: 0;
  width: 3em;
  height: 3em;
  pointer-events: none;
}
.chapter-nav-link:hover .chapter-nav-svg {
  width: 6em;
  height: 6em;
}
.chapter-nav-svg--prev {
  left: 0;
}
.chapter-nav-svg--next {
  right: 0;
}
.chapter-nav-svg--left {
  left: 0;
}
.chapter-nav-svg--right {
  right: 0;
}
.chapter-nav-svg--z0 {
  z-index: 0;
}
.chapter-nav-svg--z2 {
  z-index: 2;
}/* ── Friend links page ──────────────────────────────────────────────────── */
.friend-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.friend-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-large);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.friend-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-light);
}

.friend-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 1.25rem;
  text-decoration: none;
  color: inherit;
  gap: 0.75rem;
}

.friend-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.friend-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  text-align: center;
}

.friend-name {
  font-weight: 600;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  transition: color 0.15s ease;
}
.friend-card:hover .friend-name {
  color: var(--color-primary);
}

.friend-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}

.friend-empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  margin-top: 1rem;
}/* ── Comments Section ──────────────────────────────────────────────────── */
.comments-section {
  padding-top: 2rem;
  width: 100%;
  max-width: var(--paper-width);
  margin-left: auto;
  margin-right: auto;
}

.comments-section h2 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}
.comments-section h2::before {
  display: none !important;
}

#comment-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: transparent;
  padding: 0;
  margin-bottom: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.author-wrapper,
.email-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-small);
  background: var(--color-bg-primary);
}
.author-wrapper:focus-within,
.email-wrapper:focus-within {
  border-color: var(--color-primary);
}
.author-wrapper:has(input[readonly]),
.email-wrapper:has(input[readonly]) {
  background: var(--color-bg-environment);
  border-color: var(--color-border-light);
}
.input-icon {
  display: flex;
  align-items: center;
  padding: 0 0.4rem 0 0.75rem;
  color: var(--color-text-muted);
  flex-shrink: 0;
  pointer-events: none;
}
#comment-form .author-wrapper input,
#comment-form .email-wrapper input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: none;
  outline: none;
  padding: 0.75rem 0.4rem;
  cursor: auto;
}
#comment-form .author-wrapper input[readonly],
#comment-form .email-wrapper input[readonly] {
  background: none;
  border-color: transparent;
  cursor: not-allowed;
}
#restore-copy-btn,
#clear-email-btn {
  display: none;
  background: none;
  border: none;
  padding: 0 0.75rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  flex-shrink: 0;
  align-self: stretch;
  align-items: center;
  position: relative;
}
#restore-copy-btn:hover,
#clear-email-btn:hover {
  color: var(--color-text-primary);
}
#restore-copy-btn::after,
#clear-email-btn::after {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}
#restore-copy-btn::after { content: "Copy sign-in link\A Open it on any device or browser\A to restore your identity"; white-space: pre; text-align: left; }
#clear-email-btn::after  { content: "Clear email"; }
#restore-copy-btn:hover::after,
#clear-email-btn:hover::after,
#restore-copy-btn.copied::after {
  opacity: 1;
}
#restore-copy-btn.copied::after {
  content: "Copied!";
}
.author-wrapper:has(input[readonly]) #restore-copy-btn {
  display: flex;
}
.email-wrapper:has(input[readonly]) #clear-email-btn {
  display: flex;
}

#comment-form input,
#comment-form textarea {
  resize: vertical;
  padding: 0.75rem;
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-small);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.95rem;
}

#comment-form input:focus,
#comment-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

#comment-form input[readonly] {
  color: var(--color-text-muted);
  background: var(--color-bg-environment);
  cursor: not-allowed;
  border-color: var(--color-border-light);
}

.form-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

#comment-submit-btn {
  background: var(--color-primary);
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: var(--radius-small);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  transition: opacity 0.2s;
}
#comment-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
#comment-submit-btn.loading {
  color: transparent;
}
#comment-submit-btn.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2px solid white;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  will-change: transform;
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

#comment-cancel-reply {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-medium);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-small);
  cursor: pointer;
}

#comments-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px dashed var(--color-border-light);
  margin-bottom: 3rem;
}

.comments-empty {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
}

.comment-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.comment-header > div {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.comment-author {
  font-weight: 600;
  color: var(--color-primary);
}

.comment-date {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.comment-body {
  line-height: 1.6;
  white-space: pre-wrap;
}

.comment-item.pending {
  opacity: 0.75;
  border-left: 2px solid var(--color-status-warning);
  padding-left: 0.75rem;
}
.comment-item.withdrawn {
  opacity: 0.5;
}
.comment-item.deleted {
  opacity: 0.4;
}

.comment-item.collapsed .comment-body,
.comment-item.collapsed .comment-actions,
.comment-item.collapsed .comment-replies {
  display: none;
}
.comment-item.collapsed .comment-header {
  cursor: pointer;
}
.comment-item.collapsed .comment-header:hover {
  opacity: 0.7;
}

.comment-edit-area {
  width: 100%;
  min-height: 5rem;
  padding: 0.75rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-small);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
}

.comment-actions {
  display: flex;
  gap: 1rem;
  margin-top: 0.25rem;
}

.you-tag {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary-medium);
}

.admin-tag {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  font-size: 0.95rem;
}

.comment-status-tag {
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--color-bg-environment);
  color: var(--color-text-muted);
  margin-left: 0.5rem;
  border: 1px solid var(--color-border-light);
}

.comment-replies {
  margin-left: 1.5rem;
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  font-size: 0.85rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  color: var(--color-primary);
}
.action-btn:hover {
  opacity: 1;
  text-decoration: underline;
}
.edit-btn,
.withdraw-btn {
  color: var(--color-text-muted);
}

.restore-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.restore-modal {
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-small);
  padding: 1.5rem;
  width: min(20rem, 90vw);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.restore-modal p {
  margin: 0;
  font-size: 0.95rem;
}
.restore-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
.restore-confirm-btn {
  padding: 0.5rem 1.2rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-small);
  font-weight: 600;
  cursor: pointer;
}
.restore-cancel-btn {
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-small);
  cursor: pointer;
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border-medium);
  gap: 1rem;
}
.admin-header h2 { margin: 0; }
.admin-header h2::before { display: none !important; }
.admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.admin-btn {
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-small);
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg-environment);
  color: var(--color-text-primary);
}
.admin-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.admin-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.admin-btn-primary { background: var(--color-primary); color: white; border-color: transparent; }
.admin-btn-primary:hover:not(:disabled) { opacity: 0.85; color: white; }
.admin-btn-danger:hover:not(:disabled) {
  border-color: var(--color-status-error, #e53);
  color: var(--color-status-error, #e53);
}
.admin-filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.filter-btn {
  cursor: pointer; font-family: inherit; font-size: 0.82rem;
  padding: 0.25rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--color-border-medium);
  background: transparent; color: var(--color-text-muted);
}
.filter-btn.active { background: var(--color-primary); color: white; border-color: transparent; }
#comment-list { display: flex; flex-direction: column; gap: 0.75rem; }
.comment-card {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-small);
  padding: 1rem;
}
.comment-card.pending { border-left: 3px solid var(--color-status-warning, #d69e2e); }
.comment-card.approved { opacity: 0.55; }
.comment-card.withdrawn, .comment-card.deleted { opacity: 0.3; }
.card-meta {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 0.4rem 0.75rem; font-size: 0.85rem; margin-bottom: 0.4rem;
}
.card-author { font-weight: 600; color: var(--color-primary); }
.card-slug { color: var(--color-text-muted); font-size: 0.8rem; text-decoration: none; }
.card-slug:hover { text-decoration: underline; }
.card-date { color: var(--color-text-muted); margin-left: auto; white-space: nowrap; }
.card-status {
  font-size: 0.7rem; padding: 1px 5px; border-radius: 3px;
  background: var(--color-bg-environment); color: var(--color-text-muted);
  border: 1px solid var(--color-border-light);
}
.status-pending { color: var(--color-status-warning, #d69e2e); border-color: currentColor; }
.card-email { font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.4rem; }
.card-body { line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.card-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
#admin-status { color: var(--color-text-muted); padding: 2rem 0; text-align: center; }
#auth-prompt { color: var(--color-text-muted); padding: 4rem 0; text-align: center; }