/* ============================================================
   KNOW/HOW/TO - Toolbox page patterns
   Extracted from repeated inline styles during consolidation round 2.
   Keep page-specific content and interaction logic in the HTML/JS files.
   ============================================================ */

.matrix-shell,
.matrix-grid,
.category-grid,
.tools-grid,
.commands-panel,
.detail-panel,
.shortcuts-grid,
.glossary-grid,
.overview-grid {
  min-width: 0;
}
.hero h1,
.hero h1 em,
.toolbox-title,
.matrix-title {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.matrix-grid,
.category-grid,
.tools-grid,
.shortcuts-grid,
.glossary-grid,
.overview-grid {
  display: grid;
  gap: 0;
}
.category-cell,
.matrix-cell,
.command-btn,
.node-btn,
.tool-btn,
.shortcut-card,
.glossary-card,
.ov-category {
  border-radius: 0;
}
.tab-content[hidden],
.view[hidden],
.is-hidden {
  display: none !important;
}
.commands-empty,
.empty-state,
#nodes-placeholder {
  padding: 28px 18px;
  color: var(--mid);
  font-size: 13px;
}
.toolbox-empty-state {
  padding: 40px 16px;
  color: var(--mid);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.toolbox-inline-empty {
  padding: 24px 16px;
  color: var(--mid);
  font-size: 13px;
}
.toolbox-meta-note {
  padding: 10px 16px;
  color: var(--mid);
  font-size: 12px;
  border-top: var(--border);
  border-right: var(--border);
}
.toolbox-content-wrap {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: var(--gap-lg) 0 var(--gap-xl);
}
.toolbox-info-block {
  margin-top: 40px;
  margin-bottom: 28px;
}
.toolbox-student-info {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 2px solid #000;
  margin-bottom: 28px;
}
.toolbox-overview-list {
  height: 420px;
  max-height: 420px;
  overflow-y: auto;
  flex: 0 0 420px;
  min-height: 0;
}
.toolbox-badge-hidden {
  display: none;
}
.toolbox-plugin-badge {
  display: inline-block;
  background: transparent;
  color: rgba(0,0,0,.58);
  border: 0;
}
.toolbox-plugin-badge.is-hidden {
  display: none;
}
.node-label.is-active {
  font-weight: 700;
}
.node-label:not(.is-active) {
  font-weight: 600;
}
.global-search-modal,
.search-modal,
.overlay,
.modal {
  border-radius: 0;
}

.area-card,
.workflow-card,
.category-card,
.glossary-card,
.library-card,
.tool-card,
.command-btn,
.node-btn,
.ov-category,
.matrix-cell,
.category-cell {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.area-title,
.card-title,
.workflow-card h2,
.glossary-card h3,
.library-card-title,
.home-card-title,
.node-label,
.command-btn span,
.ov-cat-title,
.ov-cat-name {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.hero-title-slash{
  color:var(--accent);
}
.topline,
.hero,
.search-block,
#tool-controls,
#tabs,
#main,
#content-wrap,
#view-overview,
#view-shortcuts,
#view-glossary,
#info-block,
#student-info,
.footer{
  width:var(--kht-tool-width) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#page > footer.footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
#tool-controls{
  display:flex !important;
  align-items:flex-end !important;
  gap:24px !important;
  margin-top:36px !important;
}
#tool-controls #tab-bar,
#tool-controls #tabs{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap:16px !important;
  margin:0 !important;
  flex:1 1 auto !important;
}
#tool-controls .tab-btn{
  width:100% !important;
  min-width:0 !important;
}
#main,
#content-wrap{
  padding-left:0 !important;
  padding-right:0 !important;
}
.tab-btn:hover,
.tab-btn.active{}
.global-nav a:hover,
.global-nav a[aria-current="page"]{
}
@media(max-width:900px){
  #tool-controls{display:grid !important;grid-template-columns:1fr !important;}
}

