/* Wireframe / lo-fi mode — pure black text on white, basic font, placeholder boxes */
html.wireframe, html.wireframe body {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  background: #f4f4f4 !important;
  color: #111 !important;
}
html.wireframe * {
  font-family: 'Helvetica Neue', Arial, sans-serif !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-style: normal !important;
  transform: none !important;
  animation: none !important;
}
/* Kill all color — pure greyscale, full contrast */
html.wireframe body {
  filter: grayscale(1) contrast(1.35) brightness(1.05);
}
/* Force readable contrast: darken all body text. Buttons/badges keep their
   inline white text because <span>/<b>/<em>/<i>/<small> inherit from parent. */
html.wireframe h1, html.wireframe h2, html.wireframe h3, html.wireframe h4,
html.wireframe h5, html.wireframe h6,
html.wireframe p, html.wireframe label, html.wireframe li,
html.wireframe td, html.wireframe th, html.wireframe dt, html.wireframe dd,
html.wireframe figcaption, html.wireframe blockquote {
  color: #111 !important;
}
html.wireframe div:not([style*="background"]):not([style*="border-bottom"]) {
  color: #111 !important;
}
html.wireframe span, html.wireframe b, html.wireframe strong,
html.wireframe em, html.wireframe i, html.wireframe small,
html.wireframe code, html.wireframe a {
  color: inherit !important;
}

/* Hide ALL SVGs by default in wireframe — JS later re-tags hero ones as placeholders */
html.wireframe svg {
  visibility: hidden !important;
  display: none !important;
}
html.wireframe svg.wf-hero {
  visibility: hidden !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}
