/*
  Shared selection feedback for visitor-facing controls.
  State changes deliberately avoid width, height, padding and font-weight changes
  so filter rows never reflow when a choice is toggled.
*/

:root {
  --selection-ink: #003b52;
  --selection-active-ink: #174e7c;
  --selection-line: #cfeeff;
  --selection-active-line: #6fd4f4;
  --selection-fill: #e6f7fd;
  --selection-blue: #00aceb;
}

/* A compact single-choice state for category, tab and template controls. */
body[data-page="knowledge"] #category-filters .filter-chip,
body[data-page="products"] .product-quick-search,
body[data-page="forum"] .forum-topic-tabs button,
body[data-page="home"] .search-result-tabs button,
body.mobile-page[data-page="publish"] .mobile-news-tabs button,
body[data-page="tools"] .style-row .style-chip,
.demand-admin-tools .demand-filter {
  position: relative !important;
  isolation: isolate;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700 !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease !important;
}

/* Product quick-search brands use the same glass-chip language as the
   knowledge-base category tabs. Reserve the footprint so active feedback
   never changes the search panel layout. */
body[data-page="products"] .product-quick-search {
  height: 32px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(0,172,235,.34) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.50) !important;
  color: #003b52 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 10px 24px rgba(0,46,61,.06) !important;
}

body[data-page="products"] .product-quick-search:hover,
body[data-page="products"] .product-quick-search:focus-visible {
  border-color: #99dcf0 !important;
  background: rgba(255,255,255,.92) !important;
  color: #003b52 !important;
  outline: none;
}

body[data-page="products"] .product-quick-search.active {
  border-color: var(--selection-active-line) !important;
  background: var(--selection-fill) !important;
  color: var(--selection-active-ink) !important;
  box-shadow: inset 0 -2px 0 var(--selection-blue), inset 0 0 0 1px rgba(37,132,221,.16), 0 8px 18px rgba(37,132,221,.09) !important;
}

body[data-page="products"] .product-quick-search:active {
  transform: scale(.96) !important;
}

body[data-page="knowledge"] #category-filters .filter-chip:hover,
body[data-page="forum"] .forum-topic-tabs button:hover,
body[data-page="home"] .search-result-tabs button:hover,
body.mobile-page[data-page="publish"] .mobile-news-tabs button:hover,
body[data-page="tools"] .style-row .style-chip:hover,
.demand-admin-tools .demand-filter:hover {
  border-color: #99dcf0 !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--selection-ink) !important;
}

body[data-page="knowledge"] #category-filters .filter-chip.active,
body[data-page="forum"] .forum-topic-tabs button.active,
body[data-page="home"] .search-result-tabs button.active,
body.mobile-page[data-page="publish"] .mobile-news-tabs button.active,
body[data-page="tools"] .style-row .style-chip.active,
.demand-admin-tools .demand-filter.active {
  border-color: var(--selection-active-line) !important;
  background: var(--selection-fill) !important;
  color: var(--selection-active-ink) !important;
  box-shadow: inset 0 -2px 0 var(--selection-blue), inset 0 0 0 1px rgba(37,132,221,.16), 0 8px 18px rgba(37,132,221,.09) !important;
  font-weight: 700 !important;
}

/* Multi-choice controls reserve a fixed trailing state slot at all times. */
body[data-page="products"] .filter-panel .filter-chip,
body[data-page="forum"] .forum-post-sheet .tag-option,
body[data-page="forum-post"] .forum-post-tag {
  position: relative !important;
  isolation: isolate;
  flex: 0 0 auto;
  padding-right: 34px !important;
  white-space: nowrap;
  font-weight: 700 !important;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .12s ease !important;
}

body[data-page="products"] .filter-panel .filter-chip::after,
body[data-page="forum"] .forum-post-sheet .tag-option::after,
body[data-page="forum-post"] .forum-post-tag::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 9px;
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid #cfe6f6;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: transparent;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease !important;
}

body[data-page="products"] .filter-panel .filter-chip:hover,
body[data-page="forum"] .forum-post-sheet .tag-option:hover,
body[data-page="forum-post"] .forum-post-tag:hover {
  border-color: #99dcf0 !important;
  background: rgba(255,255,255,.94) !important;
  color: var(--selection-ink) !important;
}

