/* ============================================================
   MORIO ｜ LTV Simulator — scoped skin
   Inherits the site's design tokens (--accent / --ink / --bg / --line …).
   All selectors are prefixed (.ltvsim-* / .ls-*) so nothing leaks into
   the page. No global resets, no :root overrides.
   ============================================================ */

/* —— warm "loss" tone, the one non-gold accent, used only for rebuilds —— */
:root{ --ls-warn:#c2724f; }

/* ---------- entry CTA (the quiet doorway) ---------- */
.ltvsim-cta{
  margin-top:var(--space-block);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,44px); flex-wrap:wrap;
  padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,42px);
  border:1px solid var(--line);
  background:var(--bg-2);
  cursor:pointer; text-align:left;
  transition:border-color .5s var(--ease), background .5s var(--ease), transform .5s var(--ease);
}
.ltvsim-cta:hover{ border-color:var(--accent); background:var(--bg-3); }
.ltvsim-cta .ls-cta-l{ display:flex; flex-direction:column; gap:.9em; }
.ltvsim-cta .ls-cta-k{
  font-family:var(--font-en); font-weight:300; font-size:.72rem;
  letter-spacing:.4em; text-transform:uppercase; color:var(--accent);
}
.ltvsim-cta .ls-cta-t{
  font-family:var(--font-jp); font-weight:300; color:var(--ink);
  font-size:clamp(1.05rem,1.7vw,1.36rem); line-height:1.5; letter-spacing:.04em;
}
.ltvsim-cta .ls-cta-r{
  display:flex; align-items:center; gap:1em; white-space:nowrap;
  font-family:var(--font-en); font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft);
}
.ltvsim-cta .ls-arw{
  width:46px; height:46px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:var(--accent);
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}
.ltvsim-cta:hover .ls-arw{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); transform:translateX(4px); }

/* ---------- overlay + modal ---------- */
.ltvsim-overlay{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:clamp(16px,4vh,48px) clamp(14px,3vw,28px);
  background:rgba(8,8,9,.74); backdrop-filter:blur(8px);
}
.ltvsim-overlay.open{ display:flex; }
.ltvsim-modal{
  position:relative; width:100%; max-width:880px; margin:auto;
  background:var(--bg-2); border:1px solid var(--line);
  box-shadow:0 40px 120px rgba(0,0,0,.6);
}
.ltvsim-close{
  position:absolute; top:18px; right:18px; z-index:6;
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid var(--line); color:var(--ink-soft);
  font-size:1.15rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
}
.ltvsim-close:hover{ border-color:var(--accent); color:var(--accent); }
.ls-pad{ padding:clamp(34px,4.4vw,56px) clamp(24px,4vw,52px) clamp(34px,4vw,46px); }

/* ---------- modal head ---------- */
.ls-eyebrow{
  font-family:var(--font-en); font-weight:300; font-size:.72rem;
  letter-spacing:.4em; text-transform:uppercase; color:var(--accent);
}
.ls-title{
  font-family:var(--font-jp); font-weight:200; color:var(--ink);
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.4; letter-spacing:.04em;
  margin-top:.85em; text-wrap:balance;
}
.ls-doctrine{
  font-family:var(--font-jp); color:var(--accent); font-weight:300;
  font-size:clamp(.92rem,1.1vw,1rem); letter-spacing:.05em; line-height:1.8;
  margin-top:1.1em;
}
.ls-sub{
  color:var(--ink-soft); font-weight:300; font-size:.9rem; line-height:1.95;
  letter-spacing:.02em; margin-top:1em; max-width:62ch; text-wrap:pretty;
}

