/* ===========================================================
   layer.css — Layer 主面板 + sub_theme 卡片 + sub_category 行
   =========================================================== */

/* ---------- Layer 面板容器 ---------- */
.layer-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.layer {
  border-radius: var(--r-layer);
  background:
    linear-gradient(180deg, var(--ink-soft), var(--ink-softer)) padding-box,
    linear-gradient(135deg,
      var(--glass-tint-1) 0%,
      var(--glass-tint-2) 35%,
      var(--layer-glow, rgba(108, 92, 231, 0.2)) 100%) border-box;
  border: 1px solid transparent;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-glass-md);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  transition:
    box-shadow var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

/* 顶部高光 */
.layer::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    var(--glass-highlight) 0%,
    var(--glass-highlight-fade) 25%);
  pointer-events: none;
  z-index: 1;
}

.layer:hover:not(.is-expanded) {
  box-shadow:
    var(--shadow-glass-lg),
    0 0 0 1px var(--layer-glow);
}

.layer.is-expanded {
  box-shadow:
    var(--shadow-glass-lg),
    0 0 0 1px color-mix(in srgb, var(--layer-color) 30%, transparent);
}

/* ---------- Layer 顶部色条装饰 ---------- */
.layer__accent-bar {
  position: absolute;
  top: 28px;
  left: 0;
  width: 8px;
  height: 40px;
  background: var(--layer-grad);
  border-radius: 0 4px 4px 0;
  box-shadow:
    0 4px 12px -2px color-mix(in srgb, var(--layer-color) 50%, transparent),
    inset 0 1px 0 0 var(--glass-inner-line);
  z-index: 2;
}

/* ---------- Layer 收起状态右下角图标 overlay ---------- */
.layer__icon {
  position: absolute;
  right: 28px;
  bottom: 14px;
  width: 140px;
  height: 140px;
  color: var(--layer-color);
  opacity: 0.42;
  z-index: 1;
  pointer-events: none;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transform-origin: bottom right;
  /* 防止图标溢出 layer 圆角 */
  -webkit-mask-image: linear-gradient(135deg, transparent 0%, #000 22%);
  mask-image: linear-gradient(135deg, transparent 0%, #000 22%);
}
.layer__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.layer:hover:not(.is-expanded) .layer__icon {
  opacity: 0.62;
}
.layer.is-expanded .layer__icon {
  opacity: 0;
  transform: scale(0.82);
}

/* ---------- Layer Header（点击展开区） ---------- */
.layer__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-8) var(--space-6) var(--space-10);
  cursor: pointer;
  user-select: none;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  /* 收起状态下高度统一，避免描述/chips 行数不同导致的参差；
     展开后由 body 内容自由撑开 */
  min-height: 200px;
}

.layer__num {
  font-family: var(--font-display);
  font-size: var(--fs-layer-num);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text-quaternary);
  background: var(--layer-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.85;
  flex-shrink: 0;
  min-width: 80px;
  transition: opacity var(--dur-base) var(--ease-out);
}

.layer.is-expanded .layer__num {
  opacity: 1;
}

.layer__heading {
  flex: 1;
  min-width: 0;
  /* 让 chips 推到底部，所有 layer 收起状态视觉对齐 */
  display: flex;
  flex-direction: column;
}

.layer__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.layer__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-heading);
}

.layer__title-en {
  font-size: var(--fs-body);
  color: var(--text-tertiary);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
}

.layer__desc {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  line-height: var(--lh-body);
  max-width: 72ch;
  margin-bottom: var(--space-4);
  /* 收起状态下：把 chips 推到底部，让所有 layer 高度对齐 */
}

.layer:not(.is-expanded) .layer__desc {
  margin-bottom: auto;
}

.layer__subtheme-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.layer__subtheme-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--glass-tint-3);
  border: 1px solid var(--border-soft);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: all var(--dur-fast) var(--ease-out);
}

.layer__subtheme-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--layer-color);
  box-shadow: 0 0 4px var(--layer-color);
}

/* ---------- 展开指示器 ---------- */
.layer__chevron {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-tint-3);
  border: 1px solid var(--border-soft);
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: all var(--dur-base) var(--ease-out);
}
.layer__chevron svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.5;
}

.layer.is-expanded .layer__chevron {
  background: var(--layer-grad);
  color: #fff;
  transform: rotate(180deg);
  border-color: transparent;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--layer-color) 40%, transparent);
}

/* ---------- Layer 展开内容 ---------- */
.layer__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease-out);
  position: relative;
  z-index: 2;
}

.layer.is-expanded .layer__body {
  max-height: 8000px;
}

.layer__body-inner {
  padding: 0 var(--space-8) var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ---------- Sub-theme 卡片 ---------- */
.subtheme {
  border-radius: var(--r-card-lg);
  background:
    linear-gradient(180deg, var(--ink-softer), var(--ink-softer)) padding-box,
    linear-gradient(135deg,
      var(--glass-tint-2) 0%,
      var(--glass-tint-3) 50%,
      var(--glass-tint-4) 100%) border-box;
  border: 1px solid transparent;
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow-glass-sm);
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.subtheme::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--glass-tint-3) 0%, transparent 20%);
  pointer-events: none;
  z-index: 1;
}

.subtheme__header {
  padding: var(--space-5) var(--space-6) var(--space-4);
  position: relative;
  z-index: 2;
}

.subtheme__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.subtheme__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}

.subtheme__title-en {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  font-weight: var(--fw-regular);
}

.subtheme__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.subtheme__tags-label {
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  width: 100%;
  margin-bottom: -2px;
}

/* ---------- Sub-category 行 ---------- */
.subcategories {
  position: relative;
  z-index: 2;
  padding: 0 var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
}

.subcategory {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--divider);
}
.subcategory:first-child {
  border-top: none;
}

.subcategory__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.subcategory__name {
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.subcategory__name-en {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  font-weight: var(--fw-regular);
}

.subcategory__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---------- Layer anchor nav（左侧行号导航，桌面端可选） ---------- */
.layer-nav {
  position: fixed;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-back-top);
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-elev-3);
  border: 1px solid var(--border-soft);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  box-shadow: var(--shadow-glass-sm);
}

@media (min-width: 1440px) {
  .layer-nav { display: flex; }
}

.layer-nav__item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  background: transparent;
  position: relative;
}

.layer-nav__item:hover {
  color: var(--text-primary);
  background: var(--glass-tint-2);
}

.layer-nav__item.is-active {
  color: #fff;
  background: var(--layer-color);
  box-shadow: 0 0 8px var(--layer-color);
}

.layer-nav__tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 10px;
  border-radius: var(--r-button);
  background: rgba(var(--shadow-rgb), 0.92);
  color: #fff;
  font-size: 11px;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.layer-nav__item:hover .layer-nav__tooltip { opacity: 1; }