/* ================================================================
   Casa Lujuria — INTERACTIVE widgets (content pages)
   Contained interactive cards that break up the reading: a drag
   explorer, a tap picker, a vote poll. Loaded after layout.css.
   ================================================================ */

.page .narrow .ls-explore,
.page .narrow .ls-picker,
.page .narrow .ls-poll {
  max-width: 900px; margin: 2rem auto; padding: clamp(22px,3.4vw,32px);
  border-radius: 20px; position: relative;
  background: linear-gradient(180deg, rgba(36,17,25,.9), rgba(16,8,12,.78));
  border: 1px solid rgba(242,178,51,.28);
  box-shadow: 0 24px 70px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.02);
}
.iw-kicker { font-size: .68rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--gold,#f2b233); display:inline-flex; align-items:center; gap:8px; }
.iw-kicker::before { content:""; width:20px; height:3px; border-radius:99px; background:linear-gradient(90deg,var(--rouge,#e5223f),var(--gold,#f2b233)); }
.page .narrow .ls-explore h3, .page .narrow .ls-picker h3, .page .narrow .ls-poll h3 {
  font-family: var(--anton) !important; text-transform: uppercase; color:#fff !important;
  font-size: clamp(22px,3vw,32px) !important; margin: .5rem 0 .3rem !important; letter-spacing:-.01em;
}
.iw-sub { color: rgba(246,239,226,.72); font-size:.95rem; margin:0 0 1.2rem; }

/* ---- depth explorer ---- */
.lse-track { display:flex; align-items:center; gap:16px; margin:.4rem 0 1.2rem; }
.lse-track input[type=range]{ -webkit-appearance:none; appearance:none; flex:1; height:8px; border-radius:99px;
  background:linear-gradient(90deg,#6fcf97,var(--gold,#f2b233),var(--orange,#f7a521),var(--rouge,#e5223f)); outline:none; }
.lse-track input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:28px; height:28px; border-radius:50%; cursor:grab;
  background:#fff; border:3px solid var(--rouge,#e5223f); box-shadow:0 4px 16px rgba(0,0,0,.5); }
.lse-track input[type=range]::-moz-range-thumb{ width:28px; height:28px; border-radius:50%; cursor:grab; background:#fff; border:3px solid var(--rouge,#e5223f); }
.lse-ends{ display:flex; justify-content:space-between; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(246,239,226,.5); margin-top:-.6rem; margin-bottom:1rem; }
.lse-meter{ height:10px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin:.2rem 0 1rem; }
.lse-meter i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--gold,#f2b233),var(--rouge,#e5223f)); transition:width .35s cubic-bezier(.22,1,.36,1); }
.lse-out{ font-size:1.02rem; line-height:1.6; color:rgba(246,239,226,.88); min-height:3.4em; }
.lse-out strong{ color:var(--gold,#f2b233); }

/* ---- picker ---- */
.lsp-opts{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:1rem; }
@media(max-width:520px){ .lsp-opts{ grid-template-columns:1fr; } }
.lsp-opts button{ text-align:left; font-family:"Inter Tight",sans-serif; font-weight:700; font-size:1rem; color:#fff; cursor:pointer;
  padding:16px 18px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); transition:all .18s ease; }
.lsp-opts button:hover{ background:rgba(229,34,63,.16); border-color:rgba(229,34,63,.5); transform:translateY(-2px); }
.lsp-opts button.on{ background:linear-gradient(135deg,var(--rouge,#e5223f),#a8162e); border-color:transparent; }
.lsp-result{ max-height:0; opacity:0; overflow:hidden; transition:opacity .4s ease, max-height .4s ease; }
.lsp-result.show{ max-height:400px; opacity:1; }
.lspr-card{ padding:20px; border-radius:16px; background:radial-gradient(120% 140% at 0 0,rgba(229,34,63,.25),transparent 60%),rgba(10,5,7,.5); border:1px solid rgba(242,178,51,.3); }
.lspr-tag{ font-size:.66rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--gold,#f2b233); }
.lspr-card h4{ font-family:var(--anton); text-transform:uppercase; font-size:1.6rem; color:#fff; margin:.3rem 0 .4rem; }
.lspr-card p{ color:rgba(246,239,226,.85); margin:0 0 1rem; }

/* ---- poll ---- */
.lspoll-opts{ display:flex; flex-wrap:wrap; gap:10px; }
.lspoll-opts[hidden]{ display:none; }
.lspoll-opts button{ flex:1 1 auto; min-width:120px; font-family:"Inter Tight",sans-serif; font-weight:800; font-size:1rem; color:#fff; cursor:pointer;
  padding:15px 18px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); transition:all .18s ease; }
.lspoll-opts button:hover{ background:rgba(47,107,255,.18); border-color:rgba(47,107,255,.55); transform:translateY(-2px); }
.lspoll-res{ display:none; flex-direction:column; gap:12px; }
.lspoll-res.show{ display:flex; }
.lspb{ display:grid; grid-template-columns:130px 1fr 48px; align-items:center; gap:12px; }
@media(max-width:520px){ .lspb{ grid-template-columns:90px 1fr 40px; } }
.lspb-l{ font-weight:700; font-size:.92rem; color:rgba(246,239,226,.8); }
.lspb.me .lspb-l{ color:var(--gold,#f2b233); }
.lspb-bar{ height:14px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.lspb-bar i{ display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--violet,#2f6bff),var(--rouge,#e5223f)); transition:width .8s cubic-bezier(.22,1,.36,1); }
.lspb.me .lspb-bar i{ background:linear-gradient(90deg,var(--gold,#f2b233),var(--rouge,#e5223f)); }
.lspb-p{ font-weight:800; font-size:.9rem; color:#fff; text-align:right; }

/* ---- LIFT: make interactive cards read as interactive against the dark page ---- */
.page .narrow .ls-explore,
.page .narrow .ls-picker,
.page .narrow .ls-poll {
  border-color: rgba(242,178,51,.4);
  box-shadow: 0 24px 70px rgba(0,0,0,.45), 0 0 34px rgba(229,34,63,.10), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
}
.page .narrow .ls-explore::before,
.page .narrow .ls-picker::before,
.page .narrow .ls-poll::before {
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--rouge,#e5223f),var(--gold,#f2b233),var(--violet,#2f6bff));
}