/*
  Playbook Studio — temporary wireframe skin.

  Purpose: stop the UI looking like a finished product. Inline styles and
  JS-built colours are left in place so the polished theme can come back.

  Restore polished UI: see the comment in Playbook Studio.dc.html <helmet>
  and studio/theme-polished.css.
*/

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #d4d4d4 !important;
  color: #111 !important;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif !important;
}

body::before {
  content: "WIREFRAME  ·  visual design is not final";
  display: block;
  position: relative;
  z-index: 300;
  background: #ffe566;
  border-bottom: 2px solid #111;
  color: #111;
  font: 700 11px/28px Tahoma, Verdana, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.zcm-wireframe {
  height: calc(100vh - 28px) !important;
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif !important;
  color: #111 !important;
  background: #d4d4d4 !important;
}

.zcm-wireframe,
.zcm-wireframe *:not(.zcm-hash) {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
  background-image: none !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

.zcm-wireframe .zcm-hash {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 4px,
    #111 4px 5px
  ) !important;
  background-color: transparent !important;
}

.zcm-wireframe input,
.zcm-wireframe select,
.zcm-wireframe button,
.zcm-wireframe textarea {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif !important;
  -webkit-appearance: none;
  appearance: none;
}

/* Flatten the brand canvas / panels */
.zcm-wireframe aside,
.zcm-wireframe header,
.zcm-wireframe main {
  background: #f2f2f2 !important;
  border-color: #111 !important;
}

.zcm-wireframe aside { border-right: 2px solid #111 !important; }
.zcm-wireframe header { border-bottom: 2px solid #111 !important; }

/* Cards, tables, drawers, modals — white boxes, hard edges */
.zcm-wireframe [style*="background:#fff"],
.zcm-wireframe [style*="background: #fff"],
.zcm-wireframe [style*="background:#F4F9FE"],
.zcm-wireframe [style*="background:#FBFDFF"],
.zcm-wireframe [style*="background:#F4FCFD"],
.zcm-wireframe [style*="background:#FAFBFC"] {
  background: #fff !important;
}

.zcm-wireframe [style*="border:1px solid"],
.zcm-wireframe [style*="border:1.5px solid"],
.zcm-wireframe [style*="border:1px dashed"],
.zcm-wireframe [style*="border:1.5px dashed"] {
  border-color: #111 !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* Kill brand blues / greens / purples on fills — keep a gray wash */
.zcm-wireframe [style*="#499DEC"],
.zcm-wireframe [style*="#307FE0"],
.zcm-wireframe [style*="#EAF3FD"],
.zcm-wireframe [style*="#E6F1FC"],
.zcm-wireframe [style*="#2E6FB0"],
.zcm-wireframe [style*="#3EC48E"],
.zcm-wireframe [style*="#1E8F64"],
.zcm-wireframe [style*="#E2F6EC"],
.zcm-wireframe [style*="#F0E4FB"],
.zcm-wireframe [style*="#6A2FA0"],
.zcm-wireframe [style*="#DEF6F9"],
.zcm-wireframe [style*="#0E7A88"],
.zcm-wireframe [style*="#FFF0DC"],
.zcm-wireframe [style*="#B5650A"],
.zcm-wireframe [style*="#FFE5E6"],
.zcm-wireframe [style*="#C0353A"],
.zcm-wireframe [style*="#FFF6E9"],
.zcm-wireframe [style*="#FFF6E5"],
.zcm-wireframe [style*="#FFF0F0"] {
  background: #fff !important;
  color: #111 !important;
  border-color: #111 !important;
}

/* Primary actions: outlined, not filled brand buttons */
.zcm-wireframe [style*="background:#499DEC"],
.zcm-wireframe [style*="background:#3EC48E"] {
  background: #fff !important;
  color: #111 !important;
  border: 2px solid #111 !important;
  font-weight: 700 !important;
}

.zcm-wireframe button,
.zcm-wireframe select,
.zcm-wireframe input,
.zcm-wireframe textarea {
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #111 !important;
  font-weight: 600 !important;
}

/* Selected / active affordance: thick border, light gray fill */
.zcm-wireframe [style*="#EAF3FD"],
.zcm-wireframe [style*="border:1px solid #499DEC"],
.zcm-wireframe [style*="border:1.5px solid #499DEC"] {
  background: #e6e6e6 !important;
  outline: 2px solid #111;
  outline-offset: -2px;
}

.zcm-wireframe [style*="color:#6B7680"],
.zcm-wireframe [style*="color:#9AA6B0"],
.zcm-wireframe [style*="color:#8A95A0"],
.zcm-wireframe [style*="color:#7C8A96"],
.zcm-wireframe [style*="color:#5A6770"],
.zcm-wireframe [style*="color:#2C3F51"],
.zcm-wireframe [style*="color:#25282A"] {
  color: #111 !important;
}

.zcm-wireframe img {
  outline: 1px dashed #111;
  background: #eee;
}

/* Login gate: same crude box, not a product splash */
.zcm-wireframe [style*="z-index:200"] {
  background: #d4d4d4 !important;
}

pre, code, .zcm-wireframe [style*="ui-monospace"] {
  font-family: "Courier New", Courier, monospace !important;
}