@charset "UTF-8";
/* Клавиатура размеров на телефоне (251, 27.10.2026; numpad.js): лист снизу экрана - имя и значение размера, лента
   сторон и диагоналей, подсказка о внутреннем угле, клавиши 4 x 4 («Далее» - на две строки). На время набора у страницы
   (и у окна «Новое помещение») снизу отступ высотой с клавиатуру (--np-h), чтобы чертеж и поля прокручивались над ней.
   Текущий размер на чертеже: буквы его углов и линия поверх (.np-hl). */
.np { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-width: 600px; margin: 0 auto; padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); color: var(--text); border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -6px 22px rgba(15, 30, 60, .16); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.np[hidden] { display: none; }
.np-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; }
.np-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 14px; font-weight: 600; }
.np-name b { color: var(--text); font-size: 16px; font-weight: 800; }
.np-val { flex: none; font-size: 28px; font-weight: 800; line-height: 1.1; }
.np-num { padding: 0 4px; border-radius: 6px; }
.np-num.sel { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.np-num.calc { color: var(--dim); font-weight: 600; }
.np-u { margin-left: 4px; color: var(--muted); font-size: 14px; font-weight: 600; }
.np-sub { min-height: 15px; padding: 0 4px; color: var(--dim); font-size: 12px; }

/* лента: стороны первой строкой, диагонали или углы - второй; текущий - подсвечен, пустой - прочерк или длина по чертежу */
.np-tape { display: flex; align-items: center; gap: 6px; padding: 5px 2px; overflow-x: auto; scrollbar-width: none; }
.np-tape::-webkit-scrollbar { display: none; }
.np-tape[hidden] { display: none; }
.np-tl { flex: none; width: 64px; color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.2; }
.np-chip { flex: none; min-width: 62px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); color: var(--text); line-height: 1.15; text-align: center; font: inherit; }
.np-chip b { display: block; font-size: 13px; font-weight: 800; }
.np-chip span { display: block; color: var(--muted); font-size: 12px; }
.np-chip.empty span { color: var(--dim); }
.np-chip.np-ck { border-style: dashed; } /* контрольная диагональ (.chk - общий класс галок построителя) */
.np-chip.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.np-chip.on b { color: var(--accent-ink); }

.np-hint { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 6px 8px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: var(--r-sm); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); font-size: 12px; line-height: 1.3; }
.np-hint[hidden] { display: none; }
.np-hint button { flex: none; min-height: 34px; padding: 4px 10px; border: 1px solid var(--warn); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; font-weight: 800; }

.np-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.np-keys button { height: 50px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface2); color: var(--text); font: inherit; font-size: 24px; font-weight: 700; touch-action: manipulation; }
.np-keys button:active { background: var(--accent-soft); }
.np-keys button:disabled { opacity: .35; }
.np-keys [data-k="back"], .np-keys [data-k="prev"] { font-size: 22px; }
.np-keys [data-k="next"] { grid-row: span 2; height: auto; border-color: var(--accent); background: var(--accent); color: var(--accent-fg, #fff); font-size: 30px; }
.np-keys [data-k="next"]:active { background: var(--accent-hot); }
.np-keys [data-k="done"] { font-size: 16px; font-weight: 800; }

/* выделенное число в самом поле: все цифры заменяются первой набранной (numpad.js markSel); у type=number браузер
   красит выделение не везде, поэтому подсвечиваем поле целиком (02.11.2026) */
input.np-sel { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
html.np-open body { padding-bottom: var(--np-h, 400px); }
html.np-open.np-pop body { padding-bottom: 0; } /* поле всплывающего окна (data-np-pop: окно угла точки линии): клавиатура ложится поверх страницы - на телефоне высота страницы задана, и отступ сжал бы чертеж с окном до полоски, как клавиатура телефона (02.11.2026) */
dialog.np-open .dlg-body { padding-bottom: calc(var(--np-h, 400px) + 12px); }

/* текущий размер на чертеже */
#draw .g-corner.np-on circle { fill: #f08c2e; stroke: #f08c2e; }
#draw .g-corner.np-on text { fill: #1C1C1A; }
#draw .np-hl { stroke: #f08c2e; stroke-width: 6; stroke-linecap: round; opacity: .8; pointer-events: none; }
#draw .np-hl.diag { stroke-width: 4; stroke-dasharray: 10 7; }