/* Калькулятор взлома замков Gothic 1 Remake в новом виде. Разметку калькулятора рисует vzlom-zamkov-gothic-1-remake.js, классы прежние */
/* Карточка, поля и кнопки — rd-geometriya.css. Файл подключается раньше calc.css, redesign.css и rd.css, поэтому селекторы начинаются с .rd */

/* --good и --bad из rd.css дают с текстом на светлом фоне контраст ниже 4,5:1 — для подписей берём тёмные оттенки */
.rd #gl-calc { --gl-right: #1E6E49; --gl-left: #A32D2D; --gl-mute: #565b60; }

/* Шаги формы */
.rd #gl-calc .gl-step { margin: 0; }
.rd #gl-calc .gl-step-label { margin: 0 0 12px; font: 600 15px/1.4 var(--f-ui); color: var(--ink); }
.rd #gl-calc .gl-step-hint { display: block; margin-top: 2px; font: 400 13px/1.45 var(--f-ui); color: var(--gl-mute); }

/* Число пластин: плитки в один ряд, без переноса */
.rd #gl-calc #gl-count { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; }
.rd #gl-calc #gl-count .radio-button { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 1 1 0; min-width: 0; min-height: 44px; margin: 0; padding: 10px 4px; border: 0; border-radius: 999px; background: none; font: 500 15px/1.2 var(--f-ui); color: var(--ink); text-align: center; cursor: pointer; }
.rd #gl-calc #gl-count .radio-button input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.rd #gl-calc #gl-count .radio-button__bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.rd #gl-calc #gl-count .radio-button:hover .radio-button__bg { box-shadow: inset 0 0 0 1px var(--accent-mid); }
.rd #gl-calc #gl-count .radio-button input:checked + .radio-button__bg { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.rd #gl-calc #gl-count .radio-button:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Ряды пластин с отверстиями. На узком экране отверстия сжимаются, ряд из семи не вылезает за карточку */
.rd #gl-calc .gl-prow, .rd #gl-calc .gl-drow { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.rd #gl-calc .gl-pname { flex: 0 0 20px; width: 20px; font: 600 14px/1 var(--f-mono); color: var(--ink); text-align: center; }
.rd #gl-calc .gl-holes { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 6px; min-width: 0; max-width: 246px; }
.rd #gl-calc .gl-hole { display: flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 1 1 0; min-width: 0; max-width: 30px; height: auto; aspect-ratio: 1; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; font: 400 13px/1 var(--f-ui); color: var(--ink); -webkit-appearance: none; appearance: none; transition: background .15s, border-color .15s; }
.rd #gl-calc button.gl-hole { cursor: pointer; }
.rd #gl-calc button.gl-hole:hover { border-color: var(--accent); }
.rd #gl-calc button.gl-hole:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #gl-calc .gl-hole.is-center { border: 1px dashed var(--mute); color: var(--mute); }
.rd #gl-calc .gl-hole.is-pin { border: 1px solid var(--ink); background: var(--ink); color: #fff; }
.rd #gl-calc .gl-hole.is-ok { border-color: var(--gl-right); background: var(--gl-right); color: #fff; }
.rd #gl-calc .gl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font: 400 13px/1.4 var(--f-ui); color: var(--gl-mute); }
.rd #gl-calc .gl-lg { display: inline-flex; align-items: center; gap: 5px; }

/* Связи: мастер по одной пластине за раз */
.rd #gl-calc .gl-conn-help { margin: 0 0 14px; font: 400 14px/1.6 var(--f-text); color: var(--ink); }
.rd #gl-calc .gl-conn-help b { font-weight: 600; }
.rd #gl-calc .gl-wz-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rd #gl-calc .gl-wz-tab { position: relative; min-width: 44px; height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: 12px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--line); font: 600 14px/1 var(--f-mono); color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .15s, box-shadow .15s; }
.rd #gl-calc .gl-wz-tab:hover { box-shadow: inset 0 0 0 1px var(--accent-mid); }
.rd #gl-calc .gl-wz-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #gl-calc .gl-wz-tab.is-active { background: var(--ink); box-shadow: none; color: #fff; }
.rd #gl-calc .gl-wz-tab.is-set::after { content: ''; position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gl-right); }
.rd #gl-calc .gl-wz-tab.is-set.is-active::after { background: #fff; }
.rd #gl-calc .gl-wz-card { padding: 16px; border-radius: 16px; background: var(--tile); }
.rd #gl-calc .gl-wz-q { margin: 0 0 14px; font: 400 15px/1.5 var(--f-ui); color: var(--ink); }
.rd #gl-calc .gl-wz-q b { font-weight: 600; }
.rd #gl-calc .gl-wz-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.rd #gl-calc .gl-wz-pl { flex: 0 0 20px; width: 20px; font: 600 14px/1 var(--f-mono); color: var(--ink); text-align: center; }
.rd #gl-calc .gl-wz-seg { display: flex; flex: 1 1 auto; gap: 6px; min-width: 0; }
.rd #gl-calc .gl-seg { flex: 1 1 0; min-width: 0; height: 44px; margin: 0; padding: 0 4px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 13px/1 var(--f-ui); color: var(--ink); white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background .12s, box-shadow .12s; }
.rd #gl-calc .gl-seg:hover { box-shadow: inset 0 0 0 1px var(--accent-mid); }
.rd #gl-calc .gl-seg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #gl-calc .gl-seg.is-on.s-none { background: var(--pill); box-shadow: inset 0 0 0 1.5px var(--mute); color: var(--ink); }
.rd #gl-calc .gl-seg.is-on.s-right { background: var(--good-soft); box-shadow: inset 0 0 0 1.5px var(--good); color: var(--gl-right); }
.rd #gl-calc .gl-seg.is-on.s-left { background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px var(--bad); color: var(--gl-left); }
.rd #gl-calc .gl-wz-alone { display: block; box-sizing: border-box; width: 100%; min-height: 44px; margin: 6px 0 0; padding: 10px 12px; border: 1px dashed var(--mute); border-radius: 12px; background: none; font: 500 13px/1.3 var(--f-ui); color: var(--gl-mute); cursor: pointer; }
.rd #gl-calc .gl-wz-alone:hover { border-color: var(--ink); color: var(--ink); }
.rd #gl-calc .gl-wz-alone:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rd #gl-calc .gl-wz-nav { display: flex; gap: 8px; margin-top: 14px; }
/* На узком экране «Готово, решить ✓» не помещается в половину строки: подпись переносится, кнопка растёт в высоту */
.rd #gl-calc .gl-wz-nav .button { flex: 1 1 0; min-width: 0; height: auto; min-height: 46px; padding: 8px 12px; line-height: 1.2; text-align: center; white-space: normal; }
.rd #gl-calc .gl-wz-nav .button.black { background: var(--ink); color: #fff; }
.rd #gl-calc .gl-wz-nav .button[disabled] { opacity: .4; cursor: default; }

