/*
 * 凤凰心理百科 — Frontend Design System
 * Version: 20260318-39
 *
 * DESIGN FORMULA (正文页 / Article role):
 *   Structure → Mayo Clinic medical encyclopedia
 *   Typography → Linear / Stripe — compact, precise, refined
 *   Brand → 凤凰学者 editorial authority
 *
 * COLOR AXIS: Mayo Medical Blue #0057b8 — amber fully retired
 *
 * TYPOGRAPHY: PingFang SC (苹方) first — best Chinese system font
 *   Scale: smaller than Mayo body, Linear/Stripe precision
 *
 * Mobile-First: 390px is the primary canvas
 */

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
  /* Surface */
  --phx-bg:           #ffffff;
  --phx-bg-2:         #f7f7f6;
  --phx-border:       rgba(0, 0, 0, 0.10);
  --phx-border-light: rgba(0, 0, 0, 0.07);

  /* Text — solid hex values for crisp rendering */
  --phx-text:         #111111;   /* headings */
  --phx-text-body:    #2d2d2d;   /* body paragraphs */
  --phx-text-muted:   #767676;   /* meta, labels, lede, TOC */
  --phx-text-faint:   #aaaaaa;   /* placeholders */

  /* Interactive */
  --phx-hover-bg:     rgba(0, 0, 0, 0.04);
  --phx-active-bg:    rgba(0, 0, 0, 0.08);

  /* ── Mayo Medical Blue ──────────────────────────────────────── */
  /* #0057b8 = Mayo Clinic exact primary blue (~7:1 on white, WCAG AAA) */
  --phx-blue:         #0057b8;
  --phx-blue-dk:      #004494;   /* hover / darker */
  --phx-blue-light:   rgba(0, 87, 184, 0.07);
  --phx-blue-border:  rgba(0, 87, 184, 0.18);

  /* Links */
  --phx-link:         #0057b8;
  --phx-link-hover:   #004494;
  --phx-link-active-bg: rgba(0, 87, 184, 0.06);

  /* Typography — PingFang SC (苹方) first for best Chinese rendering */
  --phx-font:
    "PingFang SC", "苹方-简",
    -apple-system, BlinkMacSystemFont,
    "Noto Sans CJK SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑",
    "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --phx-max:          1120px;
  --phx-article-max:  700px;
  --phx-toc-w:        200px;
  --phx-gap:          64px;   /* wider gap → more breathing between TOC and article */
  --phx-radius:       6px;
  --phx-radius-sm:    4px;
}

/* ════════════════════════════════════════════════════════════════
   HEADER OVERRIDE — white bar, subtle border
════════════════════════════════════════════════════════════════ */
body.post-type-archive-phx_psy_encyc .main-header-bar,
body.post-type-archive-phx_psy_encyc .ast-primary-header-bar,
body.single-phx_psy_encyc .main-header-bar,
body.single-phx_psy_encyc .ast-primary-header-bar {
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: none;
  padding-top: 10px;
  padding-bottom: 10px;
}

body.post-type-archive-phx_psy_encyc .site-header .custom-logo-link,
body.single-phx_psy_encyc .site-header .custom-logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

body.post-type-archive-phx_psy_encyc .site-header .custom-logo-link img,
body.single-phx_psy_encyc .site-header .custom-logo-link img {
  display: block;
  width: auto !important;
  height: 46px !important;
  max-height: none;
  filter: brightness(0) saturate(100%);
}

/* Nav text */
body.post-type-archive-phx_psy_encyc .site-header a,
body.post-type-archive-phx_psy_encyc .site-header .menu-link,
body.post-type-archive-phx_psy_encyc .site-header .menu-toggle,
body.single-phx_psy_encyc .site-header a,
body.single-phx_psy_encyc .site-header .menu-link,
body.single-phx_psy_encyc .site-header .menu-toggle {
  color: var(--phx-text);
}

