/* Profit Simulator.
   Themed entirely from the app's variables. `--pct` (0–100, the slider's
   position across its 50–90 range) drives the track fill, the value bubble and
   the ring, all set from JS on every move. */

.profitSlider{ --pct:50; position:relative; overflow:hidden; }

/* ---- header ---- */
.psHead{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:0 18px; }
.psHeadIcon{
  flex:0 0 auto; display:grid; place-items:center; width:52px; height:52px;
  border-radius:14px; color:var(--accent2, var(--accent));
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.psHeadIcon svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.psIntro{ min-width:0; }
.psEyebrow{ display:block; font-size:.64rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--accent2, var(--accent)); }
.psHead h2, .psHead h3{ margin:2px 0 5px; font-size:1.5rem; letter-spacing:-.015em; line-height:1.1; }
.psIntro p{ margin:0; max-width:44ch; font-size:.82rem; line-height:1.5; color:var(--muted); }

/* progress ring */
.psRing{ position:relative; width:132px; height:132px; flex:0 0 auto; }
.psRing svg{ width:100%; height:100%; transform:rotate(-90deg); }
.psRingTrack{ fill:none; stroke:color-mix(in srgb, var(--line) 70%, transparent); stroke-width:8; }
.psRingFill{
  fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:100; stroke-dashoffset:50;
  transition:stroke-dashoffset .25s cubic-bezier(.3,.8,.3,1);
  filter:drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent));
}
.psRingText{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.psRingText strong{ display:block; font-size:1.7rem; font-weight:900; letter-spacing:-.03em; color:var(--accent2, var(--accent)); font-variant-numeric:tabular-nums; }
.psRingText span{ font-size:.56rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }

@media (max-width:640px){
  .psHead{ grid-template-columns:auto 1fr; }
  .psRing{ grid-column:1 / -1; margin:6px auto 0; }
  .psHead h3{ font-size:1.28rem; }
}

/* ---- metric cards ---- */
.psCards{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:22px 0; }
@media (max-width:640px){ .psCards{ grid-template-columns:1fr; } }
.psCard{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto auto;
  align-items:center; gap:2px 14px;
  padding:16px 18px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface-input, var(--panel));
}
.psCardIcon{
  grid-row:1 / span 3; display:grid; place-items:center; width:46px; height:46px; border-radius:12px;
  color:var(--muted); border:1px solid var(--line); background:color-mix(in srgb, var(--line) 24%, transparent);
}
.psCardIcon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.psCardLabel{ font-size:.9rem; font-weight:700; }
.psCardValue{ font-size:1.7rem; font-weight:900; letter-spacing:-.02em; line-height:1.05; font-variant-numeric:tabular-nums; }
.psCardSub{ font-size:.72rem; color:var(--muted); }

/* the previewed price is the answer, so it is emphasised */
.psCard.is-primary{
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 14%, var(--panel)), var(--panel) 70%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset;
}
.psCard.is-primary .psCardIcon{ color:var(--accent2, var(--accent)); border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); background:color-mix(in srgb, var(--accent) 16%, transparent); }
.psCard.is-primary .psCardValue{ color:var(--accent2, var(--accent)); }