body[data-page="products"] .filter-panel .filter-chip.active,
body[data-page="forum"] .forum-post-sheet .tag-option.active,
body[data-page="forum-post"] .forum-post-tag.active {
  border-color: var(--selection-active-line) !important;
  background: var(--selection-fill) !important;
  color: var(--selection-active-ink) !important;
  box-shadow: inset 0 -2px 0 var(--selection-blue), inset 0 0 0 1px rgba(37,132,221,.16), 0 8px 18px rgba(37,132,221,.09) !important;
  font-weight: 700 !important;
}

body[data-page="products"] .filter-panel .filter-chip.active::after,
body[data-page="forum"] .forum-post-sheet .tag-option.active::after,
body[data-page="forum-post"] .forum-post-tag.active::after {
  content: "✓";
  border-color: var(--selection-blue);
  background: var(--selection-blue);
  color: #fff;
  box-shadow: 0 2px 6px rgba(37,132,221,.22);
}

body[data-page="products"] .filter-panel .filter-chip.disabled::after,
body[data-page="forum"] .forum-post-sheet .tag-option.disabled::after,
body[data-page="forum-post"] .forum-post-tag.disabled::after { opacity: .42; }

/* Mobile pages have local compact-padding rules. Keep the fixed state slot there too. */
body.mobile-page[data-page="forum"] .forum-post-sheet .tag-option,
body.mobile-page[data-page="products"] .filter-panel.open .filter-chip,
body.mobile-page[data-page="forum-post"] .forum-post-tag {
  max-width: 100% !important;
  padding-right: 34px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700 !important;
}

/* Desktop product filters: keep the installation-fit controls on the same
   visual rhythm as the brand and feature groups. The mobile sheet keeps its
   own single-column rhythm above. */
@media (min-width: 861px) {
  body:not(.mobile-page)[data-page="products"] .installation-filter-subgroups {
    /* Match the brand-filter rhythm while giving the longer labels room. */
    grid-template-columns: .9fr 1.3fr 1.1fr;
    gap: 8px;
  }

  body:not(.mobile-page)[data-page="products"] .installation-filter-subgroup .filter-chip[data-value="全部"] {
    display: none !important;
  }

  body:not(.mobile-page)[data-page="products"] .installation-filter-subgroup .chip-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }

  body:not(.mobile-page)[data-page="products"] .installation-filter-subgroup .filter-chip {
    min-width: 0;
    max-width: 100%;
    padding: 0 34px 0 10px !important;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:not(.mobile-page)[data-page="products"] .installation-filter-subgroup .filter-chip::after {
    right: 9px;
    width: 12px;
    height: 12px;
    font-size: 9px;
  }
}

/* Demand cards are a larger single-choice variant; their grid footprint remains fixed. */
body[data-page="demand"] .type-option {
  position: relative !important;
  overflow: hidden;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease !important;
}

body[data-page="demand"] .type-option.active {
  border-color: var(--selection-active-line) !important;
  background: #f0faff !important;
  box-shadow: inset 0 -3px 0 var(--selection-blue), inset 0 0 0 1px rgba(37,132,221,.14), 0 12px 26px rgba(37,132,221,.10) !important;
}

body[data-page="demand"] .type-option.active::after {
  content: "已选";
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 30px;
  height: 18px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--selection-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

body[data-page] .filter-chip:active,
body[data-page] .tag-option:active,
body[data-page] .forum-post-tag:active,
body[data-page] .forum-topic-tabs button:active,
body[data-page] .search-result-tabs button:active,
body[data-page] .mobile-news-tabs button:active,
body[data-page] .style-chip:active,
body[data-page] .type-option:active { transform: scale(.96); }

body[data-page] .filter-chip:focus-visible,
body[data-page] .tag-option:focus-visible,
body[data-page] .forum-post-tag:focus-visible,
body[data-page] .forum-topic-tabs button:focus-visible,
body[data-page] .search-result-tabs button:focus-visible,
body[data-page] .mobile-news-tabs button:focus-visible,
body[data-page] .style-chip:focus-visible,
body[data-page] .type-option:focus-visible {
  outline: 3px solid rgba(37,132,221,.24) !important;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page] .filter-chip,
  body[data-page] .tag-option,
  body[data-page] .forum-post-tag,
  body[data-page] .forum-topic-tabs button,
  body[data-page] .search-result-tabs button,
  body[data-page] .mobile-news-tabs button,
  body[data-page] .style-chip,
  body[data-page] .type-option { transition: none !important; }
}