body.post-type-archive-phx_psy_encyc .site-header .menu-link,
body.single-phx_psy_encyc .site-header .menu-link {
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* Booking button — Mayo Medical Blue */
body.post-type-archive-phx_psy_encyc .site-header .ast-button-wrap a,
body.post-type-archive-phx_psy_encyc .site-header a.latepoint-book-button,
body.single-phx_psy_encyc .site-header .ast-button-wrap a,
body.single-phx_psy_encyc .site-header a.latepoint-book-button {
  background: var(--phx-blue) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: opacity 0.15s ease;
}

body.post-type-archive-phx_psy_encyc .site-header .ast-button-wrap a:hover,
body.single-phx_psy_encyc .site-header .ast-button-wrap a:hover,
body.single-phx_psy_encyc .site-header a.latepoint-book-button:hover {
  opacity: 0.85;
}

/* Mobile header — remove border-bottom line */
body.post-type-archive-phx_psy_encyc .site-header,
body.single-phx_psy_encyc .site-header {
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Mobile menu toggle — no border, Mayo blue text + icon */
body.post-type-archive-phx_psy_encyc .site-header .menu-toggle,
body.single-phx_psy_encyc .site-header .menu-toggle {
  border: none !important;
  background: transparent !important;
  color: var(--phx-blue) !important;
}

/* Force blue on "菜单" text span and all children */
body.post-type-archive-phx_psy_encyc .site-header .menu-toggle span,
body.post-type-archive-phx_psy_encyc .site-header .menu-toggle .mobile-menu-text,
body.single-phx_psy_encyc .site-header .menu-toggle span,
body.single-phx_psy_encyc .site-header .menu-toggle .mobile-menu-text {
  color: var(--phx-blue) !important;
}

body.post-type-archive-phx_psy_encyc .site-header .menu-toggle svg,
body.post-type-archive-phx_psy_encyc .site-header .menu-toggle svg *,
body.single-phx_psy_encyc .site-header .menu-toggle svg,
body.single-phx_psy_encyc .site-header .menu-toggle svg * {
  fill: var(--phx-blue) !important;
  stroke: none !important;
}

/* Remove Astra container constraints */
.single-phx_psy_encyc .site-content > .ast-container,
.post-type-archive-phx_psy_encyc .site-content > .ast-container {
  display: block;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ════════════════════════════════════════════════════════════════
   PAGE BODY
════════════════════════════════════════════════════════════════ */
body.post-type-archive-phx_psy_encyc,
body.single-phx_psy_encyc {
  background: var(--phx-bg);
  overflow-x: hidden;       /* prevent horizontal scroll during CSS loading */
}

/* ════════════════════════════════════════════════════════════════
   SHELL (shared container)
════════════════════════════════════════════════════════════════ */
.phx-encyc {
  position: relative;
  isolation: isolate; /* stacking context: ::before z-index:-1 stays inside */
  color: var(--phx-text-body);
  font-family: var(--phx-font);
  font-size: 1rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Hero background — pure white (dot pattern removed v28) ──── */
/* Clean white hero: no dots, no wash. Authority comes from typography alone. */

.phx-encyc__shell {
  width: min(var(--phx-max), 100% - 48px);
  margin: 0 auto;
  padding: 44px 0 88px;
}

/* ────────────────────────────────────────────────────────────────
   EYEBROW — Text breadcrumb back-navigation
──────────────────────────────────────────────────────────────── */
.phx-encyc__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  font-size: 0.8125rem;
  font-weight: 620;
  letter-spacing: 0;
  text-transform: none;
  color: var(--phx-blue);
  text-decoration: none;
  transition: color 0.12s;
}

.phx-encyc__eyebrow::before {
  content: "←";
  font-size: 0.95em;
  font-weight: 500;
}

.phx-encyc__eyebrow:hover {
  color: var(--phx-blue-dk);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--phx-blue-border);
}

/* ════════════════════════════════════════════════════════════════
   ARCHIVE PAGE — Notion/OpenAI × Mayo Clinic directory
════════════════════════════════════════════════════════════════ */

/* Archive hero — pure white background (dot pattern removed v28) */

.phx-encyc__archive-hero {
  max-width: 680px;
  padding: 24px 0 28px;  /* v34: tighter hero-to-list spacing */
  border-bottom: none;
}

.phx-encyc__archive-title {
  margin: 0;
  line-height: 1;
}

/* SVG wordmark replaces text title — viewBox trimmed to content bounds */
.phx-encyc__archive-wordmark {
  display: block;
  height: clamp(27px, 4.8vw, 38px);
  width: auto;
}

/* Hide text fallback when SVG wordmark is present */
.phx-encyc__archive-title .phx-encyc__archive-title-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.phx-encyc__archive-intro {
  max-width: 38rem;
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.72;
  color: var(--phx-text-muted);
}

/* Search — Notion/Stripe unified input with inline button */
.phx-encyc__search {
  position: relative;
  display: flex;
  gap: 0;
  align-items: center;
  margin-top: 24px;
  max-width: 520px;
}

.phx-encyc__search input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 1.5px solid var(--phx-border);
  border-radius: 8px;
  padding: 0 90px 0 42px;  /* left icon space + right button space */
  background: var(--phx-bg);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--phx-text);
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
}

/* Search icon — inline SVG magnifying glass */
.phx-encyc__search::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='10.5' cy='10.5' r='7' stroke='%23999' stroke-width='2'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}

.phx-encyc__search input::placeholder {
  color: var(--phx-text-faint);
}

.phx-encyc__search input:focus {
  outline: none;
  border-color: var(--phx-blue);
  box-shadow: 0 0 0 3px var(--phx-blue-light);
}

.phx-encyc__search button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: var(--phx-blue);
  color: #ffffff;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.phx-encyc__search button:hover {
  background: var(--phx-blue-dk);
}

/* Alphabet navigation — compact pills, 26 letters single row on desktop */
.phx-encyc__alphabet {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 28px 0 8px;
  max-width: 680px;
}