/* Результат */
.rd #gl-calc .gl-hint, .rd #gl-calc .gl-msg { margin: 0; font: 400 14px/1.6 var(--f-ui); color: var(--ink); }
.rd #gl-calc .gl-sol-head { margin: 0 0 12px; font: 400 15px/1.4 var(--f-ui); color: var(--ink); }
.rd #gl-calc .gl-sol-head b { font: 600 22px/1.2 var(--f-ui); }
.rd #gl-calc ol.gl-recipe { margin: 0 0 16px; padding-left: 24px; list-style: decimal outside; }
.rd #gl-calc ol.gl-recipe li { margin: 0; padding: 0; font: 400 15px/1.8 var(--f-ui); color: var(--ink); list-style: decimal outside; }
.rd #gl-calc ol.gl-recipe li::before { display: none; }
.rd #gl-calc ol.gl-recipe li::marker { font-family: var(--f-mono); color: var(--gl-mute); }
.rd #gl-calc ol.gl-recipe b { font: 600 15px/1 var(--f-mono); }
.rd #gl-calc .gl-x { color: var(--gl-mute); }
.rd #gl-calc .gl-player { padding-top: 16px; border-top: 1px solid var(--line); }
.rd #gl-calc .gl-player-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 12px; }
.rd #gl-calc .gl-player-bar .gl-pbtn { flex: 0 0 auto; padding: 0 16px; }
.rd #gl-calc .gl-pcount { flex: 1 1 auto; font: 400 13px/1.3 var(--f-ui); color: var(--ink); text-align: center; }
.rd #gl-calc .gl-diagram { display: flex; flex-direction: column; gap: 4px; }
.rd #gl-calc .gl-drow { margin: 0; padding: 4px 6px; border-radius: 10px; }
.rd #gl-calc .gl-drow .gl-pname { flex-basis: 34px; width: 34px; text-align: left; white-space: nowrap; }
.rd #gl-calc .gl-drow.is-active { background: var(--accent-soft); }
.rd #gl-calc .gl-holes--ro .gl-hole { pointer-events: none; cursor: default; }
.rd #gl-calc .gl-copy-wrap { margin-top: 16px; }

/* Тост «Скопировано»: стоит вне секции калькулятора — у неё container-type, и position: fixed внутри считался бы от карточки */
.rd #gl-toast { position: fixed; left: 50%; bottom: 28px; z-index: 9999; box-sizing: border-box; max-width: calc(100vw - 32px); padding: 10px 18px; border-radius: 12px; background: var(--ink); color: #fff; font: 500 13px/1.3 var(--f-ui); text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .25s, transform .25s; }
.rd #gl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* Таблица готовых комбинаций: последовательность L/R моноширинным, чтобы ходы стояли столбиком */
.rd .rd-article__body .gl-combos td:nth-child(2) { font: 400 13px/1.7 var(--f-mono); }

@media (max-width: 639px) {
    .rd #gl-calc .gl-wz-card { padding: 14px 12px; }
    .rd #gl-calc .gl-wz-row { gap: 8px; }
    .rd #gl-calc .gl-wz-seg { gap: 4px; }
    /* Подпись хода в три строки не помещается между кнопками: на телефоне она стоит над ними */
    .rd #gl-calc .gl-player-bar { flex-wrap: wrap; }
    .rd #gl-calc .gl-pcount { flex: 0 0 100%; order: -1; }
    .rd #gl-calc .gl-player-bar .gl-pbtn { flex: 1 1 0; padding: 0 12px; }
    .rd #gl-calc .gl-drow { padding: 4px; }
    .rd #gl-calc .gl-drow .gl-pname { flex-basis: 28px; width: 28px; }
}

@media (max-width: 379px) {
    .rd #gl-calc .gl-seg { font-size: 12px; padding: 0 2px; }
    .rd #gl-calc .gl-holes { gap: 5px; }
    .rd #gl-calc .gl-holes--ro { gap: 4px; }
}

@media print {
    /* На бумаге остаются положения штифтов, связи текущей пластины и решение, кнопки управления скрыты */
    .rd #gl-toast, .rd #gl-calc :is(.gl-wz-tabs, .gl-wz-alone, .gl-wz-nav, .gl-player-bar .gl-pbtn, .gl-copy-wrap) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rd #gl-calc :is(.radio-button__bg, .gl-hole, .gl-wz-tab, .gl-seg), .rd #gl-toast { transition: none; }
}