/* Source: knowhowto/grasshopper/index.html | style#final-tab-framework-readability */
/* FINAL TAB + FRAMEWORK READABILITY 2026-05-18 */
#tabs .tab-btn,
#tab-bar .tab-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
#tabs .tab-btn .tab-icon,
#tabs .tab-btn .tab-label,
#tab-bar .tab-btn .tab-icon,
#tab-bar .tab-btn .tab-label {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#tabs .tab-btn > svg,
#tab-bar .tab-btn > svg {
  display: inline-block !important;
  flex: 0 0 auto !important;
  margin-right: 0 !important;
}
#tabs #tab-overview,
#tab-bar #tab-overview {
  flex-direction: row !important;
}
#view-overview #ov-matrix {
  align-items: start !important;
}
#view-overview .ov-cat-card,
#view-overview .ov-category {
  height: 484px !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#view-overview .ov-cat-header,
#view-overview .ov-cat-card .ov-cat-header,
#view-overview .ov-category .ov-cat-header {
  height: 64px !important;
  flex: 0 0 64px !important;
  box-sizing: border-box !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
#view-overview .ov-cat-icon {
  font-size: 23px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}
#view-overview .ov-cat-title,
#view-overview .ov-cat-name,

#view-overview .ov-cat-count {
  margin-left: auto !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  color: rgba(0,0,0,.55) !important;
}
#view-overview .ov-cat-list {
  height: 420px !important;
  max-height: 420px !important;
  flex: 0 0 420px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
}

/* Source: knowhowto/grasshopper/index.html | style#glossary-link-css */
/* GLOSSARY CROSS LINKS 2026-05-19 */
.glossary-term-link{
  display:inline;
  border:0;
  font:inherit;
  font-weight:800;
  padding:0 1px;
  cursor:pointer;
  text-decoration:none;
}
.glossary-term-link:hover{
}
.glossary-card.glossary-hit{
  outline:2px solid #000;
  outline-offset:-2px;
  background:rgba(234,255,69,.22);
}
/* ── 4vw side margins (matching workflows page) ── */
#header-top,#tabs,#main,#student-info{width:min(1400px,calc(100% - 56px)) !important;margin-left:auto !important;margin-right:auto !important;}
#student-info{border-top:0 !important;border-bottom:0 !important;padding-top:0 !important;}

@media(max-width:900px){
  #header-top,#tabs,#main{width:calc(100% - 32px) !important;}
}