.phx-encyc__alphabet a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 28px;
  padding: 0 3px;
  border-radius: 4px;
  border: 1px solid var(--phx-border);
  background: var(--phx-bg);
  color: var(--phx-text-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.phx-encyc__alphabet a:hover {
  background: var(--phx-blue-light);
  border-color: var(--phx-blue-border);
  color: var(--phx-blue);
  box-shadow: 0 1px 3px rgba(0, 87, 184, 0.08);
}

/* Disabled alphabet letters — no entries for this letter */
.phx-encyc__alphabet-disabled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 28px;
  padding: 0 3px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--phx-text-faint);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: default;
}

/* Entry index — v33: constrain to same width as hero for visual alignment */
.phx-encyc__index {
  margin-top: 28px;
  max-width: 680px;
}

/* Flat entry list — no divider, content flows naturally from hero */
.phx-encyc__entry-list {
  border-top: none;
  padding-top: 0;
}

.phx-encyc__empty,
.phx-encyc__group-list {
  padding: 0;
  list-style: none;
  margin: 0;
}

.phx-encyc__empty {
  padding: 48px 0;
  text-align: center;
}

.phx-encyc__empty p {
  color: var(--phx-text-muted);
  font-size: 1rem;
  line-height: 1.72;
}

.phx-encyc__group {
  scroll-margin-top: 24px;
}

.phx-encyc__group + .phx-encyc__group {
  margin-top: 36px;
}

.phx-encyc__group-head {
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--phx-border);
  margin-bottom: 8px;
}

.phx-encyc__group-letter {
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--phx-text);
}

/* Pagination — clean minimal style */
.phx-encyc__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 48px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--phx-border-light);
}

.phx-encyc__pagination a,
.phx-encyc__pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.phx-encyc__pagination a {
  color: var(--phx-text-body);
  cursor: pointer;
}

.phx-encyc__pagination a:hover {
  background: var(--phx-hover-bg);
  color: var(--phx-blue);
}

/* Current page indicator */
.phx-encyc__pagination .current {
  background: var(--phx-blue);
  color: #ffffff;
  font-weight: 600;
}

/* Prev / Next arrows */
.phx-encyc__pagination .prev,
.phx-encyc__pagination .next {
  font-weight: 600;
  color: var(--phx-text-muted);
}

.phx-encyc__pagination .prev:hover,
.phx-encyc__pagination .next:hover {
  color: var(--phx-blue);
  background: var(--phx-hover-bg);
}

/* Disabled prev/next */
.phx-encyc__pagination .disabled {
  color: var(--phx-text-faint);
  cursor: default;
  pointer-events: none;
}

/* Entry cards — Notion style: text aligns with hero via negative margin trick.
   padding = negative margin → net 0 offset from container edge.
   v36: removed border (was `1px solid transparent`) — caused 1px alignment offset
   because border width is part of the box model. No longer needed since hover
   only uses background change, not border-color change. */
.phx-encyc__entry {
  position: relative;
  padding: 14px 16px;
  margin: 2px -16px;
  border: none;
  border-radius: 8px;
  transition: background 0.15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* v38: Hover only on devices with real pointer hover (mouse/trackpad).
   Prevents iOS/Android sticky :hover that lingers after tap. */
@media (hover: hover) {
  .phx-encyc__entry:hover {
    background: rgba(0, 0, 0, 0.032);
  }
}

/* Touch feedback — brief active state for tap, releases instantly on finger lift */
.phx-encyc__entry:active {
  background: rgba(0, 0, 0, 0.05);
}

.phx-encyc__entry h2 {
  margin: 0 0 6px;
  font-size: 1.1875rem;       /* v31: slightly larger for more presence */
  font-weight: 700;           /* v34: standard bold — consistent cross-engine */
  line-height: 1.32;
  color: var(--phx-text);
}

.phx-encyc__entry h2 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.12s;
}

/* v35: no color change on hover — text stays black, background does the work */
.phx-encyc__entry h2 a:hover {
  color: inherit;
}

/* Stretched link — entire card is clickable via invisible overlay */
.phx-encyc__entry h2 a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 8px;
  outline: none !important;
}

/* v38: Nuclear focus reset — defeats Astra's `a:focus { outline: dotted thin }`,
   browser UA focus rings, -webkit-focus-ring-color, and any inherited styles.
   The blue border the user sees is the <a> focus ring persisting during navigation delay.
   We need outline-color: transparent as fallback for browsers that ignore outline: 0. */
.phx-encyc__entry h2 a,
.phx-encyc__entry h2 a:link,
.phx-encyc__entry h2 a:focus,
.phx-encyc__entry h2 a:focus-visible,
.phx-encyc__entry h2 a:active,
.phx-encyc__entry h2 a:visited {
  outline: 0 !important;
  outline-style: none !important;
  outline-width: 0 !important;
  outline-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: none !important;
  color: inherit !important;
  -webkit-tap-highlight-color: transparent;
  -webkit-focus-ring-color: transparent;
}

