/* Окно построителя чертежей. */
/* Размер окна ПОСТОЯННЫЙ и не зависит от того, что сейчас внутри. Раньше
   высота считалась по содержимому: стоило выбрать другой вид диаграммы или
   добавить строку условия — окно подпрыгивало под курсором, и каждая правка
   читалась как рывок. Теперь окно стоит на месте, а меняется только его
   содержимое; лишнее место забирает не пустая полоса под кнопкой, а
   предпросмотр чертежа — кнопки прижаты к нижнему краю окна. */
.pb-back{position:fixed;top:0;right:0;bottom:0;left:0;z-index:170;background:rgba(28,32,26,.5);
  display:flex;align-items:flex-start;justify-content:center;padding:26px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
/* Высота — по содержимому, но не ниже 560 px и не выше экрана.
   Постоянная высота и отсутствие пустоты под кнопкой — требования взаимно
   исключающие: либо окно всегда одного размера и под короткой формой остаётся
   пустая полоса, либо оно подстраивается. Компромисс: ВЕРХ окна прибит,
   растёт оно только вниз, поэтому из-под курсора ничего не уезжает, а пустой
   полосы под кнопкой нет. */
.pb-box{background:#fffefb;border-radius:20px;width:min(1080px,100%);
  height:auto;min-height:min(560px,100%);max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 34px 90px rgba(18,28,21,.38)}

/* flex:0 0 auto — шапка, строка разделов и нижняя панель не сжимаются под
   длинной формой. Без этого на телефоне вкладки на «фигурах» становились
   на 14 пикселей ниже, чем на «графике», и подпись вылезала за плашку. */
.pb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex:0 0 auto;padding:14px 20px 12px;border-bottom:1px solid #ece8df}
.pb-head h3{margin:0;font:400 20px var(--serif);color:#23211c}
.pb-x{border:0;background:none;cursor:pointer;font-size:18px;color:#8a8576;padding:4px 8px;border-radius:8px}
.pb-x:hover{background:#f1ede3;color:#23211c}

/* Вкладок стало семь. На узком окне они не переносятся в несколько рядов,
   съедая высоту, а прокручиваются вбок одной строкой. */
.pb-tabs{display:flex;gap:7px;padding:14px 20px;flex-wrap:wrap;
  flex:0 0 auto;border-bottom:1px solid #f2eee4}
.pb-tabs button{font:600 13px var(--sans);color:#6b6553;cursor:pointer;background:none;
  border:1px solid #e4ded0;border-radius:11px;padding:7px 12px;white-space:nowrap;
  /* flex:0 0 auto — иначе в прокручиваемой строке вкладки сжимались и
     разжимались при каждой смене содержимого окна. */
  flex:0 0 auto}
.pb-tabs button:hover{border-color:#5e8068}
.pb-tabs button.on{background:#3f5a48;border-color:#3f5a48;color:#f4efe2}

/* flex:1 1 auto — тело занимает всё место между вкладками и кнопками. Окно
   от этого не растёт: его высота задана. Длинная форма листается внутри. */
/* Колонка формы шире, чертёж уже: в форме не помещались поля построений, а у
   чертежа по краям всё равно оставалось пустое поле. */
.pb-body{display:grid;grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:22px;
  padding:20px;overflow:auto;overscroll-behavior:contain;align-items:start;
  flex:1 1 auto;min-height:0}
.pb-form{display:flex;flex-direction:column;gap:13px;min-width:0}
.pb-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.pb-f>span{font:600 12.5px var(--sans);color:#23211c}
/* Списки и поля окна не должны зависеть от того, какие ещё стили
   подключены на странице: описываем их здесь целиком. */
.pb-form select,.pb-form input[type=text],.pb-form input:not([type]){width:100%;
  padding:10px 12px;border:1px solid #d3ddcd;border-radius:11px;background:#fbfdfa;
  font:500 13.5px var(--sans);color:#23211c}
.pb-form select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:30px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b6553' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.pb-form select:focus,.pb-form input:focus{outline:none;border-color:#7fa07f;background-color:#fff;
  box-shadow:0 0 0 3px rgba(47,107,70,.14)}
.pb-form .pb-cell{padding:8px 7px;border-radius:9px}
.pb-f small{font:500 11.5px/1.5 var(--sans);color:#8a8576;white-space:pre-line}
/* minmax(0,1fr) и min-width:0 — иначе поле не сжимается ниже своей
   «родной» ширины в 20 знаков и форма вылезает за экран телефона. */
.pb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pb-form input,.pb-form select,.pb-form textarea{min-width:0;max-width:100%;box-sizing:border-box}
.pb-check{display:flex;align-items:center;gap:8px;font:500 13px var(--sans);color:#23211c;cursor:pointer}
/* Только квадратик галочки: в «развести на 30°» рядом с подписью стоит
   обычное поле, и правило без [type=checkbox] сплющивало его в кружок. */
.pb-check input[type=checkbox]{width:17px;height:17px;accent-color:#3f5a48;flex:0 0 auto}
/* Галочка, которая пока ничего не делает: видна, но погашена. Прятать её
   нельзя — список бы прыгал при каждом нажатии соседней. */
.pb-check.is-off{color:#a7a293;cursor:default}
.pb-check.is-off input{opacity:.5}

/* Галочки об одном — одной рамкой с общей подписью. */
.pb-cbox{display:flex;flex-direction:column;gap:7px;padding:10px 12px;
  border:1px solid #e9e4d7;border-radius:12px;background:#fdfcf8}
.pb-cbox-title{font:600 10.5px var(--sans);color:#a7a293;
  letter-spacing:.05em;text-transform:uppercase}
.pb-cbox-in{display:flex;flex-direction:column;gap:8px}

/* Кнопки со знаками, которых нет на клавиатуре телефона. */
.pb-ins{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:-4px}
.pb-ins>span{font:500 11.5px var(--sans);color:#a7a293}
.pb-ins button{font:600 14px var(--sans);color:#3f5a48;background:#fbfdfa;cursor:pointer;
  border:1px solid #d3ddcd;border-radius:9px;padding:6px 11px;min-height:34px;line-height:1}
.pb-ins button:hover{border-color:#5e8068;background:#f1f5f0}

.pb-preview{background:#f6f4ee;border:1px solid #ece8df;border-radius:14px;padding:10px;min-width:0}
.pb-canvas-wrap{position:relative;min-width:0}
/* Лупа лежит на самом чертеже в правом верхнем углу: отдельной строки под
   неё в окне нет, а закрывать рисунок нельзя — поэтому кружок, а не
   кнопка с подписью. Верхний правый угол пустует почти во всех чертежах:
   у диаграмм там край поля, у числовой прямой — воздух над осью. */
.pb-zoom-btn{position:absolute;right:8px;top:8px;z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;color:#23382c;background:rgba(255,254,251,.94);
  border:1px solid #d3ddcd;border-radius:50%;cursor:pointer;padding:0;
  box-shadow:0 2px 8px rgba(18,28,21,.12)}
.pb-zoom-btn:hover{border-color:#5e8068;background:#fff}
.pb-canvas-wrap:has(canvas[hidden]) .pb-zoom-btn{display:none}
/* На компьютере чертёж и так крупный, а окно увеличения там лишняя
   кнопка поверх рисунка. Лупу показываем только там, где пальцем не
   приблизишь: на узком экране и на сенсорном устройстве. */
.pb-zoom-btn{display:none}
@media(max-width:880px){ .pb-zoom-btn{display:flex} }
@media(pointer:coarse){ .pb-zoom-btn{display:flex} }

/* Чертёж во весь экран: приблизить страницу в кабинете нельзя
   (user-scalable=no), поэтому увеличение здесь своё. */
.pb-zoom{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1200;display:flex;flex-direction:column;
  background:#1d241f}
.pb-zoom-bar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px}
.pb-zoom-bar button{width:44px;height:44px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(244,239,226,.34);background:rgba(244,239,226,.10);
  color:#f4efe2;font:600 20px var(--sans);line-height:1}
.pb-zoom-bar button:hover{background:rgba(244,239,226,.20)}
.pb-zoom-bar button[data-zoom="close"]{margin-left:auto}
.pb-zoom-val{font:600 13px var(--sans);color:#f4efe2;min-width:52px;text-align:center}
.pb-zoom-area{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:0 10px calc(14px + env(safe-area-inset-bottom));
  touch-action:pan-x pan-y}
.pb-zoom-area img{display:block;width:100%;height:auto;max-width:none;
  border-radius:10px;background:#fffefb}
.pb-preview canvas{display:block;width:100%;max-width:100%;height:auto;border-radius:8px;background:#fffefb}
/* display:block перебивает встроенное [hidden] — на вкладке «Таблица»
   холст иначе остался бы висеть над предпросмотром. */
.pb-preview canvas[hidden]{display:none}

/* Заголовок и единицы стоят под самим чертежом: на телефоне иначе пришлось
   бы листать через все данные, чтобы поправить подпись. */
.pb-under{margin-top:12px}
.pb-under-in{display:flex;flex-direction:column;gap:11px}
/* 200px, а не 150: на телефоне два поля в ряд помещались только формально —
   «Количество осадков по месяцам» обрезалось на половине слова, а подсказка
   под одним из них сдвигала второе на строку ниже. Ниже 420 px поля встают
   друг под другом и видны целиком. */
.pb-under-in .pb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.pb-under-in input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d3ddcd;
  border-radius:11px;background:#fbfdfa;font:500 13.5px var(--sans);color:#23211c}
.pb-under-in input:focus{outline:none;border-color:#7fa07f;background:#fff;
  box-shadow:0 0 0 3px rgba(47,107,70,.14)}
.pb-under-in .pb-f{gap:5px}
.pb-under-checks{display:flex;gap:10px 20px;flex-wrap:wrap}
.pb-under-checks .pb-check{flex:0 0 auto;white-space:nowrap}

.pb-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  flex:0 0 auto;padding:12px 20px 15px;border-top:1px solid #ece8df}
.pb-status{flex:1;min-width:0;font:500 12.5px var(--sans);color:#8a8576}
.pb-status.error{color:#9a4420}

@media(max-width:1000px){
  .pb-back{padding:10px}
  .pb-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .pb-tabs::-webkit-scrollbar{display:none}
}
/* Пока окно открыто, страницу под ним держит общий замок кабинета
   (lockScroll в app.js) — тот же, что у интерактива и у открытого задания.
   Ни position:fixed, ни overflow у <body> здесь не ставится: именно это
   и уводило окно за верхний край на телефоне. Отсюда — только то, что
   мешает смотреть: нижняя панель разделов. */
body.pb-open .tabbar{display:none}

@media(max-width:880px){
  /* Окно во весь экран, как .tk-modal-card в задании и .les-modal в
     интерактиве: height:100% от слоя, привязанного к экрану, — без vh,
     dvh и вычислений в коде. */
  .pb-back{padding:0;align-items:stretch;
    /* backdrop-filter у предка ломает привязку к экрану на части телефонов —
       на узком экране он не нужен, окно и так во весь экран. */
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .pb-box{border-radius:0;width:100%;max-width:100%;height:100%;max-height:100%;
    box-shadow:none}
  /* Вырез камеры сверху и полоса жестов снизу: как в проверке задания. */
  .pb-head{padding-top:calc(14px + env(safe-area-inset-top))}
  .pb-body{flex:1 1 auto;-webkit-overflow-scrolling:touch}
  .pb-body{grid-template-columns:minmax(0,1fr);padding:12px}
  .pb-preview{order:-1}
  .pb-foot{padding-bottom:calc(15px + env(safe-area-inset-bottom))}
  .pb-foot button{flex:1}
}

/* Кнопка «Взять из условия» стоит первой и отличается от вкладок. */
.pb-tabs .pb-read{border-style:dashed;color:#3f5a48;font-weight:600}
.pb-tabs .pb-read:hover{background:#f1f5f0}

/* ------------------------------------------------------------------ */
/* Редакторы таблицы и данных диаграммы                                */
/* ------------------------------------------------------------------ */
.pb-ed{display:flex;flex-direction:column;gap:9px;min-width:0}
.pb-ed-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pb-ed-head>span:first-child{font:600 11.5px var(--sans);color:#23382c;
  letter-spacing:.05em;text-transform:uppercase}
.pb-ed-size{font:500 11.5px var(--sans);color:#a7a293}

/* Таблица занимает всю ширину окна: в узкой колонке шесть столбцов
   пришлось бы листать вбок, а это неудобно и некрасиво. */
.pb-body-wide{grid-template-columns:minmax(0,1fr)!important}
.pb-body-wide .pb-preview{display:none}
.pb-ed-wide{width:100%}

/* Клетки — это и есть таблица: выглядят так же, как увидит ученик. */
.pb-tabled{display:flex;flex-direction:column;gap:4px;min-width:0}
/* Редактор — это сама таблица: те же классы .qtbl, тот же размер клеток.
   Поля ввода без собственных рамок, они живут внутри клеток таблицы. */
.qtbl-edit{border-collapse:collapse}
.qtbl-edit th,.qtbl-edit td{padding:0}
/* Специфичность выше, чем у общего правила полей окна: иначе у клеток
   остаются собственные рамки и они выглядят коробками внутри таблицы. */
.pb-form .qtbl-edit .pb-cell{width:100%;min-width:54px;box-sizing:border-box;
  border:0;border-radius:0;background:none;box-shadow:none;
  padding:9px 12px;text-align:center;font:inherit;color:inherit}
.pb-form .qtbl-edit .pb-cell:focus{outline:2px solid #7fa07f;outline-offset:-2px;
  background:#fff;box-shadow:none}
.pb-form .qtbl-edit .pb-cell::placeholder{color:#b9b4a6;font-weight:500}
.qtbl-edit .qte-tools td{border:0;background:none;height:22px;padding:0 0 3px}
.qtbl-edit .qte-tool{border:0;background:none;width:26px;padding-left:3px}
.qtbl-edit .pb-mini{width:22px;height:22px}
.pb-ed-hint{margin:0;align-self:center;font:500 11.5px var(--sans);color:#a7a293}

/* Высота, медиана, биссектриса. */
.pb-cevians{display:flex;flex-direction:column;gap:6px}
.pb-crow{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 72px 24px;gap:6px;
  align-items:center}
.pb-crow .pb-cell{text-align:center}

/* Данные диаграммы — две колонки: подпись и число. */
.pb-series{display:flex;flex-direction:column;gap:5px;min-width:0}
.pb-srow{display:grid;grid-template-columns:minmax(0,1fr) 84px 26px;gap:5px;align-items:center}
.pb-srow .pb-cell:first-child{text-align:left}
.pb-shead{font:600 11px var(--sans);color:#a7a293;letter-spacing:.04em;text-transform:uppercase}
.pb-shead span{padding-left:4px}

.pb-mini{border:0;background:none;cursor:pointer;color:#a7a293;font-size:17px;line-height:1;
  border-radius:8px;padding:0}
.pb-mini:hover{background:#f6efe9;color:#9a4420}

.pb-ed-acts{display:flex;gap:7px;flex-wrap:wrap}
.pb-add{cursor:pointer;background:#f7faf6;border:1px solid #d3ddcd;border-radius:10px;
  padding:7px 11px;font:600 12.5px var(--sans);color:#3f5a48}
.pb-add:hover{border-color:#5e8068;background:#eef4ec}

.pb-presets{display:flex;flex-direction:column;gap:6px}
.pb-presets button{text-align:left;cursor:pointer;background:#fffefb;border:1px solid #e4ded0;
  border-radius:10px;padding:8px 11px;font:500 12.5px var(--sans);color:#3f5a48}
.pb-presets button:hover{border-color:#5e8068;background:#f4f8f3}

/* Предпросмотр таблицы стоит на месте холста. */
.pb-tablewrap{padding:14px;background:#fffefb;border:1px solid #ece8df;border-radius:12px;
  overflow-x:auto}

/* Сверху слева заготовки и шапка, справа — готовая таблица; клетки снизу. */
.pb-tabletop{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:18px;
  align-items:start;margin-bottom:4px}
.pb-tableside{display:flex;flex-direction:column;gap:9px;min-width:0}
.pb-tableprev{display:flex;flex-direction:column;gap:6px;min-width:0}
.pb-tableprev .qtbl{font-size:14.5px}

@media(max-width:880px){
  .pb-tabletop{grid-template-columns:minmax(0,1fr);gap:12px}
  .pb-srow{grid-template-columns:minmax(0,1fr) 70px 24px}
  .pb-crow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:5px}
  .pb-crow .pb-cell{grid-column:1}
  .pb-crow .pb-mini{grid-column:2;justify-self:end}
  .pb-preview{order:-1}
  .pb-tablewrap{padding:10px}
  .pb-form .qtbl-edit .pb-cell{padding:9px 5px;min-width:44px;font-size:13px}
  .pb-ed-hint{flex-basis:100%;text-align:left}
}

/* Готовые шаблоны таблицы читаются как подписи, а не как кнопки: строчка
   мелкая и бледная. Делаем их полноценными кнопками — по ним и нажимают. */
.pb-presets button{font:600 13.5px var(--sans);padding:11px 13px;border-radius:11px}
.pb-presets{gap:8px}

/* Построения в окружности: строка «вид · длина · наклон · ×», а под ней —
   галочки, относящиеся именно к этой хорде. Раньше галочки лежали общим
   списком, и было не понять, к чему они. */
.pb-crow-circle{grid-template-columns:minmax(0,1.15fr) 82px 82px 24px;row-gap:7px;
  padding:9px;border:1px solid #e9e4d7;border-radius:12px;background:#fdfcf8}
.pb-crow-circle + .pb-crow-circle{margin-top:2px}
.pb-crow-gap{display:block}
.pb-crow-opts{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px 16px;
  padding-top:2px;border-top:1px dashed #ece8df;margin-top:2px}
.pb-crow-opts .pb-check{font-size:12.5px;gap:6px}
.pb-crow-opts .pb-check input[type=checkbox]{width:15px;height:15px}
.pb-check-num select{border:1px solid #d3ddcd;border-radius:8px;background:#fbfdfa;
  font:500 12.5px var(--sans);padding:3px 6px;cursor:pointer}
/* Кабинет подменяет списки своими (.xsel) — тот стиль выше до них не
   доходит, и «вписанных углов» рос вдвое выше строки с галочками. */
.pb-crow-opts .pb-check-num .xsel{width:72px;min-width:72px;flex:0 0 auto}
.pb-crow-opts .pb-check-num .xsel-btn{min-height:32px;height:32px;padding:0 8px;
  border-radius:9px;font-size:13px}
@media(max-width:880px){
  .pb-crow-circle{grid-template-columns:minmax(0,1fr) 70px 70px 24px}
}

/* Шапка над списком построений. Раньше в узких полях стоял «0», подсказка
   внутри поля из-за этого не показывалась, и что такое «наклон», было
   неоткуда узнать. */
.pb-crow.pb-crow-head{margin-bottom:2px;padding:0 2px;background:none;border:none;box-shadow:none}
.pb-crow-head span{font:600 10.5px var(--sans);color:#a7a293;
  letter-spacing:.04em;text-transform:uppercase;align-self:end}
.pb-crow-head span:nth-child(2),.pb-crow-head span:nth-child(3){text-align:center}
@media(max-width:700px){ .pb-crow-head{display:none} }

/* «из вершины A» в узкой колонке обрезалось на полуслове — отдаём списку
   больше места, а поле длины делаем компактнее. */
.pb-crow{grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) 78px 24px}
/* input.pb-cell-mini, а не .pb-cell-mini: правило .pb-form input:not([type])
   с width:100% весомее простого класса, и поле растягивалось на всю
   строку, выталкивая соседнюю галочку. */
.pb-form input.pb-cell-mini{width:64px;min-width:64px;max-width:64px;
  text-align:center;flex:0 0 auto}
.pb-check-num .pb-cell-mini{padding:5px 6px}

/* Условие видно вместе с рисунком; длинный текст остаётся внутри окна. */
.pb-condition{grid-column:1/-1;order:-2;min-width:0;padding:13px 16px;
  border:1px solid #dedfd4;border-left:3px solid #3f5a48;border-radius:12px;background:#f7f7f0}
.pb-condition[hidden]{display:none}
.pb-condition h4{margin:0 0 6px;font:650 12px/1.4 var(--sans);color:#3f5a48}
.pb-condition-text{max-height:180px;overflow:auto;overscroll-behavior:contain;
  white-space:pre-wrap;overflow-wrap:anywhere;font:500 14px/1.65 var(--sans);color:#302e27}
.pb-condition-text .katex-display{max-width:100%;overflow-x:auto;overflow-y:hidden;margin:.4em 0}
@media(max-width:880px){
  .pb-condition{padding:11px 12px}
  .pb-condition-text{max-height:160px;font-size:13.5px}
}

/* Circle controls: dimensions, angles and optional constructions. */
.pb-circle-card{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid #e2e3d8;border-radius:14px;background:#fdfcf8;min-width:0}
.pb-circle-head{display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:end;gap:12px}
.pb-circle-head .pb-mini{align-self:end;margin-bottom:8px}
.pb-circle-card .pb-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pb-circle-card .pb-f{min-width:0;margin:0}
.pb-circle-card input,.pb-circle-card select{width:100%;min-width:0;box-sizing:border-box}
.pb-circle-card select{border:1px solid #d3ddcd;border-radius:9px;background:#fffefb;padding:9px;font:500 13px var(--sans);color:#302e27}
.pb-circle-card .pb-check input{width:16px;height:16px;flex:0 0 16px}
.pb-circle-group{display:flex;flex-direction:column;gap:9px;border-top:1px solid #e7e6dc;padding-top:12px}
.pb-circle-group h5{margin:0;font:650 12px var(--sans);color:#3f5a48}
.pb-circle-extra{border-top:1px solid #e7e6dc;padding-top:10px}
.pb-circle-extra summary{cursor:pointer;font:600 13px var(--sans);color:#3f5a48;margin-bottom:10px}
.pb-circle-extra>.pb-f,.pb-circle-extra>.pb-check{margin-top:9px}
.pb-circle-card input:disabled{background:#eeeee7;color:#8b8d80;cursor:default}

.hw-code{overflow:auto;max-width:100%;padding:14px 16px;border:1px solid #dfdfd4;border-radius:10px;background:#f4f5ef;white-space:pre;tab-size:4;font:14px/1.6 Consolas,monospace;text-align:left}
.hw-code code{font:inherit;color:#243b2d}

/* Editable names of additional construction points. */
.pb-crow:has(input[data-crc$=".pointNames"]){grid-template-columns:minmax(100px,1.1fr) minmax(100px,1fr) minmax(65px,.65fr) minmax(80px,.8fr) 30px}
@media(max-width:600px){.pb-crow:has(input[data-crc$=".pointNames"]){grid-template-columns:1fr 1fr}.pb-foot{flex-wrap:wrap}.pb-foot .pb-status{flex-basis:100%}}

.pb-crow-head{font-size:11px;line-height:1.3;align-items:end}.pb-crow-head>span{min-width:0;overflow-wrap:anywhere}.pb-crow select,.pb-crow input{min-width:0;width:100%;box-sizing:border-box}

.pb-crow.pb-crow-head{grid-template-columns:minmax(100px,1.1fr) minmax(100px,1fr) minmax(65px,.65fr) minmax(80px,.8fr) 30px}.pb-crow-head span:nth-child(n){text-align:left}


/* ------------------------------------------------------------------ */
/* Телефон: построения                                                 */
/*                                                                     */
/* Четыре колонки в 390 пикселей не помещаются. Раньше сюда пытались   */
/* втиснуть тот же ряд, что и на компьютере: списки обрезались на      */
/* «из верш…» и «паралле…», числовые поля уезжали под них по одному в  */
/* колонку, а крестик висел посреди строки, не относясь на вид ни к    */
/* чему. Здесь раскладка своя: одно построение — одна карточка.        */
/* Блок стоит в конце файла намеренно: правило .pb-crow с четырьмя     */
/* колонками задано ниже прежних @media и иначе перебивало бы их.      */
/* ------------------------------------------------------------------ */
@media(max-width:700px){
  .pb-crow,.pb-crow-circle{position:relative;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:8px;row-gap:8px;align-items:center;
    padding:10px 44px 10px 10px;
    border:1px solid #e9e4d7;border-radius:12px;background:#fdfcf8}
  .pb-crow + .pb-crow{margin-top:8px}
  /* Список — во всю ширину карточки: в половину экрана название
     построения не помещается. */
  .pb-crow > select,.pb-crow > .xsel{grid-column:1 / -1}
  /* Числовые поля идут парами: «длина» и «наклон°» рядом, как на
     компьютере, а не двумя этажами в левой половине. */
  .pb-crow .pb-cell{grid-column:auto;text-align:center}
  /* Крестик вынут из сетки в правый верхний угол карточки: в колонке он
     занимал место, из-за которого поле «длина» сжималось до одной буквы. */
  .pb-crow .pb-mini{position:absolute;top:10px;right:8px;
    width:30px;height:30px;font-size:17px}
  .pb-crow-opts{grid-column:1 / -1}
  /* «вписанных углов» и «развести на» — подпись, а за ней поле;
     переносить их по разным краям строки нельзя. */
  .pb-crow-opts .pb-check-num{flex:0 0 auto;gap:7px;white-space:nowrap}
  .pb-crow-opts .pb-cell-mini{width:56px;min-width:56px}
  .pb-crow-gap{display:none}
}

/* Галочки под чертежом диаграммы: на телефоне каждая на своей строке,
   подпись вплотную к своему квадратику. Раньше они стояли в ряд, и при
   переносе подпись одной оказывалась у другого края экрана. */
@media(max-width:700px){
  .pb-under-checks{display:grid;grid-template-columns:minmax(0,1fr);gap:9px}
  .pb-under-checks .pb-check{white-space:normal;align-items:flex-start;line-height:1.4}
  .pb-under-checks .pb-check input[type=checkbox]{margin-top:1px}
}

/* Подписи в узких полях построения — по центру поля, как «длина»:
   «Точки» — обычный .tk-input, и подсказка в нём прижималась влево,
   а соседняя — стояла по центру. */
.pb-crow input{text-align:center}