/* ============================================================
   KNOW/HOW/TO - Unified consolidation layer
   Purpose: align hierarchy, spacing, navigation and cards across
   existing pages without changing content or adding features.
   ============================================================ */

:root {
  /* ── Design System Foundation v1 ─────────────────────── */
  --black:        #000000;
  --white:        #ffffff;
  --paper:        #ffffff;   /* White page background */
  --paper-deep:   #ffffff;
  --card:         #ffffff;
  --ink:          #000000;
  --ink-soft:     #000000;
  --mid:          #000000;
  --pale:         #000000;
  --faint:        transparent;
  --ghost:        transparent;
  --surface:      #ffffff;
  --surface-strong: #ffffff;

  /* Monochrome signal — the only loud color */
  --accent:       #000000;
  --accent-deep:  #000000;

  /* Cotlin earth neutrals */
  --oat:    #ffffff;
  --sage:   #ffffff;  /* /create surface */
  --sand:   #ffffff;  /* /make surface */
  --taupe:  #ffffff;
  --slate:  #ffffff;  /* /impact surface (dark — use paper text) */

  /* Area surface aliases — neutral surfaces only; orange is the sole signal */
  --accent-design: #000000;
  --accent-make:   #000000;
  --accent-impact: #000000;

  /* Rules */
  --line:          rgba(0,0,0,.22);  /* hairline 1px */
  --line-2:        rgba(0,0,0,.44);  /* stronger hairline */
  --strong:        #000000;
  --border:        1px solid var(--line);
  --border-strong: 1.5px solid var(--strong);

  --hover-bg: #ffffff;

  /* Layout */
  --content-max: 1320px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Typography */
  --font-display: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  /* Spacing */
  --space-1: 8px;  --space-2: 12px; --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px;
  --space-7: 64px; --space-8: 80px;
  --gap-xl: 48px; --gap-lg: 32px; --gap-md: 20px;
  --gap-sm: 12px; --gap-xs: 8px;

  /* Type scale */
  --t-xl: clamp(52px, 6.5vw, 96px); --t-lg: 18px;
  --t-md: 15px; --t-sm: 13px; --t-xs: 11px;
  --kht-header-title-size: clamp(42px, 6vw, 84px);
  --kht-header-word-size: clamp(42px, 5.85vw, 82px);
  --kht-header-gap: 22px;
}

/* Smaller phones (e.g. iPhone 12, 390px) had too much unused margin on
   both sides — the 20px clamp floor below stays close to a third of the
   viewport once doubled. Narrow that margin specifically at phone widths
   instead of lowering the floor for everyone. */
@media (max-width: 480px) {
  :root {
    --gutter: 12px;
  }
}

html {
  background: var(--paper);
}

/* ── GLOBAL HEADLINE TYPOGRAPHY ─────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
}

body {
  background: var(--paper) !important;  /* white background */
  color: var(--black) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

a {
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

button,
input,
textarea,
select {
  font-family: inherit !important;
}

#page {
  width: min(var(--content-max), calc(100% - var(--gutter) - var(--gutter))) !important;
  margin: 0 auto !important;
  padding: 28px 0 72px !important;
}

.topline {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-5) !important;
  padding: 0 0 var(--space-4) !important;
  margin: 0 !important;
  border-bottom: var(--border-strong) !important;
}

.brand,
.footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  color: var(--black) !important;
  text-decoration: none !important;
}

.brand img,
.footer-brand img {
  width: auto !important;
  height: 40px !important;
  display: block !important;
}

.brand > span,
.footer-brand > span {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 4px !important;
}

.brand-title,
.footer-title,
.topline .brand-title {
  font-family: var(--font-display) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.brand-sub,
.footer-sub,
.topline .brand-sub {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--mid) !important;
}

.global-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0 !important;
  margin: 0 !important;
  border: var(--border-strong) !important;
  background: var(--paper) !important;
}

.global-nav a {
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--black) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-decoration: none !important;
  text-transform: lowercase !important;
  white-space: nowrap !important;
  transition: background .16s ease, color .16s ease !important;
}