html.wireframe svg.wf-mini {
  display: none !important;
}
/* Cap illustration size in wireframe so it doesn't dominate the screen */
html.wireframe .wf-hero-parent {
  position: relative !important;
  width: 200px !important;
  height: 200px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  margin: 0 auto !important;
  display: block !important;
}
html.wireframe .wf-hero-parent::before {
  content: "MIEJSCE NA GRAFIKĘ / ANIMACJĘ";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(to top right, transparent 49.7%, #999 49.7%, #999 50.3%, transparent 50.3%),
    linear-gradient(to top left, transparent 49.7%, #999 49.7%, #999 50.3%, transparent 50.3%),
    #fff;
  border: 1.5px solid #999;
  font: 600 10px/1 'Helvetica Neue', Arial, sans-serif;
  color: #555;
  letter-spacing: .1em;
  z-index: 1;
}

/* Force equal-width kłębek cards on welcome (the 4 mini cards) */
html.wireframe div[style*="display: flex"][style*="gap"] > div,
html.wireframe div[style*="display:flex"][style*="gap"] > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* QUIZ progress chips (after start) — state classes added by wireframe-toggle.js */
html.wireframe div[style*="gap: 8"] > .wf-now,
html.wireframe div[style*="gap: 8"] > .wf-done,
html.wireframe div[style*="gap: 8"] > .wf-locked {
  position: relative !important;
}
html.wireframe div[style*="gap: 8"] > .wf-now::after,
html.wireframe div[style*="gap: 8"] > .wf-done::after,
html.wireframe div[style*="gap: 8"] > .wf-locked::after {
  position: absolute; top: 6px; left: 6px; right: 6px;
  font: 700 8px/1 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .08em; text-align: center;
  padding: 3px 4px; border-radius: 2px;
  z-index: 3;
}
html.wireframe div[style*="gap: 8"] > .wf-now::after {
  content: "● OBECNY";
  background: #111 !important; color: #fff !important;
}
html.wireframe div[style*="gap: 8"] > .wf-now {
  outline: 3px solid #111 !important;
  outline-offset: -2px;
}
html.wireframe div[style*="gap: 8"] > .wf-done::after {
  content: "✓ ODBLOKOWANY";
  background: #555 !important; color: #fff !important;
}
html.wireframe div[style*="gap: 8"] > .wf-locked::after {
  content: "🔒 ZABLOKOWANY";
  background: #e5e5e5 !important; color: #777 !important;
}
html.wireframe div[style*="gap: 8"] > .wf-locked {
  opacity: .55 !important;
}
/* Equal height + tidy padding for the 4 stage cards on welcome */
html.wireframe div[style*="display: flex"][style*="gap"] {
  align-items: stretch !important;
}
html.wireframe div[style*="display: flex"][style*="gap"] > div[style*="rotate"],
html.wireframe div[style*="display: flex"][style*="gap"] > div[style*="boxShadow"] {
  min-height: 140px !important;
  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
/* Hide their inner content and replace with placeholder box */
html.wireframe div[style*="display: flex"][style*="gap"] > div[style*="rotate"] > *,
html.wireframe div[style*="display: flex"][style*="gap"] > div[style*="boxShadow"] > * {
  visibility: hidden !important;
}
html.wireframe div[style*="display: flex"][style*="gap"] > div[style*="rotate"]::before,
html.wireframe div[style*="display: flex"][style*="gap"] > div[style*="boxShadow"]::before {
  content: "MIEJSCE NA GRAFIKĘ / ANIMACJĘ";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  background:
    linear-gradient(to top right, transparent 49.7%, #999 49.7%, #999 50.3%, transparent 50.3%),
    linear-gradient(to top left, transparent 49.7%, #999 49.7%, #999 50.3%, transparent 50.3%),
    #fff;
  border: 1.5px solid #999;
  font: 600 9px/1.3 'Helvetica Neue', Arial, sans-serif;
  color: #555;
  letter-spacing: .08em;
  padding: 6px;
  z-index: 1;
}

/* Backgrounds → light gray boxes instead of saturated colors */
html.wireframe [style*="radial-gradient"],
html.wireframe [style*="linear-gradient"] {
  background: transparent !important;
  background-image: none !important;
}
/* Kill leftover halo / glow behind illustrations */
html.wireframe div::before,
html.wireframe div::after {
  background-image: none !important;
}
html.wireframe [style*="border-radius: 50%"],
html.wireframe [style*="borderRadius: 50%"],
html.wireframe [style*="border-radius:50%"] {
  display: none !important;
}
html.wireframe button[style*="border-radius: 50%"],
html.wireframe button[style*="borderRadius: 50%"] {
  display: inline-flex !important;
  background: #cfcfcf !important;
}

/* Buttons — flat, gray pill like reference */
html.wireframe button:not(.demo-switcher button) {
  background: #555 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 20px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
html.wireframe .demo-switcher { display: none !important; }

/* Hide tone toggle (Bold/Klasyczna) — only classic in szkic */
html.wireframe header > div[style*="border-radius: 999px"],
html.wireframe header > div[style*="borderRadius: 999px"] {
  display: none !important;
}
html.wireframe input,
html.wireframe textarea {
  background: #fff !important;
  border: 1.5px solid #888 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: #111 !important;
}

/* Cards / panels — white with thin gray border */
html.wireframe [style*="boxShadow"],
html.wireframe [style*="box-shadow"] {
  box-shadow: none !important;
}
html.wireframe [style*="dashed"] {
  border-style: dashed !important;
  border-color: #888 !important;
}

/* Round colored chips → hidden (they're decorative halos around graphics) */
html.wireframe span[style*="border-radius: 50%"],
html.wireframe span[style*="borderRadius: 50%"] {
  display: none !important;
}
/* Keep form inputs and text crisp */
html.wireframe input,
html.wireframe textarea,
html.wireframe button,
html.wireframe select {
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}
html.wireframe::before { content: none !important; display: none !important; }
html.wireframe body { padding-top: 0 !important; }
html.wireframe main { padding-top: 80px !important; }

/* Wireframe toggle button */
.wf-toggle {
  position: fixed; bottom: 14px; right: 14px; z-index: 100000;
  padding: 8px 14px;
  background: #fff; color: #111;
  border: 1.5px solid #111; border-radius: 4px;
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
html.wireframe .wf-toggle { background: #111; color: #fff; }