/* ============================================================================
 * demo-shell.css — W516 + W517.2 public demo chrome for demo.brokerdiy.com.
 * W517.2: dark ribbon + footer preserved; splash/book modal REPLACED by a
 * V6-token warm-cream + gold LEAD WALL. Real ATLAS never loads this file.
 * ========================================================================== */

/* --- V6 tokens (mirrored locally so the wall inherits the ATLAS palette --- */
:root {
  --dw-cream: #f6f0e2;
  --dw-cream-2: #fbf6e9;
  --dw-ink: #2a231a;
  --dw-ink-2: #4a3f31;
  --dw-muted: #7a6e5b;
  --dw-gold: #c18a25;
  --dw-gold-2: #a97511;
  --dw-line: #e7dcc5;
  --dw-focus: rgba(193, 138, 37, 0.24);
  --dw-danger: #a03325;
  --demo-top-h: 34px;
}

html.demo-mode body { padding-top: var(--demo-top-h) !important; }

/* Gate: everything under the wall is hidden until wall passes */
html.demo-wall-gated body > *:not(#demo-wall):not(#demo-ribbon):not(#demo-footer):not(#demo-badge) {
  filter: blur(4px) saturate(.8);
  pointer-events: none;
  user-select: none;
}
html.demo-wall-gated { overflow: hidden; }

/* --- top ribbon ----------------------------------------------------------- */
#demo-ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: var(--demo-top-h);
  z-index: 2147483000;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  background: repeating-linear-gradient(-45deg, #1c2b24 0 18px, #223229 18px 36px);
  color: #ffd98a; font: 600 12.5px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .04em; border-bottom: 2px solid var(--dw-gold);
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
#demo-ribbon .demo-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--dw-gold);
  box-shadow: 0 0 0 3px rgba(193,138,37,.25); animation: demo-pulse 2.2s infinite;
}
#demo-ribbon strong { color: #fff; letter-spacing: .10em; }
@keyframes demo-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* --- footer ribbon -------------------------------------------------------- */
#demo-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 2147482000;
  background: rgba(28,43,36,.94); color: #d9c9a6; backdrop-filter: blur(6px);
  font: 500 11px/1.3 -apple-system, "Segoe UI", system-ui, sans-serif;
  padding: 7px 16px; text-align: center; border-top: 1px solid rgba(193,138,37,.4);
}
#demo-footer b { color: #ffd98a; }

/* --- floating sample-data corner badge ------------------------------------ */
#demo-badge {
  position: fixed; right: 14px; bottom: 40px; z-index: 2147482500;
  background: var(--dw-gold); color: #1c2b24;
  font: 800 10.5px/1 system-ui, sans-serif; letter-spacing: .12em;
  padding: 6px 10px; border-radius: 6px; transform: rotate(-3deg);
  box-shadow: 0 4px 14px rgba(0,0,0,.3); pointer-events: none; text-transform: uppercase;
}

/* --- listing SAMPLE watermark (unchanged) --------------------------------- */
html.demo-mode .listing-card, html.demo-mode .v6-listing-card,
html.demo-mode [class*="listing"][class*="card"] { position: relative; }
html.demo-mode .listing-card::after, html.demo-mode .v6-listing-card::after,
html.demo-mode [class*="listing"][class*="card"]::after {
  content: "SAMPLE"; position: absolute; top: 10px; right: -30px;
  background: rgba(193,138,37,.92); color: #1c2b24;
  font: 800 10px/1 system-ui; letter-spacing: .18em;
  padding: 4px 34px; transform: rotate(38deg); pointer-events: none; z-index: 5;
}

/* ============================================================================
 * WALL (W517.2 — warm cream + gold, editorial not SaaS-generic)
 * ========================================================================== */
#demo-wall {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(1200px 700px at 70% 20%, #fdf9ee 0%, transparent 55%),
    radial-gradient(900px 500px at 20% 80%, #f0e7cf 0%, transparent 60%),
    var(--dw-cream);
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  color: var(--dw-ink);
  overflow-y: auto;
}

.dw__card {
  max-width: 560px; width: 100%;
  background: var(--dw-cream-2);
  border: 1px solid var(--dw-line);
  border-radius: 22px;
  padding: 46px 44px 38px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 30px 90px rgba(60,44,20,.10),
    0 8px 32px rgba(60,44,20,.06);
}

.dw__eyebrow {
  color: var(--dw-gold); font-weight: 700; font-size: 11.5px;
  letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px;
}

.dw__h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px; line-height: 1.08; font-weight: 700;
  color: var(--dw-ink); margin: 0 0 10px; letter-spacing: -0.01em;
}

.dw__sub {
  color: var(--dw-ink-2); font-size: 15px; line-height: 1.55;
  margin: 0 0 26px; max-width: 44ch;
}

.dw__form { display: block; }

.dw__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .dw__row { grid-template-columns: 1fr; } }

.dw__field { display: block; margin-bottom: 12px; }
.dw__label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .01em;
  color: var(--dw-ink-2); margin-bottom: 6px;
}
.dw__label em { color: var(--dw-gold); font-style: normal; margin-left: 2px; }
.dw__optional { color: var(--dw-muted); font-weight: 400; }

.dw__input {
  width: 100%; box-sizing: border-box;
  background: #fff; color: var(--dw-ink);
  border: 1px solid var(--dw-line); border-radius: 10px;
  padding: 11px 13px;
  font: 400 15px/1.35 -apple-system, "Segoe UI", system-ui, sans-serif;
  transition: border-color .15s, box-shadow .15s;
}
.dw__input:hover { border-color: #d9cca8; }
.dw__input:focus {
  outline: none; border-color: var(--dw-gold);
  box-shadow: 0 0 0 4px var(--dw-focus);
}
.dw__input::placeholder { color: #bcb19a; }

.dw__honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important;
}

.dw__actions { margin-top: 18px; display: flex; justify-content: flex-start; }
.dw__cta {
  background: var(--dw-gold); color: #1c1408;
  border: 0; border-radius: 12px;
  padding: 13px 24px;
  font: 700 14.5px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s, transform .05s;
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 6px 22px rgba(193,138,37,.28);
}
.dw__cta:hover { background: var(--dw-gold-2); }
.dw__cta:active { transform: translateY(1px); }
.dw__cta:disabled { opacity: .6; cursor: default; }

.dw__err {
  color: var(--dw-danger); font-size: 13px; margin: 12px 0 0;
  background: #fceee9; border: 1px solid #f2d0c5; padding: 8px 12px;
  border-radius: 8px;
}

.dw__consent {
  margin: 20px 0 0; font-size: 11.5px; line-height: 1.5;
  color: var(--dw-muted);
}
.dw__link { color: var(--dw-gold-2); text-decoration: underline; }
.dw__link:hover { color: var(--dw-gold); }

@media (max-width: 640px) {
  #demo-ribbon .demo-long { display: none; }
  .dw__card { padding: 36px 26px 30px; border-radius: 16px; }
  .dw__h1 { font-size: 30px; }
}