.global-nav a + a {
  border-left: var(--border-strong) !important;
}

/* All nav slashes are black per design spec — neutral surfaces are for surfaces, not UI chrome */
.global-nav a .nav-slash { color: var(--accent) !important; }

.global-nav a::after {
  content: none !important;
}

.global-nav a:hover,
.global-nav a:focus-visible {
  background: var(--faint) !important;
  color: var(--black) !important;
}
.global-nav a[aria-current="page"] {
  background: var(--black) !important;
  color: var(--paper) !important;
}
.global-nav a[aria-current="page"] .nav-slash {
  color: var(--accent) !important;  /* slash stays orange even on inverted bg */
}

.nav-slash,
.hero-title-slash,
.tool-title-slash {
  color: var(--hero-accent, var(--accent)) !important;
}

main {
  display: block !important;
}

#main > .page-title {
  max-width: 1180px !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.hero {
  padding: 72px 0 50px !important;
  margin: 0 !important;
  border-bottom: var(--border) !important;
  background: transparent !important;
}

.hero-eyebrow,
.section-label,
.label,
.search-kicker,
.card-kicker,
.area-kicker,
.detail-section-label,
.workflow-meta h2,
.glossary-section-title,
.panel-label {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  line-height: 1.25 !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--mid) !important;
}

.hero-eyebrow {
  display: inline-block !important;
  padding-bottom: 5px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid currentColor !important;
}

.hero h1 {
  max-width: 1120px !important;
  margin: 0 !important;
  color: var(--black) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(48px, 7.4vw, 104px) !important;
  line-height: .88 !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.hero h1 em {
  display: block !important;
  max-width: 780px !important;
  margin-top: 18px !important;
  color: var(--black) !important;
  font-style: normal !important;
  font-size: clamp(26px, 3.4vw, 50px) !important;
  line-height: 1.04 !important;
  font-weight: 300 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}

.hero p,
.home-hero p,
.about p,
.area-desc,
.card-desc,
.workflow-card p,
.glossary-card p,
.detail-notes,
.detail-grid,
.template-panel p {
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0 !important;
}

.hero p {
  max-width: 700px !important;
  margin-top: 26px !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}

.search-block {
  max-width: 760px !important;
  margin: var(--space-6) 0 0 !important;
}

.search-row,
#search-wrap {
  display: grid !important;
  grid-template-columns: 44px minmax(0,1fr) 44px !important;
  align-items: center !important;
  gap: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  border: var(--border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.search-row:focus-within,
#search-wrap:focus-within {
  border-radius: 0 !important;
}

.search-row input,
#search-wrap input,
.search-row button,
#search-wrap button,
.search-icon,
#search-icon {
  border-radius: 0 !important;
}

.search-row input,
#search {
  height: 46px !important;
  min-width: 0 !important;
  padding: 0 12px !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--black) !important;
  font-size: 15px !important;
}

.search-icon,
#search-icon {
  height: 46px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-right: var(--border-strong) !important;
  color: var(--mid) !important;
}

.search-row button,
#clear-search,
#global-search-clear,
#clear-search-btn {
  width: 44px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: var(--border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mid) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#clear-search::before,
#clear-search::after,
#global-search-clear::before,
#global-search-clear::after,
#clear-search-btn::before,
#clear-search-btn::after {
  content: none !important;
  display: none !important;
}

.search-row button:hover,
#clear-search:hover,
#global-search-clear:hover,
#clear-search-btn:hover {
}

.area-grid,
.workflow-grid,
.glossary-grid,
.library-grid,
.category-grid,
#category-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
  gap: 16px !important;
  margin-top: var(--space-6) !important;
}

.area-card,
.workflow-card,
.category-card,
.glossary-card,
.library-card,
.tool-card,
.ov-category,
.template-panel,
.detail-notes,
.footer-box {
  border: var(--border-strong) !important;
  border-radius: 0 !important;
  background: var(--surface) !important;
  color: var(--black) !important;
}