/* Also reset the ::before overlay's potential outline inheritance */
.phx-encyc__entry h2 a:focus::before,
.phx-encyc__entry h2 a:focus-visible::before,
.phx-encyc__entry h2 a:active::before {
  outline: none !important;
  box-shadow: none !important;
}

/* Prevent accidental text selection on entry cards — stops blue highlight flash on click */
.phx-encyc__entry {
  user-select: none;
  -webkit-user-select: none;
}

/* Reset focus-within on card — prevents hover-like highlight from lingering after click */
.phx-encyc__entry:focus-within {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.phx-encyc__entry p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--phx-text-muted);
}

/* ════════════════════════════════════════════════════════════════
   SINGLE ENTRY — Hero
════════════════════════════════════════════════════════════════ */
.phx-encyc__hero {
  max-width: var(--phx-article-max);
  padding: 28px 0 40px;
  border-bottom: none;   /* clean transition into layout — no divider */
}

/* ── Entry title — editorial, reduced from v18 per Linear/Stripe scale ─── */
.phx-encyc__title {
  margin: 0;
  font-family: var(--phx-font);
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--phx-text);
  max-width: none;
}

/* English subtitle — hidden (alignment conflicts with H1 at current scale) */
.phx-encyc__subtitle {
  display: none !important;
}

/* Meta row */
.phx-encyc__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.phx-encyc__date {
  font-size: 0.8125rem;
  color: var(--phx-text-muted);
  letter-spacing: 0.01em;
}

/* ── Lead paragraph (摘要/lede) ─────────────────────────────── */
/* Slightly larger than body text, with muted color — reads as an intro summary.
   OpenAI/Notion pattern: lede is visible but clearly separate from article body */
.phx-encyc__lede {
  max-width: 44rem;
  margin: 18px 0 0;
  font-family: var(--phx-font);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--phx-text-muted);  /* v34: direct color control instead of opacity */
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT: sidebar + article (stretch so sticky TOC works)
════════════════════════════════════════════════════════════════ */
.phx-encyc__layout {
  display: grid;
  grid-template-columns: var(--phx-toc-w) minmax(0, 1fr);
  gap: 0 var(--phx-gap);
  max-width: calc(var(--phx-toc-w) + var(--phx-gap) + var(--phx-article-max));
  padding-top: 32px;
  align-items: stretch; /* TOC column stretches → sticky works full article */
}

/* ════════════════════════════════════════════════════════════════
   TOC — Notion-style left nav sidebar
════════════════════════════════════════════════════════════════ */
.phx-encyc__toc {
  position: relative;
}

.phx-encyc__toc-inner {
  position: sticky;
  top: 108px;
}

/* "目录" label — bold heading, clicking scrolls to top on desktop */
.phx-encyc__toc-label {
  /* Reset — defeats LatePoint/Elementor global button { background:black; border-radius:30px } */
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  border-radius: 0 !important;
  border: none;
  box-shadow: none !important;
  outline: none !important;
  width: 100%;
  text-align: left;
  cursor: default;
  /* Label — bold heading style, clearly 目录 not a tiny label */
  margin: 0 0 12px;
  padding: 0;
  font-size: 0.9375rem;  /* same scale as TOC items */
  font-weight: 700;      /* 黑体 */
  letter-spacing: 0;
  text-transform: none;
  color: var(--phx-text);
}

/* Comprehensive state resets — defeats Astra/LatePoint button:focus turning white */
.phx-encyc__toc-label:hover,
.phx-encyc__toc-label:focus,
.phx-encyc__toc-label:focus-visible,
.phx-encyc__toc-label:active,
.phx-encyc__toc-label:visited {
  background: transparent !important;
  color: var(--phx-text) !important;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.phx-encyc__toc-label:focus .phx-encyc__toc-label-text,
.phx-encyc__toc-label:active .phx-encyc__toc-label-text {
  color: var(--phx-text) !important;
}

/* TOC list — extend 6px left so hover bg has breathing room before text */
.phx-encyc__toc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0 -6px; /* pull list left by 6px */
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* TOC links — 6px left pad gives breathing room; margin compensates position */
.phx-encyc__toc-item a {
  display: block;
  padding: 5px 6px 5px 6px; /* uniform 6px left+right breathing room */
  border-radius: var(--phx-radius-sm);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--phx-text-muted);
  text-decoration: none;
  transition: background 0.1s, color 0.1s;
}

.phx-encyc__toc-item--h3 a {
  padding-left: 18px; /* 6px base + 12px h3 indent */
  font-size: 0.8125rem;
}

/* Desktop "目录" — subtle hover opacity; focus/active/visited always normal */
@media (min-width: 1080px) {
  .phx-encyc__toc-label:hover {
    background: transparent !important;
    color: var(--phx-text) !important;
    opacity: 0.65;
  }

  .phx-encyc__toc-label:focus,
  .phx-encyc__toc-label:focus-visible,
  .phx-encyc__toc-label:active {
    background: transparent !important;
    color: var(--phx-text) !important;
    opacity: 1;
    outline: none !important;
    box-shadow: none !important;
  }
}

