/* 导航项 / 海报共用：优惠码 · 官方邀请码（码值与描述同一胶囊） */

.article-nav-code {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 12px;
  max-width: 100%;
  pointer-events: auto;
}

.site-navigation-item-box .article-nav-code {
  /* 为底部绝对定位的 tags 留空（旧版内嵌码）；抽屉版不再走这里 */
  margin: 0 0 34px;
}

.site-navigation-item .article-nav-code--drawer {
  margin-left: 8px;
  margin-right: 8px;
  margin-bottom: 0;
}

.article-nav-poster .article-nav-code {
  /* 旧版内嵌码；海报现已改挂载抽屉 */
  width: var(--poster-image-width, 100%);
  max-width: 100%;
  margin: 12px 0 0;
  box-sizing: border-box;
}

.article-nav-poster-wrap .article-nav-code--drawer {
  /* 宽度约束见 article-nav-poster.css；此处只清掉通用 drawer 的横向 margin 冲突 */
  box-sizing: border-box;
}

.article-nav-poster .article-nav-code + .article-nav-poster__footer {
  margin-top: 10px;
}

.article-nav-poster-wrap .article-nav-code--drawer + .article-nav-poster__footer,
.article-nav-poster-wrap.has-code-drawer .article-nav-poster__footer {
  margin-top: 12px;
}

.article-nav-code__capsule {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid var(--color-primary, #f08347);
  border-radius: 8px;
  background: rgba(240, 131, 71, 0.08);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.article-nav-poster .article-nav-code__capsule {
  width: 100%;
}

.article-nav-code__capsule:hover,
.article-nav-code__capsule:focus-within {
  background: rgba(240, 131, 71, 0.16);
}

.article-nav-code__capsule.is-copied {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.1);
}

.article-nav-code__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  min-height: 32px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #0f172a;
  cursor: pointer;
  line-height: 1.2;
  text-align: left;
}

.article-nav-code__chip:hover,
.article-nav-code__chip:focus-visible {
  outline: none;
}

.article-nav-code__type {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary, #f08347);
  letter-spacing: 0.02em;
}

.article-nav-code__capsule.is-copied .article-nav-code__type {
  color: #16a34a;
}

.article-nav-code__value {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: #0f172a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-nav-code__hint {
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: #94a3b8;
  white-space: nowrap;
}

