/* Калькулятор ориентира по дому. Отдельным файлом, чтобы не трогать общий style.css:
   переменные, шкала отступов и типографика берутся оттуда. */

.калькулятор{padding-top:var(--ш5);padding-bottom:var(--ш5)}
.калькулятор h1{max-width:760px}
.калькулятор > p{margin-top:var(--ш3);color:var(--серый);max-width:620px}

.форма{margin-top:var(--ш4);background:var(--белый);border:1px solid var(--рамка);
  border-radius:14px;padding:var(--ш3);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:var(--ш3)}
.поле{display:flex;flex-direction:column;gap:var(--ш1)}
.поле label{font-weight:600;font-size:16px}
.поле select,.поле input{font:400 17px/1.4 Onest,'Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--текст);background:var(--бумага);border:1px solid var(--рамка);
  border-radius:9px;padding:12px var(--ш2);width:100%;-webkit-appearance:none;appearance:none}
.поле select{background-image:linear-gradient(45deg,transparent 50%,var(--серый) 50%),
  linear-gradient(135deg,var(--серый) 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:var(--ш5)}
.поле select:focus,.поле input:focus{outline:2px solid var(--петроль);outline-offset:1px}

.вывод{margin-top:var(--ш5)}
.вывод h2{margin-bottom:var(--ш2)}
.ответ-текст{color:var(--серый);max-width:620px}
.вывод .карточки{margin-top:var(--ш3)}
.ориентир h3::first-letter{text-transform:uppercase}
.ориентир .стадия-текст{margin-top:var(--ш1);font-size:15px}
.ориентир .цифра{margin-top:var(--ш2);font-size:26px}
.ориентир .цифра small{margin-bottom:0}
.ориентир .за-дом{margin-top:var(--ш1);color:var(--текст);font-size:16px}
.ориентир .поясн{margin-top:var(--ш2);font-size:15px}
.ориентир .источник,.ориентир .приписка{margin-top:var(--ш2);font-size:14px;color:var(--серый)}
.ориентир .нет-данных{margin-top:var(--ш2);font-size:15px}

.честно{margin-top:var(--ш4);border-left:3px solid var(--охра);padding-left:var(--ш3);
  max-width:640px}
.честно b{display:block}
.честно span{display:block;margin-top:var(--ш1);color:var(--серый);font-size:16px}