/* ==========================================================================
   know/how/to — Browser Skin
   Purpose: shared visual language for data-rich Make, Create and Impact panels.
   This does not replace page data logic; it only refines existing browsers.
   ========================================================================== */

:root {
  --browser-skin-line: #ffffff;
  --browser-skin-line-soft: #ffffff;
  --browser-skin-panel: #ffffff;
  --browser-skin-panel-soft: #ffffff;
  --browser-skin-active: #ffffff;
  --browser-skin-text: #000000;
  --browser-skin-muted: #000000;
  --browser-skin-quiet: #000000;
}

body.make-detail-page #browse-view,
body.impact-detail-page #browse-view,
body.page-impact #browse-view,
body.create-detail-page #browse-view,
body.design-tasks-page .tasks-layout {
  margin-top: 34px !important;
}

body.impact-detail-page #pw-cat-row,
body.page-impact #pw-cat-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  margin: 40px 0 18px !important;
  border-top: 1px solid var(--browser-skin-text) !important;
  border-left: 1px solid var(--browser-skin-text) !important;
}

body.impact-detail-page #pw-cat-row .pw-cat,
body.page-impact #pw-cat-row .pw-cat {
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 18px !important;
  border: 0 !important;
  border-right: 1px solid var(--browser-skin-text) !important;
  border-bottom: 1px solid var(--browser-skin-text) !important;
  background: #ffffff !important;
  color: var(--browser-skin-muted) !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

body.impact-detail-page #pw-cat-row .pw-cat:hover,
body.impact-detail-page #pw-cat-row .pw-cat.active,
body.page-impact #pw-cat-row .pw-cat:hover,
body.page-impact #pw-cat-row .pw-cat.active {
  background: var(--browser-skin-active) !important;
  color: var(--browser-skin-text) !important;
  box-shadow: inset 0 -3px 0 var(--browser-skin-text) !important;
}

body.make-detail-page #panel,
body.impact-detail-page #panel,
body.page-impact #panel,
body.create-detail-page #panel,
body.design-tasks-page .tasks-layout {
  border: 1px solid var(--browser-skin-text) !important;
  background: var(--browser-skin-panel) !important;
  box-shadow: none !important;
  min-height: 700px !important;
  overflow: hidden !important;
}

body.make-detail-page #panel-header,
body.impact-detail-page #panel-header,
body.page-impact #panel-header,
body.create-detail-page #panel-header {
  min-height: 104px !important;
  display: grid !important;
  align-content: end !important;
  gap: 8px !important;
  padding: 24px 30px !important;
  border-bottom: 1px solid var(--browser-skin-line) !important;
  background: #ffffff !important;
  color: var(--browser-skin-text) !important;
}

body.make-detail-page #panel-header *,
body.impact-detail-page #panel-header *,
body.page-impact #panel-header *,
body.create-detail-page #panel-header * {
  color: var(--browser-skin-text) !important;
}

body.make-detail-page #panel-title,
body.make-detail-page #ph-name,
body.impact-detail-page #panel-title,
body.impact-detail-page #ph-name,
body.page-impact #panel-title,
body.create-detail-page #panel-title {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-weight: 500 !important;
  line-height: 1.04 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}

body.make-detail-page #panel-kicker,
body.make-detail-page #ph-hint,
body.impact-detail-page #panel-kicker,
body.impact-detail-page #ph-hint,
body.page-impact #panel-kicker,
body.create-detail-page #panel-kicker {
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  color: var(--browser-skin-muted) !important;
}

body.make-detail-page #panel-body,
body.impact-detail-page #panel-body,
body.page-impact #panel-body,
body.create-detail-page #panel-body {
  display: grid !important;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
  min-height: 620px !important;
  max-height: none !important;
  overflow: visible !important;
  background: var(--browser-skin-panel) !important;
}

body.make-detail-page #cards-list,
body.impact-detail-page #topic-list,
body.page-impact #topic-list,
body.create-detail-page #topic-list {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow-y: auto !important;
  border-right: 1px solid var(--browser-skin-line) !important;
  background: var(--browser-skin-panel-soft) !important;
}