.psCard.is-extra .psCardIcon{ color:var(--good,#16a34a); border-color:color-mix(in srgb, var(--good,#16a34a) 40%, var(--line)); background:color-mix(in srgb, var(--good,#16a34a) 14%, transparent); }
.psExtra{ color:var(--good,#16a34a); }
.psExtra.is-loss{ color:var(--bad,#ef4444); }
@keyframes psPop{ 0%{ transform:scale(1) } 40%{ transform:scale(1.06) } 100%{ transform:scale(1) } }

/* ---- slider ---- */
.psSliderWrap{
  margin:6px 0 0; padding:22px 20px 16px;
  border:1px solid var(--line); border-radius:16px;
  background:color-mix(in srgb, var(--line) 14%, transparent);
}
.psTrack{ position:relative; padding-top:34px; }

/* value bubble, positioned above the thumb by the slider's fraction */
.psBubble{
  position:absolute; top:0; left:calc(13px + (100% - 26px) * var(--pct) / 100);
  transform:translateX(-50%);
  padding:4px 9px; border-radius:8px;
  font-size:.82rem; font-weight:900; font-variant-numeric:tabular-nums;
  color:var(--accent2, var(--accent));
  background:color-mix(in srgb, var(--accent) 16%, var(--panel));
  border:1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  transition:left .06s linear;
}
.psBubble::after{
  content:''; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:color-mix(in srgb, var(--accent) 40%, var(--line));
}

.psRange{ -webkit-appearance:none; appearance:none; width:100%; height:26px; margin:0; background:transparent; cursor:grab; }
.psRange:active{ cursor:grabbing; }
.psRange::-webkit-slider-runnable-track{
  height:8px; border-radius:999px;
  background:linear-gradient(90deg,
    var(--accent) 0 calc(var(--pct) * 1%),
    color-mix(in srgb, var(--line) 70%, transparent) calc(var(--pct) * 1%) 100%);
}
.psRange::-moz-range-track{ height:8px; border-radius:999px; background:color-mix(in srgb, var(--line) 70%, transparent); }
.psRange::-moz-range-progress{ height:8px; border-radius:999px; background:var(--accent); }
.psRange::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:-9px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff, color-mix(in srgb, #fff 30%, var(--accent-vivid, var(--accent))));
  border:2px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
  transition:box-shadow .15s ease, transform .12s ease;
}
.psRange::-moz-range-thumb{
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #fff, color-mix(in srgb, #fff 30%, var(--accent-vivid, var(--accent))));
  border:2px solid var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.4), 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent);
}
.psRange:hover::-webkit-slider-thumb, .psRange:active::-webkit-slider-thumb{ box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 9px color-mix(in srgb, var(--accent) 26%, transparent); transform:scale(1.06); }
.psRange:hover::-moz-range-thumb, .psRange:active::-moz-range-thumb{ box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 0 9px color-mix(in srgb, var(--accent) 26%, transparent); }
.psRange:focus-visible{ outline:none; }
.psRange:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--accent); outline-offset:3px; }
.psRange:focus-visible::-moz-range-thumb{ outline:2px solid var(--accent); outline-offset:3px; }

.psScale{ display:flex; justify-content:space-between; margin:11px 2px 0; font-size:.72rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.psScaleTags{ display:flex; justify-content:space-between; margin:6px 2px 0; font-size:.7rem; }
.psTagLow{ color:color-mix(in srgb, var(--bad,#ef4444) 80%, var(--muted)); }
.psTagMid{ color:var(--muted); }
.psTagHigh{ color:color-mix(in srgb, var(--good,#16a34a) 80%, var(--muted)); }

/* ---- footer: apply + insight ---- */
.psFooter{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; margin:20px 0 0; }
@media (max-width:720px){ .psFooter{ grid-template-columns:1fr; } }

.psApply{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 18px; font-size:.98rem; font-weight:800;
  background:linear-gradient(135deg, var(--accent-vivid, var(--accent)), color-mix(in srgb, var(--accent-vivid, var(--accent)) 78%, #000));
  color:var(--accent-ink, #fff); border:0;
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent);
}
.psApplyIcon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.psApplySub{ margin:9px 0 0; text-align:center; font-size:.74rem; color:var(--muted); }

.psInsight{
  display:flex; gap:13px; padding:15px 16px; border-radius:14px;
  border:1px solid var(--line); background:var(--surface-input, var(--panel));
}
.psInsightIcon{
  flex:0 0 auto; display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  color:var(--accent2, var(--accent)); border:1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.psInsightIcon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.psInsightTitle{ display:block; font-size:.9rem; font-weight:800; }
.psInsight p{ margin:5px 0 6px; font-size:.78rem; line-height:1.55; color:var(--muted); }
.psInsight p b{ color:var(--text); }
.psInsightClose{ font-size:.82rem; font-weight:900; color:var(--good,#16a34a); }
.psInsightClose.is-loss{ color:var(--bad,#ef4444); }

@media (prefers-reduced-motion: reduce){
  .psRingFill{ transition:none; }
  .psBubble{ transition:none; }
  .psRange::-webkit-slider-thumb{ transition:none; }
  .psCardValue{ animation:none !important; }
}