/* ═══ «Что если бы вложил» ═══
   Общие переменные, шапка, кнопки и подвал — из styles.css. */

.iv-main{padding-block:0 clamp(30px,4vw,50px)}

.iv-head{padding-block:0 clamp(20px,2.4vw,30px);
  background:linear-gradient(180deg,#f7fbf9,var(--card) 70%)}
.iv-main h1{font-size:clamp(28px,3.6vw,42px);line-height:1.15;
  letter-spacing:-.03em;font-weight:800;margin:0 0 12px}
.iv-lede{font-size:14.5px;line-height:1.6;color:var(--ink-soft);
  max-width:66ch;margin:0}

/* ── Форма ── */
.iv-form{display:grid;gap:12px;grid-template-columns:1.2fr 1fr 1fr auto;
  align-items:end;margin-block:clamp(18px,2.2vw,26px) 6px}
.iv-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.iv-field label{font-size:12.5px;color:var(--ink-faint)}
.iv-field input,.iv-field select{padding:11px 13px;font:inherit;font-size:15px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--card);
  color:var(--ink);width:100%}
.iv-field input:focus,.iv-field select:focus{outline:0;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-glow)}
.iv-go{padding:12px 24px;font:inherit;font-size:15px;font-weight:700;
  border:0;border-radius:12px;background:var(--green);color:#fff;cursor:pointer;
  white-space:nowrap}
.iv-go:hover{background:var(--green-deep)}
.iv-go:disabled{opacity:.5;cursor:default}

/* Быстрые даты: «год назад», «на дне 2022-го». Половина вопроса — выбрать
   момент, и большинство людей выбирают не дату, а событие. */
.iv-quick{display:flex;flex-wrap:wrap;gap:8px;margin-block-end:clamp(18px,2.2vw,26px)}
.iv-q{padding:6px 12px;font:inherit;font-size:13px;font-weight:600;
  border-radius:99px;border:1px solid var(--line-2);background:var(--card);
  color:var(--ink-soft);cursor:pointer;transition:.15s}
.iv-q:hover{border-color:var(--green);color:var(--green-deep)}

/* ── Ответ ── */
.iv-out{display:none}
.iv-out.on{display:block}

.iv-cards{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);
  margin-block-end:14px}
.iv-card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:var(--shadow-sm)}
.iv-card span{display:block;font-size:12.5px;color:var(--ink-faint);
  margin-block-end:7px}
.iv-card b{display:block;font-size:clamp(20px,2.2vw,26px);font-weight:800;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);
  line-height:1.15}
.iv-card b.up{color:var(--green)}
.iv-card b.down{color:var(--red)}
.iv-card i{display:block;font-style:normal;font-size:12.5px;
  color:var(--ink-soft);margin-block-start:6px}

/* Главная фраза — словами, а не только цифрами: её и пересказывают. */
.iv-verdict{background:linear-gradient(140deg,var(--card),var(--green-wash));
  border:1px solid #cfe6d8;border-radius:var(--r);
  padding:clamp(18px,2.2vw,24px);margin-block-end:14px}
.iv-verdict p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.iv-verdict p + p{margin-block-start:8px;font-size:14px;color:var(--ink-soft)}
.iv-verdict b{font-weight:700}

.iv-chart-box{background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:18px;box-shadow:var(--shadow-sm)}
.iv-chart-head{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:10px;margin-block-end:12px}
.iv-chart-head h2{font-size:16px;font-weight:700;margin:0}
.iv-legend{display:flex;gap:14px;font-size:12.5px;color:var(--ink-soft)}
.iv-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;
  margin-inline-end:5px;vertical-align:middle}
.iv-legend .c1 i{background:var(--green)}
.iv-legend .c2 i{background:#8a919d}
.iv-chart{height:320px;width:100%}

.iv-msg{padding:22px;text-align:center;color:var(--ink-soft);font-size:14px;
  background:var(--card);border:1px solid var(--line);border-radius:16px}
.iv-msg.err{color:var(--red)}

.iv-note{max-width:80ch;margin:clamp(18px,2.2vw,26px) 0 0;font-size:12.5px;
  line-height:1.6;color:var(--ink-faint)}

@media (max-width:900px){
  .iv-form{grid-template-columns:1fr 1fr}
  .iv-go{grid-column:1 / -1}
  .iv-cards{grid-template-columns:repeat(2,1fr)}
  .iv-chart{height:260px}
}
@media (max-width:520px){
  .iv-form{grid-template-columns:1fr}
  .iv-cards{grid-template-columns:1fr}
}