/* SKHAI · Luxury · docs-viewer — skhai-docs brochure gate + viewer frame (plugin templates/single-doc.php, untouched).
   Loaded only under the flag (inc/luxury/content.php, which also adds skx-lux skx-lux-docs to the plugin's own <body>).
   RESTYLE ONLY: the email gate (#gate: gEmail / gBtn / code steps), the phone gate (#phoneGate), the viewer (topbar,
   thumbnails, stage, bottom CTA bar, mobile thumb bar), ids, handlers and tracking are unchanged. The viewer is
   variable-driven, so its two themes are remapped onto the palette: dark → espresso/umber, light → linen/ivory.
   Deviation from the mockup: no site header/footer is injected into this standalone plugin page. */

/* ── Palette: the plugin's variables, per theme ─────────────────────────────── */
body.skx-lux-docs[data-theme] { --accent: var(--c-brass); --accent-hover: var(--c-brass-line); font-family: var(--font-sans); font-weight: var(--fw-regular); }
body.skx-lux-docs[data-theme="dark"] {
  --bg: var(--c-espresso); --surface: var(--c-umber); --line: rgba(239,232,222,.14); --line-2: rgba(239,232,222,.34);
  --dim: var(--c-taupe); --dim-2: #D6CCBD; --text: var(--c-linen); --text-inv: var(--c-ink);
  --stage-bg: #231E1B; --bar-bg: rgba(43,37,33,.96); --gate-panel: var(--c-umber); --gate-preview: #231E1B; --sb-label-bg: rgba(29,24,20,.72);
  --focus: var(--c-brass-light); --focus-halo: var(--c-espresso);
}
body.skx-lux-docs[data-theme="light"] {
  --bg: var(--c-linen); --surface: var(--c-ivory); --line: var(--c-sand); --line-2: var(--c-line-strong);
  --dim: var(--c-mute); --dim-2: #4A433D; --text: var(--c-ink); --text-inv: var(--c-linen);
  --stage-bg: var(--c-beige); --bar-bg: rgba(239,232,222,.96); --gate-panel: var(--c-linen); --gate-preview: var(--c-espresso); --sb-label-bg: rgba(247,243,236,.85);
}
body.skx-lux-docs .font-heading { font-family: var(--font-display) !important; font-weight: var(--fw-regular) !important; }
body.skx-lux-docs :is(p, span, small, label, button, input) { font-weight: var(--fw-regular); }

