/* 说明：文章页面基础布局与正文容器样式。
 * 作用：定义文章卡片（surface）、标题区与正文排版的默认间距/收缩规则，避免内容溢出。
 * 注意：目录（outline）、Callout/blockquote、信息卡片与阅读进度按钮的样式在各自文件中维护。
 */

.article {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
  max-width: 100%;
}

/* 说明：文章正文块独立成亚克力表面，避免与大纲共享同一背景。 */
.article__surface {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: var(--article-surface-padding, 1.75rem);
  min-width: 0;
  max-width: 100%;
  /* 说明：文章正文卡片复用通用亚克力表面，这里仅覆盖圆角与阴影层级。 */
  --app-glass-radius: var(--article-surface-radius, var(--app-radius-card));
  --app-card-shadow: var(--md-sys-elevation-level2);
}

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

.article__title {
  margin: 0;
  font-size: var(--md-sys-typescale-headline-large-size);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  font-weight: 600;
}

.article__meta {
  color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.article__meta-item {
  /* 说明：Meta 项统一采用 inline-flex，确保不同标签（time/span）视觉字重与对齐一致。 */
  display: inline-flex;
  align-items: center;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.article__pageviews {
  /* 说明：阅读量由“标签 + 数字”组成，使用 gap 保持与其它 Meta 项一致的视觉节奏。 */
  gap: 0.35rem;
}

.article__time,
.article__reading-time {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.article__meta-separator {
  color: inherit;
  opacity: 0.7;
}

/* 说明：AI 参与度标记折叠组件，展开内容优先使用当前 meta 行的剩余空间。 */
.article__ai-marker {
  display: contents;
}

.article__ai-marker-summary {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* 说明：行内展开使用横向箭头，折叠时向右，展开后向左提示可收起。 */
.article__ai-marker-summary::after {
  content: "chevron_right";
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1;
  margin-inline-start: 0.1em;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.article__ai-marker-summary[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.article__ai-marker-summary:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 3px;
  border-radius: var(--app-radius-inline);
}

.article__ai-marker-details {
  display: contents;
}

.article__ai-marker-details .article__meta-item {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.article__ai-marker-details[hidden] {
  display: none;
}

.article__layout {
  display: flex;
  flex-direction: column;
  gap: var(--article-layout-gap, 1.75rem);
  min-width: 0;
  max-width: 100%;
}

.article__content {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--article-section-gap, 0.75rem);
  /* 说明：脚注、长 URL、长英文单词等 Markdown 产物不应撑破正文卡片。 */
  overflow-wrap: anywhere;
}

/* 说明：正文容器使用 flex 列布局时，默认 min-width:auto 会让宽图/长代码按内容最小宽度撑破卡片；这里强制直接子元素留在正文边界内。 */
.article__content > * {
  min-width: 0;
  max-width: 100%;
}

/* 说明：Markdown 图片默认按固有尺寸渲染；限制为不超过容器宽度并保持比例，避免溢出正文卡片。
 *       圆角使用 section 级 token，比卡片略小，与正文内其他块级元素（callout/表格）保持一致。 */
.article__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--app-radius-section);
}

/* 说明：文章插图 figure 包装器，纵向排列图片与题注。 */
.article__content figure {
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* 说明：figure 内的图片撑满容器宽度，消除多余底边距。 */
.article__content figure img {
  width: 100%;
  margin: 0;
  /* 说明：有题注的图片降低圆角仅保留上方，figure 整体圆角由外层控制。 */
  border-radius: var(--app-radius-section);
}

/* 说明：题注居中显示，使用次级文字颜色、较小字重与精简间距。 */
.article__content figcaption {
  text-align: center;
  font-size: var(--md-sys-typescale-body-small-size);
  line-height: var(--md-sys-typescale-body-small-line-height);
  color: var(--md-sys-color-on-surface-variant);
  padding: 0 var(--app-radius-section);
  word-break: break-word;
}

/* 说明：图片悬停时改为手型光标，提示可点击放大。 */
.article__content img[data-lightbox] {
  cursor: zoom-in;
}

/* ===== 灯箱弹窗样式 ===== */

/* 说明：灯箱 dialog 全屏覆盖，背景使用半透明遮罩 + 模糊。 */
.app-lightbox {
  position: fixed;
  inset: 0;
  width: 100dvw;
  max-width: 100dvw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  overflow: hidden;
}

/* 说明：dialog::backdrop 使用半透明黑色 + 高斯模糊，与亚克力风格统一。 */
.app-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(var(--app-glass-blur-radius, 16px));
  backdrop-filter: blur(var(--app-glass-blur-radius, 16px));
}

/* 说明：灯箱关闭按钮，固定于左上角，复用亚克力表面 + 交互卡片样式。
 *       尺寸与项目内 app-mobile-menu__close 保持一致（3.25rem 容器 + 1.75rem 图标）。 */
.app-lightbox__close {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  width: 3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  cursor: pointer;
  font-size: 1.75rem;
  color: var(--md-sys-color-on-surface);
  --app-glass-radius: var(--app-radius-pill);
  --app-glass-base-bg-color: var(--app-glass-surface-color);
}

/* 说明：灯箱内图片居中显示，限制在视口内并保持比例。 */
.app-lightbox__image {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90dvw;
  max-height: 90dvh;
  width: auto;
  height: auto;
  border-radius: var(--app-radius-card);
  box-shadow: var(--md-sys-elevation-level5);
  cursor: zoom-out;
  object-fit: contain;
}

/* 说明：表格在小屏下允许横向滚动，避免正文卡片被最小内容宽度撑破。 */
.article__content table {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 行内 code：允许断行 + GitHub-ish 的“压暗底色 + 1px 内描边”
 * 仅作用于 inline code（排除 pre > code），避免影响代码块
 */
.article__content :not(pre) > code {
  overflow-wrap: anywhere;
  padding: 0.1em 0.35em;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent);
}

/* 说明：章节标题与段落的间距由 CSS 变量控制，便于脚本按章节数量自适应。 */
.article__content h2,
.article__content h3,
.article__content h4,
.article__content h5,
.article__content h6 {
  margin-top: var(--article-heading-margin-top, 1.1rem);
  margin-bottom: var(--article-heading-margin-bottom, 0.4rem);
}

.article__content > p {
  margin: var(--article-paragraph-margin, 0.4rem) 0;
}

.article__content > hr {
  margin: var(--article-divider-margin, 1.25rem) 0;
}

/* 说明：为正文中所有带 href 的链接追加图标（含站内、站外与锚点链接）。 */
.article__content a[href]::after {
  content: "open_in_new";
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 20;
  font-feature-settings: "liga";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 0.12em;
  font-size: 0.95em;
  line-height: 1;
  vertical-align: text-top;
}