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

.workflow-layout {
  align-items: start;
}
/* .workflow-layout is a 2-column CSS grid (sidebar + content). Its content
   column is an unclassed <div> on the newer workflow-page template (13+) —
   a grid item defaults to min-width:auto, which resolves to the min-content
   size of its descendants. A table.spec placed directly in a .pretest/
   .roadmap section (not nested inside a .step, which already gets its own
   min-width:0 below) has no other min-width:0 ancestor between it and this
   grid item, so its min-content (table.spec's min-width:460px) propagates
   all the way up and widens the whole page on narrow viewports — even
   though the table's own .table-wrap already scrolls it correctly. This
   rule closes that gap for every workflow page sharing this structure. */
.workflow-layout > div {
  min-width: 0;
}
.workflow-card,
.workflow-card > *,
.workflow-meta,
.workflow-content,
.workflow-steps,
.workflow-step,
.next-workflows,
.next-workflows a {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}
.workflow-meta,
.workflow-content,
.workflow-steps,
.next-workflows {
  min-width: 0;
}
.workflow-card {
  overflow: hidden;
}
.workflow-content h1,
.workflow-content h2,
.workflow-content h3 {
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.next-workflows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
}
.next-workflows a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: var(--border);
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}
.next-workflows a:hover {
}

.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-design, #000000) !important;
}