.phx-encyc__toc-item a:hover {
  background: var(--phx-hover-bg);
  color: var(--phx-text);
}

/* Active — Mayo blue text + light blue bg (brand-consistent) */
.phx-encyc__toc-link.is-active {
  background: var(--phx-blue-light) !important;
  color: var(--phx-blue) !important;
  font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════════════
   ARTICLE BODY
════════════════════════════════════════════════════════════════ */
.phx-encyc__article {
  min-width: 0;
  max-width: var(--phx-article-max);
  padding-bottom: 48px;
  align-self: start;
  font-family: var(--phx-font);
}

/* Paragraphs — primary reading unit */
.phx-encyc__article p {
  font-size: 1rem;        /* 16px — compact, Linear/Stripe register */
  line-height: 1.80;
  color: var(--phx-text-body);
  margin: 0 0 1.15em;     /* v28: slightly more generous spacing between paragraphs */
}

/* List items — same size as body text for visual consistency */
.phx-encyc__article li {
  font-size: 1rem;         /* same as body — consistent reading rhythm */
  line-height: 1.75;       /* slightly tighter than paragraph 1.80, still comfortable */
  color: var(--phx-text-body);
}

/* Bullet lists — modern blue markers (Stripe/Linear style, pure CSS) */
.phx-encyc__article ul {
  list-style: none;
  margin: 0.9em 0 1.2em 0;
  padding-left: 1.4em;
  padding-right: 0.4em;
}

.phx-encyc__article ul > li {
  position: relative;
}

.phx-encyc__article ul > li::before {
  content: "";
  position: absolute;
  left: -1.05em;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--phx-blue);
  opacity: 0.32;
}

/* Nested ul — smaller dot, indented */
.phx-encyc__article ul ul > li::before {
  width: 4px;
  height: 4px;
  opacity: 0.20;
  border-radius: 1px; /* subtle square for nested */
}

.phx-encyc__article ol:not(.phx-encyc__references) {
  margin: 0.9em 0 1.2em 0;
  padding-left: 1.4em;
  padding-right: 0.4em;
}

/* Ordered list numbers — Mayo blue, subdued */
.phx-encyc__article ol:not(.phx-encyc__references) > li::marker {
  color: rgba(0, 87, 184, 0.38);
  font-weight: 600;
  font-size: 0.9em;
}

.phx-encyc__article li + li {
  margin-top: 0.28em;
}

/* Article links — Mayo blue */
.phx-encyc__article a {
  color: var(--phx-link);
  text-underline-offset: 0.18em;
  text-decoration-color: var(--phx-blue-border);
  transition: color 0.12s, text-decoration-color 0.12s;
}

.phx-encyc__article a:hover {
  color: var(--phx-link-hover);
  text-decoration-color: var(--phx-link-hover);
}

/* ── Section headings ──────────────────────────────────────────── */
.phx-encyc__heading {
  scroll-margin-top: 20px;
}

/* H2 — clear section head with thin top separator (Stripe/Linear pattern) */
.phx-encyc__heading--h2 {
  margin: 3em 0 0.65em;
  padding-top: 1.6em;
  padding-left: 0;
  border-top: 1px solid var(--phx-border-light);
  border-left: none;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.26;
  letter-spacing: -0.016em;
  font-weight: 740;
  color: var(--phx-text);
}

/* First H2 — no separator, tighter to hero/TOC */
.phx-encyc__article > .phx-encyc__heading--h2:first-child,
.phx-encyc__article > *:first-child .phx-encyc__heading--h2,
.phx-encyc__heading--h2:first-of-type {
  margin-top: 1.2em;
  padding-top: 0;
  border-top: none;
}

.phx-encyc__heading--h3 {
  margin: 1.8em 0 0.45em;
  font-size: clamp(1.0rem, 1.3vw, 1.125rem);
  line-height: 1.38;
  font-weight: 700;
  color: var(--phx-text);
}

/* ── Footnote references — Stanford [N] bracket style ────────────── */
.phx-encyc__ref-callout {
  margin-left: 0.1em;
  vertical-align: 0.28em;     /* less aggressively raised than 'super' */
  font-size: 0.72em;          /* v31: smaller to reduce reading flow interruption */
  line-height: 1;
  font-weight: 400;
  color: var(--phx-text-muted);  /* v31: muted gray instead of blue — less distracting */
  text-decoration: none;
  transition: color 0.12s;
}

.phx-encyc__ref-callout:hover {
  color: var(--phx-link);     /* blue on hover — reveals interactivity */
}

.phx-encyc__ref-callout::before { content: '['; }
.phx-encyc__ref-callout::after  { content: ']'; }

/* Reference section heading — styled as minor section */
.phx-encyc__heading--h2[id*="参考来源"],
.phx-encyc__heading--h2[id*="reference"],
.phx-encyc__heading--h2[id*="can-kao"] {
  font-size: 1.0625rem;
  font-weight: 650;
  color: var(--phx-text-muted);
  letter-spacing: 0;
}