body.make-detail-page .entry-card,
body.impact-detail-page .topic-btn,
body.page-impact .topic-btn,
body.create-detail-page .topic-btn {
  width: 100% !important;
  min-height: 92px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 17px 22px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--browser-skin-line-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--browser-skin-text) !important;
  box-shadow: none !important;
  text-align: left !important;
}

body.make-detail-page .entry-card *,
body.impact-detail-page .topic-btn *,
body.page-impact .topic-btn *,
body.create-detail-page .topic-btn * {
  align-self: stretch !important;
  width: 100% !important;
  text-align: left !important;
}

body.make-detail-page .entry-card:hover,
body.make-detail-page .entry-card.active,
body.impact-detail-page .topic-btn:hover,
body.impact-detail-page .topic-btn.active,
body.page-impact .topic-btn:hover,
body.page-impact .topic-btn.active,
body.create-detail-page .topic-btn:hover,
body.create-detail-page .topic-btn.active {
  background: var(--browser-skin-active) !important;
  box-shadow: inset 3px 0 0 var(--browser-skin-text) !important;
}

body.make-detail-page .entry-title,
body.impact-detail-page .topic-title,
body.page-impact .topic-title,
body.create-detail-page .topic-title {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--browser-skin-text) !important;
}

body.make-detail-page .entry-meta,
body.impact-detail-page .topic-meta,
body.page-impact .topic-meta,
body.create-detail-page .topic-meta {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  color: var(--browser-skin-muted) !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}

body.make-detail-page #detail,
body.impact-detail-page #detail,
body.page-impact #detail,
body.create-detail-page #detail {
  min-width: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  padding: clamp(34px, 4.2vw, 64px) !important;
  background: var(--browser-skin-panel) !important;
}

body.make-detail-page #detail-content,
body.impact-detail-page #detail-content,
body.page-impact #detail-content,
body.create-detail-page #detail-content {
  max-width: 760px !important;
  border: 0 !important;
  padding: clamp(18px, 3.2vw, 44px) clamp(12px, 2.5vw, 34px) !important;
  background: transparent !important;
}

body.make-detail-page #detail-placeholder,
body.impact-detail-page #detail-placeholder,
body.page-impact #detail-placeholder,
body.create-detail-page #detail-placeholder {
  min-height: 420px !important;
  border: 1px solid var(--browser-skin-line) !important;
  background: var(--paper, #ffffff) !important;
}

body.make-detail-page #d-title,
body.impact-detail-page #d-title,
body.page-impact #d-title,
body.create-detail-page #d-title {
  margin: 0 0 18px !important;
  color: var(--browser-skin-text) !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(40px, 4.6vw, 68px) !important;
  font-weight: 500 !important;
  line-height: .98 !important;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

body.make-detail-page #d-desc,
body.impact-detail-page #d-desc,
body.page-impact #d-desc,
body.create-detail-page #d-desc {
  max-width: 760px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #000000 !important;
  font-size: clamp(18px, 1.45vw, 22px) !important;
  line-height: 1.5 !important;
}

body.make-detail-page #detail-tags,
body.impact-detail-page #detail-tags,
body.page-impact #detail-tags,
body.create-detail-page #detail-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: 0 !important;
}

body.make-detail-page #detail-tags span,
body.impact-detail-page #detail-tags span,
body.page-impact #detail-tags span,
body.create-detail-page #detail-tags span,
body.make-detail-page .tag,
body.impact-detail-page .tag,
body.create-detail-page .tag {
  border: 1px solid var(--browser-skin-line) !important;
  padding: 5px 8px !important;
  background: #ffffff !important;
  color: var(--browser-skin-muted) !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

body.make-detail-page .detail-grid,
body.impact-detail-page .detail-grid,
body.page-impact .detail-grid,
body.create-detail-page .detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(20px, 3vw, 34px) !important;
  max-width: none !important;
  margin: 24px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}

body.make-detail-page .detail-grid section,
body.impact-detail-page .detail-grid section,
body.page-impact .detail-grid section,
body.create-detail-page .detail-grid section,
body.make-detail-page .detail-notes,
body.impact-detail-page .detail-notes,
body.page-impact .detail-notes,
body.create-detail-page .detail-notes,
body.impact-detail-page .related-section,
body.page-impact .related-section,
body.create-detail-page .related-section {
  min-height: 0 !important;
  padding: clamp(18px, 2vw, 26px) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--browser-skin-line) !important;
  background: transparent !important;
}