/* ---------- section labels inside modal ---------- */
.ls-block{
  display:flex; justify-content:space-between; align-items:baseline; gap:1em;
  border-bottom:1px solid var(--line-soft); padding-bottom:.7em;
  margin:clamp(28px,3.4vw,40px) 0 clamp(18px,2.2vw,24px);
}
.ls-block .ls-bk{
  font-family:var(--font-en); font-weight:300; font-size:.7rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--accent);
}
.ls-block .ls-bn{
  font-family:var(--font-en); font-weight:300; font-size:.62rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

/* ---------- inputs ---------- */
.ls-front{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,38px); }
.ls-fld .ls-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.6em; gap:.6em; }
.ls-fld label{ font-size:.84rem; color:var(--ink-soft); letter-spacing:.03em; }
.ls-fld .ls-v{ font-family:var(--font-jp); font-weight:400; font-size:1.05rem; color:var(--accent); }
.ls-fld .ls-v small{ font-size:.62rem; color:var(--muted); margin-left:.35em; letter-spacing:.04em; font-family:var(--font-en); }

.ltvsim-modal input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:1px;
  background:rgba(236,231,221,.18); outline:none; margin:.5em 0;
}
.ltvsim-modal input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--bg-2); border:1.5px solid var(--accent); cursor:pointer;
  transition:background .15s var(--ease), transform .15s var(--ease);
}
.ltvsim-modal input[type=range]::-webkit-slider-thumb:hover{ background:var(--accent); transform:scale(1.14); }
.ltvsim-modal input[type=range]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%; background:var(--bg-2);
  border:1.5px solid var(--accent); cursor:pointer;
}

/* ---------- build-cost line ---------- */
.ls-buildcost{
  display:flex; justify-content:space-between; align-items:baseline; gap:1em; flex-wrap:wrap;
  margin-top:1.2em; padding:.9em 1.2em;
  border:1px solid var(--line-soft); background:rgba(236,231,221,.025);
  font-size:.8rem; color:var(--ink-soft); letter-spacing:.03em;
}
.ls-buildcost b{ font-family:var(--font-jp); font-weight:400; font-size:1rem; color:var(--accent); margin:0 .2em; }