.area-card,
.workflow-card,
.category-card,
.knowledge-block,
.library-card,
.tool-card,
.ov-category {
  min-height: clamp(300px, 28vw, 420px) !important;
  aspect-ratio: auto !important;
  padding: 28px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-decoration: none !important;
  overflow: visible !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease !important;
  container-type: inline-size !important;
}

/* ── Area card surface colours (earth-tone fills per spec) ── */
.area-card-create {
  background: var(--sage) !important;   /* #ffffff — white */
  color: var(--black) !important;
}
.area-card-make {
  background: var(--sand) !important;   /* #ffffff — white */
  color: var(--black) !important;
}
.area-card-impact {
  background: var(--slate) !important;  /* #ffffff — white (dark) */
  color: var(--paper) !important;       /* paper text on dark surface */
}
.area-card-impact .area-title,
.area-card-impact .card-title,
.area-card-impact .area-desc,
.area-card-impact .card-desc,
.area-card-impact .area-kicker,
.area-card-impact .card-kicker {
  color: var(--paper) !important;
}
.area-card-impact .area-links,
.area-card-impact .card-links {
  color: #000000 !important;
}

.area-card::before,
.category-card::before {
  content: none !important;
}

a.knowledge-block {
  position: relative;
  overflow: hidden;
}
a.knowledge-block::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  transform: translateY(100%) !important;
  transition: transform .28s cubic-bezier(.22,1,.36,1) !important;
  z-index: 0 !important;
}
a.knowledge-block:hover::before,
a.knowledge-block:focus-visible::before {
  transform: translateY(0) !important;
}
a.knowledge-block > * {
  position: relative;
  z-index: 1;
}
a.knowledge-block:hover,
a.knowledge-block:focus-visible {
}

.area-card:hover,
.area-card:focus-visible,
.workflow-card:hover,
.workflow-card:focus-visible,
.category-card:hover,
.category-card:focus-visible,
.library-card:hover,
.library-card:focus-visible,
.tool-card:hover,
.tool-card:focus-visible {
}

.area-title,
.card-title,
.workflow-card h2,
.glossary-card h3,
.library-card h2,
.tool-card h2,
.ov-category h2 {
  color: var(--black) !important;
  font-family: var(--font-display) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  font-size: clamp(30px, 3.4vw, 58px) !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
  white-space: normal !important;
}

