/* Full FontAwesome 6 webfonts (self-hosted) — the site's global FA is a subset
   that lacks many LVGL symbols (wifi, bell, battery…), so the widget preview
   uses these complete faces under private family names to match the device. */
@font-face { font-family: 'WBFA'; font-weight: 900; font-style: normal; font-display: swap;
  src: url('/assets/fonts/fa-solid-900.woff2') format('woff2'); }
@font-face { font-family: 'WBFAB'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/assets/fonts/fa-brands-400.woff2') format('woff2'); }

/* ── Widget Builder — mixlar.net ─────────────────────────────────────────
   Brand: cream #F2EDE5 / card #E8E2D8 / dark #131110 / ink #1B1916 /
   muted #8C8478 / red #FF4D14 / border #D5CFC4. Body Inter, logo Cy Grotesk. */

.wb-body { background: var(--clr-bg-dark); }

/* ── hero ── */
.wb-hero { background: var(--clr-bg-dark); padding: calc(var(--banner-h) + var(--nav-h) + 4.5rem) 0 3rem; }
.wb-hero__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 2.5rem; }
.wb-hero__eyebrow { font-family: var(--font-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--clr-red); margin-bottom: 1.1rem; }
.wb-hero__heading { font-family: var(--font-logo); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700;
  line-height: 1.08; color: #fff; letter-spacing: -.02em; margin-bottom: 1.1rem; }
.wb-hero__dot { color: var(--clr-red); }
.wb-hero__sub { color: rgba(255,255,255,.55); max-width: 620px; font-size: 1rem; line-height: 1.65; }

/* ── app grid ── */
.wb-app { background: var(--clr-bg-dark); padding: 1rem 0 5rem; --wb-scale: 2; }
.wb-app__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 2.5rem;
  display: grid; grid-template-columns: minmax(300px, 1fr) auto minmax(280px, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 1100px) { .wb-app__inner { grid-template-columns: 1fr; } .wb-col--device { order: -1; } }

/* ── mobile ── */
@media (max-width: 720px) {
  .wb-hero { padding: calc(var(--banner-h) + var(--nav-h) + 2rem) 0 1.75rem; }
  .wb-hero__inner, .wb-install { padding: 0 1.1rem; }
  .wb-app__inner { padding: 0 1.1rem; gap: 1rem; }
  .wb-app { --wb-scale: 1.5; }
  .wb-col--device { overflow-x: auto; }          /* safety if it still exceeds width */
  .wb-panel { padding: .85rem; }
  .wb-json-details .wb-json { height: 220px; }
}
@media (max-width: 460px) { .wb-app { --wb-scale: 1.25; } }
@media (max-width: 380px) { .wb-app { --wb-scale: 1.1; }
  .wb-palette { grid-template-columns: repeat(3, 1fr); } }

/* Grid/flex items must be allowed to shrink below their content width, or the
   columns stay at their intrinsic ~480px and overflow the phone viewport. */
.wb-col { min-width: 0; }
.wb-panel { background: #1B1916; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; padding: 1rem; min-width: 0; }
.wb-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.wb-panel__head--log { margin-top: 1.1rem; }
.wb-panel__title { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.45); }

/* editor */
.wb-select { background: #131110; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 8px;
  font: 500 .75rem var(--font-body); padding: .35rem .5rem; }
.wb-json { width: 100%; height: 430px; resize: vertical; background: #131110; color: #E8E2D8;
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: .8rem;
  font: 400 .74rem/1.55 'JetBrains Mono', monospace; tab-size: 2; }
.wb-json:focus { outline: none; border-color: var(--clr-red); }
.wb-error { margin-top: .6rem; background: rgba(255,77,20,.12); border: 1px solid rgba(255,77,20,.4);
  color: #FF8A65; border-radius: 8px; padding: .5rem .7rem; font: 500 .74rem/1.4 'JetBrains Mono', monospace; }
.wb-editor-actions { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

.wb-btn { font: 600 .75rem var(--font-body); color: #fff; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .5rem 1rem; cursor: pointer;
  transition: background .15s ease; }
.wb-btn:hover { background: rgba(255,255,255,.16); }
.wb-btn--primary { background: var(--clr-red); border-color: var(--clr-red); }
.wb-btn--primary:hover { background: #ff6535; }
.wb-btn--ghost { background: transparent; }
.wb-btn--tiny { padding: .15rem .6rem; font-size: .65rem; }

.wb-select--full { width: 100%; margin-bottom: .7rem; }
.wb-panel__head--sub { margin-top: 1.1rem; }

/* ── element palette ── */
.wb-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin-bottom: .3rem; }
.wb-pal { font: 600 .72rem var(--font-body); color: #E8E2D8; background: #131110;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; padding: .5rem .3rem; cursor: grab;
  text-align: center; transition: background .12s ease, border-color .12s ease; touch-action: none; }
.wb-pal:hover { background: rgba(255,77,20,.14); border-color: var(--clr-red); color: #fff; }
.wb-pal:active { cursor: grabbing; }
.wb-ghost { position: fixed; z-index: 9999; transform: translate(-50%,-50%); pointer-events: none;
  font: 600 .72rem var(--font-body); color: #fff; background: var(--clr-red); border-radius: 8px;
  padding: .4rem .7rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); opacity: .95; }

/* ── properties panel ── */
.wb-props { min-height: 40px; }
.wb-props__head { display: flex; align-items: center; gap: .4rem; margin-bottom: .7rem; }
.wb-props__type { flex: 1; font: 700 .72rem var(--font-body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--clr-red); }
.wb-btn--danger { color: #FF8A65; border-color: rgba(255,77,20,.4); }
.wb-btn--danger:hover { background: rgba(255,77,20,.16); }
.wb-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .6rem; }
.wb-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.wb-field__lbl { font: 600 .64rem var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.4); }
.wb-field__inp { width: 100%; background: #131110; color: #fff; border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; padding: .38rem .5rem; font: 500 .74rem var(--font-body); box-sizing: border-box; }
.wb-field__inp:focus { outline: none; border-color: var(--clr-red); }
input.wb-field__inp[type=color] { padding: .1rem; height: 30px; cursor: pointer; }
.wb-field--check { flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: .4rem; }
.wb-field--check .wb-field__inp { width: auto; }

/* ── advanced JSON ── */
.wb-adv { margin-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 1rem; }
.wb-json-details { margin-top: .7rem; }
.wb-json-details summary { cursor: pointer; color: rgba(255,255,255,.5); font: 600 .72rem var(--font-body);
  padding: .3rem 0; user-select: none; }
.wb-json-details summary:hover { color: #fff; }
.wb-json-details .wb-json { height: 300px; margin-top: .6rem; }
.wb-json-details .wb-btn { margin-top: .5rem; }

/* ── selection box (in the 2× scaled stage) ── */
.wb-sel { position: absolute; border: 1px solid var(--clr-red); pointer-events: none; z-index: 50;
  box-shadow: 0 0 0 1px rgba(255,77,20,.3); }
.wb-sel__handle { position: absolute; right: -3px; bottom: -3px; width: 6px; height: 6px; background: var(--clr-red);
  border: 1px solid #fff; border-radius: 1px; pointer-events: auto; cursor: nwse-resize; touch-action: none; }
.wb-editable { cursor: move; touch-action: none; }

/* ── auto-detected data keys ── */
.wb-akeys { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .3rem; }
.wb-akey { display: flex; align-items: center; gap: .5rem; }
.wb-akey__lbl { flex: 0 0 40%; font: 500 .74rem 'JetBrains Mono', monospace; color: var(--clr-red);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-akey__inp { flex: 1; }
.wb-akey__inp--color { padding: .1rem; height: 30px; cursor: pointer; background: #131110;
  border: 1px solid rgba(255,255,255,.12); border-radius: 8px; }
.wb-widgetprops { margin-bottom: .3rem; }
.wb-widgetprops .wb-fields { margin-bottom: .3rem; }

/* ── device preview ── */
.wb-device__bezel { background: linear-gradient(145deg, #26221f, #171412); border-radius: 22px;
  padding: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
/* The screen is the panel; the canvas must stay clipped inside it and never
   spill over the neighbouring columns. */
.wb-device__screen { background: #000; border-radius: 10px; padding: 10px 10px 6px; overflow: hidden;
  box-sizing: border-box; width: calc(240px * var(--wb-scale, 2) + 20px); }
.wb-screen-chrome { display: flex; justify-content: space-between; width: calc(240px * var(--wb-scale, 2)); margin-bottom: 6px;
  color: #cfcfcf; font: 500 .8rem var(--font-body); }
/* The wrapper reserves the exact *scaled* size (240×140 × --wb-scale) so the
   black screen wraps the widget tightly — no dead strip below it. */
.wb-stage-wrap { position: relative; width: calc(240px * var(--wb-scale, 2)); height: calc(140px * var(--wb-scale, 2)); }
.wb-stage { position: relative; width: 240px; height: 140px; transform: scale(var(--wb-scale, 2)); transform-origin: top left;
  overflow: hidden; background: #101018; border-radius: 4px; cursor: pointer; }
.wb-stage * { position: absolute; box-sizing: border-box; }
.wb-device__label { text-align: center; color: rgba(255,255,255,.35); font: 500 .7rem var(--font-body);
  letter-spacing: .12em; text-transform: uppercase; margin-top: .8rem; }
.wb-pages { display: flex; gap: .4rem; justify-content: center; margin-top: .8rem; flex-wrap: wrap; }
.wb-page-tab { font: 600 .7rem var(--font-body); color: rgba(255,255,255,.5); background: #1B1916;
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.wb-page-tab--on { color: #fff; border-color: var(--clr-red); }
.wb-page-tab--hidden { opacity: .45; }

/* widget internals (scaled 2x, so px here = device px) */
.wb-el-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.15; }
.wb-el-label--scroll span { display: inline-block; padding-right: 30px; animation: wbTicker 6s linear infinite; }
@keyframes wbTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.wb-el-btn { display: flex; align-items: center; justify-content: center; cursor: pointer;
  user-select: none; transition: filter .08s ease; }
.wb-el-btn:active { filter: brightness(.7); }
.wb-el-toggle { border-radius: 999px; cursor: pointer; transition: background .15s ease; }
.wb-el-toggle .knob { position: absolute; top: 2px; left: 2px; background: #fff; border-radius: 50%;
  transition: left .15s ease; }
.wb-el-slider { cursor: ew-resize; }
.wb-el-img { display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px dashed rgba(255,255,255,.35); color: rgba(255,255,255,.6); font-size: 7px; gap: 2px;
  background: rgba(255,255,255,.04); }
.wb-pulse { animation: wbPulse 1.4s ease-in-out infinite; }
@keyframes wbPulse { 0%,100% { opacity: 1; } 50% { opacity: .27; } }
.wb-overlay { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.wb-overlay-row { position: relative !important; display: flex; align-items: center; justify-content: center;
  cursor: pointer; }

/* ── console ── */
.wb-hint { color: rgba(255,255,255,.45); font-size: .74rem; line-height: 1.5; margin-bottom: .7rem; }
.wb-hint code, .wb-install code { background: rgba(255,255,255,.08); border-radius: 4px; padding: .05rem .3rem;
  font: 500 .72rem 'JetBrains Mono', monospace; color: #E8E2D8; }
.wb-wdata { display: flex; gap: .4rem; margin-bottom: .6rem; }
.wb-input { flex: 1; min-width: 0; background: #131110; color: #fff; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: .45rem .6rem; font: 500 .75rem 'JetBrains Mono', monospace; }
.wb-input:focus { outline: none; border-color: var(--clr-red); }
.wb-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .8rem; }
.wb-chip { font: 500 .68rem 'JetBrains Mono', monospace; color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
  padding: .22rem .6rem; cursor: pointer; }
.wb-chip:hover { color: #fff; border-color: var(--clr-red); }
.wb-clock-toggle { display: flex; gap: .5rem; align-items: center; color: rgba(255,255,255,.6);
  font-size: .74rem; margin-bottom: .4rem; cursor: pointer; }
.wb-log { background: #0c0b0a; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  min-height: 130px; max-height: 220px; overflow-y: auto; padding: .6rem .7rem; margin: 0;
  font: 400 .7rem/1.6 'JetBrains Mono', monospace; color: #9be29b; white-space: pre-wrap; }

/* ── install steps ── */
.wb-install { max-width: var(--container-max); margin: 0 auto; padding: 0 2.5rem 4rem; }
.wb-install__heading { font-family: var(--font-logo); color: #fff; font-size: clamp(1.4rem, 2.4vw, 2rem);
  margin-bottom: 1.4rem; letter-spacing: -.02em; }
.wb-install__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem;
  list-style: none; padding: 0; }
.wb-install__steps li { background: #1B1916; border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
  padding: 1rem; color: rgba(255,255,255,.7); font-size: .82rem; line-height: 1.55; }
.wb-install__steps strong { color: #fff; }
.wb-step-num { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--clr-red);
  color: #fff; font: 700 .72rem var(--font-body); align-items: center; justify-content: center;
  margin-right: .55rem; }
.wb-install__docs { color: rgba(255,255,255,.4); font-size: .78rem; margin-top: 1.2rem; }

/* ===== LIGHT MODE (html.pb-light) =====
   Editor chrome flips to light; the device SCREEN itself (bezel, black screen,
   scaled stage, widget internals) stays dark — it simulates the real display. */
html.pb-light .wb-body, html.pb-light .wb-hero, html.pb-light .wb-app { background: #F3F0EA; }
html.pb-light .wb-hero__heading { color: #1d1d1f; }
html.pb-light .wb-hero__sub { color: rgba(0,0,0,.6); }
html.pb-light .wb-panel { background: #FFFFFF; border-color: rgba(0,0,0,.1); }
html.pb-light .wb-panel__title { color: rgba(0,0,0,.5); }
html.pb-light .wb-select { background: #F4F1EB; color: #1d1d1f; border-color: rgba(0,0,0,.14); }
html.pb-light .wb-json { background: #FFFFFF; color: #1d1d1f; border-color: rgba(0,0,0,.14); }
html.pb-light .wb-json:focus { border-color: var(--clr-red); }
html.pb-light .wb-error { background: rgba(255,77,20,.1); border-color: rgba(255,77,20,.4); color: #C1400F; }
html.pb-light .wb-btn { color: #1d1d1f; background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.14); }
html.pb-light .wb-btn:hover { background: rgba(0,0,0,.1); }
html.pb-light .wb-btn--primary { background: var(--clr-red); border-color: var(--clr-red); color: #fff; }
html.pb-light .wb-btn--primary:hover { background: #ff6535; }
html.pb-light .wb-btn--ghost { background: transparent; }
html.pb-light .wb-btn--danger { color: #C1400F; border-color: rgba(255,77,20,.4); }
html.pb-light .wb-pal { color: #4a453e; background: #F4F1EB; border-color: rgba(0,0,0,.14); }
html.pb-light .wb-pal:hover { background: rgba(255,77,20,.12); border-color: var(--clr-red); color: #000; }
html.pb-light .wb-props__type { color: var(--clr-red); }
html.pb-light .wb-field__lbl { color: rgba(0,0,0,.5); }
html.pb-light .wb-field__inp { background: #F4F1EB; color: #1d1d1f; border-color: rgba(0,0,0,.14); }
html.pb-light .wb-field__inp:focus { border-color: var(--clr-red); }
html.pb-light .wb-akey__lbl { color: var(--clr-red); }
html.pb-light .wb-akey__inp--color { background: #F4F1EB; border-color: rgba(0,0,0,.14); }
html.pb-light .wb-adv { border-top-color: rgba(0,0,0,.1); }
html.pb-light .wb-json-details summary { color: rgba(0,0,0,.5); }
html.pb-light .wb-json-details summary:hover { color: #000; }
html.pb-light .wb-hint { color: rgba(0,0,0,.55); }
html.pb-light .wb-hint code, html.pb-light .wb-install code { background: rgba(0,0,0,.07); color: #1d1d1f; }
html.pb-light .wb-input { background: #F4F1EB; color: #1d1d1f; border-color: rgba(0,0,0,.14); }
html.pb-light .wb-input:focus { border-color: var(--clr-red); }
html.pb-light .wb-chip { color: rgba(0,0,0,.65); background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }
html.pb-light .wb-chip:hover { color: #000; border-color: var(--clr-red); }
html.pb-light .wb-clock-toggle { color: rgba(0,0,0,.6); }
html.pb-light .wb-log { background: #F4F1EB; border-color: rgba(0,0,0,.1); color: #1a7f37; }
html.pb-light .wb-page-tab { color: rgba(0,0,0,.55); background: #F4F1EB; border-color: rgba(0,0,0,.12); }
html.pb-light .wb-page-tab--on { color: #1d1d1f; border-color: var(--clr-red); }
html.pb-light .wb-device__label { color: rgba(0,0,0,.4); }
html.pb-light .wb-install__heading { color: #1d1d1f; }
html.pb-light .wb-install__steps li { background: #FFFFFF; border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.7); }
html.pb-light .wb-install__steps strong { color: #1d1d1f; }
html.pb-light .wb-install__docs { color: rgba(0,0,0,.5); }