/* ═══════════════════════════════════════════════════════════════════════
   Бухгалтерские калькуляторы. Направление — РАСЧЁТНАЯ ВЕДОМОСТЬ:
   разлинованный бланк, табличные цифры, итог под двойной чертой (так его
   и подводят в бухгалтерии), правки красной ручкой. Не «сервис», а
   рабочий документ, который умеет считать.

   Шрифты СВОИ, файлами на нашем домене: Golos Text (заголовки, российский
   гротеск) и Inter (текст). Гугловский CDN не подключаем — это чужой
   сервис на странице и лишний вопрос по 152-ФЗ.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/golos-text-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/golos-text-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/golos-text-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/golos-text-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/golos-text-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;
  src:url('fonts/golos-text-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}

:root{
  /* бумага и чернила */
  --bumaga:#FBFBF9;
  --blank:#FFFFFF;
  --chernila:#17202A;
  --seryy:#5C6874;
  --linovka:#E2E7EB;
  --linovka-slabo:#EFF2F4;
  /* сукно кассы — главный акцент */
  --sukno:#0B5C4B;
  --sukno-svetlo:#E9F2EF;
  /* красная ручка — только правки и предупреждения */
  --ruchka:#B8352B;
  --ruchka-svetlo:#FBF0EF;

  /* шкала кеглей: от 17, шаг ~1.27 */
  --k-13:13px; --k-15:15px; --k-17:17px; --k-21:21px;
  --k-27:27px; --k-34:34px; --k-43:43px;
  /* один ряд отступов на весь проект */
  --o-4:4px; --o-8:8px; --o-16:16px; --o-24:24px; --o-32:32px; --o-48:48px; --o-64:64px;
  --kolonka:1060px;
  --proza:68ch;
  --radius:6px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bumaga); color:var(--chernila);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:var(--k-17); line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Golos Text','Inter',Arial,sans-serif;line-height:1.18;letter-spacing:-.015em;margin:0}
a{color:var(--sukno);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--chernila)}
:focus-visible{outline:2px solid var(--sukno);outline-offset:2px}

/* ─── шапка: строка бланка ─────────────────────────────────────────── */
.top{background:var(--blank);border-bottom:1px solid var(--linovka);position:sticky;top:0;z-index:20}
.top__in{max-width:var(--kolonka);margin:0 auto;padding:var(--o-16) var(--o-24);
  display:flex;align-items:center;gap:var(--o-24);flex-wrap:wrap}
.top__logo{display:flex;align-items:center;gap:var(--o-8);text-decoration:none;color:inherit}
.top__mark{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--radius);
  background:var(--sukno);color:#fff;font-family:'Golos Text',sans-serif;font-weight:700;font-size:var(--k-17)}
.top__logo-text{font-family:'Golos Text',sans-serif;font-weight:600;font-size:var(--k-17);letter-spacing:-.01em}
.top__nav ul{list-style:none;display:flex;gap:var(--o-16);margin:0;padding:0;flex-wrap:wrap}
.top__nav a{text-decoration:none;color:var(--seryy);font-size:var(--k-15)}
.top__nav a:hover{color:var(--sukno)}
.top__search{margin-left:auto}
.top__search input{padding:var(--o-8) 12px;border:1px solid var(--linovka);border-radius:var(--radius);
  font-size:var(--k-15);background:var(--bumaga);color:inherit;font-family:inherit;min-width:150px}
.top__search input:focus{outline:none;border-color:var(--sukno)}

.main{max-width:var(--kolonka);margin:0 auto;padding:var(--o-48) var(--o-24) var(--o-64)}
.uzko{max-width:760px}

/* ─── витрина ──────────────────────────────────────────────────────── */
.hero{margin-bottom:var(--o-48)}
.hero h1{font-size:var(--k-43);font-weight:700;max-width:16ch;margin-bottom:var(--o-16)}
.hero__lead{margin:0;max-width:var(--proza);color:var(--seryy);font-size:var(--k-17)}
.razdel-zag{font-family:'Golos Text',sans-serif;font-size:var(--k-13);text-transform:uppercase;
  letter-spacing:.12em;color:var(--seryy);margin:var(--o-48) 0 var(--o-16);font-weight:600;
  padding-bottom:var(--o-8);border-bottom:1px solid var(--linovka)}