/* ===== Final button surface pass (2026-08-25) =====
   This file is loaded after the glass theme and after page-level controls.
   Keep the final rendered surface authoritative so late active-state rules do
   not reintroduce inset highlights or a second edge color. */
body[data-page="products"] .product-quick-search,
body[data-page="products"] .filter-toggle,
body[data-page="products"] .result-product-grid .product-actions .compare-inline-btn,
body[data-page="products"] .result-product-grid .product-actions .primary-btn,
body[data-page="site-search"] .result-product-grid .product-actions .compare-inline-btn,
body[data-page="site-search"] .result-product-grid .product-actions .primary-btn,
body[data-page="products"] .catalog-page-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-page="products"] .product-quick-search,
body[data-page="products"] .filter-toggle,
body[data-page="products"] .result-product-grid .product-actions .compare-inline-btn,
body[data-page="site-search"] .result-product-grid .product-actions .compare-inline-btn,
body[data-page="products"] .catalog-page-btn:not(.active) {
  background: rgba(255, 255, 255, .76) !important;
  color: #0a4a63 !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
}

body[data-page="products"] .filter-toggle.active,
body[data-page="products"] .product-quick-search.active,
body[data-page="products"] .catalog-page-btn.active {
  background: #e6f7fd !important;
  color: #0087b3 !important;
  border: 1px solid #6fd4f4 !important;
  box-shadow: none !important;
}

body[data-page="products"] .result-product-grid .product-actions .primary-btn,
body[data-page="site-search"] .result-product-grid .product-actions .primary-btn {
  background: linear-gradient(135deg, var(--action-start), var(--action-end)) !important;
  color: #fff !important;
  border: 0 !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 26px rgba(0,172,235,.16) !important;
}

body[data-page="knowledge"] #category-filters .filter-chip,
body[data-page="home"] .search-result-tabs button,
body.mobile-page[data-page="publish"] .mobile-news-tabs button,
body[data-page="forum"] .forum-topic-tabs button,
body[data-page="tools"] .scene-chip,
body[data-page="knowledge"] .pager-actions button,
body[data-page="knowledge"] .pagination button,
body[data-page="forum"] .forum-pagination button {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: none !important;
  box-shadow: none !important;
}

body[data-page="knowledge"] #category-filters .filter-chip:not(.active),
body[data-page="home"] .search-result-tabs button:not(.active),
body.mobile-page[data-page="publish"] .mobile-news-tabs button:not(.active),
body[data-page="forum"] .forum-topic-tabs button:not(.active),
body[data-page="tools"] .scene-chip:not(.active),
body[data-page="knowledge"] .pager-actions button:not(.active),
body[data-page="knowledge"] .pagination button:not(.active),
body[data-page="forum"] .forum-pagination button:not(.active) {
  background: rgba(255, 255, 255, .76) !important;
  color: #0a4a63 !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
}

body[data-page="knowledge"] #category-filters .filter-chip.active,
body[data-page="home"] .search-result-tabs button.active,
body.mobile-page[data-page="publish"] .mobile-news-tabs button.active,
body[data-page="forum"] .forum-topic-tabs button.active,
body[data-page="tools"] .scene-chip.active,
body[data-page="knowledge"] .pager-actions button.active,
body[data-page="knowledge"] .pagination button.active,
body[data-page="forum"] .forum-pagination button.active {
  background: #e6f7fd !important;
  color: #0087b3 !important;
  border: 1px solid #6fd4f4 !important;
  box-shadow: none !important;
}

