:root {
  --page-type-ready: 1;
}

.site-main,
.area-main,
.page-hero,
.page-actions,
.main-grid,
.support-block {
  width: 100%;
}

.home-page {}
.area-page {}
.toolbox-page {}
.index-page {}
.detail-page {}
.utility-page {}

.section-create {}
.section-make {}
.section-show {}
.section-sell {}
.section-care {}
.section-explore {}

.tool-rhino {}
.tool-grasshopper {}
.tool-keyshot {}

/* AREA PAGE CARD COMPONENTS - Phase E1 */
html body.area-page #page {
  width: min(var(--content-max), calc(100% - var(--gutter) * 2)) !important;
  max-width: var(--content-max) !important;
}

html body.area-page .area-main {
  width: 100% !important;
  max-width: none !important;
}

html body.area-page .page-hero {
  width: 100% !important;
  padding: clamp(56px, 7vw, 96px) 0 clamp(36px, 5vw, 64px) !important;
  border-bottom: 0 !important;
  background: transparent !important;
}

html body.area-page .page-actions {
  width: 100% !important;
  margin: 0 0 clamp(32px, 5vw, 56px) !important;
}

html body.area-page .page-actions .search-block {
  width: min(720px, 100%) !important;
  max-width: 720px !important;
  margin: 0 !important;
}

html body.area-page :is(.search-results-area, #search-results) {
  margin: 0 0 clamp(24px, 4vw, 40px) !important;
  border: 0 !important;
}

html body.area-page :is(.area-grid.main-grid, .tool-grid.main-grid, #category-grid.main-grid) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

html body.area-page :is(.area-card, .category-card, .tool-card-simple) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  min-height: clamp(230px, 20vw, 300px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  padding: clamp(22px, 2.4vw, 30px) !important;
  margin: -1px 0 0 -1px !important;
  color: var(--black) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: background .14s ease, border-color .14s ease !important;
  container-type: inline-size !important;
}

html body.area-page :is(.area-card, .category-card, .tool-card-simple)::before {
  content: none !important;
  display: none !important;
}

html body.area-page :is(.area-card, .category-card, .tool-card-simple)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  display: block !important;
  width: 0 !important;
  height: 3px !important;
  background: var(--black) !important;
  border: 0 !important;
  transform: none !important;
  pointer-events: none !important;
  transition: width .18s ease !important;
}

html body.area-page :is(.area-card, .category-card, .tool-card-simple):hover,
html body.area-page :is(.area-card, .category-card, .tool-card-simple):focus-visible {
  color: var(--black) !important;
  background: var(--card) !important;
  border-color: var(--black) !important;
  outline: 0 !important;
  z-index: 1 !important;
}

html body.area-page :is(.area-card, .category-card, .tool-card-simple):hover::after,
html body.area-page :is(.area-card, .category-card, .tool-card-simple):focus-visible::after {
  width: 100% !important;
}

html body.area-page :is(.area-card, .category-card, .tool-card-simple) > * {
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.area-page :is(.area-card > span:first-child, .category-card-top, .tool-card-simple > span:first-child) {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.area-page :is(.area-card > span:first-child, .category-card-top, .tool-card-simple > span:first-child)::after {
  content: none !important;
  display: none !important;
}

html body.area-page :is(.area-kicker, .card-kicker, .category-card .card-kicker) {
  display: block !important;
  margin: 0 0 12px !important;
  color: var(--mid) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

html body.area-page :is(.area-title, .card-title, .tool-card-simple h3) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--black) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 6.2cqw, 32px) !important;
  font-weight: 500 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  hyphens: none !important;
}

html body.area-page :is(.area-title, .card-title, .tool-card-simple h3)::after {
  content: none !important;
  display: none !important;
}

html body.area-page :is(.area-title-slash, .card-title-slash) {
  color: var(--accent) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

html body.area-page :is(.area-desc, .card-desc, .tool-card-simple p) {
  display: block !important;
  max-width: 34rem !important;
  margin: 18px 0 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.52 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

html body.area-page :is(.area-desc, .card-desc, .tool-card-simple p)::after {
  content: none !important;
  display: none !important;
}

html body.area-page :is(.area-links, .card-tags, .category-card-bottom) {
  display: block !important;
  margin: clamp(24px, 4vw, 44px) 0 0 !important;
  padding: 0 !important;
  color: var(--mid) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  overflow-wrap: anywhere !important;
}

html body.area-page :is(.card-tags, .area-links) * {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

html body.area-page .support-block {
  width: 100% !important;
  max-width: none !important;
  margin: clamp(40px, 6vw, 72px) 0 0 !important;
}

html body.area-page :is(.workflows-card, .knowledge-block.support-block) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(24px, 4vw, 56px) !important;
  align-items: end !important;
  min-height: auto !important;
  padding: clamp(28px, 4vw, 48px) !important;
  color: var(--black) !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  text-decoration: none !important;
}

html body.area-page .knowledge-block.support-block {
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr) !important;
}

html body.area-page :is(.workflows-title, .knowledge-block-title) {
  margin: 0 0 12px !important;
  color: var(--black) !important;
  font-family: var(--font-display) !important;
  font-size: clamp(22px, 3vw, 34px) !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body.area-page :is(.workflows-sub, .workflows-desc, .knowledge-block-text) {
  max-width: 56rem !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}

html body.area-page .create-button {
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  color: var(--black) !important;
  background: transparent !important;
  border: 1px solid var(--line-2) !important;
  text-decoration: none !important;
}

@media (max-width: 1100px) {
  html body.area-page :is(.area-grid.main-grid, .tool-grid.main-grid, #category-grid.main-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  html body.area-page #page {
    width: calc(100% - 32px) !important;
  }

  html body.area-page .page-hero {
    padding-top: 48px !important;
    padding-bottom: 36px !important;
  }

  html body.area-page :is(.area-grid.main-grid, .tool-grid.main-grid, #category-grid.main-grid) {
    grid-template-columns: 1fr !important;
  }

  html body.area-page :is(.area-card, .category-card, .tool-card-simple) {
    min-height: 220px !important;
  }

  html body.area-page :is(.workflows-card, .knowledge-block.support-block) {
    grid-template-columns: 1fr !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;
}