/* Source: knowhowto/grasshopper/index.html | style#header-overlap-fix-2026-05-27 */
/* Header overlap fix: keep tabs, labels and search in separate tracks. */
#header-controls{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 420px) !important;
  align-items:end !important;
  gap:34px !important;
  margin-top:46px !important;
  width:100% !important;
}
#tab-bar,
#tabs{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:22px !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  align-items:stretch !important;
  margin-top:0 !important;
}
#tabs{
  grid-template-columns:repeat(5, minmax(0, 1fr)) minmax(320px, 420px) !important;
}
#tab-bar .tab-btn,
#tabs .tab-btn{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:46px !important;
  min-height:46px !important;
  padding:0 14px !important;
  overflow:hidden !important;
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  white-space:nowrap !important;
  line-height:1 !important;
  font-size:0 !important;
  letter-spacing:0 !important;
}
#tab-bar .tab-btn .tab-icon,
#tab-bar .tab-btn .tab-label,
#tabs .tab-btn .tab-icon,
#tabs .tab-btn .tab-label,
#tabs .tab-btn > svg,
#tab-bar .tab-btn > svg{
  display:inline-flex !important;
  align-items:center !important;
  flex:0 0 auto !important;
  min-width:0 !important;
  font-size:15px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
  white-space:nowrap !important;
  margin:0 !important;
}
#tab-bar .tab-btn .tab-label,
#tabs .tab-btn .tab-label{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#tab-bar .tab-btn .tab-sub,
#tabs .tab-btn .tab-sub,
#tab-bar .tab-btn small,
#tabs .tab-btn small,
#tab-bar .tab-btn [class*="desc"],
#tabs .tab-btn [class*="desc"],
#tab-bar .tab-btn [class*="hint"],
#tabs .tab-btn [class*="hint"]{
  display:none !important;
}
#header-controls #search-wrap,
#tabs #search-wrap{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin-left:0 !important;
  justify-self:stretch !important;
}
@media(max-width:1180px){
  #header-controls{grid-template-columns:1fr !important;gap:24px !important;}
  #tab-bar{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
  #tabs{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}
@media(max-width:700px){
  #tab-bar,
  #tabs{grid-template-columns:1fr !important;gap:10px !important;}
}

/* Source: knowhowto/grasshopper/index.html | style#header-overlap-fix-grid-refine-2026-05-27 */
#tabs{grid-template-columns:repeat(4, minmax(0, 1fr)) minmax(320px, 420px) !important;}
#tabs:has(#tab-plugins){grid-template-columns:repeat(5, minmax(0, 1fr)) minmax(320px, 420px) !important;}

/* Source: knowhowto/grasshopper/index.html | style#header-width-lock-2026-05-27 */
#header-top,
#tabs{
  width:min(92vw,1380px) !important;
  max-width:1380px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
#tabs{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(0,1fr)) minmax(320px,420px) !important;
  gap:22px !important;
  align-items:stretch !important;
  margin-top:28px !important;
}
#tabs .tab-btn{
  width:100% !important;
  min-width:0 !important;
}
#tabs #search-wrap{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin-left:0 !important;
  justify-self:stretch !important;
}
@media(max-width:1180px){
  #tabs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:700px){
  #header-top,
  #tabs{width:calc(100% - 32px) !important;}
  #tabs{grid-template-columns:1fr !important;gap:10px !important;}
}

/* Align toolbox blocks with the page edge used by hero and search. */
#page > #tool-controls,
#page > .topline,
#page > .hero,
#page > .search-block,
#page > #main,
#page > #content-wrap,
#page > #view-overview,
#page > #view-shortcuts,
#page > #view-glossary,
#page > #info-block,
#page > #student-info,
#page > .toolbox-content-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#page > #tool-controls #tab-bar,
#page > #tool-controls #tabs {
  width: 100% !important;
}

#page > .hero {
  border-bottom: 0 !important;
}

/* Source: knowhowto/grasshopper/index.html | style#header-bar-width-2026-05-27 */
#header{
  border-bottom:0 !important;
  background-color:#fff !important;
  background-image: transparent;
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  background-size:min(1720px, calc(100% - 64px)) 2px !important;
}
@media(max-width:900px){
  #header{background-size:calc(100% - 44px) 2px !important;}
}

.topline,
.hero,
.search-block,
#tool-controls,
#tabs,
#main,
#content-wrap,
#view-overview,
#view-shortcuts,
#view-glossary,
#info-block,
#student-info,
.footer{
  width:var(--kht-tool-width) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

#page > footer.footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
#tool-controls{
  display:flex !important;
  align-items:flex-end !important;
  gap:24px !important;
  margin-top:36px !important;
}
#tool-controls #tab-bar,
#tool-controls #tabs{
  width:100% !important;
  display:grid !important;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap:16px !important;
  margin:0 !important;
  flex:1 1 auto !important;
}
#tool-controls .tab-btn{
  width:100% !important;
  min-width:0 !important;
}
#main,
#content-wrap{
  padding-left:0 !important;
  padding-right:0 !important;
}
.tab-btn:hover,
.tab-btn.active{}
.global-nav a:hover,
.global-nav a[aria-current="page"]{
}
@media(max-width:900px){
  #tool-controls{display:grid !important;grid-template-columns:1fr !important;}
}
/* ── UNIFIED TAB BUTTON DESIGN ─────────────────────────── */
#tool-controls #tab-bar,
#tool-controls #tabs {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 4px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  align-items: center !important;
}
#tool-controls #tab-bar .tab-btn,
#tool-controls #tabs .tab-btn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  border: var(--border-strong) !important;
  background: transparent !important;
  color: var(--mid) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .12s, color .12s !important;
}
#tool-controls #tab-bar .tab-btn .tab-icon,
#tool-controls #tab-bar .tab-btn .tab-label,
#tool-controls #tabs .tab-btn .tab-icon,
#tool-controls #tabs .tab-btn .tab-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  display: inline !important;
}
#tool-controls #tab-bar .tab-btn:hover,
#tool-controls #tabs .tab-btn:hover { }
#tool-controls #tab-bar .tab-btn.active,
#tool-controls #tabs .tab-btn.active { background: var(--hover-bg) !important; color: var(--white) !important; border-color: var(--hover-bg) !important; }