/* ── Email gate: espresso cover stage | linen (or umber) panel ─────────────── */
body.skx-lux-docs #gate > .d-lg-flex { background: var(--c-espresso) !important; }
body.skx-lux-docs #gate > .d-lg-flex > span { color: var(--c-taupe) !important; font: var(--fw-medium) var(--fs-label)/1 var(--font-sans) !important; letter-spacing: var(--tr-label) !important; margin: var(--sp-5) !important; }
body.skx-lux-docs #gate > .d-lg-flex img { box-shadow: 0 30px 60px -24px rgba(0,0,0,.6), 8px 8px 0 rgba(247,243,236,.08), 16px 16px 0 rgba(247,243,236,.05) !important; }
body.skx-lux-docs #gate > .d-lg-flex > .position-absolute { background: radial-gradient(ellipse at center, transparent 45%, rgba(29,24,20,.55) 100%) !important; }
body.skx-lux-docs #gate > .flex-shrink-0 { max-width: 520px !important; padding: var(--sp-8) clamp(1.5rem, 4vw, 4rem) !important; border-left: 1px solid var(--line) !important; }
body.skx-lux-docs #gate p.text-uppercase { font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans) !important; letter-spacing: var(--tr-label) !important; color: var(--dim) !important; }
/* 3rem cap: at 3.75rem an all-caps single word (master brochure family: 'OUR DEVELOPMENTS') outgrew the 404px panel and pushed the page 13px wide at 1440; overflow-wrap is the safety net for longer titles */
body.skx-lux-docs #gate h1 { font: var(--fw-regular) clamp(2.25rem, 1.75rem + 1.25vw, 3rem)/var(--lh-tight) var(--font-display) !important; letter-spacing: var(--tr-display); color: var(--text); text-wrap: balance; overflow-wrap: break-word; }
body.skx-lux-docs #gate h1 + p, body.skx-lux-docs #gate h1 ~ p.text-dim { font: var(--fw-regular) var(--fs-lead)/1.5 var(--font-sans) !important; color: var(--text) !important; }
body.skx-lux-docs #gate h2 { font: var(--fw-regular) var(--fs-h3)/1.2 var(--font-display) !important; }
body.skx-lux-docs #gate .fs-5 { font: var(--fw-regular) var(--fs-h3)/1 var(--font-display) !important; font-variation-settings: "opsz" 16; }
body.skx-lux-docs #gate :is(.text-dim, .small) { font-size: var(--fs-small) !important; line-height: 1.6 !important; }
body.skx-lux-docs #gate .border-top.border-line { border-color: var(--line) !important; }
body.skx-lux-docs #gate span.text-uppercase.text-dim { font-size: var(--fs-label) !important; letter-spacing: .16em !important; }
/* inputs: 16px+, 52px, ivory; code boxes 48×56 */
body.skx-lux-docs #gEmail, body.skx-lux-docs .phone-gate-panel input[type="tel"], body.skx-lux-docs .phone-gate-panel textarea, body.skx-lux-docs .phone-gate-panel input[type="email"], body.skx-lux-docs .phone-gate-panel input[type="text"]:not(.pg-code-inputs input) {
  min-height: 52px; padding: 0 1rem !important; border-radius: 0 !important; font: var(--fw-regular) max(16px, var(--fs-body))/1.2 var(--font-sans) !important;
  background: var(--c-ivory) !important; color: var(--c-ink) !important; border: 1px solid var(--c-line-strong) !important;
}
body.skx-lux-docs #gEmail::placeholder { color: var(--c-mute); opacity: 1; }
body.skx-lux-docs :is(.code-inputs, .pg-code-inputs) input { width: 48px !important; height: 56px !important; border-radius: 0; font: var(--fw-regular) 1.5rem/1 var(--font-display) !important; font-variation-settings: "opsz" 16; }
body.skx-lux-docs .code-inputs input { background: var(--c-ivory) !important; color: var(--c-ink) !important; border: 1px solid var(--c-line-strong) !important; }
body.skx-lux-docs :is(.code-inputs, .pg-code-inputs) input:focus { border-color: var(--c-brass-line) !important; box-shadow: inset 0 -2px 0 var(--c-brass-line); }
/* primary actions: brass fill, brass-line edge; hover → espresso (on espresso: linen) */
body.skx-lux-docs :is(#gate .btn-accent, .phone-gate-panel .btn-accent) {
  min-height: 52px; background: var(--c-brass) !important; color: var(--c-ink) !important; border: 1px solid var(--c-brass-line) !important; border-radius: 0 !important;
  font: var(--fw-medium) var(--fs-label)/1 var(--font-sans) !important; letter-spacing: var(--tr-button) !important; text-transform: uppercase; opacity: 1 !important;
}
body.skx-lux-docs :is(#gate .btn-accent, .phone-gate-panel .btn-accent):hover { background: var(--c-espresso) !important; color: var(--c-linen) !important; border-color: var(--c-espresso) !important; }
body.skx-lux-docs[data-theme="dark"] #gate .btn-accent:hover { background: var(--c-linen) !important; color: var(--c-ink) !important; border-color: var(--c-linen) !important; }
body.skx-lux-docs :is(#gate, .phone-gate-panel) .btn-accent:disabled { opacity: .55 !important; }
body.skx-lux-docs #gate :is(#gBack, #gResend) { min-height: 44px; display: inline-flex; align-items: center; color: var(--text) !important; font-size: var(--fs-small) !important; text-decoration: underline; text-decoration-color: var(--c-brass); text-underline-offset: .28em; }
body.skx-lux-docs #gate a { color: var(--text); text-decoration-color: var(--c-brass); text-underline-offset: .28em; }
body.skx-lux-docs #gate a.btn, body.skx-lux-docs #gate a[href^="https://wa.me"], body.skx-lux-docs #gate a[href^="tel:"] { min-height: 44px; display: inline-flex; align-items: center; }
body.skx-lux-docs :is(#gErrMsg, #gCodeErr, #pgErr, #pgCodeErr) { font-size: var(--fs-small) !important; }
body.skx-lux-docs .text-danger { color: var(--c-error) !important; }
body.skx-lux-docs .text-success { color: var(--c-success) !important; }
body.skx-lux-docs[data-theme="dark"] .text-danger { color: #F2B8AC !important; }
@media (max-width: 991px) {
  body.skx-lux-docs #gate > .flex-shrink-0 { max-width: none !important; border-left: 0 !important; padding: var(--sp-7) var(--gutter) !important; }
}
/* invalid email: clay edge + message (the gate script only adds .is-invalid; the Luxury field had no invalid state) */
body.skx-lux-docs #gate #gEmail.is-invalid { border-color: var(--c-error) !important; box-shadow: inset 0 -2px 0 var(--c-error) !important; background-image: none !important; }
body.skx-lux-docs #gStep1 .border-top:has(#gEmail.is-invalid) #gErrMsg:empty::before {
  content: "Please enter a valid email address."; font: var(--fw-regular) var(--fs-small)/1.4 var(--font-sans); color: var(--c-error);
}
body.skx-lux-docs[data-theme="dark"] #gStep1 .border-top:has(#gEmail.is-invalid) #gErrMsg:empty::before { color: #F2B8AC; }
/* cover stage: brand mark top-left, cover inset from the edges on its stacked sheets, lock mark on the cover; the stage
   kicker duplicates the panel's "Brochure · N pages" line and is dropped */
body.skx-lux-docs #gate > .d-lg-flex { padding: clamp(3rem, 2rem + 4vw, 6rem) clamp(1.5rem, 1rem + 3vw, 4rem) !important; }
body.skx-lux-docs #gate > .d-lg-flex > span.text-uppercase { display: none !important; } /* kicker */
body.skx-lux-docs .lx-docs-mark { position: absolute; top: var(--sp-5); left: var(--sp-5); z-index: 2; width: 88px; height: auto; color: var(--c-linen); }
body.skx-lux-docs #gate > .d-lg-flex > span.lx-docs-cover { position: relative; z-index: 1; display: block; max-width: 100%; margin: 0 !important; }
body.skx-lux-docs .lx-docs-cover img { display: block; max-width: 100% !important; height: auto; }
body.skx-lux-docs .lx-docs-lock { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(29,24,20,.72); color: var(--c-linen); border: 1px solid rgba(239,232,222,.35); }
@media (max-width: 991px) {
  body.skx-lux-docs #gate { flex-direction: column; }
  body.skx-lux-docs #gate > .d-lg-flex { display: flex !important; flex: none !important; padding: calc(var(--sp-7) + 8px) var(--gutter) var(--sp-6) !important; }
  body.skx-lux-docs .lx-docs-mark { top: var(--sp-4); left: var(--gutter); width: 72px; }
  body.skx-lux-docs .lx-docs-cover { width: 100%; flex: 1 1 100%; min-width: 0; }
  body.skx-lux-docs .lx-docs-cover img { width: 100%; max-height: none !important; aspect-ratio: 16 / 9; object-fit: cover !important; }
}

/* ── Phone / second gate: linen sheet over the blurred brochure ─────────────── */
body.skx-lux-docs .phone-gate-overlay { background: linear-gradient(to top, rgba(29,24,20,.82) 0%, rgba(29,24,20,.45) 45%, transparent 75%); }
body.skx-lux-docs .phone-gate-panel { background: rgba(239,232,222,.97) !important; color: var(--c-ink); border-top: 1px solid var(--c-brass); box-shadow: var(--shadow-3); }
body.skx-lux-docs .phone-gate-panel h2 { color: var(--c-ink) !important; font: var(--fw-regular) var(--fs-h3)/1.2 var(--font-display) !important; }
body.skx-lux-docs .phone-gate-panel :is(.text-dim, p) { color: var(--c-mute) !important; font-size: var(--fs-small) !important; }
body.skx-lux-docs .phone-gate-panel .pg-code-inputs input { background: var(--c-ivory) !important; border: 1px solid var(--c-line-strong) !important; color: var(--c-ink) !important; }
body.skx-lux-docs .phone-gate-panel :is(.btn-link, .pg-alt, #pgBack, #pgFwdToggle, #pgResend) { min-height: 44px; display: inline-flex; align-items: center; color: var(--c-ink) !important; font-size: var(--fs-small) !important; text-decoration: underline; text-decoration-color: var(--c-brass); text-underline-offset: .28em; }
body.skx-lux-docs .phone-gate-panel .pg-help-badge { width: 32px; height: 32px; border-color: var(--c-line-strong); background: var(--c-ivory); color: var(--c-ink); }
body.skx-lux-docs .phone-gate-panel .pg-help-lbl { color: var(--c-mute); font-size: var(--fs-small); min-height: 44px; display: inline-flex; align-items: center; }

/* ── Viewer frame ──────────────────────────────────────────────────────────── */
body.skx-lux-docs .viewer-topbar { border-bottom: 1px solid var(--line); }
body.skx-lux-docs .viewer-topbar .font-heading { font-size: var(--fs-h4) !important; letter-spacing: .02em !important; text-transform: none !important; color: var(--text) !important; }
body.skx-lux-docs .viewer-topbar :is(.btn, .theme-toggle, .tb-arrow, button) { min-width: 40px; min-height: 40px; border-radius: 0; }
body.skx-lux-docs .viewer-topbar .text-dim-2 { font-variant-numeric: tabular-nums; }
body.skx-lux-docs .sb-item.active { border-color: var(--c-brass) !important; }
body.skx-lux-docs .sb-item:hover { border-color: rgba(168,138,94,.5); }
body.skx-lux-docs .sb-item span { font-family: var(--font-sans); font-size: var(--fs-label); }
body.skx-lux-docs .mn-lbl { font: var(--fw-medium) var(--fs-label)/1 var(--font-sans) !important; letter-spacing: .18em !important; }
body.skx-lux-docs .mn-pg img { box-shadow: 0 14px 44px rgba(29,24,20,.45); }
/* CTA ("Schedule a viewing"): brass on both themes */
body.skx-lux-docs .btn-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; background: var(--c-brass) !important; color: var(--c-ink) !important;
  border: 1px solid var(--c-brass-line) !important; border-radius: 0; font: var(--fw-medium) var(--fs-label)/1 var(--font-sans) !important; letter-spacing: var(--tr-button) !important; text-decoration: none !important;
}
body.skx-lux-docs .btn-cta:hover { background: var(--c-linen) !important; color: var(--c-ink) !important; border-color: var(--c-linen) !important; }
body.skx-lux-docs[data-theme="light"] .btn-cta:hover { background: var(--c-espresso) !important; color: var(--c-linen) !important; border-color: var(--c-espresso) !important; }
body.skx-lux-docs .viewer-bottombar :is(.bb-link, .bb-help) { font-size: var(--fs-small) !important; min-height: 44px; display: inline-flex; align-items: center; }
body.skx-lux-docs[data-theme="dark"] .viewer-bottombar .bb-link { color: var(--c-linen) !important; }
body.skx-lux-docs[data-theme="dark"] .viewer-bottombar .bb-help { color: var(--c-taupe) !important; }
body.skx-lux-docs .m-nav .m-count { font: var(--fw-regular) var(--fs-small)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
body.skx-lux-docs .live-dot { background: var(--c-brass-light); }