.area-desc,
.card-desc {
  display: block !important;
  max-width: 36rem !important;
  margin-top: 24px !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

.area-links,
.card-links,
.card-tags,
.workflow-tools,
.quick-path {
  color: var(--mid) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.quick-access,
.about,
.matrix-shell,
.content-section,
.detail-shell,
.workflow-layout,
.template-panel,
.footer {
  margin-top: var(--space-7) !important;
}

.quick-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
  gap: 0 !important;
  border-top: var(--border) !important;
  border-left: var(--border) !important;
}

.quick-grid a {
  min-height: 64px !important;
  padding: 14px 16px !important;
  border-right: var(--border) !important;
  border-bottom: var(--border) !important;
  background: transparent !important;
  color: var(--black) !important;
  text-decoration: none !important;
}

.quick-name {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.tab-bar,
#tab-bar,
.tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: var(--space-5) 0 !important;
}

.tab-btn,
.filter-btn,
.pill,
.card-tag,
.workflow-tools span {
  min-height: 36px !important;
  padding: 0 14px !important;
  border: var(--border-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mid) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.tab-btn .tab-icon {
  display: none !important;
}

.tab-btn.active,
.tab-btn:hover,
.filter-btn.active,
.filter-btn:hover {
}

.command-btn,
.tool-btn,
.cluster-btn,
.list-row,
.result,
.gs-result {
  border-
  border-radius: 0 !important;
}

.command-btn:hover,
.command-btn.active,
.tool-btn:hover,
.tool-btn.active,
.cluster-btn:hover,
.cluster-btn.active,
.list-row:hover,
.result:hover,
.gs-result:hover {
}

.command-syntax,
.result-sub,
.gs-path,
.gs-tool,
.result-area,
.gs-badge {
  font-family: var(--font-mono) !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

.result-badge {
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.detail-grid,
.workflow-layout {
  display: grid !important;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) !important;
  gap: 24px !important;
}

.workflow-meta,
.detail-sidebar,
.meta-panel {
  border: var(--border-strong) !important;
  background: var(--surface) !important;
  padding: 24px !important;
}
.workflow-meta {
  position: relative !important;
}

.footer {
  padding-top: 28px !important;
  border-top: var(--border-strong) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-6) !important;
  color: var(--mid) !important;
}

.footer-nav {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 0 !important;
}

.footer-nav a {
  min-height: 34px !important;
  padding: 7px 13px !important;
  margin-left: -1px !important;
  border: var(--border) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.footer-nav a:hover {
}

@media (max-width: 960px) {
  #page {
    width: min(100% - 32px, var(--content-max)) !important;
  }

  .hero {
    padding: 52px 0 40px !important;
  }

  .hero h1 {
    font-size: clamp(42px, 14vw, 82px) !important;
  }

  .hero h1 em {
    font-size: clamp(24px, 7vw, 40px) !important;
  }

  .detail-grid,
  .workflow-layout {
    grid-template-columns: 1fr !important;
  }
}

/* ── iPad mini portrait & kleines Tablet (≤ 840px) ─────── */
@media (max-width: 840px) {
  .topline {
    gap: 16px !important;
  }

  /* Nav bleibt horizontal, scrollt bei Platzmangel */
  .global-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    justify-content: flex-start !important;
    width: auto !important;
  }
  .global-nav::-webkit-scrollbar { display: none !important; }

  .global-nav a {
    flex-shrink: 0 !important;
    padding: 0 14px !important;
  }
}

/* ── Phones & sehr schmale Geräte (≤ 680px) ────────────── */
@media (max-width: 680px) {
  .topline,
  .footer {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .global-nav {
    width: 100% !important;
  }

  .footer-nav {
    justify-content: flex-start !important;
    width: 100% !important;
  }
}

@media (max-width: 640px) {
  #page {
    width: min(100% - 24px, var(--content-max)) !important;
    padding-top: 18px !important;
  }

  .brand img,
  .footer-brand img {
    height: 34px !important;
  }

  .global-nav a {
    flex: 1 1 auto !important;
    padding: 0 12px !important;
  }

  .area-card,
  .workflow-card,
  .category-card,
  .library-card,
  .tool-card,
  .ov-category {
    min-height: 220px !important;
    padding: 22px !important;
  }

  .result,
  .gs-result {
    grid-template-columns: 1fr !important;
  }
}

.workflow-meta ul {
  list-style: none !important;
}
.workflow-meta li {
  display: inline-flex !important;
  align-items: baseline !important;
  width: fit-content !important;
  min-height: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  outline: 0 !important;
  color: rgba(17,17,17,.58) !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.workflow-meta li::before {
  content: "/" !important;
  margin-right: 1px !important;
  color: var(--accent) !important;  /* black — slashes always orange */
}

/* ── Platform Context Strip ── */
.platform-context {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-top: 64px !important;
  padding: 28px 0 !important;
  border-top: var(--border-strong) !important;
}
.ctx-arrow {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--pale) !important;
  padding: 0 20px !important;
  padding-top: 2px !important;
  flex-shrink: 0 !important;
}
.ctx-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  text-decoration: none !important;
  flex: 1 !important;
  transition: color .14s ease !important;
}
.ctx-item:hover { }
.ctx-item.ctx-active {
  color: var(--black) !important;
  cursor: default !important;
  pointer-events: none !important;
}
.ctx-label {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.ctx-desc {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: var(--mid) !important;
}
.ctx-item.ctx-active .ctx-desc { color: var(--ink) !important; }


@media (max-width: 680px) {
  .platform-context { flex-direction: column !important; gap: 20px !important; }
  .ctx-arrow { display: none !important; }
}

/* ── Detail panel title — overrides all legacy sizes ── */
#d-title,
body.make-detail-page #d-title {
  font-size: clamp(18px, 1.8vw, 26px) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !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;
}



/* ── 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;
}


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

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 {
  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;
}