/* Reference list */
.phx-encyc__references {
  list-style: none;
  margin: 1em 0 0;
  padding: 0;
}

.phx-encyc__reference-item {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: start;
  padding: 12px 0;
  font-size: 0.9rem;
  line-height: 1.68;
  color: var(--phx-text-muted);
  scroll-margin-top: 20px;
}

.phx-encyc__reference-index {
  color: var(--phx-text-body);
  font-weight: 700;
  font-size: 0.8125rem;
}

/* Reference links — Mayo blue */
.phx-encyc__ref-link,
.phx-encyc__reference-url {
  color: var(--phx-link);
  text-underline-offset: 0.15em;
  text-decoration-color: var(--phx-blue-border);
}

.phx-encyc__ref-back {
  color: var(--phx-text-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.12s;
}

.phx-encyc__ref-back:hover {
  color: var(--phx-text);
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP REFINEMENTS  ≥ 1080px
════════════════════════════════════════════════════════════════ */
@media (min-width: 1080px) {
  .phx-encyc__hero {
    margin-left: calc(var(--phx-toc-w) + var(--phx-gap));
  }

  .phx-encyc__heading,
  .phx-encyc__reference-item {
    scroll-margin-top: 108px;
  }

  /* "目录" is clickable on desktop — click scrolls to page top (JS handles scroll) */
  .phx-encyc__toc-label {
    pointer-events: auto;
    cursor: pointer;
  }
}

/* ════════════════════════════════════════════════════════════════
   TABLET  769px – 1079px
════════════════════════════════════════════════════════════════ */
@media (max-width: 1079px) {
  .phx-encyc__hero {
    border-bottom: none;
    padding-bottom: 24px;
  }

  .phx-encyc__layout {
    display: block;
    padding-top: 0;
    max-width: var(--phx-article-max);
  }

  .phx-encyc__toc {
    margin-bottom: 24px;
  }

  /* TOC: flat editorial disclosure — single top border only */
  .phx-encyc__toc-inner {
    position: static;
    border: none;
    border-top: 1px solid var(--phx-border);
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  /* Toggle label — restore interactivity (mobile: this IS the toggle button) */
  .phx-encyc__toc-label {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 12px 0;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--phx-text) !important;
    border: none !important;  /* NO border on label — prevents double line */
    text-transform: none;
  }

  /* Chevron icon — SVG arrow, larger and more visible than "›" */
  .phx-encyc__toc-label::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M6 8l4 4 4-4' stroke='%23767676' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
  }

  .phx-encyc__toc-inner.is-open .phx-encyc__toc-label::after {
    transform: rotate(180deg);
  }

  /* TOC list — reset desktop -6px margin; single column */
  .phx-encyc__toc-list {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2px 0;
    margin-left: 0;  /* reset desktop -6px */
    padding: 4px 0 8px;
    border-top: 1px solid var(--phx-border-light);  /* subtle separator between label and items */
  }

  .phx-encyc__toc-list li {
    width: 50%;
  }

  .phx-encyc__toc-inner.is-open .phx-encyc__toc-list {
    display: flex;
  }

  .phx-encyc__toc-item a {
    font-size: 0.875rem;
    padding: 6px 8px;
    margin: 0;  /* reset any inherited margins */
    border-radius: var(--phx-radius-sm);
  }

  .phx-encyc__toc-item--h3 a {
    padding-left: 14px;
    font-size: 0.8125rem;
  }

  .phx-encyc__article {
    padding-bottom: 40px;
  }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE  ≤ 640px  — compact, authoritative, 苹方 reads beautifully
════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .phx-encyc__shell {
    width: calc(100% - 44px);
    padding: 24px 0 52px;
    overflow-x: hidden;
  }

  /* Hero — no bottom border; TOC inner top border provides the single separator */
  .phx-encyc__hero {
    padding-bottom: 22px;
    border-bottom: none;
  }

  .phx-encyc__eyebrow {
    font-size: 0.875rem;
    font-weight: 620;
    margin-bottom: 14px;
  }

  /* v36: H1 was 42.9px at 390px (11vw) — too heavy for mobile.
     Now ~32px at 390px (8.2vw), closer to Mayo Clinic mobile scale. */
  .phx-encyc__title {
    font-size: clamp(1.8rem, 8.2vw, 2.4rem);
    letter-spacing: -0.02em;
    font-weight: 800;
  }

  .phx-encyc__subtitle {
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    margin-top: 8px;
  }

  .phx-encyc__lede {
    font-size: 0.9375rem;
    line-height: 1.68;
    margin-top: 14px;
    /* Inherit body color + opacity from base rule — no override */
  }

  /* v36: archive title scaled down proportionally with article H1 */
  .phx-encyc__archive-title {
    font-size: clamp(1.75rem, 8vw, 2.4rem);
    letter-spacing: -0.015em;
  }

  .phx-encyc__archive-intro {
    font-size: 0.9375rem;
    line-height: 1.68;
  }

  .phx-encyc__meta {
    margin-top: 12px;
  }

  /* Layout */
  .phx-encyc__layout {
    padding-top: 0;
  }

  /* TOC — single border from toc-inner top; no hero bottom border on mobile */
  .phx-encyc__toc-inner {
    border-top: 1px solid var(--phx-border);
    border-bottom: none;
  }

  .phx-encyc__toc-label {
    padding: 14px 0;
    font-size: 1.0625rem; /* slightly larger than TOC items on mobile */
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--phx-text) !important;
    border: none !important;
  }

  /* TOC list — single-column on mobile, reset desktop margin */
  .phx-encyc__toc-list {
    margin-left: 0;    /* reset desktop -6px */
    border-top: none;  /* override tablet border-top on list */
  }

  .phx-encyc__toc-list li {
    width: 100%;
  }

  .phx-encyc__toc-item a {
    font-size: 1rem;
    padding: 10px 10px 10px 10px;
    margin: 1px 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    border-radius: 6px;
  }

  .phx-encyc__toc-item--h3 a {
    font-size: 0.9375rem;
    padding-left: 24px;
  }

  /* Article body — compact, readable Chinese */
  .phx-encyc__article {
    padding-bottom: 48px;
  }

  /* Mobile paragraphs — tighter than desktop, still comfortable */
  .phx-encyc__article p {
    font-size: 1.0625rem;
    line-height: 1.68;   /* v28: slightly more breathing room */
    margin: 0 0 1.0em;   /* v28: more generous mobile paragraph spacing */
  }

  /* Mobile list items — same size as body for consistency */
  .phx-encyc__article li {
    font-size: 1.0625rem;  /* match mobile body paragraph size */
    line-height: 1.60;     /* slightly tighter than paragraph 1.65 */
    padding-right: 0.4em;  /* right inset for visual separation */
  }

  .phx-encyc__article li + li {
    margin-top: 0.18em;    /* tight list rhythm on mobile */
  }

  .phx-encyc__article ul {
    padding-left: 1.3em;   /* slightly less indent on narrow screen */
  }

  .phx-encyc__article ol:not(.phx-encyc__references) {
    padding-left: 1.5em;
  }

  .phx-encyc__article ul > li::before {
    top: 0.56em;  /* adjust for mobile line-height */
  }

  /* H2 — separator + generous spacing on mobile */
  .phx-encyc__heading--h2 {
    margin: 2.4em 0 0.5em;
    font-size: 1.15rem;
    padding-top: 1.4em;
    padding-left: 0;
    border-top: 1px solid var(--phx-border-light);
    border-left: none;
  }

  /* First H2 — tight under TOC, no separator */
  .phx-encyc__heading--h2:first-of-type {
    margin-top: 1.0em;
    padding-top: 0;
    border-top: none;
  }

  .phx-encyc__heading--h3 {
    margin: 1.6em 0 0.42em;
    font-size: 1.0625rem;
    font-weight: 700;
  }

  /* Search — keep unified on mobile, full width */
  .phx-encyc__search {
    max-width: none;
  }

  .phx-encyc__search input {
    height: 48px;
    font-size: 1rem;
  }

  /* Entry cards — v35: same negative margin trick on mobile for text alignment */
  .phx-encyc__entry {
    padding: 12px 14px;
    margin: 2px -14px;
    border-radius: 8px;
  }

  /* v33: arrow removed globally, no mobile override needed */

  /* References */
  .phx-encyc__reference-item {
    grid-template-columns: 1.4rem minmax(0, 1fr);
    font-size: 0.875rem;
    line-height: 1.65;
  }

  .phx-encyc__ref-back {
    grid-column: 2;
  }

  /* URLs must wrap — prevent horizontal scroll */
  .phx-encyc__reference-url,
  .phx-encyc__ref-link {
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* Alphabet */
  .phx-encyc__alphabet a,
  .phx-encyc__alphabet-disabled {
    min-width: 34px;
    height: 34px;
    font-size: 0.8125rem;
  }
}

/* ════════════════════════════════════════════════════════════════
   SMALL MOBILE  ≤ 400px
════════════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .phx-encyc__shell {
    width: calc(100% - 24px);
  }

  .phx-encyc__title {
    font-size: clamp(1.6rem, 7.5vw, 2rem);  /* v37: proportional scale-down for small screens */
  }
}

