/* Инструкции, инструменты и словарь (П4). Цвета и шрифты — переменные из основной страницы (template.html). */
/* подсказки словаря: термин в тексте и всплывающее объяснение */
.gl-term { color: inherit; text-decoration: underline dashed color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: help; }
.gl-term:hover, .gl-term:focus-visible { color: var(--accent); }
a.chip.gl-term { text-decoration: none; border-bottom: 1px dashed var(--accent); color: var(--ink); }
#glTip { position: fixed; z-index: 70; background: var(--tile); color: var(--tile-ink); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; box-shadow: var(--shadow); }
#glTip p { margin: 4px 0 6px; }
#glTip .fx-mono { color: #a7b0a0; }
#glTip a { color: #a2d93a; font-weight: 600; }

/* вкладка модели */
.ph-start .ph-step { background: var(--tile-2, #171a16); border-color: transparent; }
.ph-start .ph-step b { color: var(--tile-ink); }
.ph-start .ph-step .fx-mono { color: #a2d93a; }
.ph-start .ph-step a { color: #a2d93a; }
.ph-start h2 { color: var(--tile-ink); }
.gd-topic { display: grid; gap: 8px; }
.gd-topic + .gd-topic { border-top: 1px solid var(--line); padding-top: 10px; }
.gd-th { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.gd-th b { font: 600 17px var(--f-display); }
.gd-row { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; }
.gd-row.top { border: 2px solid var(--lime); }
.gd-rh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gd-rh a { text-decoration: none; color: var(--ink); }
.gd-rh a:hover { color: var(--accent); }
.gd-intro { font-size: 13px; color: var(--muted); }
.gd-row .btn:not(.gd-didbtn) { padding: 5px 10px; font-size: 13px; text-decoration: none; color: var(--ink); }
.btn.gd-didbtn { margin-left: auto; padding: 5px 10px; font-size: 13px; background: var(--have); color: #fff; border-color: var(--have); }
.btn.gd-didbtn[aria-pressed="true"] { background: transparent; color: var(--have); }
.gd-diff { font-size: 12px; border-radius: 6px; padding: 1px 7px; background: color-mix(in srgb, var(--have) 14%, transparent); color: var(--have); font-weight: 600; }
.gd-diff.mid { background: color-mix(in srgb, var(--want) 16%, transparent); color: var(--want); }
.gd-diff.hard { background: color-mix(in srgb, #c0392b 16%, transparent); color: #c0392b; }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
/* таблица радио и HBOOT по веткам */
.gd-rt { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 520px; }
.gd-rt th, .gd-rt td { padding: 7px 10px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.gd-rt thead th { background: var(--chip); border-top: 0; font-weight: 600; }
.gd-rt thead th.mod { color: var(--mod); }
.gd-rt td.nat { color: var(--have); font-weight: 600; }
.gd-rt td.ok { color: var(--ink); }
.gd-rt td.adv { color: var(--accent); }
.gd-rt td.no { color: var(--muted); }
.gd-rt .dl, .fx-trow .dl { font-weight: 600; }
.ctable-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }

/* страница инструкции */
.gd-page { display: grid; gap: 14px; padding-bottom: 30px; }
.gd-head { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.gd-head h1 { font-size: clamp(28px, 4vw, 40px); margin: 8px 0 4px; }
.gd-for { color: var(--muted); }
.gd-didbox { gap: 8px; }
.gd-big { font: 700 42px/1 var(--f-display); color: #a2d93a; }
.gd-didbox .gd-didbtn { margin-left: 0; justify-self: start; }
.gd-didbox .linkbtn { color: #a2d93a; }
.gd-did { display: grid; gap: 6px; }
.gd-did select { max-width: 100%; }
.gd-did .fx-r { display: flex; gap: 8px; flex-wrap: wrap; }
.gd-risk { border-left: 4px solid var(--want); background: color-mix(in srgb, var(--want) 10%, var(--surface)); border-radius: 10px; padding: 10px 14px; }
.gd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.gd-side { display: grid; gap: 14px; min-width: 0; }
.gd-body { line-height: 1.6; font-size: 15px; overflow-wrap: anywhere; }
.gd-body h1 { font-size: 34px; margin: 2px 0; }
.gd-body h2, .gd-body h3, .gd-body h4 { font-family: var(--f-display); margin: 10px 0 0; }
.gd-body h2 { font-size: 24px; } .gd-body h3 { font-size: 20px; } .gd-body h4 { font-size: 17px; }
.gd-body p, .gd-body ul, .gd-body ol, .gd-body pre, .gd-body blockquote { margin: 0; }
.gd-body ol, .gd-body ul { padding-left: 22px; display: grid; gap: 4px; }
.gd-body code { font: 500 13px var(--f-mono); background: var(--chip); border-radius: 5px; padding: 1px 5px; }
.gd-body pre { background: var(--tile); color: var(--tile-ink); border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.gd-body pre code { background: none; color: inherit; padding: 0; }
.gd-body blockquote { border-left: 3px solid var(--line); padding-left: 12px; color: var(--muted); }
.gd-lead { font-size: 17px; }
.gd-tool { display: grid; gap: 4px; }
.gd-mrow { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.gd-src { font-size: 13px; overflow-wrap: anywhere; }
.gd-lrow { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; padding: 4px 0; }
.gd-lrow a { text-decoration: none; color: var(--ink); }
.gd-lrow a:hover { color: var(--accent); }
.gd-side .box > div > a, .gd-side .btn { text-decoration: none; }
.gd-side .btn { color: var(--ink); }
.gd-side .btn.primary { color: var(--on-lime); }

/* редактор */
.gd-edit { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; align-items: start; }
.gd-form, .gd-mdbox { display: grid; gap: 10px; }
.gd-form .f, .gd-mdbox .f { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.gd-form input, .gd-form select, .gd-form textarea, .gd-mdbox textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 100%; box-sizing: border-box; }
.gd-mdbox textarea { font: 14px/1.5 var(--f-mono); resize: vertical; min-height: 280px; }
.gd-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gd-tabs { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gd-prev { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 10px; background: var(--bg); }
.gd-modprev { max-height: 420px; overflow: auto; }
.gd-form .switch { color: var(--ink); font-size: 14px; display: flex; gap: 8px; align-items: center; }
.gd-form .switch input { width: auto; }

/* словарь */
.gd-terms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.gd-term { display: grid; gap: 4px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; text-decoration: none; color: inherit; }
.gd-term:hover { border-color: var(--lime); }
.gd-term b { font: 600 18px var(--f-display); }
.gd-term span:last-child { font-size: 13px; color: var(--muted); }

@media (max-width: 900px) {
  .gd-head, .gd-grid, .gd-edit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .gd-f2 { grid-template-columns: 1fr; }
  .btn.gd-didbtn { margin-left: 0; }
  .ph-start .ph-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}