/* Язык отчётного бланка. Один файл на весь сайт, брейкпойнт один: 900px.
   В макетах было две ширины отдельными досками, здесь это одна отзывчивая вёрстка.
   Радиус нулевой везде: это документ, а не приложение. */

:root {
  --ink: #111418;
  --paper: #EFEDE6;
  --surf: #FBFAF6;
  --muted: #6A6E76;
  --hair: #C9C5BA;
  --pechat: #C1121F;
  --srok: #B4781A;
  --sin: #1F4FA8;
  --green: #2C6B4F;
  --setka: 28px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Golos Text', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Миллиметровка под листом: знак бланка, а не украшение. */
  background-image:
    linear-gradient(var(--hair) 1px, transparent 1px),
    linear-gradient(90deg, var(--hair) 1px, transparent 1px);
  background-size: var(--setka) var(--setka);
  background-position: -1px -1px;
}

.sheet {
  background: var(--surf);
  border-left: 1px solid var(--hair);
  border-right: 1px solid var(--hair);
  max-width: 1240px;
  margin: 24px auto;
}

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.disp { font-family: 'Unbounded', sans-serif; font-weight: 700; letter-spacing: -.045em; line-height: .94; }

h1 { margin: 0; font-size: 62px; }
h2 { margin: 0; font-family: 'Unbounded', sans-serif; font-weight: 700; letter-spacing: -.035em; font-size: 30px; }
h3 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }

.podpis { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* --- шапка --- */
.head { display: flex; justify-content: space-between; align-items: stretch; border-bottom: 2px solid var(--ink); }
.head .l { padding: 16px 26px; font-weight: 600; font-size: 19px; letter-spacing: -.02em;
  display: flex; align-items: center; gap: 8px; text-decoration: none; }
.head .l em { font-style: normal; color: var(--pechat); }
.head nav { display: flex; }
.head nav a { padding: 16px 20px; border-left: 1px solid var(--hair); display: flex; align-items: center;
  text-decoration: none; font-size: 15px; }
.head nav a:hover { background: #F1EFE9; }
.head nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ink); font-weight: 500; }

/* --- сетка листа --- */
.cell { padding: 34px 26px; }
.grid { display: grid; grid-template-columns: 1.15fr .85fr; border-bottom: 1px solid var(--hair); }
/* На страницах с анкетой главное это результат, а не вопросы: ему и ширина.
   При обратной пропорции длинные строки норм рвались по два слова. */