.setka{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:var(--o-16)}
.setka li{background:var(--blank);border:1px solid var(--linovka);border-radius:var(--radius);
  transition:border-color .15s,transform .15s}
.setka li:hover{border-color:var(--sukno);transform:translateY(-1px)}
.setka a{display:block;padding:var(--o-16);text-decoration:none;color:inherit;height:100%}
.setka b{display:block;font-family:'Golos Text',sans-serif;font-size:var(--k-17);
  font-weight:600;margin-bottom:var(--o-4)}
.setka span{font-size:var(--k-15);color:var(--seryy);line-height:1.45}

/* ─── карточка калькулятора ────────────────────────────────────────── */
.krohi{font-size:var(--k-15);color:var(--seryy);margin:0 0 var(--o-16)}
.krohi a{color:var(--seryy)}
.kalk-zag{font-size:var(--k-34);font-weight:700;margin:0 0 var(--o-8);max-width:20ch}
.kalk-chto{margin:0 0 var(--o-32);color:var(--seryy);max-width:var(--proza)}

/* бланк расчёта: разлинованный лист */
.schet{
  background:var(--blank);border:1px solid var(--linovka);border-radius:var(--radius);
  padding:var(--o-24);margin:0 0 var(--o-32);
}
.schet__polya{display:grid;gap:var(--o-24)}
.pole{display:grid;gap:var(--o-4)}
.pole label{font-size:var(--k-13);color:var(--seryy);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.pole input,.pole select{
  padding:11px 13px;font-size:var(--k-21);font-family:'Inter',sans-serif;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--linovka);border-bottom-width:2px;border-radius:var(--radius);
  background:var(--bumaga);color:inherit;width:100%}
.pole input:focus,.pole select:focus{outline:none;border-color:var(--sukno);background:var(--blank)}
.pole__hint{font-size:var(--k-13);color:var(--seryy);line-height:1.45}

/* итог — под двойной чертой, как в ведомости */
.schet__itog{margin-top:var(--o-24);padding-top:var(--o-16);
  border-top:3px double var(--chernila)}
.itog-glavnyy{margin:0 0 var(--o-4);font-size:var(--k-13);text-transform:uppercase;
  letter-spacing:.1em;color:var(--seryy);font-weight:600}
.itog-summa{font-family:'Golos Text',sans-serif;font-size:var(--k-43);font-weight:700;
  color:var(--sukno);letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.itog-stroki{list-style:none;margin:var(--o-16) 0 0;padding:0;font-size:var(--k-15)}
.itog-stroki li{display:flex;align-items:baseline;gap:var(--o-8);padding:9px 0}
.itog-stroki li::after{content:'';flex:1;order:1;height:0;
  border-bottom:1px dotted var(--linovka);transform:translateY(-4px)}
.itog-stroki li span:last-child{order:2}

.itog-stroki span:first-child{color:var(--seryy)}
.itog-stroki span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
.schet__oshibka{color:var(--ruchka);font-size:var(--k-15);margin-top:var(--o-8)}

/* пометка красной ручкой */
.zametka{background:var(--ruchka-svetlo);border-left:3px solid var(--ruchka);
  padding:var(--o-16);border-radius:0 var(--radius) var(--radius) 0;
  margin:0 0 var(--o-24);font-size:var(--k-15);max-width:var(--proza)}

.text{max-width:var(--proza)}
.text h2{font-size:var(--k-21);margin:var(--o-32) 0 var(--o-8)}
.text p,.text li{line-height:1.7}
.text ul{padding-left:20px}
.text table{width:100%;border-collapse:collapse;font-size:var(--k-15);margin:var(--o-16) 0}
.text th{text-align:left;font-size:var(--k-13);text-transform:uppercase;letter-spacing:.06em;
  color:var(--seryy);padding:0 12px 8px 0;border-bottom:1px solid var(--linovka)}
.text td{padding:10px 12px 10px 0;border-bottom:1px solid var(--linovka-slabo);vertical-align:top}

.istochnik{font-size:var(--k-13);color:var(--seryy);margin:var(--o-24) 0 0;max-width:var(--proza)}

.sosedi{margin-top:var(--o-48);padding-top:var(--o-24);border-top:1px solid var(--linovka)}
.sosedi h2{font-family:'Golos Text',sans-serif;font-size:var(--k-13);text-transform:uppercase;
  letter-spacing:.12em;color:var(--seryy);margin:0 0 var(--o-16);font-weight:600}
.sosedi ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:0 var(--o-24)}
.sosedi a{display:block;padding:10px 0;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--linovka-slabo);font-size:var(--k-15)}
.sosedi a:hover{color:var(--sukno)}

