/* Позиции чертежа в узкой колонке (DESIGN.md → «Узкие экраны»): чертёж остаётся 1:1, выноски скрыты,
   у узлов — номера в квадрате (<g class="pins"> в SVG), подписи — списком .positions под чертежом.
   По умолчанию оба скрыты; страница включает их в своём @container, где выноскам тесно:
   .sch .pins { display: inline; }  .positions { display: block; }
   Подсветка номера, узла и строки — общий data-pos (main.js, .is-on). */

.positions, svg .pins { display: none; }
.pin rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; transition: fill .2s, stroke .2s; }
.pin text { font: 400 var(--fs-label) var(--mono); letter-spacing: -.02em; fill: var(--ink); }
.pin__lead { fill: none; stroke: var(--ink); stroke-width: 1; }
.pin.is-on rect { fill: var(--blue-tint); stroke: var(--blue); }
.pin.is-on text { fill: var(--blue-ink); }

/* позиция списком — та же выноска: номер в квадрате, название над полкой, задача под ней */
.positions__h { margin: 22px 0 4px; font-size: var(--fs-title); font-weight: 600; line-height: 1.3; }
.positions__h .num { font-size: var(--fs-figure); }
.positions__key { display: block; font-size: var(--fs-small); font-weight: 400; font-style: italic; color: var(--graphite); }
.positions ol { margin: 0; padding: 0; list-style: none; }
.positions li + li { border-top: 1px solid var(--hair); }
.positions a {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px;
  padding: 10px 0; min-height: 56px; text-decoration: none;
}
.positions__n { grid-row: 1 / 3; align-self: start; display: grid; place-items: center; height: 28px; border: 1.2px solid var(--ink); font-size: var(--fs-label); }
.positions__name { font-size: var(--fs-annotation); font-weight: 600; line-height: 1.3; padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
.positions__name::after { content: " →"; font-weight: 400; }
.positions__q { padding-top: 3px; font-size: var(--fs-annotation); font-style: italic; line-height: 1.3; color: var(--graphite); }
.positions a:hover .positions__name, .positions a:focus-visible .positions__name, .positions li.is-on .positions__name { color: var(--blue); }
.positions li.is-on .positions__n, .positions li:target .positions__n { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-ink); }