/* ---------- fixed premises strip ---------- */
.ls-fixed{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.ls-fx{ background:var(--bg-2); padding:1em 1.1em; display:flex; flex-direction:column; gap:.55em; }
.ls-fx .ls-fl{ font-family:var(--font-en); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.ls-fx .ls-fv{ font-family:var(--font-jp); font-weight:300; font-size:.86rem; color:var(--ink-soft); line-height:1.5; }
.ls-fx .ls-fv b{ color:var(--accent); font-weight:400; }
.ls-fx .ls-fv small{ font-size:.62rem; color:var(--muted); margin-left:.3em; font-family:var(--font-en); }
.ls-fxnote{ font-size:.72rem; color:var(--muted); line-height:1.8; letter-spacing:.02em; margin-top:1em; text-wrap:pretty; }

/* ---------- verdict ---------- */
.ls-verdict{ background:var(--bg); border:1px solid var(--line); padding:clamp(24px,3vw,34px); margin:clamp(28px,3.4vw,38px) 0 .5em; }
.ls-vcols{ display:flex; gap:clamp(28px,4vw,48px); flex-wrap:wrap; align-items:flex-end; }
.ls-vcol .ls-lab{ font-family:var(--font-en); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.9em; }
.ls-vcol .ls-big{ font-family:var(--font-jp); font-weight:200; font-size:clamp(2.1rem,5.6vw,3.4rem); line-height:1; color:var(--ink); }
.ls-vcol .ls-big small{ font-size:.3em; letter-spacing:.06em; margin-left:.3em; color:var(--muted); font-family:var(--font-en); }
.ls-vcol.ls-gain .ls-big{ color:var(--accent-2); }
.ls-vdivide{ width:1px; background:var(--line); align-self:stretch; }
.ls-verdict .ls-line{ margin-top:1.5em; font-size:.86rem; line-height:1.95; letter-spacing:.02em; color:var(--ink-soft); text-wrap:pretty; }
.ls-verdict .ls-line b{ color:var(--accent-2); font-weight:400; }

/* ---------- yield table ---------- */
.ls-yt{ width:100%; border-collapse:collapse; }
.ls-yt th, .ls-yt td{ text-align:right; padding:.85em .8em; border-bottom:1px solid var(--line-soft); font-variant-numeric:tabular-nums; font-size:.86rem; }
.ls-yt th{ font-family:var(--font-en); font-weight:300; font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.ls-yt th:first-child, .ls-yt td:first-child{ text-align:left; color:var(--ink-soft); font-size:.82rem; letter-spacing:.02em; }
.ls-yt .ls-mincho{ font-family:var(--font-jp); font-weight:400; font-size:1.02rem; }
.ls-yt .ls-vm{ color:var(--accent); }
.ls-yt .ls-vt{ color:var(--ink-soft); }
.ls-yt tr.ls-hl td{ border-top:1px solid var(--line); border-bottom:none; padding-top:1.05em; }
.ls-yt tr.ls-hl .ls-mincho{ font-size:1.22rem; }

/* ---------- chart ---------- */
.ls-chartwrap{ margin-top:1.1em; border:1px solid var(--line-soft); background:rgba(236,231,221,.02); padding:clamp(16px,2.2vw,24px) clamp(12px,1.6vw,20px) .6em; }
.ls-chartcap{ font-family:var(--font-jp); font-weight:300; font-size:.92rem; color:var(--ink-soft); letter-spacing:.03em; margin:0 .3em 1em; line-height:1.6; }
.ls-chartcap b{ color:var(--accent); font-weight:500; }
.ls-chartcap .sub{ color:var(--muted); font-size:.82rem; font-family:var(--font-en); letter-spacing:.04em; }
.ls-chartbox{ position:relative; height:320px; }
.ls-legend{ display:flex; gap:1.6em; flex-wrap:wrap; margin:1em .3em .3em; font-size:.74rem; letter-spacing:.03em; color:var(--ink-soft); }
.ls-legend i{ display:inline-block; width:20px; height:2px; vertical-align:middle; margin-right:.6em; }
.ls-legend .dash{ width:18px; height:0; border-top:1px dashed var(--ls-warn); background:none; }

/* ---------- details ---------- */
.ls-details{ margin-top:.6em; }
.ls-details summary{
  cursor:pointer; list-style:none; outline:none;
  font-family:var(--font-en); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); padding:1em 0; border-bottom:1px solid var(--line-soft);
}
.ls-details summary::-webkit-details-marker{ display:none; }
.ls-details summary::before{ content:"＋ "; color:var(--muted); }
.ls-details[open] summary::before{ content:"− "; }
.ls-detgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1em 2.4em; margin-top:1.4em; }
.ls-dfld{ display:flex; justify-content:space-between; align-items:center; gap:.8em; font-size:.82rem; }
.ls-dfld label{ color:var(--ink-soft); flex:1; }
.ls-dfld input{
  width:70px; text-align:right; font-family:var(--font-en); font-size:.84rem; color:var(--ink);
  background:var(--bg-3); border:1px solid var(--line); border-radius:1px; padding:.4em .55em;
}
.ls-foot{ font-size:.72rem; color:var(--muted); line-height:1.9; margin-top:1.8em; letter-spacing:.02em; text-wrap:pretty; }

/* ---------- responsive ---------- */
@media (max-width:680px){
  .ls-front{ grid-template-columns:1fr; }
  .ls-fixed{ grid-template-columns:1fr 1fr; }
  .ls-detgrid, .ls-detgrid{ }
  .ls-vdivide{ display:none; }
  .ls-vcols{ gap:1.4em; }
}
@media (max-width:520px){
  .ls-fixed{ grid-template-columns:1fr; }
  .ls-detgrid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .ltvsim-cta, .ltvsim-cta .ls-arw{ transition:none; }
}