/* ─── таблица ставок: строгий бланк ────────────────────────────────── */
.stavki{width:100%;border-collapse:collapse;background:var(--blank);font-size:var(--k-15);
  border:1px solid var(--linovka)}
.stavki th{text-align:left;font-family:'Golos Text',sans-serif;font-size:var(--k-13);
  text-transform:uppercase;letter-spacing:.06em;color:var(--seryy);
  padding:12px;border-bottom:2px solid var(--chernila);font-weight:600}
.stavki td{padding:12px;border-bottom:1px solid var(--linovka-slabo);vertical-align:top}
.stavki td:nth-child(2){font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.stavki tr:hover td{background:var(--sukno-svetlo)}

/* ─── производственный календарь ───────────────────────────────────── */
.kalendar{display:grid;grid-template-columns:repeat(auto-fill,minmax(224px,1fr));
  gap:var(--o-16);margin:var(--o-16) 0 var(--o-32)}
.mesyac{background:var(--blank);border:1px solid var(--linovka);border-radius:var(--radius);padding:var(--o-16)}
.mesyac h3{margin:0 0 var(--o-8);font-size:var(--k-15);text-transform:uppercase;letter-spacing:.06em}
.mesyac__setka{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;
  font-size:var(--k-13);font-variant-numeric:tabular-nums}
.mesyac__shapka{font-size:11px;color:var(--seryy);text-transform:uppercase;letter-spacing:.04em;padding-bottom:2px}
.den{padding:5px 0;border-radius:3px}
.den--rabochiy{background:var(--bumaga)}
.den--vyhodnoy{color:var(--ruchka);background:var(--ruchka-svetlo)}
.den--prazdnik{color:#fff;background:var(--ruchka);font-weight:600}
.den--korotkiy{background:var(--sukno-svetlo);color:var(--sukno);font-weight:600}

/* ─── подвал ───────────────────────────────────────────────────────── */
.bottom{background:var(--blank);border-top:1px solid var(--linovka);margin-top:var(--o-64)}
.bottom__in{max-width:var(--kolonka);margin:0 auto;padding:var(--o-32) var(--o-24);
  font-size:var(--k-15);color:var(--seryy);max-width:var(--kolonka)}
.bottom__in p{max-width:var(--proza)}
.bottom__in nav{margin:var(--o-16) 0;display:flex;gap:var(--o-24);flex-wrap:wrap}
.bottom__in a{color:var(--seryy)}

/* ─── узкий экран ──────────────────────────────────────────────────── */
@media(max-width:640px){
  .main{padding:var(--o-24) var(--o-16) var(--o-48)}
  .hero h1{font-size:var(--k-27)}
  .kalk-zag{font-size:var(--k-27)}
  .itog-summa{font-size:var(--k-34)}
  .top__search{margin-left:0;width:100%}
  .top__search input{width:100%}
  .schet{padding:var(--o-16);background-image:none}
  .itog-stroki li{font-size:var(--k-13)}
  .stavki{font-size:var(--k-13)}
  .stavki th,.stavki td{padding:8px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ─── первый экран: слово слева, табло справа ──────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
  gap:var(--o-48);align-items:start;margin-bottom:var(--o-48)}
.hero__slovo h1{font-size:var(--k-43);font-weight:700;max-width:14ch;margin-bottom:var(--o-16)}
.hero__poisk{display:flex;gap:var(--o-8);margin-top:var(--o-24);max-width:520px}
.hero__poisk input{flex:1;padding:13px 15px;font-size:var(--k-17);font-family:inherit;
  border:1px solid var(--linovka);border-bottom-width:2px;border-radius:var(--radius);
  background:var(--blank);color:inherit}
.hero__poisk input:focus{outline:none;border-color:var(--sukno)}
.hero__poisk button{padding:13px 22px;font-size:var(--k-15);font-family:'Golos Text',sans-serif;
  font-weight:600;border:0;border-radius:var(--radius);background:var(--sukno);color:#fff;cursor:pointer}
.hero__poisk button:hover{background:var(--chernila)}

/* табло — бланк со свежими цифрами, подпись двойной чертой как в ведомости */
.tablo{background:var(--blank);border:1px solid var(--linovka);border-radius:var(--radius);
  padding:var(--o-24);font-size:var(--k-15)}
.tablo__zag{margin:0 0 var(--o-8);font-family:'Golos Text',sans-serif;font-size:var(--k-13);
  text-transform:uppercase;letter-spacing:.12em;color:var(--seryy);font-weight:600}
.tablo__den{margin:0 0 var(--o-4);font-family:'Golos Text',sans-serif;font-size:var(--k-21);
  font-weight:600;color:var(--sukno)}
.tablo__den--vyhodnoy,.tablo__den--prazdnik{color:var(--ruchka)}
.tablo__mes{margin:0 0 var(--o-16);color:var(--seryy)}
.tablo__spisok{margin:0;padding:var(--o-16) 0 0;border-top:3px double var(--chernila)}
.tablo__stroka{display:flex;justify-content:space-between;gap:var(--o-16);
  padding:8px 0;border-bottom:1px solid var(--linovka-slabo)}
.tablo__stroka dt{color:var(--seryy)}
.tablo__stroka dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tablo__niz{margin:var(--o-16) 0 0;font-size:var(--k-13)}

.razdel-zag{display:flex;align-items:baseline;justify-content:space-between;gap:var(--o-16)}
.razdel-zag span{font-family:'Inter',sans-serif;letter-spacing:0;font-weight:400;
  color:var(--linovka);font-size:var(--k-15)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:var(--o-32)}
  .hero__slovo h1{max-width:none}
}
@media(max-width:640px){
  .hero__poisk{flex-direction:column}
  .hero__poisk button{width:100%}
}

/* карточка на витрине: полоска сукна слева при наведении */
.setka li{position:relative;overflow:hidden}
.setka li::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--sukno);transform:scaleX(0);transform-origin:left;transition:transform .15s}
.setka li:hover::before{transform:scaleX(1)}
.razdel-zag span{color:var(--seryy);opacity:.5}

/* штамп под расчётом — подпись бланка */
.shtamp{display:flex;align-items:center;gap:var(--o-16);flex-wrap:wrap;
  margin:calc(var(--o-32) * -1 + var(--o-8)) 0 var(--o-32);font-size:var(--k-13)}
.shtamp__ramka{display:inline-block;padding:5px 10px;border:1px solid var(--sukno);
  border-radius:3px;color:var(--sukno);text-transform:uppercase;letter-spacing:.08em;
  font-family:'Golos Text',sans-serif;font-weight:600;transform:rotate(-1.2deg)}
.shtamp a{color:var(--seryy)}

/* ─── шапка на телефоне: меню одной лентой, не тремя строками ─────────
   Ровно из-за этого первый экран съедало меню. Лента прокручивается,
   выключка ТОЛЬКО flex-start: center при переполнении уводит начало
   списка в отрицательные координаты, и до первого пункта не долистать. */
@media(max-width:760px){
  .top__in{padding:10px var(--o-16);gap:10px}
  .top__logo-text{font-size:var(--k-15)}
  .top__mark{width:28px;height:28px;font-size:var(--k-15)}
  .top__nav{width:100%;margin:0 calc(var(--o-16) * -1);padding:0 var(--o-16);
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top__nav::-webkit-scrollbar{display:none}
  .top__nav ul{justify-content:flex-start!important;flex-wrap:nowrap;gap:var(--o-16);
    padding-bottom:2px}
  .top__nav li{flex:0 0 auto}
  .top__nav a{white-space:nowrap;font-size:var(--k-13);text-transform:uppercase;
    letter-spacing:.06em}
  .main{padding-top:var(--o-24)}
  .krohi{margin-bottom:10px}
}