/* 导航的配色沿用全站主题，状态只由现有路由、ARIA 和控件标记决定。
   使用现有视觉层：未分层的 important 无法覆盖该层中的历史控件规则。 */
@layer debater-visual-system {
  :root {
    --np-surface: var(--dv-surface, #211c18);
    --np-raised: var(--dv-raised, #2c251f);
    --np-text: var(--dv-text, #f6f1e8);
    --np-muted: var(--dv-secondary, #c9beb0);
    --np-line: var(--dv-line, #574a3e);
    --np-accent: var(--dv-accent, #ef8475);
    --np-active: var(--dv-active, #382722);
    --np-action: var(--dv-action, #b63c35);
    --np-on-action: var(--dv-on-action, #fff);
    --np-shadow: 0 14px 38px color-mix(in srgb, var(--np-text) 12%, transparent);
  }
  :root:is(.light-mode, [data-theme='light'], [data-theme='paper'], [data-ft-mode='paper']) {
    --np-surface: var(--dv-surface, #fffdf8);
    --np-raised: var(--dv-raised, #f2ebdf);
    --np-text: var(--dv-text, #302820);
    --np-muted: var(--dv-secondary, #675b4d);
    --np-line: var(--dv-line, #d8cabb);
    --np-accent: var(--dv-accent, #a92f31);
    --np-active: var(--dv-active, #f6e5de);
  }

  /* 主导航：保持既有桌面/手机断点和可滚动入口，不改变入口显隐。 */
  html[data-debater-visual='unified'] body :is(nav.debater-global-nav, nav[data-navigation-native], .draw-unified-header) {
    background: color-mix(in srgb, var(--np-surface) 96%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--np-line) 75%, transparent) !important;
    box-shadow: 0 3px 18px color-mix(in srgb, var(--np-text) 4%, transparent) !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-navigation .managed-desktop-group, .navigation-desktop-group) {
    gap: 10px !important;
    margin-inline: 20px !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-main-links, .navigation-main-links) {
    gap: 3px !important;
    padding: 3px !important;
    scrollbar-width: thin;
    scrollbar-color: var(--np-line) transparent;
  }
  html[data-debater-visual='unified'] body :is(.managed-nav-link, .global-nav-link, .draw-nav-link) {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 44px !important;
    padding: 10px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: var(--np-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-nav-link, .global-nav-link, .draw-nav-link):is(.active, [aria-current='page']) {
    color: var(--np-accent) !important;
    background: var(--np-active) !important;
    border-color: color-mix(in srgb, var(--np-accent) 24%, var(--np-surface)) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--np-surface) 65%, transparent) !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-nav-link, .global-nav-link, .draw-nav-link):is(.active, [aria-current='page'])::after {
    content: '';
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 3px;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--np-accent);
    transform: translateX(-50%);
  }
  html[data-debater-visual='unified'] body :is(.global-brand-link, .draw-brand) {
    border-radius: 10px;
    text-decoration: none !important;
  }
  html[data-debater-visual='unified'] body .global-brand-link > div:first-child {
    border-radius: 9px !important;
    box-shadow: inset 0 0 0 1px #ffffff24, 0 3px 8px color-mix(in srgb, var(--np-action) 18%, transparent);
  }

  /* 辅助入口：工具、主题、通知、菜单与账号动作保持同一触控尺度。 */
  html[data-debater-visual='unified'] body :is(.debater-global-nav, [data-navigation-native], .draw-global-nav)
  :is(.global-nav-control, .dn-launcher, .mobile-menu-toggle, .draw-nav-control, .draw-mobile-toggle, a[href*='/login']) {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 9px 12px !important;
    border: 1px solid color-mix(in srgb, var(--np-line) 80%, transparent) !important;
    border-radius: 11px !important;
    background: color-mix(in srgb, var(--np-surface) 82%, var(--np-raised)) !important;
    color: var(--np-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--np-text) 4%, transparent) !important;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease !important;
  }
  html[data-debater-visual='unified'] body :is(.debater-global-nav, [data-navigation-native]) :is(.dn-launcher, .mobile-menu-toggle) {
    width: 44px !important;
    height: 44px !important;
    padding: 11px !important;
  }
  html[data-debater-visual='unified'] body :is(.mobile-menu-toggle, .dn-launcher) > :is(ng-icon, svg) {
    width: 20px !important;
    height: 20px !important;
  }
  html[data-debater-visual='unified'] body :is(.debater-global-nav, [data-navigation-native]) [aria-expanded='true'] {
    border-color: color-mix(in srgb, var(--np-accent) 45%, var(--np-line)) !important;
    color: var(--np-accent) !important;
    background: var(--np-active) !important;
  }
  html[data-debater-visual='unified'] body :is(.debater-global-nav, [data-navigation-native]) a[href*='/login'] {
    background: var(--np-action) !important;
    color: var(--np-on-action) !important;
    border-color: var(--np-action) !important;
  }

  /* 下拉面板与每一行都复用导航状态，避免主题按钮的内联颜色盖过日夜模式。 */
  html[data-debater-visual='unified'] body :is(.global-menu-popover, #site-navigation-tools, .draw-tools-list, .theme-picker-container > div,
  .masthead .tools-menu-container > div.absolute) {
    padding: 8px !important;
    border: 1px solid var(--np-line) !important;
    border-radius: 16px !important;
    background: var(--np-surface) !important;
    box-shadow: var(--np-shadow) !important;
  }
  html[data-debater-visual='unified'] body :is(.tools-menu-container > [role='menu'], #site-navigation-tools, .draw-tools-list) {
    width: 232px !important;
    max-width: calc(100vw - 32px);
  }
  html[data-debater-visual='unified'] body :is(.managed-menu-link, .global-menu-item, .draw-menu-link, #site-navigation-tools > a,
  .theme-picker-container [role='menuitemradio'], .theme-picker-container > div > button) {
    min-height: 44px !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--np-text) !important;
    background: transparent !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-menu-link, .global-menu-item, .draw-menu-link,
  .theme-picker-container [role='menuitemradio']):is(.active, [aria-current='page'], [aria-checked='true']) {
    background: var(--np-active) !important;
    color: var(--np-accent) !important;
    border-color: color-mix(in srgb, var(--np-accent) 22%, transparent) !important;
    font-weight: 600 !important;
  }

  /* 手机入口用两列缩短菜单，主题与账号仍保留在各自的操作区。 */
  html[data-debater-visual='unified'] body :is(#global-mobile-navigation, [aria-label='移动端菜单'], .draw-mobile-menu) {
    padding: 14px 16px 18px !important;
    background: var(--np-surface) !important;
    border-bottom: 1px solid var(--np-line) !important;
    box-shadow: var(--np-shadow) !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  html[data-debater-visual='unified'] body :is(.managed-mobile-links, .navigation-mobile-links) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  html[data-debater-visual='unified'] body :is(.managed-mobile-link, .global-mobile-link, .draw-mobile-link) {
    min-height: 46px !important;
    padding: 11px 13px !important;
    border: 1px solid color-mix(in srgb, var(--np-line) 55%, transparent) !important;
    border-radius: 11px !important;
    color: var(--np-text) !important;
    background: color-mix(in srgb, var(--np-raised) 40%, var(--np-surface)) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    text-decoration: none !important;
    overflow-wrap: anywhere;
  }
  html[data-debater-visual='unified'] body :is(.managed-mobile-link, .global-mobile-link, .draw-mobile-link):is(.active, [aria-current='page']) {
    color: var(--np-accent) !important;
    background: var(--np-active) !important;
    border-color: color-mix(in srgb, var(--np-accent) 40%, var(--np-line)) !important;
    box-shadow: inset 3px 0 0 var(--np-accent) !important;
    font-weight: 700 !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-theme-choices, .global-mobile-theme, [aria-label='显示模式']) {
    gap: 8px !important;
    padding-block: 10px !important;
  }
  html[data-debater-visual='unified'] body .managed-theme-choices {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 8px 0 0 !important;
  }
  /* 配置化导航已接管切换时，隐藏仍由 Angular 保留的旧显示模式行。 */
  html[data-debater-visual='unified'] body .global-mobile-theme:has(~ .managed-theme-choices) { display: none !important; }
  html[data-debater-visual='unified'] body :is(.managed-theme-choices, .global-mobile-theme, [aria-label='显示模式']) button {
    min-height: 44px !important;
    border: 1px solid var(--np-line) !important;
    border-radius: 10px !important;
    background: var(--np-raised) !important;
    color: var(--np-muted) !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-theme-choices, .global-mobile-theme, [aria-label='显示模式']) button[aria-checked='true'] {
    background: var(--np-active) !important;
    color: var(--np-accent) !important;
    border-color: var(--np-accent) !important;
  }

  /* 后台分组保留原顺序，当前模块以边线和文字双重提示。 */
  html[data-debater-visual='unified'] body :is(.admin-sidebar, #admin-mobile-navigation) nav section > :is(h2, h3) {
    padding: 12px 14px 7px !important;
    color: var(--np-muted) !important;
    font-size: 11px !important;
    letter-spacing: .08em;
  }
  html[data-debater-visual='unified'] body :is(.admin-sidebar, #admin-mobile-navigation) nav a {
    min-height: 44px !important;
    margin-block: 3px !important;
    padding: 11px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--np-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
  }
  html[data-debater-visual='unified'] body :is(.admin-sidebar, #admin-mobile-navigation) nav a[aria-current='page'] {
    color: var(--np-accent) !important;
    background: var(--np-active) !important;
    border-color: color-mix(in srgb, var(--np-accent) 23%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--np-accent) !important;
    font-weight: 700 !important;
  }
  html[data-debater-visual='unified'] body :is(.admin-category-link, .admin-secondary-link, .admin-mobile-module, .admin-quick-actions a) {
    min-height: 44px !important;
    padding: 10px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--np-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
  }
  html[data-debater-visual='unified'] body :is(.admin-category-link, .admin-secondary-link, .admin-mobile-module):is(.is-active, [aria-current='page'], [aria-pressed='true']) {
    color: var(--np-accent) !important;
    background: var(--np-active) !important;
    border-color: color-mix(in srgb, var(--np-accent) 28%, var(--np-line)) !important;
    box-shadow: inset 0 -2px 0 var(--np-accent) !important;
    font-weight: 700 !important;
  }

  /* 页内页签只调整外观，不重写横向滚动、纵向档案栏或键盘行为。 */
  html[data-debater-visual='unified'] body :is([role='tab'], [data-dv-control='tab'], .tab-item, .tab-btn, .tab-button) {
    min-height: 44px !important;
    padding: 10px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--np-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  }
  html[data-debater-visual='unified'] body :is([role='tab'], [data-dv-control='tab'], .tab-item, .tab-btn, .tab-button)
  :is(svg, ng-icon) { flex-shrink: 0; }
  html[data-debater-visual='unified'] body :is([role='tab'], [data-dv-control='tab'], .tab-item, .tab-btn, .tab-button)
  :is(span, small) { color: inherit; }
  html[data-debater-visual='unified'] body :is([role='tab'], [data-dv-control='tab'], .tab-item, .tab-btn, .tab-button):is(
  [aria-selected='true'], [aria-current='page'], [data-dv-active='true'], .active, .is-active) {
    color: var(--np-accent) !important;
    background: var(--np-active) !important;
    border-color: color-mix(in srgb, var(--np-accent) 32%, var(--np-surface)) !important;
    box-shadow: inset 0 -2px 0 var(--np-accent), 0 2px 5px color-mix(in srgb, var(--np-text) 5%, transparent) !important;
  }

  /* 返回、面包屑、页脚和独立工具中的导航。 */
  html[data-debater-visual='unified'] body :is(.breadcrumb-link, .hero-breadcrumb__link, .back-btn, .back-link, .draw-return,
  .ss-back, .ss-site-header > a, .masthead > a, .site-header .brand, .admin-header a, #admin-navigation-trigger, #admin-mobile-navigation-close) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px !important;
    padding: 9px 12px !important;
    border: 1px solid var(--np-line) !important;
    border-radius: 10px !important;
    background: var(--np-surface) !important;
    color: var(--np-muted) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
  }
  html[data-debater-visual='unified'] body :is(.breadcrumb-current, .breadcrumb-link[aria-current='page']) {
    color: var(--np-accent) !important;
    border-color: transparent !important;
    background: var(--np-active) !important;
  }
  html[data-debater-visual='unified'] body footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 10px;
    border-radius: 9px;
    color: var(--np-muted) !important;
    text-decoration: none !important;
  }
  html[data-debater-visual='unified'] body nav[aria-label*='分页'] :is(button, a) {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
  }
  html[data-debater-visual='unified'] body :is(.ss-site-header a, .ss-site-header button, .sc-site-header a, .sc-site-header button, .masthead-actions > :is(a, button),
  .masthead summary, .stats-header a, .topics-page .site-header a, .topics-page .site-header button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    padding: 9px 13px !important;
    border: 1px solid var(--np-line) !important;
    border-radius: 10px !important;
    color: var(--np-muted) !important;
    background: var(--np-surface) !important;
    font-size: 13px !important;
    text-decoration: none !important;
  }
  /* 抽签壳用伪元素显示“主题”；原按钮文案继续保留给辅助技术。 */
  html[data-debater-visual='unified'] body.draw-page .draw-global-nav .draw-theme-button { font-size: 0 !important; }
  html[data-debater-visual='unified'] body nav.tabs[aria-label='社区页面'] button {
    min-height: 44px !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
  }
  /* 文档有自己的明暗偏好；直接复用文档变量，避免受平台主题干扰。 */
  html body:has(#category-nav) :is(.category-link, .overview-link, .header-actions > a, .header-actions > button) {
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: var(--muted) !important;
    transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
  }
  html body:has(#category-nav) .header-actions > :is(a, button) { border-color: var(--line) !important; }
  html body:has(#category-nav) :is(.category-link[aria-current='true'], .overview-link[aria-current='page']) {
    color: var(--accent) !important;
    background: var(--accent-wash) !important;
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line)) !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
  }
  html body[data-value-preferences-tool] .vp-site-header nav :is(a, button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px !important;
    padding: 9px 13px !important;
    border: 1px solid var(--vp-line) !important;
    border-radius: 10px !important;
    background: var(--vp-card) !important;
    color: var(--vp-muted) !important;
    font-size: 13px !important;
    text-decoration: none !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-nav-link, .global-nav-link, .managed-menu-link, .managed-mobile-link,
  .global-nav-control, .dn-launcher, .draw-nav-link, .draw-nav-control, .draw-menu-link, .draw-mobile-link,
  .breadcrumb-link, .hero-breadcrumb__link, .back-btn, .back-link, [role='tab'], [data-dv-control='tab'],
  .admin-sidebar nav a, #admin-mobile-navigation nav a, .admin-header a, .admin-category-link, .admin-secondary-link,
  .admin-mobile-module, .admin-quick-actions a, .ss-site-header a, .ss-site-header button, .sc-site-header a, .sc-site-header button,
  .masthead-actions > :is(a, button), footer a):focus-visible {
    outline: 2px solid var(--np-accent) !important;
    outline-offset: 3px !important;
  }
  html[data-debater-visual='unified'] body :is(.managed-main-links, .navigation-main-links) a:focus-visible { outline-offset: -3px !important; }
  @media (hover: hover) {
    html[data-debater-visual='unified'] body :is(.managed-nav-link, .global-nav-link, .managed-menu-link, .managed-mobile-link,
    .global-nav-control, .dn-launcher, .draw-nav-link, .draw-nav-control, .draw-menu-link, .draw-mobile-link,
    .breadcrumb-link, .hero-breadcrumb__link, .back-btn, .back-link, [role='tab'], [data-dv-control='tab'],
    .admin-sidebar nav a, #admin-mobile-navigation nav a, .admin-header a, .admin-category-link, .admin-secondary-link,
    .admin-mobile-module, .admin-quick-actions a, .ss-site-header a, .ss-site-header button, .sc-site-header a, .sc-site-header button,
    .masthead-actions > :is(a, button), footer a):not(:disabled):not([aria-disabled='true']):hover {
      color: var(--np-accent) !important;
      background: var(--np-active) !important;
      border-color: color-mix(in srgb, var(--np-accent) 30%, var(--np-line)) !important;
    }
    html body:has(#category-nav) :is(.category-link, .overview-link, .header-actions > a, .header-actions > button):hover {
      color: var(--accent) !important;
      background: var(--accent-wash) !important;
    }
  }
  @media (max-width: 1279px) {
    html[data-debater-visual='unified'] body :is(.debater-global-nav, [data-navigation-native]) > .container { gap: 12px !important; }
    html[data-debater-visual='unified'] body .managed-mobile-links a { width: 100%; }
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-debater-visual='unified'] body :is(nav, header, footer, [role='tablist']) :is(a, button) {
      transition: none !important;
      animation: none !important;
    }
  }
}