/* Source: knowhowto/keyshot/index.html | style#glossary-link-css */
/* GLOSSARY CROSS LINKS 2026-05-19 */
.glossary-term-link{
  display:inline;
  border:0;
  font:inherit;
  font-weight:800;
  padding:0 1px;
  cursor:pointer;
  text-decoration:none;
}
.glossary-term-link:hover{
}
.glossary-card.glossary-hit{
  outline:2px solid #000;
  outline-offset:-2px;
  background:rgba(234,255,69,.22);
}
/* ── 4vw side margins (matching workflows page) ── */
#header-top,#tabs,#main,#info-block{width:min(1400px,calc(100% - 56px)) !important;margin-left:auto !important;margin-right:auto !important;}
#info-block{border-top:0 !important;border-bottom:0 !important;padding-top:0 !important;}

@media(max-width:900px){
  #header-top,#tabs,#main{width:calc(100% - 32px) !important;}
}

/* Source: knowhowto/keyshot/index.html | style#header-width-lock-2026-05-27 */
#header-top,
#tabs{
  width:min(92vw,1380px) !important;
  max-width:1380px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
#tabs{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) minmax(320px,420px) !important;
  gap:22px !important;
  align-items:stretch !important;
  margin-top:28px !important;
}
#tabs .tab-btn{
  width:100% !important;
  min-width:0 !important;
}
#tabs #search-wrap{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin-left:0 !important;
  justify-self:stretch !important;
}
@media(max-width:1180px){
  #tabs{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:700px){
  #header-top,
  #tabs{width:calc(100% - 32px) !important;}
  #tabs{grid-template-columns:1fr !important;gap:10px !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;
}

/* ============================================================
   Unified CREATE tool browser
   Rhino and Grasshopper keep their own data logic, but share the
   visual rhythm of the MAKE/SHOW theme browsers.
   ============================================================ */

body.tool-rhino #browse-view,
body.tool-grasshopper #browse-view {
  width: var(--kht-tool-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.tool-rhino #browse-view::before,
body.tool-grasshopper #browse-view::before,
body.tool-keyshot .kht-browser::before {
  content: "";
  display: block;
  height: 4px;
  margin: 0 0 18px;
  background: #000 !important;
}

body.tool-rhino #filter-row,
body.tool-grasshopper #filter-row,
body.tool-keyshot .kht-browser-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 0 !important;
  margin: 0 0 18px !important;
  border-top: 1px solid #1a1a1a !important;
  border-left: 1px solid #1a1a1a !important;
  background: #ffffff !important;
}

body.tool-rhino #filter-row .cat-btn,
body.tool-grasshopper #filter-row .cat-btn,
body.tool-keyshot .kht-browser-tab {
  min-height: 58px !important;
  padding: 13px 16px 12px !important;
  border: 0 !important;
  border-right: 1px solid #1a1a1a !important;
  border-bottom: 1px solid #1a1a1a !important;
  background: transparent !important;
  color: #666 !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: clamp(9px, .72vw, 10px) !important;
  font-weight: 500 !important;
  letter-spacing: .1em !important;
  line-height: 1.32 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: normal !important;
}

