/* Shared demo shell — BMH offer preview */
:root{
  --bg0:#070707; --ink:#F2F0EB; --mute:#a3a09a; --soft:#7a7772;
  --orange:#FF5A1F; --blue:#3B82F6; --gold:#E8B84A; --violet:#8B7CFF; --mint:#3DDC97;
  --line:rgba(255,255,255,.12); --card:#141414; --panel:#0f0f0f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg0);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
a{color:inherit;text-decoration:none}

/* —— Overlay host (used when demos load in iframe from index) —— */
.demo-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.82);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;padding-top:max(16px,env(safe-area-inset-top));
  padding-bottom:max(16px,env(safe-area-inset-bottom));
}
.demo-overlay[hidden]{display:none !important}
.demo-overlay-label{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.7);margin-bottom:12px;text-align:center;max-width:36ch;line-height:1.45;
}
.demo-phone-frame{
  width:393px;height:852px;max-width:100%;max-height:calc(100vh - 120px);
  border-radius:36px;overflow:hidden;
  box-shadow:0 0 0 2px rgba(255,255,255,.14),0 24px 64px rgba(0,0,0,.55);
  background:#000;position:relative;flex-shrink:0;
}
.demo-phone-frame iframe{
  width:100%;height:100%;border:0;display:block;background:#0a0a0a;
}
.demo-overlay-close{
  margin-top:14px;min-height:44px;min-width:96px;padding:10px 22px;
  background:var(--orange);color:#fff;font-family:Syne,sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  border-radius:4px;
}
.demo-overlay-close:hover{filter:brightness(1.08)}

@media (max-width:480px),(hover:none) and (pointer:coarse){
  .demo-overlay{padding:0;background:#000}
  .demo-overlay-label{display:none}
  .demo-phone-frame{
    width:100%;height:100%;max-height:none;border-radius:0;
    box-shadow:none;
  }
  .demo-overlay-close{
    position:fixed;top:max(10px,env(safe-area-inset-top));right:12px;z-index:10001;
    margin:0;opacity:.95;
  }
}

/* —— In-demo chrome (when demo HTML is standalone / inside frame) —— */
.demo-app{
  min-height:100%;display:flex;flex-direction:column;
  background:var(--bg0);color:var(--ink);
}
.demo-prompt{
  flex-shrink:0;
  background:rgba(232,184,74,.12);border-bottom:1px solid rgba(232,184,74,.35);
  color:var(--gold);font-size:.78rem;line-height:1.4;
  padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));
  text-align:center;
}
.demo-topbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line);
  background:var(--panel);
}
.demo-topbar h1{
  font-family:Syne,sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:-.02em;text-transform:uppercase;flex:1;
}
.demo-close{
  min-height:40px;min-width:72px;padding:8px 14px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  font-family:Syne,sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;border-radius:4px;
}
.demo-close:hover{background:rgba(255,255,255,.14)}
.demo-body{flex:1;overflow:auto;padding:14px 14px 28px;-webkit-overflow-scrolling:touch}
.demo-saved-note{
  margin-top:18px;text-align:center;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);
}

/* Shared UI bits */
.hit{
  display:flex;align-items:center;gap:10px;
  padding:14px 12px;min-height:52px;
  background:var(--card);border:1px solid rgba(255,255,255,.1);
  border-radius:10px;margin-bottom:8px;width:100%;text-align:left;
  transition:border-color .15s,background .15s;
}
.hit:active,.hit:hover{border-color:rgba(232,184,74,.45);background:#1a1a1a}
.hit .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:#666}
.hit .dot.warn{background:var(--orange)}
.hit .dot.ok{background:var(--mint)}
.hit .dot.vio{background:var(--violet)}
.hit .dot.blue{background:var(--blue)}
.hit .dot.gold{background:var(--gold)}
.hit .main{flex:1;min-width:0}
.hit .title{font-weight:600;font-size:.92rem;color:#f0eee8}
.hit .sub{font-size:.75rem;color:var(--mute);margin-top:2px}
.hit .meta{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:700;color:var(--soft);flex-shrink:0;
}
.hit.done{opacity:.65}
.hit.done .title{text-decoration:line-through}
.chip-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  padding:6px 10px;min-height:32px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:var(--mute);
}
.chip.on{background:rgba(255,90,31,.2);border-color:rgba(255,90,31,.55);color:#fff}
.chip.mint.on{background:rgba(61,220,151,.18);border-color:rgba(61,220,151,.55);color:var(--mint)}
.chip.vio.on{background:rgba(139,124,255,.18);border-color:rgba(139,124,255,.55);color:var(--violet)}
.chip.gold.on{background:rgba(232,184,74,.18);border-color:rgba(232,184,74,.55);color:var(--gold)}
.chip.blue.on{background:rgba(59,130,246,.18);border-color:rgba(59,130,246,.55);color:var(--blue)}
.sec-label{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
  margin:16px 0 8px;display:flex;align-items:center;gap:8px;
}
.sec-label::before{content:"";width:12px;height:2px;background:var(--gold)}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:12px 18px;width:100%;
  background:var(--orange);color:#fff;font-family:Syne,sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;border-radius:6px;margin-top:10px;
}
.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:10px 14px;width:100%;
  border:1px solid rgba(255,255,255,.18);color:var(--ink);
  font-family:Syne,sans-serif;font-weight:700;font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;border-radius:6px;margin-top:8px;
}
.field{
  width:100%;padding:12px 12px;min-height:48px;
  background:#111;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  color:var(--ink);font-size:1rem;margin-bottom:8px;
}
.field:focus{outline:none;border-color:rgba(232,184,74,.5)}
.quote-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:.9rem;
}
.quote-total{
  margin-top:12px;padding-top:14px;border-top:1px solid rgba(232,184,74,.4);
  display:flex;justify-content:space-between;
  font-family:Syne,sans-serif;font-weight:800;font-size:1.15rem;color:var(--gold);
}
.slot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.slot{
  padding:16px 12px;min-height:72px;text-align:left;
  background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:10px;
}
.slot .t{font-family:Syne,sans-serif;font-weight:700;font-size:.95rem}
.slot .s{font-size:.72rem;color:var(--mute);margin-top:4px}
.slot.open{border-color:rgba(61,220,151,.35)}
.slot.booked{border-color:rgba(59,130,246,.4);background:rgba(59,130,246,.08)}
.slot.done{opacity:.55;border-color:rgba(255,255,255,.08)}
.toast{
  position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(80px);opacity:0;
  background:#1a1a1a;border:1px solid rgba(232,184,74,.4);color:var(--gold);
  padding:10px 16px;border-radius:8px;font-size:.78rem;z-index:50;
  transition:transform .25s,opacity .25s;pointer-events:none;white-space:nowrap;
}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}

/* Standalone fullscreen when opened directly on phone */
@media (max-width:480px){
  body.standalone-phone .demo-app{position:fixed;inset:0}
}