/* «Граф Колесов» — стили раздела: шинный калькулятор. Подключается после grafkolesov.css ({% block css %}); порядок правил — как в исходном общем файле, правила общего файла, которые должны перебивать правила раздела, повторены здесь (ТЗ-14). */
.gk-f-select{width:100%;padding:9px 10px;border:1px solid var(--gk-line);background-color:var(--gk-bg);color:var(--gk-ink);font:500 16px 'JetBrains Mono',monospace}
.gk-f-size{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:6px;align-items:end}
.gk-f-size select{padding-left:8px}
.gk-f-size label span{display:block;font-size:11px;color:var(--gk-mute);margin-bottom:4px}
.gk-f-slash{font:700 18px 'JetBrains Mono',monospace;color:var(--gk-mute);padding-bottom:9px}
:where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:var(--gk-acc);outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--gk-acc) 22%,transparent)}
/* ---------- блоки перелинковки: виджет с отступом от каталога ---------- */
.gk-linkgrid{margin-top:40px;padding:20px 22px 22px;background:var(--gk-card);border:1px solid var(--gk-line)}
.gk-lg-tile{position:relative;display:flex;flex-direction:column;gap:3px;height:100%;padding:11px 12px 13px;border:1px solid var(--gk-line);
  background:var(--gk-bg);text-decoration:none;color:var(--gk-ink);transition:border-color .15s,transform .15s;overflow:hidden}
@media (max-width:560px){.gk-linkgrid{padding:16px;margin-left:-16px;margin-right:-16px;border-left:0;border-right:0}}
.gk-brand-intro{font-size:17px;line-height:1.55;max-width:70ch;margin:0 0 16px;color:var(--gk-ink)}
.gk-brand-about .gk-text{max-width:80ch;font-size:16px;line-height:1.65}
/* ---------- шинный калькулятор ---------- */
.gk-calc{display:grid;gap:20px;margin-top:20px}
.gk-calc-inputs{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:center}
.gk-calc-size{margin:0;padding:16px 18px 18px;border:1px solid var(--gk-line);background:var(--gk-card)}
.gk-calc-size legend{padding:0 6px;font-weight:700;font-size:15px}
.gk-calc-size--b{border-color:var(--gk-acc)}
.gk-calc-swap{width:44px;height:44px;border:1px solid var(--gk-line);background:var(--gk-card);color:var(--gk-ink);font-size:20px;cursor:pointer}
.gk-calc-swap:hover{border-color:var(--gk-acc);color:var(--gk-acc-text)}
.gk-calc-verdict{display:flex;align-items:center;gap:18px;padding:16px 20px;border:1px solid var(--gk-line);border-left-width:5px;background:var(--gk-card)}
.gk-calc-verdict b{font:700 30px 'JetBrains Mono',monospace;white-space:nowrap}
.gk-calc-verdict--ok{border-left-color:var(--gk-ok)}
.gk-calc-verdict--ok b{color:var(--gk-ok)}
.gk-calc-verdict--check{border-left-color:var(--gk-acc)}
.gk-calc-verdict--check b{color:var(--gk-acc-text)}
.gk-calc-verdict--no{border-left-color:var(--gk-err)}
.gk-calc-verdict--no b{color:var(--gk-err)}
.gk-calc-grid{display:grid;grid-template-columns:300px minmax(0,1fr);gap:24px;align-items:center}
.gk-calc-art svg{width:100%;height:auto;display:block}
.gk-ca-a{stroke:var(--gk-mute);stroke-width:2;stroke-dasharray:5 5}
.gk-ca-b{stroke:var(--gk-acc);stroke-width:3}
.gk-ca-rim{stroke-width:1.5}
.gk-ca-t{font:11px Onest,sans-serif;fill:var(--gk-mute)}
.gk-calc-table{width:100%;border-collapse:collapse;font-size:15px}
.gk-calc-table th,.gk-calc-table td{padding:9px 10px;border-bottom:1px solid var(--gk-line);text-align:right}
.gk-calc-table th:first-child{text-align:left;font-weight:500;color:var(--gk-mute)}
.gk-calc-table thead th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--gk-mute)}
.gk-calc-table td{font-family:'JetBrains Mono',monospace}
.gk-calc-speed h2{font-size:18px;margin:0 0 10px}
.gk-calc-speed ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gk-calc-speed li{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--gk-line);background:var(--gk-card);font-size:14px;color:var(--gk-mute)}
.gk-calc-speed b{font:700 20px 'JetBrains Mono',monospace;color:var(--gk-ink)}
.gk-calc-links{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:760px){.gk-calc-inputs{grid-template-columns:minmax(0,1fr)}.gk-calc-swap{justify-self:center;transform:rotate(90deg)}.gk-calc-grid{grid-template-columns:minmax(0,1fr)}.gk-calc-art{max-width:240px;margin:0 auto}.gk-calc-speed ul{grid-template-columns:minmax(0,1fr)}.gk-calc-verdict{flex-direction:column;align-items:flex-start;gap:6px}}
/* калькулятор: воздух между частями результата */
.gk-calc-out{display:grid;gap:24px}
.gk-calc{gap:28px}
.gk-calc-grid{padding:20px;border:1px solid var(--gk-line);background:var(--gk-card)}
.gk-calc-speed{padding:20px;border:1px solid var(--gk-line);background:var(--gk-card)}
.gk-calc-speed li{background:var(--gk-bg)}
.gk-calc-links:empty{display:none}
.gk-calc-links{gap:12px}
.gk-calc+.gk-linkgrid{margin-top:32px}
.gk-foot-cookie{border:0;background:none;padding:0;font:inherit;font-size:13px;color:var(--gk-panel-mute);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.gk-cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;
  padding:16px 18px;background:var(--gk-card);border:1px solid var(--gk-line);box-shadow:0 18px 40px rgba(0,0,0,.35);font-size:14px;line-height:1.5}
