/* focustrack · инструкции пользователя (часть 7): перечень /instruktsii и страница инструкции /instruktsii/<адрес>.
   Классы системы — pz, dz, card, field, btn, minus-note; здесь — только то, чего в системе нет: сетка разделов,
   шаги со снимками, рамка выделения и стрелка-указатель (решение № 153), просмотр во всё окно, заготовки. */
.gd .pz-count { margin-left: var(--space-2); }
.gd-ask { display: grid; gap: var(--space-3); }
.gd-ask .field { margin: 0; }
.gd-ask .textarea { min-height: 56px; resize: vertical; }
.gd-counter { font-size: var(--font-size-2); color: var(--text-muted); justify-self: end; }
.gd-ask .btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.gd-ai { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-2); color: var(--text-secondary); }
.gd-ai i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); }
.gd-left { margin-left: auto; font-size: var(--font-size-2); }
.gd-answer { display: grid; gap: var(--space-3); }
.gd-answer .card { display: grid; gap: var(--space-2); padding: var(--space-4); }
.gd-answer .card .ui-tag { justify-self: start; }
.gd-answer .card .btn-row { align-items: center; gap: var(--space-3); }
.gd-progress { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--bg-card); border: var(--border-thin) solid var(--border-divider); }
.gd-progress b { font-weight: var(--weight-medium); }
.gd-bar { height: 6px; border-radius: 3px; background: var(--border-divider); overflow: hidden; }
.gd-bar i { display: block; height: 100%; width: var(--p, 10%); background: var(--brand-accent); transition: width .6s linear; }
.gd-progress small, .gd-answer small { color: var(--text-secondary); font-size: var(--font-size-2); }
.gd-find { max-width: 520px; }
.gd-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap-card, 12px); }
.gd-sec { padding: 0; }
.gd-sec summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer; }
.gd-sec summary::-webkit-details-marker { display: none; }
.gd-sec summary b { font-weight: var(--weight-medium); flex: 1 1 auto; }
.gd-sec summary .mono { color: var(--text-muted); font-size: var(--font-size-2); }
.gd-sec summary svg { color: var(--text-muted); transition: transform var(--motion-ease, .15s); }
.gd-sec[open] summary svg { transform: rotate(180deg); }
.gd-sec[open] summary { border-bottom: var(--border-thin) solid var(--border-divider); }
.gd-sec ul { list-style: none; margin: 0; padding: var(--space-2) var(--space-4) var(--space-3); display: grid; gap: var(--space-2); }
.gd-sec .pz-note { padding: var(--space-2) var(--space-4) var(--space-3); margin: 0; }
.gd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-card, 12px); }
.gd-card { padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; }
.gd-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.gd-links a, .gd-sec a { color: var(--text-link); text-decoration: none; }
.gd-links a:hover, .gd-sec a:hover { text-decoration: underline; }
.gd-links .pz-note { margin: 0; }
mark.gd-hl { background: var(--bg-selection); color: inherit; border-radius: 3px; }
/* страница инструкции */
.gd-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-2); color: var(--text-muted); margin-bottom: var(--space-3); }
.gd-crumbs a { color: var(--text-link); text-decoration: none; }
.gd-crumbs span[aria-hidden] { opacity: .6; }
.gd-summary { font-size: var(--font-size-5); line-height: var(--line-height-text); color: var(--text-primary); margin: 0 0 var(--space-3); }
.gd-origin { margin: 0 0 var(--space-2); }
.gd-meta { margin: 0 0 var(--space-5); }
.gd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); counter-reset: gd; }
.gd-step { display: grid; gap: var(--space-3); }
.gd-step-h { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.gd-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-accent); color: var(--action-primary-text); font-weight: var(--weight-medium); font-size: var(--font-size-3); }
.gd-step-t { margin: 0; padding-top: 5px; line-height: var(--line-height-text); }
.gd-shot-card { padding: var(--space-2); display: grid; gap: var(--space-2); margin-left: 44px; }
.gd-shot-card figcaption { font-size: var(--font-size-2); color: var(--text-muted); padding: 0 var(--space-2) var(--space-1); }
.gd-shot { position: relative; width: 100%; aspect-ratio: var(--w, 1280) / var(--h, 800); overflow: visible; border-radius: var(--radius-sm); cursor: zoom-in; background: var(--bg-input); }
.gd-shot img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.gd-shot.is-missing { display: grid; place-items: center; cursor: default; color: var(--text-muted); font-size: var(--font-size-6); }
/* затемнение вокруг рамки — четыре полосы, чтобы снимок под рамкой остался нетронутым */
.gd-shot .gd-dim { position: absolute; background: rgba(0, 0, 0, .38); pointer-events: none; }
.gd-shot .gd-box { position: absolute; border: 3px solid var(--brand-accent); border-radius: 8px; box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand-accent) 35%, transparent), 0 0 18px color-mix(in oklch, var(--brand-accent) 55%, transparent); pointer-events: none; box-sizing: border-box; }
/* стрелка-указатель с номером шага: кружок 28 точек и линия 36 точек с наконечником, размеры в точках экрана */
.gd-arrow { position: absolute; display: flex; align-items: center; gap: 0; pointer-events: none; transform: translateY(-50%); }
.gd-arrow .gd-an { width: 28px; height: 28px; border-radius: 50%; background: var(--brand-accent); color: var(--action-primary-text); display: grid; place-items: center; font-weight: var(--weight-medium); font-size: 13px; animation: gd-pulse 1.6s ease-in-out infinite; }
.gd-arrow .gd-al { width: 36px; height: 3px; background: var(--brand-accent); position: relative; }
.gd-arrow .gd-al::after { content: ''; position: absolute; top: -4px; width: 0; height: 0; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
.gd-arrow.is-left { flex-direction: row; }
.gd-arrow.is-left .gd-al::after { right: -1px; border-left: 9px solid var(--brand-accent); }
.gd-arrow.is-right { flex-direction: row-reverse; }
.gd-arrow.is-right .gd-al::after { left: -1px; border-right: 9px solid var(--brand-accent); }
@keyframes gd-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .gd-arrow .gd-an { animation: none; } .gd-bar i { transition: none; } }
.gd-vote-z .btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.gd-lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .78); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-4); }
.gd-lightbox[hidden] { display: none; }
.gd-lb-fig { margin: 0; display: grid; gap: var(--space-2); justify-items: center; }
.gd-lb-fig .gd-shot { max-height: 90vh; width: min(100%, calc(90vh * var(--w, 1280) / var(--h, 800))); cursor: default; background: transparent; }
.gd-lb-fig figcaption { color: #fff; font-size: var(--font-size-3); }
.gd-lb-x { position: fixed; top: var(--space-3); right: var(--space-4); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 24px; cursor: pointer; }
/* заготовки на время загрузки */
.gd-sk { display: grid; gap: var(--space-3); grid-column: 1 / -1; }
.gd-sk i { display: block; height: 14px; border-radius: 6px; background: var(--border-divider); animation: gd-sk 1.5s ease-in-out infinite; }
.gd-sk .gd-sk-h { height: 28px; width: 60%; }
.gd-sk .gd-sk-shot { height: 180px; }
.gd-sections .gd-sk { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.gd-sections .gd-sk i { height: 52px; border-radius: var(--radius-md); }
.gd-sk-answer i:nth-child(2) { width: 85%; } .gd-sk-answer i:nth-child(3) { width: 60%; }
@keyframes gd-sk { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gd-sk i { animation: none; } }
@container frame (max-width: 767px) {
  .gd-two { grid-template-columns: 1fr; }
  .gd-shot-card { margin-left: 0; }
  .gd-ask .btn-row .btn { width: 100%; }
  .gd-left { margin-left: 0; }
  .gd-lightbox { grid-template-columns: 1fr; padding: var(--space-2); }
  .gd-lb-prev, .gd-lb-next { display: none; }
}
@media (max-width: 767px) {
  .gd-two { grid-template-columns: 1fr; }
  .gd-shot-card { margin-left: 0; }
  .gd-lightbox { grid-template-columns: 1fr; padding: var(--space-2); }
  .gd-lb-prev, .gd-lb-next { display: none; }
}