/* Source: knowhowto/workflows/bake/index.html | style#unified-marker-style-20260519 */
/* Unified pale neon marker: scales with text size and stays readable. */
.marker-text,
.framework-marker,
.sc-title-marker,
.glossary-title-marker,
#view-overview .framework-marker,
#view-overview .marker-text,
#view-overview .ov-cat-name .framework-marker,
#view-overview .ov-cat-title .marker-text,
#view-shortcuts .sc-section-title .sc-title-marker,
#view-glossary .glossary-section-title .glossary-title-marker{
  position:relative !important;
  display:inline-block !important;
  z-index:0 !important;
  isolation:isolate !important;
  color:#000 !important;
  font-weight:900 !important;
  line-height:1.08 !important;
  padding:0 .08em .02em !important;
  background:none !important;
}
.marker-text::before,
.framework-marker::before,
.sc-title-marker::before,
.glossary-title-marker::before,
#view-overview .framework-marker::before,
#view-overview .marker-text::before,
#view-shortcuts .sc-section-title .sc-title-marker::before,
#view-glossary .glossary-section-title .glossary-title-marker::before{
  content:"" !important;
  position:absolute !important;
  left:-.08em !important;
  right:-.10em !important;
  top:auto !important;
  bottom:.10em !important;
  height:.42em !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:var(--marker-color,var(--active-marker,#ffffff)) !important;
  opacity:.52 !important;
  transform:rotate(-.65deg) skewX(-6deg) !important;
  border-radius:.12em .2em .16em .14em !important;
  filter:none !important;
  clip-path:polygon(0 22%,6% 13%,14% 18%,22% 10%,32% 17%,43% 12%,53% 18%,65% 11%,76% 18%,88% 12%,100% 18%,100% 80%,94% 90%,84% 84%,72% 92%,60% 85%,49% 92%,38% 86%,26% 93%,14% 86%,4% 92%,0 84%) !important;
}
.marker-text::after,
.framework-marker::after,
.sc-title-marker::after,
.glossary-title-marker::after,
#view-overview .framework-marker::after,
#view-overview .marker-text::after,
#view-shortcuts .sc-section-title .sc-title-marker::after,
#view-glossary .glossary-section-title .glossary-title-marker::after{
  content:none !important;
  display:none !important;
}
#ph-name.highlighted::after,
#d-name.highlighted::after,
.cat-btn.active .cat-label::after,
.subcat-btn.active .subcat-label::after,
.node-btn.active .node-label::after{
  content:"" !important;
  position:absolute !important;
  left:-.08em !important;
  right:-.10em !important;
  top:auto !important;
  bottom:.10em !important;
  height:.42em !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background:var(--marker-color,var(--active-marker,#ffffff)) !important;
  opacity:.52 !important;
  transform:rotate(-.65deg) skewX(-6deg) !important;
  border-radius:.12em .2em .16em .14em !important;
  filter:none !important;
  clip-path:polygon(0 22%,6% 13%,14% 18%,22% 10%,32% 17%,43% 12%,53% 18%,65% 11%,76% 18%,88% 12%,100% 18%,100% 80%,94% 90%,84% 84%,72% 92%,60% 85%,49% 92%,38% 86%,26% 93%,14% 86%,4% 92%,0 84%) !important;
}

/* Source: knowhowto/workflows/bake/index.html | style#marker-height-realistic-2026-05-27 */
.marker-text::before,
.framework-marker::before,
.sc-title-marker::before,
.glossary-title-marker::before,
#view-overview .framework-marker::before,
#view-overview .marker-text::before,
#view-shortcuts .sc-section-title .sc-title-marker::before,
#view-glossary .glossary-section-title .glossary-title-marker::before,
#ph-name.highlighted::after,
#d-name.highlighted::after,
.cat-btn.active .cat-label::after,
.subcat-btn.active .subcat-label::after,
.node-btn.active .node-label::after{
  left:-.12em !important;
  right:-.16em !important;
  top:.08em !important;
  bottom:auto !important;
  height:.82em !important;
  opacity:.44 !important;
  transform:rotate(-.45deg) skewX(-5deg) !important;
  border-radius:.16em .30em .22em .18em !important;
  filter:saturate(1.08) !important;
  clip-path:polygon(0 17%,4% 9%,10% 14%,16% 7%,24% 13%,33% 8%,42% 15%,52% 7%,62% 14%,72% 9%,83% 15%,92% 8%,100% 14%,100% 84%,96% 93%,88% 88%,78% 96%,67% 89%,56% 95%,46% 88%,36% 96%,26% 89%,16% 95%,7% 88%,0 93%) !important;
}
.marker-text,
.framework-marker,
.sc-title-marker,
.glossary-title-marker,
.cat-btn.active .cat-label,
.subcat-btn.active .subcat-label,
.node-btn.active .node-label,
#ph-name.highlighted,
#d-name.highlighted{
  position:relative !important;
  isolation:isolate !important;
}

/* Source: knowhowto/workflows/bake/index.html | style#global-footer-brand-2026-05-27 */
.global-footer-brand{
  display:inline-flex !important;
  align-items:center !important;
  gap:16px !important;
  text-decoration:none !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  min-width:0 !important;
}
.global-footer-brand:hover{}
.global-footer-kht-logo{
  width:68px !important;
  height:46px !important;
  display:block !important;
  flex:0 0 68px !important;
  object-fit:contain !important;
}
.global-footer-brand-text{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:3px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.global-footer-brand-name{
  display:block !important;
  font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size:20px !important;
  line-height:1 !important;
  font-weight:800 !important;
  letter-spacing:-.02em !important;
  text-transform:uppercase !important;
  color:#000000 !important;
}
.global-footer-brand-sub{
  display:block !important;
  margin-top:0 !important;
  font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.1em !important;
  text-transform:lowercase !important;
  color:rgba(0,0,0,.52) !important;
}
@media(max-width:720px){
  .global-footer-brand{gap:14px !important;}
  .global-footer-kht-logo{width:58px !important;height:40px !important;flex-basis:58px !important;}
  .global-footer-brand-name{font-size:18px !important;}
  .global-footer-brand-sub{font-size:10px !important;letter-spacing:.1em !important;}
}

/* Source: knowhowto/workflows/bake/index.html | style#global-footer-layout-2026-05-27 */
.global-footer{
  width:min(1720px, calc(100% - 64px)) !important;
  max-width:1720px !important;
  margin:96px auto 0 !important;
  padding:0 0 56px !important;
  border-top:2px solid rgba(0,0,0,.72) !important;
  font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  color:#000000 !important;
}
.global-footer-main{
  display:grid !important;
  grid-template-columns:minmax(260px, .9fr) minmax(360px, 1.35fr) !important;
  align-items:start !important;
  justify-content:space-between !important;
  gap:clamp(42px, 8vw, 160px) !important;
  padding:72px 0 76px !important;
  margin:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(0,0,0,.18) !important;
  font-size:14px !important;
  line-height:1 !important;
  color:rgba(0,0,0,.50) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
.global-footer-main a,
.global-footer-bottom a{
  text-decoration:none !important;
}
.global-footer-main a:hover,
.global-footer-bottom a:hover{
}
.global-footer-brand{
  align-self:start !important;
}
.global-footer-nav{
  justify-self:start !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:22px !important;
  font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
  color:rgba(0,0,0,.52) !important;
}
.global-footer-nav h4{
  margin:0 !important;
  font-family:inherit !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:rgba(0,0,0,.45) !important;
}
.global-footer-nav-row{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  font-family:inherit !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  color:rgba(0,0,0,.52) !important;
}
.global-footer-nav-row a{
  display:inline-block !important;
  padding-bottom:2px !important;
  border-bottom:1px solid transparent !important;
}
.global-footer-nav-row a:hover{}
.global-footer-nav-row span{
  color:rgba(0,0,0,.32) !important;
}
.global-footer-col{display:none !important;}
.global-footer-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:24px !important;
  padding:36px 0 0 !important;
  font-family:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(0,0,0,.48) !important;
}
.global-footer-copy{
  white-space:nowrap !important;
}
.global-footer-links{
  display:flex !important;
  flex-direction:row !important;
  gap:28px !important;
  flex-wrap:wrap !important;
  margin:0 !important;
}
.global-footer-links a{
  font-size:10px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:rgba(0,0,0,.48) !important;
}
.global-footer-disclaimer{
  max-width:980px !important;
  margin-top:26px !important;
  display:grid !important;
  gap:5px !important;
  font-size:10px !important;
  line-height:1.55 !important;
  color:rgba(0,0,0,.34) !important;
}
.global-footer-disclaimer p{
  margin:0 !important;
}
.global-footer-logo{
  display:none !important;
}
@media(max-width:900px){
  .global-footer{width:calc(100% - 44px) !important;margin-top:72px !important;}
  .global-footer-main{grid-template-columns:1fr !important;gap:36px !important;padding:48px 0 !important;}
  .global-footer-nav{justify-self:start !important;}
  .global-footer-bottom{align-items:flex-start !important;flex-direction:column !important;gap:18px !important;}
  .global-footer-copy{white-space:normal !important;}
}
@media(max-width:560px){
  .global-footer-nav-row{gap:8px !important;font-size:12px !important;}
  .global-footer-links{gap:16px !important;}
}

/* Source: knowhowto/workflows/bake/index.html | style#global-footer-nav-refine-2026-05-27 */
.global-footer-main{
  grid-template-columns:minmax(260px, .9fr) minmax(420px, 1.35fr) minmax(260px, .9fr) !important;
  gap:clamp(32px, 6vw, 110px) !important;
}
.global-footer-brand{
  grid-column:1 !important;
}
.global-footer-nav{
  grid-column:2 !important;
  justify-self:center !important;
  align-items:center !important;
  text-align:center !important;
  gap:14px !important;
}
.global-footer-nav h4{
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  color:rgba(0,0,0,.42) !important;
}
.global-footer-nav-row{
  justify-content:center !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  color:rgba(0,0,0,.48) !important;
  gap:9px !important;
}
.global-footer-nav-row span{
  color:rgba(0,0,0,.28) !important;
}
@media(max-width:900px){
  .global-footer-main{grid-template-columns:1fr !important;}
  .global-footer-brand,
  .global-footer-nav{grid-column:auto !important;justify-self:start !important;align-items:flex-start !important;text-align:left !important;}
  .global-footer-nav-row{justify-content:flex-start !important;}
}

/* Source: knowhowto/workflows/bake/index.html | style#global-footer-disclaimer-position-2026-05-27 */
.global-footer-disclaimer{
  grid-column:2 !important;
  justify-self:center !important;
  max-width:780px !important;
  margin:18px auto 0 !important;
  text-align:center !important;
  justify-items:center !important;
  display:grid !important;
  gap:4px !important;
  font-size:10px !important;
  line-height:1.55 !important;
  color:rgba(0,0,0,.36) !important;
  text-transform:none !important;
  letter-spacing:.01em !important;
  font-weight:600 !important;
}
.global-footer-disclaimer p{margin:0 !important;}
@media(max-width:900px){
  .global-footer-disclaimer{
    grid-column:auto !important;
    justify-self:start !important;
    margin:14px 0 0 !important;
    text-align:left !important;
    justify-items:start !important;
  }
}

/* Source: knowhowto/workflows/bake/index.html | style#global-footer-compact-2026-05-27 */
.global-footer{
  margin-top:64px !important;
  padding-bottom:34px !important;
}
.global-footer-main{
  padding:42px 0 32px !important;
  gap:clamp(28px,5vw,92px) !important;
}
.global-footer-nav{
  gap:10px !important;
}
.global-footer-disclaimer{
  grid-column:1 / -1 !important;
  justify-self:center !important;
  max-width:none !important;
  margin:8px auto 0 !important;
  gap:3px !important;
  font-size:10px !important;
  line-height:1.35 !important;
}
.global-footer-disclaimer p{
  margin:0 !important;
  white-space:nowrap !important;
}
.global-footer-bottom{
  padding-top:24px !important;
}
@media(max-width:900px){
  .global-footer{margin-top:48px !important;padding-bottom:28px !important;}
  .global-footer-main{padding:34px 0 26px !important;gap:24px !important;}
  .global-footer-disclaimer{margin:8px 0 0 !important;line-height:1.45 !important;}
  .global-footer-disclaimer p{white-space:normal !important;}
  .global-footer-bottom{padding-top:22px !important;}
}

/* Source: knowhowto/workflows/bake/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;}
}

/* Source: knowhowto/workflows/bake/index.html | style#global-footer-tight-2026-05-27 */
.global-footer{
  margin-top:48px !important;
  padding-bottom:24px !important;
}
.global-footer-main{
  grid-template-columns:minmax(250px,.85fr) minmax(420px,1.3fr) minmax(250px,.85fr) !important;
  column-gap:clamp(28px,5vw,92px) !important;
  row-gap:20px !important;
  padding:30px 0 24px !important;
  align-items:center !important;
}
.global-footer-brand{
  align-self:center !important;
}
.global-footer-nav{
  gap:8px !important;
}
.global-footer-disclaimer{
  margin:0 auto !important;
  gap:2px !important;
  font-size:9.5px !important;
  line-height:1.3 !important;
  color:rgba(0,0,0,.34) !important;
}
.global-footer-bottom{
  padding-top:20px !important;
}
@media(max-width:900px){
  .global-footer{margin-top:40px !important;padding-bottom:22px !important;}
  .global-footer-main{grid-template-columns:1fr !important;row-gap:18px !important;padding:28px 0 22px !important;}
  .global-footer-disclaimer{margin:0 !important;font-size:10px !important;line-height:1.4 !important;}
  .global-footer-bottom{padding-top:18px !important;}
}

/* Source: knowhowto/workflows/bake/index.html | style#footer-content-width-sync-2026-05-27 */
.global-footer{
  width:var(--footer-content-width) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
#header{
  background-size:var(--footer-content-width) 2px !important;
}

/* Source: knowhowto/workflows/daten/index.html | style#kht-intro-linebreaks-2026-05-29 */
.kht-page-intro p,
.page-intro,
.grid .card p{
  text-wrap:pretty;
}

/* Source: knowhowto/workflows/daten/index.html | style#kht-intro-no-frame-2026-05-29 */
.kht-page-intro,
.page-intro{
  border:0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  outline:0 !important;
  background:transparent !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;
}