body.tool-rhino #filter-row .cat-btn:hover,
body.tool-rhino #filter-row .cat-btn.active,
body.tool-rhino #filter-row .cat-btn.is-active,
body.tool-grasshopper #filter-row .cat-btn:hover,
body.tool-grasshopper #filter-row .cat-btn.active,
body.tool-grasshopper #filter-row .cat-btn.is-active,
body.tool-keyshot .kht-browser-tab:hover,
body.tool-keyshot .kht-browser-tab.active,
body.tool-keyshot .kht-browser-tab.is-active {
  background: #f2f4f5 !important;
  color: #1a1a1a !important;
}

body.tool-rhino #filter-row .cat-btn.active,
body.tool-rhino #filter-row .cat-btn.is-active,
body.tool-grasshopper #filter-row .cat-btn.active,
body.tool-grasshopper #filter-row .cat-btn.is-active,
body.tool-keyshot .kht-browser-tab.active,
body.tool-keyshot .kht-browser-tab.is-active {
  box-shadow: inset 0 -3px 0 #1a1a1a !important;
}

body.tool-rhino #filter-row .cat-label,
body.tool-rhino #filter-row .cat-count,
body.tool-grasshopper #filter-row .sec-label,
body.tool-grasshopper #filter-row .sec-sub,
body.tool-keyshot .kht-browser-tab-title,
body.tool-keyshot .kht-browser-tab-count {
  display: block !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  text-wrap: normal !important;
}

body.tool-rhino #filter-row .cat-count,
body.tool-grasshopper #filter-row .sec-sub,
body.tool-keyshot .kht-browser-tab-count {
  margin-top: 5px !important;
  color: #8a8a8a !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
}

body.tool-rhino #panel,
body.tool-grasshopper #panel,
body.tool-keyshot .kht-browser-shell {
  padding: 0 !important;
  border: 2px solid #1a1a1a !important;
  background: #fff !important;
  min-height: 720px !important;
}

body.tool-rhino #panel-header,
body.tool-grasshopper #panel-header,
body.tool-keyshot .kht-browser-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end !important;
  gap: 28px !important;
  min-height: 118px !important;
  padding: 26px 30px 24px !important;
  border-bottom: 1px solid #ddd !important;
  background: linear-gradient(180deg, #fff 0%, #f8f8f7 100%) !important;
}

body.tool-rhino #ph-kicker,
body.tool-grasshopper #ph-kicker,
body.tool-rhino #ph-path,
body.tool-grasshopper #ph-path,
body.tool-keyshot .kht-browser-kicker,
body.tool-keyshot .kht-browser-path {
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #6f6f6f !important;
}

body.tool-rhino #ph-cat,
body.tool-grasshopper #ph-name,
body.tool-keyshot .kht-browser-head h2 {
  margin: 0 !important;
  color: #1a1a1a !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  line-height: 1.03 !important;
  text-transform: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto !important;
  text-wrap: balance !important;
}

body.tool-rhino #panel-body,
body.tool-grasshopper #panel-body,
body.tool-keyshot .kht-browser-body {
  display: grid !important;
  grid-template-columns: minmax(180px, 220px) minmax(260px, 340px) minmax(0, 1fr) !important;
  min-height: 620px !important;
}

body.tool-rhino #sub-list,
body.tool-grasshopper #sub-list,
body.tool-rhino #items-list,
body.tool-grasshopper #items-list,
body.tool-keyshot .kht-browser-list,
body.tool-keyshot .kht-browser-items {
  overflow-y: auto !important;
  max-height: 620px !important;
  border-right: 1px solid #ddd !important;
  background: #ffffff !important;
}

body.tool-rhino .sub-btn,
body.tool-grasshopper .sub-btn {
  width: 100% !important;
  min-height: 48px !important;
  padding: 14px 18px !important;
  border: 0 !important;
  border-bottom: 1px solid #eee !important;
  background: transparent !important;
  color: #1a1a1a !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  line-height: 1.35 !important;
  text-align: left !important;
  text-transform: uppercase !important;
}