/* ════════════════════════════════════════════════════════════════
   MU PLUGIN — Dual-card support section
   No <hr> divider — cards self-separate via margin + background contrast
════════════════════════════════════════════════════════════════ */
.phx-encyc__mu-divider {
  display: none;  /* legacy: hidden if still in markup */
}

.phx-encyc__mu-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 56px;  /* generous whitespace separates from article body */
}

.phx-encyc__mu-card {
  padding: 0;
}



.phx-encyc__mu-card-title {
  margin: 0 0 14px;
  font-size: 1.0625rem;
  font-weight: 720;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--phx-text);
  border: none;
  padding: 0;
}

.phx-encyc__mu-card-body {
  position: relative;
  padding: 0 0 0 15px;
}

.phx-encyc__mu-card-body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  height: calc(100% - 20px);
  width: 2.5px;
  border-radius: 1.5px;
}

.phx-encyc__mu-card--care .phx-encyc__mu-card-body::before {
  background: #b3c0fb;
}

.phx-encyc__mu-card--urgent .phx-encyc__mu-card-body::before {
  background: #f0b8b0;
}

.phx-encyc__mu-card p {
  margin: 0 0 0.85em;
  font-size: 0.9375rem;
  line-height: 1.72;
  color: var(--phx-text-body);
}