.grid.anketa { grid-template-columns: .8fr 1.2fr; }
.grid > .cell { border-right: 1px solid var(--hair); }
.grid > .cell:last-child { border-right: none; }
.lead { font-size: 19px; color: #2A2E34; max-width: 32em; margin-top: 20px; }
.opis { font-size: 15px; color: var(--muted); line-height: 1.45; margin-top: 8px; }

.bento { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); }
.bento > div { padding: 26px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.bento > div:nth-child(3n) { border-right: none; }

.stroka { display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px dotted var(--hair); }
.stroka:last-child { border-bottom: none; }

/* --- органы управления --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ink); color: #fff; padding: 16px 26px; font-weight: 500; font-size: 17px;
  text-decoration: none; border: none; font-family: inherit; cursor: pointer; }
.btn:disabled { background: var(--hair); cursor: not-allowed; }
.btn.g { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.w { width: 100%; }

.opt { display: flex; gap: 12px; align-items: center; min-height: 52px; padding: 12px 14px;
  border: 1.5px solid #B8B4AA; background: #fff; font-size: 17px; cursor: pointer;
  margin-top: 8px; text-align: left; width: 100%; font-family: inherit; color: inherit; line-height: 1.35; }
.opt:hover { border-color: var(--ink); }
.opt.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.box { width: 16px; height: 16px; border: 1.5px solid var(--ink); flex: none; }
.opt.sel .box { background: var(--ink); }

/* --- печати и штампы --- */
.pechat { display: inline-block; transform: rotate(-4deg); border: 2.5px solid var(--pechat);
  color: var(--pechat); padding: 6px 13px 5px; font-family: 'IBM Plex Mono', monospace;
  font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(255,255,255,.6); white-space: nowrap; }
.pechat.ok { border-color: var(--green); color: var(--green); }
.pechat.ser { border-color: var(--muted); color: var(--muted); }
.pechat.srok { border-color: var(--srok); color: var(--srok); }

.dvoy { border: 2px solid var(--ink);
  box-shadow: 0 0 0 1px var(--surf) inset, 0 0 0 4px var(--ink) inset;
  padding: 24px; background: #fff; }
.shtraf { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 34px;
  color: var(--pechat); letter-spacing: -.03em; }

.kletki { display: flex; gap: 3px; }
.kletki span { width: 30px; height: 40px; border: 1.5px solid var(--ink); display: flex;
  align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 17px; background: #fff; }
.kletki span.f { background: var(--ink); color: #fff; }

/* --- шкала категорий --- */
.shkala { display: flex; gap: 3px; }
.stupen { flex: 1; height: 44px; border: 1.5px solid var(--hair); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--hair); transition: background .18s, color .18s, border-color .18s; }
.stupen.tek { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 500; }

/* --- лента года --- */
.lenta { display: flex; border: 1.5px solid var(--ink); background: #fff; }
.mesyac { flex: 1; padding: 9px 0; text-align: center; font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: var(--muted); border-right: 1px solid var(--hair); text-transform: uppercase; }
.mesyac:last-child { border-right: none; }
.mesyac.srok { background: var(--srok); color: #fff; font-weight: 500; }
.mesyac.seychas { box-shadow: inset 0 -3px 0 var(--ink); }

/* --- знаки --- */
.znak { display: block; flex: none; color: var(--ink); }

/* --- плитки выбора --- */
.plitki { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 16px; }
.plitka { border: 1.5px solid var(--hair); border-right-width: 0; border-bottom-width: 0;
  background: #fff; padding: 14px 10px; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  text-align: left; min-height: 84px; transition: background .15s, border-color .15s; }
.plitka:nth-child(2n) { border-right-width: 1.5px; }
.plitki .plitka:nth-last-child(-n+2) { border-bottom-width: 1.5px; }
.plitka span { font-size: 14px; line-height: 1.3; color: var(--muted); font-weight: 500; }
.plitka:hover { background: #F1EFE9; border-color: var(--ink); position: relative; z-index: 1; }
.plitka:hover span { color: var(--ink); }
.plitka:hover .znak { color: var(--pechat); }
.plitka.sel { background: var(--ink); border-color: var(--ink); }
.plitka.sel span, .plitka.sel .znak { color: #fff; }

/* --- органы на главной --- */
.organy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 18px; }
.organ { display: flex; gap: 14px; align-items: flex-start; padding: 18px;
  border: 1.5px solid var(--hair); border-right-width: 0; border-bottom-width: 0;
  background: #fff; text-decoration: none; color: inherit; transition: background .15s; }
.organ:nth-child(2n) { border-right-width: 1.5px; }
.organ:nth-last-child(-n+2) { border-bottom-width: 1.5px; }
a.organ:hover { background: #F1EFE9; }
a.organ:hover .znak { color: var(--pechat); }
.organ.nedostupen { background: transparent; }
.organ.nedostupen .znak, .organ.nedostupen b { color: var(--muted); }

/* --- три предприятия рядом --- */
.sravnenie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 16px; }
.sravn { border: 1.5px solid var(--hair); border-right-width: 0; background: #fff;
  padding: 20px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; transition: background .15s; }
.sravn:last-child { border-right-width: 1.5px; }
.sravn:hover { background: #F6F4EE; }
.sravn:hover .sravn-vzyat { color: var(--ink); }
.sravn-verh { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.sravn h4 { margin: 14px 0 0; font-size: 16px; font-weight: 600; }
.sravn-kat { font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 44px;
  letter-spacing: -.04em; line-height: 1; margin-top: 10px; }
.sravn-cifry { display: flex; gap: 18px; margin-top: 16px; }
.sravn-cifry b { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 14px;
  font-weight: 500; margin-top: 3px; }
.sravn-cifry b.krasnoe { color: var(--pechat); }
.sravn-vazhno { margin-top: 14px; font-size: 14px; color: var(--muted); line-height: 1.45; flex: 1; }
.sravn-vzyat { margin-top: 14px; font-size: 13px; color: var(--hair);
  text-transform: uppercase; letter-spacing: .08em; }

/* --- что вы получите --- */
.obeshchaniya { margin-top: 14px; }
.obeshchanie { display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px dotted var(--hair); }
.obeshchanie:last-child { border-bottom: none; }
.obeshchanie b { display: block; font-weight: 600; font-size: 16px; }
.obeshchanie span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; line-height: 1.4; }

/* --- карточки обязанностей --- */
.karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 14px; }
.karta { border: 1.5px solid var(--hair); border-right-width: 0; border-bottom-width: 0;
  padding: 16px; background: #fff; transition: background .15s; }
.karta:nth-child(3n) { border-right-width: 1.5px; }
.karta:nth-last-child(-n+3) { border-bottom-width: 1.5px; }
.karta:hover { background: #F6F4EE; }
.karta.podsvet { background: #F1EFE9; box-shadow: inset 3px 0 0 var(--srok); }
.karta h4 { margin: 10px 0 0; font-size: 15px; font-weight: 600; line-height: 1.3; }
.karta .srok-tekst { font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--srok); margin-top: 8px; display: block; }
.karta .shtraf-tekst { font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--pechat); margin-top: 4px; display: block; }
.karta .norma { margin-top: 8px; font-size: 11px; }

/* --- ползунок порога --- */
.polzunok-blok { margin-top: 12px; }
.polzunok { -webkit-appearance: none; appearance: none; width: 100%; height: 34px;
  background: transparent; cursor: grab; display: block; }
.polzunok:active { cursor: grabbing; }
.polzunok::-webkit-slider-runnable-track { height: 6px; background: #fff;
  border: 1.5px solid var(--ink); }
.polzunok::-moz-range-track { height: 6px; background: #fff; border: 1.5px solid var(--ink); }
/* Бегунок это калибр на линейке: прямоугольник, не кружок. */
.polzunok::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 18px; height: 30px; background: var(--ink); border: none; margin-top: -13px; }
.polzunok::-moz-range-thumb { width: 18px; height: 30px; background: var(--ink);
  border: none; border-radius: 0; }
.polzunok:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--sin); outline-offset: 2px; }
.polzunok-shkala { display: flex; justify-content: space-between; gap: 8px; }
.polzunok-shkala span { font-size: 12px; color: var(--muted); font-family: 'IBM Plex Mono', monospace;
  flex: 1; text-align: center; }
.polzunok-shkala span:first-child { text-align: left; }
.polzunok-shkala span:last-child { text-align: right; }
.polzunok-shkala span.tek { color: var(--ink); font-weight: 500; }
.polzunok-tek { margin-top: 8px; font-size: 14px; }

/* --- подсветка связанного --- */
.mesyac { cursor: default; transition: background .15s, color .15s; }
.mesyac.srok { cursor: pointer; }
.mesyac.podsvet { background: var(--ink); color: #fff; }
.ob.podsvet { background: #F1EFE9; box-shadow: inset 3px 0 0 var(--srok); }
.ob summary:hover { background: #F6F4EE; }
.lenta-podskazka { min-height: 1.5em; }

/* --- развилки «а если» --- */
.razvilka { border: 1.5px solid var(--hair); background: #fff; padding: 8px 12px;
  font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; }
.razvilka:hover { border-color: var(--ink); color: var(--ink); }
.razvilka.tek { border-color: var(--ink); background: var(--ink); color: #fff; }

/* --- готовые предприятия --- */
.primery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.primer { border: 1.5px solid var(--hair); border-right-width: 0; background: #fff;
  padding: 16px; text-align: left; font: inherit; cursor: pointer; display: block; }
.primer:last-child { border-right-width: 1.5px; }
.primer:hover { border-color: var(--ink); background: #F6F4EE; }
.primer b { display: block; font-weight: 600; font-size: 16px; }
.primer span { display: block; color: var(--muted); font-size: 14px; margin-top: 6px; line-height: 1.4; }

/* --- ход анкеты --- */
.hod { display: flex; gap: 4px; margin-top: 14px; }
.hod i { flex: 1; height: 6px; background: #fff; border: 1px solid var(--hair); }
.hod i.f { background: var(--ink); border-color: var(--ink); }

.norma { font-size: 13px; color: var(--muted); font-family: 'IBM Plex Mono', monospace;
  margin-top: 10px; line-height: 1.45; }

.foot { padding: 24px 26px; border-top: 2px solid var(--ink); color: var(--muted);
  font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 6px; }
.foot a { color: var(--muted); }

/* --- телефон --- */
@media (max-width: 900px) {
  :root { --setka: 22px; }
  body { font-size: 16px; }
  .sheet { margin: 10px 8px; }
  h1 { font-size: 34px; }
  h2 { font-size: 22px; }
  h3 { font-size: 17px; }
  .lead { font-size: 17px; margin-top: 14px; }
  .opis { font-size: 14px; }
  .cell { padding: 24px 16px; }
  .grid { display: block; }
  .grid > .cell { border-right: none; border-bottom: 1px solid var(--hair); }
  .grid > .cell:last-child { border-bottom: none; }
  .bento { display: block; }
  .bento > div { padding: 20px 16px; border-right: none; }
  /* На телефоне меню не влезало в строку и давало горизонтальный скролл
     всей страницы: замер 09.09 показал документ шириной 532 px при окне 390.
     Шапка становится в два этажа, меню прокручивается внутри себя. */
  .head { display: block; }
  .head .l { padding: 13px 16px; font-size: 16px; }
  .head nav { border-top: 1px solid var(--hair); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .head nav a { padding: 11px 14px; font-size: 14px; flex: 0 0 auto; white-space: nowrap; }
  .head nav a:first-child { border-left: none; }
  .btn { padding: 15px 20px; font-size: 16px; width: 100%; }
  .primery { grid-template-columns: 1fr; }
  .plitki { grid-template-columns: repeat(2, 1fr); }
  .plitka { border-right-width: 1.5px; min-height: 92px; }
  .plitka:nth-child(2n) { border-right-width: 1.5px; }
  .karty { grid-template-columns: 1fr; }
  .sravnenie { grid-template-columns: 1fr; }
  .organy { grid-template-columns: 1fr; }
  .organ { border-right-width: 1.5px; }
  .sravn { border-right-width: 1.5px; border-bottom-width: 0; }
  .sravn:last-child { border-bottom-width: 1.5px; }
  .karta { border-right-width: 1.5px; }
  .primer { border-right-width: 1.5px; border-bottom-width: 0; }
  .primer:last-child { border-bottom-width: 1.5px; }
  .shtraf { font-size: 26px; }
  .dvoy { padding: 18px; }
  .foot { padding: 18px 16px; font-size: 12px; }
}

/* Клавиатурная доступность: обводку не убираем, а делаем в языке бланка. */
:focus-visible { outline: 2px solid var(--sin); outline-offset: 2px; }
[hidden] { display: none !important; }