body.tool-rhino .sub-btn:hover,
body.tool-rhino .sub-btn.active,
body.tool-grasshopper .sub-btn:hover,
body.tool-grasshopper .sub-btn.active {
  background: #f0f2f3 !important;
}

body.tool-rhino .sub-btn.active,
body.tool-grasshopper .sub-btn.active {
  box-shadow: inset 4px 0 0 #1a1a1a !important;
}

body.tool-rhino .item-card,
body.tool-grasshopper .item-card {
  min-height: 82px !important;
  padding: 16px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid #eee !important;
  background: transparent !important;
  color: #1a1a1a !important;
  text-align: left !important;
}

body.tool-rhino .item-card:hover,
body.tool-rhino .item-card.active,
body.tool-rhino .item-card.is-active,
body.tool-grasshopper .item-card:hover,
body.tool-grasshopper .item-card.active,
body.tool-grasshopper .item-card.is-active {
  background: #f0f2f3 !important;
}

body.tool-rhino .item-card.active,
body.tool-rhino .item-card.is-active,
body.tool-grasshopper .item-card.active,
body.tool-grasshopper .item-card.is-active {
  box-shadow: inset 4px 0 0 #1a1a1a !important;
}

body.tool-rhino .item-name,
body.tool-grasshopper .item-name {
  color: #1a1a1a !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em !important;
}

body.tool-rhino .item-sub,
body.tool-grasshopper .item-sub {
  margin-top: 7px !important;
  color: #666 !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body.tool-rhino #detail,
body.tool-grasshopper #detail {
  padding: clamp(34px, 4.2vw, 64px) !important;
  max-height: 620px !important;
  overflow-y: auto !important;
  background: #fff !important;
}

body.tool-rhino #detail-content,
body.tool-grasshopper #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.tool-rhino #d-title,
body.tool-grasshopper #d-title {
  color: #1a1a1a !important;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(32px, 4vw, 64px) !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  line-height: .98 !important;
  text-transform: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto !important;
  text-wrap: balance !important;
}

body.tool-rhino .tool-detail-short,
body.tool-grasshopper .tool-detail-short {
  max-width: 720px !important;
  color: #1a1a1a !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

body.tool-rhino #d-desc,
body.tool-grasshopper #d-desc {
  max-width: 760px !important;
  color: #333 !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
  margin-top: 22px !important;
  padding-top: 24px !important;
  border-top: 1px solid #ddd !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: auto !important;
}

/* Keep the tool-description body copy identical across Rhino, Grasshopper,
   KeyShot and Affinity regardless of which body.tool-* class is present. */
#d-desc {
  font-size: 16px !important;
  font-weight: 400 !important;
}

body.tool-rhino .tool-detail-grid,
body.tool-grasshopper .tool-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: clamp(20px, 3vw, 34px) !important;
  margin-top: 24px !important;
}

body.tool-rhino .tool-detail-grid section,
body.tool-rhino .detail-notes,
body.tool-rhino .related-section,
body.tool-grasshopper .tool-detail-grid section,
body.tool-grasshopper .detail-notes,
body.tool-grasshopper .related-section {
  border: 0 !important;
  border-top: 1px solid #d6d6d6 !important;
  padding: clamp(18px, 2vw, 26px) 0 0 !important;
  background: transparent !important;
}

body.tool-rhino .tool-detail-grid h3,
body.tool-rhino .detail-notes h3,
body.tool-rhino .related-section h3,
body.tool-grasshopper .tool-detail-grid h3,
body.tool-grasshopper .detail-notes h3,
body.tool-grasshopper .related-section h3 {
  margin: 0 0 12px !important;
  color: #555 !important;
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
}