.phx-encyc__mu-card p:last-child {
  margin-bottom: 0;
}

.phx-encyc__mu-list {
  list-style: none;
  margin: 0.6em 0 0.85em;
  padding: 0 0 0 1.2em;
}

.phx-encyc__mu-list li {
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.68;
  color: var(--phx-text-body);
  padding: 2px 0;
}

.phx-encyc__mu-list li::before {
  content: "";
  position: absolute;
  left: -0.95em;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #f0b8b0;
  opacity: 0.45;
}

/* MU → References transition: light separator + generous spacing */
.phx-encyc__references-block {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--phx-border-light);
}

/* MU cards — tablet: stack vertically */
@media (max-width: 1079px) {
  .phx-encyc__mu-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* MU cards — mobile refinements */
@media (max-width: 640px) {
  .phx-encyc__mu-grid {
    margin-top: 44px;
    gap: 14px;
  }

  .phx-encyc__mu-card {
    padding: 0;
  }

  .phx-encyc__mu-card-title {
    font-size: 1.0625rem;
  }

  .phx-encyc__mu-card p {
    font-size: 1rem;
    line-height: 1.68;
  }

  .phx-encyc__mu-list li {
    font-size: 1rem;
    line-height: 1.65;
  }

  .phx-encyc__references-block {
    margin-top: 40px;
    padding-top: 28px;
  }
}

/* ════════════════════════════════════════════════════════════════
   COLLAPSIBLE REFERENCES
════════════════════════════════════════════════════════════════ */
.phx-ref-hidden {
  display: none !important;
}

.phx-encyc__ref-toggle {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--phx-border);
  border-radius: var(--phx-radius);
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--phx-text-muted);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.phx-encyc__ref-toggle:hover {
  background: var(--phx-hover-bg);
  color: var(--phx-text);
  border-color: rgba(0, 0, 0, 0.18);
}

/* ════════════════════════════════════════════════════════════════
   CONSULTATION CTA — Mayo Medical Blue
════════════════════════════════════════════════════════════════ */
.phx-encyc__consult {
  margin-top: 52px;
  padding: 28px 32px;
  border: 1px solid var(--phx-blue-border);
  border-radius: var(--phx-radius);
  background: var(--phx-blue-light);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.phx-encyc__consult-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--phx-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 14H9V8h2v8zm4 0h-2V8h2v8z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: center;
}

.phx-encyc__consult-body {
  flex: 1;
  min-width: 0;
}

.phx-encyc__consult-title {
  margin: 0 0 7px;
  font-size: 1.0625rem;
  font-weight: 720;
  color: var(--phx-text);
  line-height: 1.3;
}

.phx-encyc__consult-text {
  margin: 0 0 18px;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--phx-text-body);
}

.phx-encyc__consult-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--phx-blue);
  color: #ffffff;
  font-family: var(--phx-font);
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
}

.phx-encyc__consult-btn:hover {
  opacity: 0.85;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 640px) {
  .phx-encyc__consult {
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }
}

/* ════════════════════════════════════════════════════════════════
   CALLOUT BOX — Mayo blue left-border editorial card
════════════════════════════════════════════════════════════════ */
.phx-encyc__callout {
  margin: 1.8em 0;
  padding: 18px 22px;
  border-left: 3px solid var(--phx-blue);
  background: var(--phx-blue-light);
  border-radius: 0 var(--phx-radius-sm) var(--phx-radius-sm) 0;
}

.phx-encyc__callout p {
  margin: 0;
  font-size: 0.9875rem;
  line-height: 1.70;
  color: var(--phx-text-body);
}

.phx-encyc__callout p + p {
  margin-top: 0.7em;
}

/* ════════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════════ */
@media print {
  body.single-phx_psy_encyc .site-header,
  .phx-encyc__toc,
  .phx-encyc__consult,
  .phx-encyc__mu-divider,
  .phx-encyc__mu-grid {
    display: none !important;
  }

  .phx-encyc__layout {
    display: block !important;
  }

  .phx-encyc__article {
    max-width: 100% !important;
  }

  @media (min-width: 1080px) {
    .phx-encyc__hero {
      margin-left: 0 !important;
    }
  }

  .phx-encyc__article a::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #666;
  }

  .phx-encyc__reference-item {
    break-inside: avoid;
  }
}