body.make-detail-page #detail h3,
body.impact-detail-page #detail h3,
body.page-impact #detail h3,
body.create-detail-page #detail h3 {
  margin: 0 0 14px !important;
  color: #000000 !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
}

body.make-detail-page #detail p,
body.make-detail-page #detail li,
body.impact-detail-page #detail p,
body.impact-detail-page #detail li,
body.page-impact #detail p,
body.page-impact #detail li,
body.create-detail-page #detail p,
body.create-detail-page #detail li {
  color: #000000 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

body.make-detail-page #d-specs,
body.make-detail-page .detail-sheet-meta {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--browser-skin-line) !important;
  border-left: 1px solid var(--browser-skin-line) !important;
}

body.make-detail-page #d-specs > *,
body.make-detail-page .spec-card,
body.make-detail-page .detail-sheet-meta article {
  min-width: 0 !important;
  min-height: 86px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--browser-skin-line) !important;
  border-bottom: 1px solid var(--browser-skin-line) !important;
  background: var(--paper, #ffffff) !important;
}

body.make-detail-page #d-specs > * > span,
body.make-detail-page .spec-card span,
body.make-detail-page .detail-sheet-meta span {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  color: var(--browser-skin-muted) !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.make-detail-page #d-specs > * > span + span,
body.make-detail-page .spec-card strong,
body.make-detail-page .detail-sheet-meta strong {
  width: auto !important;
  min-width: 0 !important;
  color: var(--browser-skin-text) !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.35 !important;
  text-transform: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.design-tasks-page .tasks-layout {
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

body.design-tasks-page .tasks-layout > div:first-child {
  border-right: 1px solid var(--browser-skin-line) !important;
  background: var(--browser-skin-panel-soft) !important;
}

body.design-tasks-page #task-count {
  padding: 22px 22px 18px !important;
  border-bottom: 1px solid var(--browser-skin-line) !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

body.design-tasks-page .task-list {
  max-height: none !important;
  border: 0 !important;
  background: transparent !important;
}

body.design-tasks-page .task-card {
  min-height: 96px !important;
  padding: 18px 22px !important;
  border-bottom: 1px solid var(--browser-skin-line-soft) !important;
  background: transparent !important;
}

body.design-tasks-page .task-card:hover,
body.design-tasks-page .task-card.active,
body.design-tasks-page .task-card:focus-visible {
  background: var(--browser-skin-active) !important;
  box-shadow: inset 3px 0 0 var(--browser-skin-text) !important;
}

body.design-tasks-page #task-detail {
  border: 0 !important;
  background: #ffffff !important;
  padding: clamp(28px, 3vw, 42px) !important;
}

body.design-tasks-page #task-detail > * {
  max-width: 980px !important;
}

body.design-tasks-page .detail-block {
  border: 1px solid var(--browser-skin-line) !important;
  background: var(--paper, #ffffff) !important;
}

/* Filter rows are typographic navigation, not framed button bars. */
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  gap: clamp(14px, 2vw, 24px) !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab) {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 0 6px !important;
  color: var(--browser-skin-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button.active, .pw-cat.active, .filter-chip.active, .filter-btn.active, .cat-filter.active, .tab-btn.active, .subcat-tab.active, .category-tab.active) {
  color: var(--browser-skin-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 -2px 0 var(--browser-skin-text) !important;
}

@media (max-width: 900px) {
  body.make-detail-page #panel-body,
  body.impact-detail-page #panel-body,
  body.page-impact #panel-body,
  body.create-detail-page #panel-body,
  body.design-tasks-page .tasks-layout {
    grid-template-columns: 1fr !important;
  }

  body.make-detail-page #cards-list,
  body.impact-detail-page #topic-list,
  body.page-impact #topic-list,
  body.create-detail-page #topic-list,
  body.design-tasks-page .tasks-layout > div:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--browser-skin-line) !important;
  }

  body.make-detail-page .detail-grid,
  body.impact-detail-page .detail-grid,
  body.page-impact .detail-grid,
  body.create-detail-page .detail-grid {
    grid-template-columns: 1fr !important;
  }

  body.make-detail-page #d-specs,
  body.make-detail-page .detail-sheet-meta {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
}

/* Final filter-frame removal with enough specificity to beat legacy page skins. */
html body.impact-detail-page #pw-cat-row,
html body.page-impact #pw-cat-row,
html body.make-detail-page #proc-filter-row,
html body.create-detail-page #proc-filter-row,
html body :is(main, #main, #content-wrap, [role="main"]) #pw-cat-row,
html body :is(main, #main, #content-wrap, [role="main"]) #proc-filter-row,
html body :is(main, #main, #content-wrap, [role="main"]) .dw-filter-row {
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  gap: clamp(14px, 2vw, 24px) !important;
}

html body.impact-detail-page #pw-cat-row .pw-cat,
html body.page-impact #pw-cat-row .pw-cat,
html body.make-detail-page #proc-filter-row button,
html body.create-detail-page #proc-filter-row button,
html body :is(main, #main, #content-wrap, [role="main"]) #pw-cat-row button,
html body :is(main, #main, #content-wrap, [role="main"]) #proc-filter-row button,
html body :is(main, #main, #content-wrap, [role="main"]) .dw-filter-row button {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 0 6px !important;
  color: var(--browser-skin-muted) !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.impact-detail-page #pw-cat-row .pw-cat:hover,
html body.impact-detail-page #pw-cat-row .pw-cat.active,
html body.page-impact #pw-cat-row .pw-cat:hover,
html body.page-impact #pw-cat-row .pw-cat.active,
html body.make-detail-page #proc-filter-row button:hover,
html body.make-detail-page #proc-filter-row button.active,
html body.create-detail-page #proc-filter-row button:hover,
html body.create-detail-page #proc-filter-row button.active,
html body :is(main, #main, #content-wrap, [role="main"]) #pw-cat-row button:hover,
html body :is(main, #main, #content-wrap, [role="main"]) #pw-cat-row button.active,
html body :is(main, #main, #content-wrap, [role="main"]) #proc-filter-row button:hover,
html body :is(main, #main, #content-wrap, [role="main"]) #proc-filter-row button.active,
html body :is(main, #main, #content-wrap, [role="main"]) .dw-filter-row button:hover,
html body :is(main, #main, #content-wrap, [role="main"]) .dw-filter-row button.active {
  color: var(--browser-skin-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Unified filter hover indicator. */
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 0 0 8px !important;
  transition: color .14s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  display: block !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--browser-skin-text) !important;
  transition: width .18s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):focus-visible,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button.active, .pw-cat.active, .filter-chip.active, .filter-btn.active, .cat-filter.active, .tab-btn.active, .subcat-tab.active, .category-tab.active) {
  color: var(--browser-skin-text) !important;
  background: transparent !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):hover::after,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):focus-visible::after,
html body :is(main, #main, #content-wrap, [role="main"]) :where(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :where(button.active, .pw-cat.active, .filter-chip.active, .filter-btn.active, .cat-filter.active, .tab-btn.active, .subcat-tab.active, .category-tab.active)::after {
  width: 100% !important;
}

/* Final shared filter buttons: framed chips with one hover language everywhere. */
html body :is(main, #main, #content-wrap, [role="main"]) :is(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :is(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 0 16px !important;
  color: var(--browser-skin-muted) !important;
  background: #ffffff !important;
  border: 1px solid var(--browser-skin-text) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transition: background .14s ease, color .14s ease, border-color .14s ease !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :is(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab)::after {
  content: none !important;
  display: none !important;
}

html body :is(main, #main, #content-wrap, [role="main"]) :is(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :is(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):hover,
html body :is(main, #main, #content-wrap, [role="main"]) :is(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :is(button, .pw-cat, .filter-chip, .filter-btn, .cat-filter, .tab-btn, .subcat-tab, .category-tab):focus-visible,
html body :is(main, #main, #content-wrap, [role="main"]) :is(#pw-cat-row, #proc-filter-row, .dw-filter-row, .filter-options) :is(button.active, .pw-cat.active, .filter-chip.active, .filter-btn.active, .cat-filter.active, .tab-btn.active, .subcat-tab.active, .category-tab.active) {
  color: var(--browser-skin-text) !important;
  background: var(--browser-skin-active) !important;
  border-color: var(--browser-skin-text) !important;
  box-shadow: inset 0 -3px 0 var(--browser-skin-text) !important;
}

/* MONOCHROME RESET - black text on white ground, no area colour surfaces */
:root {
  --black: #000000;
  --white: #ffffff;
  --paper: #ffffff;
  --paper-deep: #ffffff;
  --card: #ffffff;
  --ink: #000000;
  --ink-soft: #000000;
  --mid: #000000;
  --pale: #000000;
  --faint: transparent;
  --ghost: transparent;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --accent: #000000;
  --accent-deep: #000000;
  --oat: #ffffff;
  --sage: #ffffff;
  --sand: #ffffff;
  --taupe: #ffffff;
  --slate: #ffffff;
  --accent-design: #000000;
  --accent-make: #000000;
  --accent-impact: #000000;
  --accent-show: #000000;
  --accent-sell: #000000;
  --accent-research: #000000;
  --line: rgba(0,0,0,.22);
  --line-2: rgba(0,0,0,.44);
  --strong: #000000;
  --border: 1px solid var(--line);
  --border-strong: 1.5px solid var(--strong);
  --hover-bg: #ffffff;
  --kht-content-bg: #ffffff;
  --kht-content-panel: #ffffff;
  --kht-content-panel-soft: #ffffff;
  --kht-content-text: #000000;
  --kht-content-muted: #000000;
  --kht-content-line: rgba(0,0,0,.22);
  --kht-content-strong-line: #000000;
  --browser-skin-bg: #ffffff;
  --browser-skin-panel: #ffffff;
  --browser-skin-panel-soft: #ffffff;
  --browser-skin-active: #ffffff;
  --browser-skin-text: #000000;
  --browser-skin-muted: #000000;
}

html,
body {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
}

body :where(header, main, footer, nav, section, article, aside, div, form, fieldset, label, ul, ol, li, table, thead, tbody, tr, th, td, details, summary) {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
}

body :where(a, a *, button, button *, input, textarea, select, option, h1, h2, h3, h4, h5, h6, p, span, small, strong, em, b, i, li, dt, dd, th, td, label) {
  color: #000000 !important;
}

body :where(.area-card, .category-card, .tool-card-simple, .workflow-card, .knowledge-block, .library-card, .tool-card, .result, .gs-result, .search-block, .search-row, #search-wrap, .global-nav, .footer-nav a, .quick-grid a, .template-panel, .detail-notes, .panel, #panel, #detail, #detail-content) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  color: #000000 !important;
  box-shadow: none !important;
}

body :where(.area-card::before, .category-card::before, .tool-card-simple::before, .workflow-card::before, .knowledge-block::before),
body :where(.area-card::after, .category-card::after, .tool-card-simple::after, .workflow-card::after, .knowledge-block::after) {
  background: #000000 !important;
  background-color: #000000 !important;
}

body :where(.global-nav a[aria-current="page"], .tab-btn.active, .filter-btn.active, .pill.active, button.active) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

body :where(input, textarea, select, button) {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

body :where(input::placeholder, textarea::placeholder) {
  color: #000000 !important;
  opacity: 1 !important;
}

body :where(img, svg, video, canvas) {
  filter: none !important;
}

/* ── GLOBAL WHITE BACKGROUND OVERRIDE ─────────────────────────────
   Pages use a clear white ground. Active states stay monochrome and
   content cards remain white for a calm, consistent wireframe surface.
   ─────────────────────────────────────────────────────────────── */
:root {
  --paper: #ffffff;
  --paper-deep: #ffffff;
  --kht-selected-bg: #ffffff;
}

html,
body,
html body,
html body #page {
  background: var(--paper, #ffffff) !important;
  background-color: var(--paper, #ffffff) !important;
}

html body :where(.site-main, .area-main, main, #main, #content-wrap) {
  background: transparent !important;
  background-color: transparent !important;
}

html body :where(.hero, .page-hero, .tool-hero, .tasks-hero, .detail-hero) {
  background: transparent !important;
  background-color: transparent !important;
}

html body :where(.card, .area-card, .category-card, .tool-card-simple, .workflow-card, .knowledge-block, .library-card, .tool-card, .task-card, .entry-card, .glossary-card, .detail-card, .triple-card, .sc-box, .sc-tip-box, .fw-box, .glossar-card, .search-block, .search-row, #detail-content, .kht-browser-card) {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Editorial detail mode for all themebrowser detail panes. */
html body #browse-view.kht-browser #detail-content,
html body #browse-view.kht-browser .kht-browser-card,
html body .kht-browser .kht-browser-card,
html body .kht-browser-detail .kht-browser-card {
  max-width: 760px !important;
  border: 0 !important;
  padding: clamp(18px, 3.2vw, 44px) clamp(12px, 2.5vw, 34px) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

html body #browse-view.kht-browser :where(.detail-grid, .tool-detail-grid, .kht-browser-blocks),
html body .kht-browser :where(.detail-grid, .tool-detail-grid, .kht-browser-blocks) {
  gap: clamp(20px, 3vw, 34px) !important;
  background: transparent !important;
  border: 0 !important;
}

html body #browse-view.kht-browser :where(.detail-grid section, .tool-detail-grid section, .detail-notes, .related-section, .kht-browser-block),
html body .kht-browser :where(.detail-grid section, .tool-detail-grid section, .detail-notes, .related-section, .kht-browser-block) {
  min-height: 0 !important;
  padding: clamp(18px, 2vw, 26px) 0 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(0,0,0,.24) !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}


/* ── UI BUTTON TYPOGRAPHY — OPEN SANS, LATE OVERRIDE ───────────
   Buttons, tabs and navigation controls use Open Sans for clearer
   reading; editorial text and display headlines keep their own voice.
   ─────────────────────────────────────────────────────────────── */
:root {
  --font-ui: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body :where(
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  [role="button"],
  .button,
  .btn,
  .topline nav a,
  .global-nav a,
  .footer-nav a,
  .section-nav-link,
  .tool-secondary-nav a,
  .ia-breadcrumb a,
  .breadcrumb a,
  .kht-browser-tab,
  .kht-browser-tab *,
  .kht-browser-item,
  .kht-browser-item *,
  .cat-btn,
  .cat-btn *,
  .sub-btn,
  .sub-btn *,
  .tab-btn,
  .filter-btn,
  .pw-cat,
  .category-tab,
  .subcat-tab,
  .filter-chip
) {
  font-family: var(--font-ui) !important;
}

html body :where(
  button,
  [role="button"],
  .button,
  .btn,
  .topline nav a,
  .global-nav a,
  .footer-nav a,
  .section-nav-link,
  .tool-secondary-nav a,
  .kht-browser-tab,
  .cat-btn,
  .sub-btn,
  .tab-btn,
  .filter-btn,
  .pw-cat,
  .category-tab,
  .subcat-tab,
  .filter-chip
) {
  font-weight: 700 !important;
  letter-spacing: .045em !important;
}

html body :where(
  .kht-browser-tab-count,
  .kht-browser-item-summary,
  .kht-browser-item-meta,
  .cat-count,
  .item-sub,
  .sec-sub
) {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: .025em !important;
}


/* ── UI BUTTON TYPOGRAPHY — OPEN SANS, SPECIFIC OVERRIDE ───────
   Overrides older mono !important rules on navigation, tabs and
   themebrowser controls.
   ─────────────────────────────────────────────────────────────── */
html body .topline nav a,
html body .global-nav a,
html body .footer-nav a,
html body .section-nav .section-nav-link,
html body .tool-secondary-nav a,
html body .tool-mode-tabs a,
html body .tool-tab-row a,
html body .ia-breadcrumb a,
html body .breadcrumb a,
html body .kht-browser-tabs .kht-browser-tab,
html body .kht-browser-tabs .kht-browser-tab span,
html body .kht-browser-items .kht-browser-item,
html body .kht-browser-items .kht-browser-item *,
html body #cat-grid .cat-btn,
html body #cat-grid .cat-btn *,
html body #sub-list .sub-btn,
html body #sub-list .sub-btn *,
html body #items-list .item-card,
html body #items-list .item-card *,
html body .filter-row button,
html body .filter-row button *,
html body #pw-cat-row .pw-cat,
html body #proc-filter-row .pw-cat {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

html body .topline nav a,
html body .global-nav a,
html body .footer-nav a,
html body .section-nav .section-nav-link,
html body .tool-secondary-nav a,
html body .tool-mode-tabs a,
html body .tool-tab-row a,
html body .kht-browser-tabs .kht-browser-tab,
html body #cat-grid .cat-btn,
html body #sub-list .sub-btn,
html body #items-list .item-card,
html body .filter-row button,
html body #pw-cat-row .pw-cat,
html body #proc-filter-row .pw-cat {
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

html body .kht-browser-tabs .kht-browser-tab small,
html body .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser-items .kht-browser-item-summary,
html body .kht-browser-items .kht-browser-item-meta,
html body #items-list .item-sub,
html body #cat-grid .cat-count,
html body #sub-list .sec-sub {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}


/* ── UI BUTTON TYPOGRAPHY — OPEN SANS, FILTER ROW FIX ────────── */
html body #filter-row .cat-btn,
html body #filter-row .cat-btn *,
html body #filter-row .kht-browser-tab,
html body #filter-row .kht-browser-tab *,
html body header.topline .global-nav a,
html body header.topline .global-nav a *,
html body .topline .global-nav a,
html body .topline .global-nav a * {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

html body #filter-row .cat-count,
html body #filter-row .sec-sub,
html body #filter-row .kht-browser-tab-count {
  font-family: var(--font-ui, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}


/* ── OPEN SANS MAIN TYPOGRAPHY — FINE READING WEIGHTS ──────────
   Main typography now uses Open Sans. Descriptive copy and dense
   browser/card summaries use lighter weights for better rhythm.
   ─────────────────────────────────────────────────────────────── */
:root {
  --font-display: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-fine: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kht-content-font: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html body {
  font-family: var(--font-body, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400;
}

html body :where(h1, h2, h3, h4, h5, h6, .hero-title, .page-title, .tool-title, .kht-browser-title) {
  font-family: var(--font-display, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
}

html body :where(
  p,
  li,
  td,
  th,
  label,
  .hero p,
  .page-hero p,
  .tool-hero p,
  .page-intro,
  .hero-copy,
  .lead,
  .intro,
  .card p,
  .area-card p,
  .category-card p,
  .tool-card p,
  .workflow-card p,
  .knowledge-block p,
  .kht-browser-desc,
  .kht-browser-desc p,
  .kht-browser-card p,
  .kht-browser-block p,
  .detail-card p,
  .detail-notes p,
  .tool-detail-copy,
  .tool-detail-copy p
) {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

html body :where(
  .hero-subtitle,
  .page-subtitle,
  .tool-subtitle,
  .kht-browser-subtitle,
  .kht-browser-card > p:first-of-type,
  .detail-lead,
  .tool-detail-lead
) {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 300 !important;
  letter-spacing: -.01em !important;
}

html body :where(
  .kht-browser-tab small,
  .kht-browser-tab-count,
  .cat-count,
  .sec-sub,
  .item-sub,
  .kht-browser-item-summary,
  .kht-browser-item-meta,
  .entry-card small,
  .card-meta,
  .card-subtitle,
  .tool-card-subtitle
) {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
}


/* ── OPEN SANS FINE TEXT — SPECIFIC DENSE-SPACE OVERRIDE ─────── */
html body .kht-browser-items .kht-browser-item-summary,
html body .kht-browser-items .kht-browser-item-meta,
html body .kht-browser-tabs .kht-browser-tab small,
html body .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body .kht-browser-tabs .kht-browser-tab-count,
html body #filter-row .cat-btn .cat-count,
html body #filter-row .cat-btn .sec-sub,
html body #filter-row .cat-btn .kht-browser-tab-count,
body.tool-rhino #filter-row .cat-btn .cat-count,
body.tool-rhino #filter-row .cat-btn .sec-sub,
body.tool-grasshopper #filter-row .cat-btn .cat-count,
body.tool-grasshopper #filter-row .cat-btn .sec-sub,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab small,
body.tool-keyshot .kht-browser-tabs .kht-browser-tab .kht-browser-tab-count,
html body #items-list .item-card .item-sub,
html body #items-list .item-card small,
html body .area-card p,
html body .category-card p,
html body .tool-card p,
html body .workflow-card p {
  font-family: var(--font-fine, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
}