body.tool-rhino .tool-detail-grid p,
body.tool-rhino .tool-detail-grid li,
body.tool-rhino .detail-notes p,
body.tool-rhino .detail-notes li,
body.tool-grasshopper .tool-detail-grid p,
body.tool-grasshopper .tool-detail-grid li,
body.tool-grasshopper .detail-notes p,
body.tool-grasshopper .detail-notes li {
  color: #424242 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

body.tool-rhino .tag,
body.tool-rhino .wf-step,
body.tool-grasshopper .tag,
body.tool-grasshopper .wf-step {
  font-family: var(--font-mono, "DM Mono", monospace) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

@media (max-width: 980px) {
  body.tool-rhino #panel-header,
  body.tool-grasshopper #panel-header {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    padding: 22px !important;
  }

  body.tool-rhino #panel-body,
  body.tool-grasshopper #panel-body {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }

  body.tool-rhino #sub-list,
  body.tool-grasshopper #sub-list {
    display: flex !important;
    flex-wrap: wrap !important;
    max-height: none !important;
    border-right: 0 !important;
    border-bottom: 1px solid #ddd !important;
  }

  body.tool-rhino .sub-btn,
  body.tool-grasshopper .sub-btn {
    flex: 1 0 auto !important;
    width: auto !important;
    border-right: 1px solid #eee !important;
    border-bottom: 0 !important;
  }

  body.tool-rhino #items-list,
  body.tool-grasshopper #items-list {
    max-height: 320px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #ddd !important;
  }

  body.tool-rhino #detail,
  body.tool-grasshopper #detail {
    max-height: none !important;
  }
}

/* Final fixed-height sync with the global themebrowser system. */
body.tool-rhino #browse-view,
body.tool-grasshopper #browse-view {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

body.tool-rhino #panel,
body.tool-grasshopper #panel,
body.tool-keyshot .kht-browser-shell {
  height: var(--kht-browser-height, clamp(827px, 101vh, 1120px)) !important;
  min-height: var(--kht-browser-height, clamp(827px, 101vh, 1120px)) !important;
  max-height: var(--kht-browser-height, clamp(827px, 101vh, 1120px)) !important;
  overflow: hidden !important;
}

body.tool-rhino #panel-body,
body.tool-grasshopper #panel-body,
body.tool-keyshot .kht-browser-body {
  height: var(--kht-browser-body-height, calc(clamp(827px, 101vh, 1120px) - 124px)) !important;
  min-height: 0 !important;
  max-height: var(--kht-browser-body-height, calc(clamp(827px, 101vh, 1120px) - 124px)) !important;
  overflow: hidden !important;
}

body.tool-rhino #sub-list,
body.tool-rhino #items-list,
body.tool-rhino #detail,
body.tool-grasshopper #sub-list,
body.tool-grasshopper #items-list,
body.tool-grasshopper #detail {
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

@media (max-width: 980px) {
  /* #panel-body must drop out of CSS Grid here, not just switch to a
     single column. Its children (sub-list/items-list/detail) all use
     overflow-y:auto, and a grid row's automatic minimum size for a
     scroll-generating child resolves to 0 regardless of min-height —
     so with height:auto the whole row (and the panel) collapsed to
     ~0px in every engine, hiding the content entirely (reproduced
     outside Safari too). Plain block stacking sizes to content as
     expected and keeps each section's own max-height/scroll intact. */
  body.tool-rhino #panel,
  body.tool-rhino #panel-body,
  body.tool-grasshopper #panel,
  body.tool-grasshopper #panel-body {
    display: block !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.tool-rhino #sub-list,
  body.tool-rhino #detail,
  body.tool-grasshopper #sub-list,
  body.tool-grasshopper #detail {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }

  body.tool-rhino #items-list,
  body.tool-grasshopper #items-list {
    height: auto !important;
    min-height: auto !important;
    max-height: 340px !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;
}