body[data-page] :where(.btn-secondary, .ghost-btn, .line-btn, .filter-done-ghost) {
  background: rgba(255, 255, 255, .76) !important;
  background-image: none !important;
  color: #0a4a63 !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
  box-shadow: none !important;
}

body[data-page] :where(.primary-btn, .btn-primary, .submit-btn, .comment-btn, .download-btn, .save-btn, .login-btn) {
  border: 0 !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 26px rgba(0,172,235,.16) !important;
}

body[data-page] .floating-action-main {
  border: 0 !important;
  background-clip: padding-box !important;
  box-shadow: 0 14px 36px rgba(15, 119, 214, .28) !important;
}

body.mobile-page .floating-action-link {
  box-shadow: 0 7px 16px rgba(48, 93, 132, .12) !important;
}

body:not(.mobile-page) .floating-action-link {
  box-shadow: none !important;
}
/* ===== Outlier control cleanup (2026-08-25) ===== */
body[data-page="products"] .filter-chip:not(.active) {
  background: rgba(255, 255, 255, .76) !important;
  background-image: none !important;
  color: #0a4a63 !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
  box-shadow: none !important;
}
body[data-page="products"] .filter-chip.active {
  background: #e6f7fd !important;
  background-image: none !important;
  color: #0087b3 !important;
  border: 1px solid #6fd4f4 !important;
  box-shadow: none !important;
}

body[data-page="knowledge"] .hero-shell .kb-search button,
body[data-page="knowledge"] .search-shell .kb-search button,
body[data-page="knowledge"] .kb-search button {
  border: 0 !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 26px rgba(0,172,235,.16) !important;
}

body[data-page="tools"] .scene-chip:not(.active),
body.mobile-page[data-page="tools"] .scene-chip:not(.active),
body[data-page="tools"] .festival-chip:not(.active) {
  background: rgba(255, 255, 255, .76) !important;
  background-image: none !important;
  color: #0a4a63 !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
  box-shadow: none !important;
}

body[data-page="forum"] .forum-post-sheet .tag-option:not(.active),
body.mobile-page[data-page="forum"] .forum-post-sheet .tag-option:not(.active),
body[data-page="forum-post"] .forum-post-tag:not(.active) {
  background: rgba(255, 255, 255, .76) !important;
  background-image: none !important;
  color: #0a4a63 !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
  box-shadow: none !important;
}
body[data-page="forum"] .forum-post-sheet .tag-option.active,
body.mobile-page[data-page="forum"] .forum-post-sheet .tag-option.active,
body[data-page="forum-post"] .forum-post-tag.active {
  background: #e6f7fd !important;
  background-image: none !important;
  color: #0087b3 !important;
  border: 1px solid #6fd4f4 !important;
  box-shadow: none !important;
}

body[data-page="forum"] .floating-forum-post,
body.mobile-page[data-page="forum"] .floating-forum-post {
  border: 0 !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 26px rgba(0,172,235,.16) !important;
}
body[data-page="forum"] .forum-post-sheet-close,
body.mobile-page[data-page="forum"] .forum-post-sheet-close,
body[data-page="forum"] .forum-replies-sheet-close,
body.mobile-page[data-page="forum"] .forum-replies-sheet-close {
  background: rgba(255, 255, 255, .76) !important;
  background-image: none !important;
  color: #0a4a63 !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
  box-shadow: none !important;
}

body[data-page="demand"] .type-option:not(.active) {
  background: rgba(255, 255, 255, .76) !important;
  background-image: none !important;
  border: 1px solid rgba(154, 193, 225, .42) !important;
  box-shadow: none !important;
}
body[data-page="demand"] .type-option.active {
  background: #e6f7fd !important;
  background-image: none !important;
  border: 1px solid #6fd4f4 !important;
  box-shadow: none !important;
}
/* ===== Composer controls surface cleanup (2026-08-25) ===== */
body[data-page="forum-post"] .forum-post-submit {
  border: 0 !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 26px rgba(0,172,235,.16) !important;
}
body[data-page="forum-post"] .forum-post-preview button,
body[data-page="forum-post"] .forum-post-sheet-close,
body[data-page="forum-post"] .forum-replies-sheet-close {
  border: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}