.article-nav-code__capsule:hover .article-nav-code__hint,
.article-nav-code__capsule:focus-within .article-nav-code__hint {
  color: var(--color-primary, #f08347);
}

.article-nav-code__capsule.is-copied .article-nav-code__hint {
  color: #16a34a;
}

.article-nav-code__value.is-feedback {
  color: #16a34a;
}

/* 有描述：描述收在胶囊下半区，与码值用浅分割线关联 */
.article-nav-code__capsule.has-note .article-nav-code__chip {
  padding-bottom: 5px;
}

.article-nav-code__note {
  margin: 0 !important;
  padding: 5px 10px 8px;
  max-width: 100%;
  border-top: 1px solid rgba(240, 131, 71, 0.28);
  color: #64748b;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  word-break: break-word;
  cursor: pointer;
}

.article-nav-code__capsule.is-copied .article-nav-code__note {
  border-top-color: rgba(22, 163, 74, 0.28);
  color: #4b5563;
}

.site-navigation-item-box .content:has(.article-nav-code) .description {
  margin-bottom: 10px;
}

/* —— 导航项挂载抽屉：从卡片底边「伸出」一块板 —— */
.article-nav-code--drawer {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: none;
  /* 仅略窄于主卡片，避免缩成「另一块小条」 */
  margin: -10px 8px 0;
  padding: 0;
  pointer-events: auto;
}

.article-nav-code__capsule--drawer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 14px 14px 10px;
  gap: 6px 8px;
  border-radius: 0 0 10px 10px;
  /* 覆盖基础胶囊的粗主色描边，改极淡边，才像附属板而不是独立框 */
  border: 1px solid color-mix(in srgb, var(--color-text, #0f172a) 8%, transparent);
  border-top: 0;
  background: color-mix(in srgb, var(--color-primary, #f08347) 7%, #fff);
  box-shadow: 0 6px 14px color-mix(in srgb, #000 6%, transparent);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* 整体 hover（卡片或抽屉）：抽屉铺满主题色 */
.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer,
.site-navigation-item.has-code-drawer:focus-within .article-nav-code__capsule--drawer,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer,
.article-nav-poster-wrap.has-code-drawer:focus-within .article-nav-code__capsule--drawer {
  background: var(--color-primary, #f08347);
  border-color: transparent;
  border-top-color: transparent;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary, #f08347) 35%, transparent);
}

.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__type,
.site-navigation-item.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__type,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__type,
.article-nav-poster-wrap.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__type,
.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__value,
.site-navigation-item.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__value,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__value,
.article-nav-poster-wrap.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__value {
  color: #fff;
}

.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__status,
.site-navigation-item.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__status,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__status,
.article-nav-poster-wrap.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__status {
  color: rgba(255, 255, 255, 0.92);
}

.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__note,
.site-navigation-item.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__note,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__note,
.article-nav-poster-wrap.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__note {
  color: rgba(255, 255, 255, 0.9);
  border-top-color: rgba(255, 255, 255, 0.28);
}

.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__status.is-feedback,
.site-navigation-item.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__status.is-feedback,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer .article-nav-code__status.is-feedback,
.article-nav-poster-wrap.has-code-drawer:focus-within .article-nav-code__capsule--drawer .article-nav-code__status.is-feedback,
.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer.is-copied .article-nav-code__status,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer.is-copied .article-nav-code__status {
  color: #ecfdf5;
}

/* 第一行：邀请码完整展示 + 点击复制；放不下时描述自动换到第二行 */
.article-nav-code__capsule--drawer .article-nav-code__chip {
  order: 1;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  align-self: center;
  padding: 2px 8px 2px 2px;
  gap: 8px;
}

.article-nav-code__capsule--drawer.has-note .article-nav-code__chip {
  padding-bottom: 2px;
}

.article-nav-code__capsule--drawer .article-nav-code__value {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.article-nav-code__capsule--drawer .article-nav-code__status {
  order: 2;
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
  padding-left: 0;
  border-left: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #94a3b8;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s ease;
}

.article-nav-code__capsule--drawer .article-nav-code__note {
  order: 3;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 8px 0 2px;
  border-top: 1px solid color-mix(in srgb, var(--color-text, #0f172a) 10%, transparent);
  border-left: 0;
  align-self: stretch;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.article-nav-code__capsule--drawer .article-nav-code__status.is-feedback,
.article-nav-code__capsule--drawer.is-copied .article-nav-code__status {
  color: #16a34a;
}

.article-nav-code__hint.is-feedback {
  color: #16a34a;
}

.article-nav-code__capsule--drawer.is-copied {
  border-color: color-mix(in srgb, #16a34a 35%, transparent);
  border-top-color: transparent;
  background: color-mix(in srgb, #16a34a 8%, #fff);
}

.site-navigation-item.has-code-drawer:hover .article-nav-code__capsule--drawer.is-copied,
.article-nav-poster-wrap.has-code-drawer:hover .article-nav-code__capsule--drawer.is-copied {
  background: color-mix(in srgb, #16a34a 82%, #000);
  border-color: transparent;
}

.article-nav-code__capsule--drawer.is-copied .article-nav-code__note {
  border-top-color: color-mix(in srgb, #16a34a 28%, transparent);
  color: #4b5563;
}

@media screen and (max-width: 768px) {
  .article-nav-code--drawer {
    margin: -8px 6px 0;
  }

  .article-nav-code__capsule--drawer {
    padding: 14px 12px 10px;
  }
}