/* KeyShot uses the shared generated topic browser; align its rhythm with Rhino/Grasshopper. */
body.tool-keyshot .tool-secondary-nav {
  margin: 24px 0 32px !important;
}
body.tool-keyshot .kht-browser {
  margin-top: 0 !important;
}
body.tool-keyshot .kht-browser-tabs {
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}
body.tool-keyshot .kht-browser-tab {
  min-height: 58px !important;
}
body.tool-keyshot .kht-browser-shell {
  border-width: 2px !important;
}
body.tool-keyshot .kht-browser-body {
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important;
}
body.tool-keyshot .kht-browser-detail {
  min-width: 0 !important;
}

/* KeyShot Matrix page (keyshot/index.html) — genuine 3-column tool-browser,
   structurally identical to Rhino/Grasshopper. Page-local <style> in
   keyshot/index.html defines the rest; these two rules just bring the
   #panel-body/#sub-list/#items-list ids to parity with the tool-rhino/
   tool-grasshopper !important values above. Does not affect keyshot/
   grundlagen, which has no #panel-body/#sub-list/#items-list elements. */
body.tool-keyshot #panel-body {
  grid-template-columns: minmax(180px, 220px) minmax(260px, 340px) minmax(0, 1fr) !important;
}
body.tool-keyshot #sub-list,
body.tool-keyshot #items-list {
  overflow-y: auto !important;
  max-height: 620px !important;
  border-right: 1px solid #ddd !important;
  background: #ffffff !important;
}
@media (max-width: 980px) {
  body.tool-keyshot #panel-body {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  body.tool-keyshot #sub-list,
  body.tool-keyshot #items-list {
    max-height: 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;
}


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

/* TOOLBROWSER FRAME CLOSURE FINAL
   Rhino, Grasshopper, KeyShot: category row and browser panel close as one frame. */
body.tool-rhino #browse-view::before,
body.tool-grasshopper #browse-view::before,
body.tool-keyshot .kht-browser::before {
  display: none !important;
  content: none !important;
  height: 0 !important;
  margin: 0 !important;
}

body.tool-rhino #browse-view > #filter-row,
body.tool-grasshopper #browse-view > #filter-row,
body.tool-keyshot .kht-browser > .kht-browser-tabs {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

body.tool-rhino #browse-view > #filter-row + #panel,
body.tool-grasshopper #browse-view > #filter-row + #panel,
body.tool-keyshot .kht-browser > .kht-browser-tabs + .kht-browser-shell {
  margin-top: 0 !important;
  border-top: 0 !important;
}

body.tool-rhino #browse-view > #filter-row,
body.tool-grasshopper #browse-view > #filter-row,
body.tool-keyshot .kht-browser > .kht-browser-tabs,
body.tool-rhino #browse-view > #filter-row + #panel,
body.tool-grasshopper #browse-view > #filter-row + #panel,
body.tool-keyshot .kht-browser > .kht-browser-tabs + .kht-browser-shell {
  width: 100% !important;
  max-width: none !important;
}

/* TOOLBROWSER CONTROL STACK - NO GAP BETWEEN SECONDARY NAV AND CATEGORY ROW
   Rhino, Grasshopper, KeyShot: the mode buttons and category matrix read as one block. */
body.tool-rhino main.site-main > .tool-secondary-nav,
body.tool-grasshopper main.site-main > .tool-secondary-nav,
body.tool-keyshot main.site-main > .tool-secondary-nav {
  margin-bottom: 0 !important;
}

body.tool-rhino main.site-main > .tool-secondary-nav + #browse-view,
body.tool-grasshopper main.site-main > .tool-secondary-nav + #browse-view,
body.tool-keyshot main.site-main > .tool-secondary-nav + .kht-browser {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.tool-rhino main.site-main > .tool-secondary-nav + #browse-view > #filter-row,
body.tool-grasshopper main.site-main > .tool-secondary-nav + #browse-view > #filter-row,
body.tool-keyshot main.site-main > .tool-secondary-nav + .kht-browser > .kht-browser-tabs {
  margin-top: 0 !important;
}