@media (max-width:767px){.gk-cookie{left:0;right:0;bottom:0;padding:10px 16px;gap:8px 12px;font-size:13px;line-height:1.4}}
.gk-calc{display:flex;flex-direction:column;gap:14px}
/* при переносе строки ячейки растягиваются — без серой пустоты справа */
@media (max-width:767px){.gk-calc-table{width:100%;font-size:14px}.gk-calc-table th,.gk-calc-table td{padding-left:6px;padding-right:6px}.gk-calc-table th:first-child,.gk-calc-table td:first-child{padding-left:0}.gk-calc-table th:last-child,.gk-calc-table td:last-child{padding-right:0}}
/* ================= аудит 02.10: дизайн, телефон, доступность ================= */
/* фокус: янтарь на светлом фоне ~2:1 — двойное кольцо (тёмное + янтарное) читается на любом фоне (WCAG 1.4.11) */
:where(input,select,textarea,button,summary,a):focus-visible{outline:2px solid var(--gk-acc-text);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--gk-acc) 35%,transparent)}
/* рамки полей и «призрачных» кнопок — цветом полей (≥3:1 по DESIGN.md), а не линией разделителя (~1,4:1) */
.gk-f-select,.gk-calc-swap{border-color:var(--gk-field-line)}
.gk-form textarea,.gk-form input,.gk-btn--ghost{border-color:var(--gk-field-line)}
.gk-calc-swap{font-family:Onest,sans-serif}
/* длинные тексты разделов: 80ch у Onest — ~105 знаков; ограничиваем в em */
.gk-brand-about .gk-text{max-width:46em}
/* калькулятор: в одну колонку уже с 900 px — таблица вылезала за карточку на 768 */
@media (max-width:900px){.gk-calc-grid{grid-template-columns:minmax(0,1fr)}.gk-calc-art{max-width:240px;margin:0 auto}}
/* цели касания на сенсорных экранах (аудит 02.10, дополнение к 27.09) */
@media (pointer:coarse){.gk-f-select{min-height:44px}}