/* Внешний вид повторяет старый калькулятор на Raudus (тема «cupertino»):
   серый рабочий стол, окна с чёрной полосой заголовка и круглыми кнопками.
   Без свойств новее браузеров, где работает app.js (Chrome 55, Safari 10.1):
   вместо inset — top/right/bottom/left, вместо min() — width + max-width.
   Отступы flex-gap в Chrome до 84 и Safari до 14.1 пропадают — это только
   вид, работе не мешает. */
:root {
  --desk: #cdcdcd;
  --win: #d6d2ca;
  --row: #e3e0da;
  --line: #bdb8ae;
  --ink: #111;
  --muted: #555;
  --err: #c00000;
  --head: #000;
  --shadow: 0 6px 18px rgba(0, 0, 0, .45);
  font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body { background: var(--desk); color: var(--ink); font-size: 13px; min-height: 100vh; }
img { border: 0; }
a { color: #0000ee; }
button { font: inherit; }

/* левая панель с кнопками калькуляторов */
.panel {
  position: fixed; left: 10px; top: 10px; z-index: 5;
  width: 87px; padding: 8px 10px; background: #bdbab3;
  border: 2px solid #111; border-radius: 6px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 6px;
}
.pbtn {
  width: 65px; height: 65px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#f2f1ee, #b9b6ae); border: 1px solid #7d7a73; border-radius: 5px;
  cursor: pointer; padding: 0;
}
.pbtn:hover { background: linear-gradient(#fff, #cfccc4); }
.pbtn:focus-visible, .start-btn:focus-visible, .start-lbl:focus-visible, .tab:focus-visible, .btn:focus-visible { outline: 2px solid #1a5fd0; outline-offset: 1px; }
.pbtn img { max-width: 60px; max-height: 60px; }

.desk { margin-left: 107px; padding: 10px 10px 30px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* окно */
.win { background: var(--win); border: 2px solid #111; border-radius: 5px; box-shadow: var(--shadow); overflow: hidden; }
.win-head {
  background: var(--head); color: #fff; height: 22px; display: flex; align-items: center;
  padding: 0 4px 0 6px; font-size: 11px; user-select: none; gap: 4px;
}
.win-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid #fff; cursor: pointer; padding: 0; }
.dot.max { background: radial-gradient(circle at 35% 35%, #9f9, #1a1 70%); }
.dot.close { background: radial-gradient(circle at 35% 35%, #f99, #d00 70%); }

/* стартовое окно с картинкой */
.start { width: 738px; }
.start.gone { visibility: hidden; }
.start-body { position: relative; width: 734px; height: 501px; overflow: hidden; }
.start-bg { position: absolute; left: 0; top: 0; width: 750px; height: 500px; }
.start-lbl { position: absolute; background: none; border: 0; padding: 0; cursor: pointer; }
.start-btn {
  position: absolute; height: 46px; padding: 0 10px; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(#fafafa, #c9c6bf); border: 1px solid #7d7a73; border-radius: 5px;
  font-size: 14px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.start-btn:hover { background: linear-gradient(#fff, #dcd9d2); }

/* магазин */
.shop { width: 868px; background: #fff; padding: 3px 3px 7px; }
.shop-head { font-size: 17px; padding: 3px; }
.shop-items { display: flex; gap: 14px; padding: 4px; flex-wrap: wrap; }
.shop-item { width: 200px; text-align: center; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.shop-item img { width: 200px; height: 200px; }

/* текст о калькуляторах — для людей и поисковика (webcalc/pages.py) */
.about { width: 868px; background: #fff; padding: 8px 14px 10px; font-size: 14px; line-height: 1.45; }
.about h1 { font-size: 18px; font-weight: normal; margin: 0 0 6px; }
.about p { margin: 0 0 6px; }
.about-list { margin: 0; padding-left: 20px; }
.about-list li { margin: 4px 0; }

/* слой модальных окон */
#layer { position: fixed; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 10; }
#layer > * { pointer-events: auto; }
.calc { position: absolute; display: flex; flex-direction: column; min-width: 320px; min-height: 200px; }
.calc.maxed { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
.calc .win-head { cursor: move; }
.calc-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.tabs { display: flex; gap: 2px; padding: 3px 3px 0; border-bottom: 1px solid #8b877f; }
.tab {
  padding: 3px 12px; border: 1px solid #8b877f; border-bottom: 0; border-radius: 3px 3px 0 0;
  background: #c3bfb7; cursor: pointer; font-size: 13px;
}
.tab[aria-selected="true"] { background: var(--win); position: relative; top: 1px; }
.page { flex: 1; overflow: auto; padding: 3px; min-height: 0; }
.page[hidden] { display: none; }

.toolbar { display: flex; align-items: center; gap: 12px; padding: 3px; }
.btn {
  min-width: 126px; height: 24px; padding: 0 12px; cursor: pointer;
  background: linear-gradient(#fafafa, #c9c6bf); border: 1px solid #7d7a73; border-radius: 4px;
}
.btn:hover { background: linear-gradient(#fff, #dcd9d2); }
.btn[disabled] { opacity: .6; cursor: progress; }
.busy { color: var(--muted); }

.sec-cap { text-align: center; font-weight: bold; padding: 6px 3px 4px; }
.cols { display: flex; gap: 6px; align-items: flex-start; }
.cols > .col { flex: 1; min-width: 0; }
.box { border: 1px solid var(--line); background: var(--win); padding: 2px; }

.row {
  display: flex; align-items: center; gap: 6px; min-height: 30px; padding: 2px 3px;
  background: var(--row); border: 1px solid var(--line); margin: 2px 0; border-radius: 2px;
}
.row > .lbl { flex: 0 0 var(--lw, 220px); line-height: 1.3; }
.row > .ctl { flex: 1; min-width: 0; }
.row.check { gap: 8px; }
.row.check > label { flex: 1; cursor: pointer; }
.row.bad .lbl, .row.srv-bad .lbl { color: var(--err); }
.ctl input[type=text], .ctl select, .combo-input {
  width: 100%; height: 24px; font: inherit; padding: 1px 4px;
  border: 1px solid #8b877f; border-radius: 3px; background: #fff; color: var(--ink);
}
.ctl input[readonly] { background: #f7f6f3; }
.ctl input.combo-input { background-color: #fff; }
.ctl input.bad, .ctl input.srv-bad, .ctl select.srv-bad, .combo.srv-bad .combo-input {
  color: var(--err); font-weight: bold; border-color: var(--err);
}
/* сообщение под полем с ошибкой (CheckEdit оригинала показывал его сразу) */
.hint-err { color: var(--err); font-size: 11px; margin-top: 2px; }
.row.has-hint { flex-wrap: wrap; }
.row > .hint-err { flex: 0 0 100%; padding-left: calc(var(--lw, 220px) + 6px); overflow-wrap: break-word; word-wrap: break-word; }
/* поле, которое при нынешних флажках и списках не читается (when) */
.row.inactive { opacity: .55; }
.row.inactive .lbl { color: var(--muted); }

/* список с поиском (климат, материалы) */
.combo { position: relative; }
.combo-input { cursor: pointer; padding-right: 22px; background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M0 0h10L5 6z" fill="%23444"/></svg>') no-repeat right 7px center; }
.combo-pop {
  position: fixed; z-index: 50; background: #fff; border: 1px solid #555; box-shadow: 0 4px 12px rgba(0,0,0,.35);
  display: flex; flex-direction: column; max-height: 320px;
}
.combo-pop input { margin: 3px; height: 26px; font: inherit; padding: 2px 6px; border: 1px solid #8b877f; border-radius: 3px; }
.combo-list { overflow: auto; flex: 1; }
.combo-opt { padding: 3px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-opt.sel { background: #dfe8f7; }
.combo-opt.act { background: #1a5fd0; color: #fff; }
.combo-opt mark { background: #ffe680; color: inherit; }
.combo-opt.act mark { background: #8fb0ea; }
.combo-empty { padding: 6px; color: var(--muted); }

.notes { background: #fff; padding: 8px 12px; margin-top: 6px; border: 1px solid var(--line); }
.html-out { background: #fff; padding: 8px; overflow: auto; }
.html-out table { border-collapse: collapse; margin: 0 auto 10px; font-size: 12px; }
.html-out td { padding: 3px 5px; }

/* сообщение (Alert) */
.shade { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.25); z-index: 60; display: flex; align-items: center; justify-content: center; }
.alert { width: 531px; max-width: 94vw; }
.alert-text { padding: 10px 12px; min-height: 86px; line-height: 1.4; background: var(--win); }
.alert-foot { display: flex; justify-content: flex-end; padding: 3px 6px 6px; }

.noscript { margin: 20px 120px; }
/* плашка compat.js для браузера, где калькуляторы не работают (без var() — её видит и IE) */
.oldbrowser { max-width: 868px; padding: 10px 14px; background: #fff3c4; border: 2px solid #c00000; color: #111; font-size: 15px; line-height: 1.4; }
.oldbrowser.flash { background: #ffd24d; }

/* узкий экран: окна на весь экран, стартовое окно ужимается */
@media (max-width: 860px) {
  .panel { position: static; flex-direction: row; width: auto; margin: 8px; justify-content: center; }
  .desk { margin-left: 0; align-items: stretch; }
  .start { width: 100%; }
  .start-body { width: 734px; transform-origin: 0 0; }
  .shop, .about { width: 100%; }
  .shop-item { width: calc(50% - 10px); }
  .shop-item img { width: 100%; height: auto; max-width: 200px; margin: 0 auto; }
  .calc { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; border-radius: 0; }
  .cols { flex-direction: column; }
  .cols > .col { width: 100%; }
  .row { flex-wrap: wrap; }
  .row > .lbl { flex: 1 1 100%; }
  .row > .hint-err { padding-left: 0; }
}

/* «Освещение»: описания оборудования, редактор, сведения для поставщиков */
.tth { background: #fff; border: 1px solid var(--line); margin: 0 3px 4px; padding: 4px 6px; font-size: 12px; overflow-x: auto; }
.tth:empty { display: none; }
.tth table { border-collapse: collapse; margin: 2px 0; }
.tth td { padding: 1px 4px; vertical-align: top; }
.tth table[border] td { border: 1px solid #999; text-align: center; }
.tth-manual td:first-child { padding-right: 12px; }
.eq-bar { justify-content: flex-end; }
.eq-bar .btn { min-width: 200px; }
.eq-note { margin: 4px 3px; padding: 6px 8px; background: #fff8d6; border: 1px solid #e0cf87; font-size: 12px; }
.editor { width: 885px; max-width: 96vw; max-height: 94vh; display: flex; flex-direction: column; }
.ed-body { display: flex; gap: 6px; padding: 4px; overflow: auto; background: var(--win); }
.ed-fields { flex: 1; min-width: 0; }
.ed-img img { max-width: 339px; width: 100%; height: auto; }
.editor .alert-foot { gap: 8px; }
.vendor-info { background: #fff; padding: 8px 16px; user-select: text; }
.vendor-info h1 { font-family: Tahoma, sans-serif; font-size: 20px; }
.vendor-info p, .vendor-info li { font-family: Tahoma, sans-serif; font-size: 12pt; text-align: justify; }
.vendor-info .img { text-align: center; }
.vendor-info img { max-width: 100%; height: auto; }
@media (max-width: 860px) { .ed-body { flex-direction: column; } .ed-img { text-align: center; } }