/* Оценка инвентаря (/tools/inventory/) */
/* Цвета страницы. Обычная версия берёт переменные темы (светлая и тёмная
   работают сами), лёгкая — класс `kodg-lite` на <body> — свои постоянные. */
body{--pg-bg:var(--k-bg);--pg-panel:var(--k-panel);--pg-border:var(--k-border);--pg-text:var(--k-text);
  --pg-text2:var(--k-text2);--pg-muted:var(--k-muted);--pg-acc:var(--k-accent);--pg-acch:var(--k-accent-h)}
body.kodg-lite{--pg-bg:#fff;--pg-panel:#fff;--pg-border:#ddd;--pg-text:#333;
  --pg-text2:#555;--pg-muted:#777;--pg-acc:#337ab7;--pg-acch:#286090}
body{margin:0;background:var(--pg-bg);color:var(--pg-text)}
/* Шрифт — только в обычной версии: лёгкая оставляет бутстраповский */
body:not(.kodg-lite){font:15px/1.6 "KodgLato","Helvetica Neue",Helvetica,Arial,sans-serif}
.iv{max-width:1120px;margin:0 auto;padding:24px 15px 56px}
.iv h1{font-size:29px;margin:0 0 6px;color:var(--pg-text)}
.iv .lead{color:var(--pg-text2);font-size:16px;margin:0 0 20px}
.iv .card{background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:6px;padding:18px 20px;margin:0 0 16px}
.iv h2{font-size:17px;margin:0 0 10px;color:var(--pg-text)}
.iv p{margin:0 0 10px;color:var(--pg-text2)}
.iv textarea{width:100%;min-height:190px;padding:10px;border:1px solid var(--pg-border);border-radius:5px;
  background:var(--pg-bg);color:var(--pg-text);font:13px/1.45 Consolas,Menlo,monospace;resize:vertical}
.iv .pick{display:inline-flex;align-items:center;gap:8px;margin:12px 14px 0 0;font-size:14px;color:var(--pg-text2)}
.iv .pick select{padding:7px 10px;border:1px solid var(--pg-border);border-radius:5px;
  background:var(--pg-bg);color:var(--pg-text);font-size:14px}
.iv .btn-go{display:inline-block;margin:10px 0 0;padding:11px 26px;background:var(--pg-acc);color:#fff;
  font-size:16px;font-weight:700;border:0;border-radius:5px;cursor:pointer}
.iv .btn-go:hover{background:var(--pg-acch)}
.iv .btn-off{display:inline-block;margin-left:10px;padding:11px 18px;border:1px solid var(--pg-border);
  border-radius:5px;color:var(--pg-text2);font-size:14px;text-decoration:none}
.iv .btn-off:hover{color:var(--pg-text);text-decoration:none}
.iv .done{margin:14px 0 0;font-size:14px;color:var(--pg-text2)}
.iv .done .mute{color:var(--pg-muted)}
.iv .small{font-size:13px;color:var(--pg-muted)}
.iv .sum{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 16px}
.iv .sum div{flex:1 1 190px;background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:6px;padding:13px 16px}
.iv .sum b{display:block;font-size:22px;line-height:1.2;color:var(--pg-text)}
.iv .sum span{font-size:13px;color:var(--pg-muted)}
.iv .tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.iv .chip{padding:6px 13px;border:1px solid var(--pg-border);border-radius:14px;background:var(--pg-panel);
  color:var(--pg-text2);font-size:13px;cursor:pointer;user-select:none}
.iv .chip.on{background:var(--pg-acc);border-color:var(--pg-acc);color:#fff}
.iv .tools input,.iv .tools select{padding:6px 10px;border:1px solid var(--pg-border);border-radius:5px;
  background:var(--pg-bg);color:var(--pg-text);font-size:14px}
.iv .wrap{overflow-x:auto;border:1px solid var(--pg-border);border-radius:6px;background:var(--pg-panel)}
.iv table{width:100%;border-collapse:collapse;font-size:14px}
.iv th,.iv td{padding:8px 11px;border-bottom:1px solid var(--pg-border);text-align:left;vertical-align:top}
.iv th{background:var(--pg-bg);color:var(--pg-muted);font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer}
.iv th.no{cursor:default}
.iv td.n{text-align:right;white-space:nowrap}
.iv tr.off{display:none}
/* Качество красит и значок, и само название — как в самой игре: там по цвету
   строки видно, что за вещь, ещё до того как прочитаешь её название. */
.iv .q{display:inline-block;padding:0 3px;border-radius:2px;font-size:10px;line-height:14px;
  font-weight:700;color:#fff;text-align:center;vertical-align:2px}
/* Выпуск — не качество, поэтому значок у него свой, спокойный */
.iv .ed{display:inline-block;padding:0 3px;border:1px solid var(--pg-border);border-radius:2px;
  font-size:10px;line-height:12px;color:var(--pg-muted);vertical-align:2px}
.iv .q-VP{color:#AAAAAA}
.iv .q.q-VP{background:#AAAAAA;color:#fff}
.iv .q-P{color:#616161}
.iv .q.q-P{background:#616161;color:#fff}
.iv .q-F{color:#659BA3}
.iv .q.q-F{background:#659BA3;color:#fff}
.iv .q-VF{color:#34729A}
.iv .q.q-VF{background:#34729A;color:#fff}
.iv .q-EF{color:#884EA2}
.iv .q.q-EF{background:#884EA2;color:#fff}
.iv .q-R{color:#95486D}
.iv .q.q-R{background:#95486D;color:#fff}
.iv .q-VR{color:#B5AE0B}
.iv .q.q-VR{background:#B5AE0B;color:#fff}
.iv .q-ER{color:#E0AF29}
.iv .q.q-ER{background:#E0AF29;color:#fff}
.iv .q-U{color:#D26720}
.iv .q.q-U{background:#D26720;color:#fff}
.iv .q-L{color:#C20C0C}
.iv .q.q-L{background:#C20C0C;color:#fff}
.iv .v{display:inline-block;padding:2px 9px;border-radius:11px;font-size:12px;white-space:nowrap}
.iv .v-sell{background:#dff3e0;color:#215c2c}
.iv .v-slow{background:#fdf2d4;color:#7a5b12}
.iv .v-skip{background:#eceff1;color:#5a646b}
.iv .v-none{background:#eceff1;color:#5a646b}
.iv .v-lock{background:#f2e3e3;color:#7d3b3b}
.iv .why{display:block;margin-top:3px;font-size:12px;color:var(--pg-muted);white-space:normal}
/* «Продать напрямую» — путь мимо аукциона: та же вещь, но на доске объявлений.
   ⚠️ Была обычной мелкой ссылкой под вердиктом и терялась в нём совершенно:
   рядом стоят подпись вердикта и причина, тем же кеглем и тем же серым.
   Теперь это заметная плашка в цвет портала со стрелкой — видно, что отсюда
   есть куда перейти, но она всё равно легче настоящей кнопки и с вердиктом
   не спорит. */
.iv .tosell{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 10px;
  border:1px solid var(--pg-acc);border-radius:12px;font-size:12px;line-height:18px;
  color:var(--pg-acc);text-decoration:none;white-space:nowrap}
.iv .tosell:after{content:"→";font-size:12px;line-height:1}
.iv .tosell:hover,.iv .tosell:focus{background:var(--pg-acc);border-color:var(--pg-acc);
  color:#fff;text-decoration:none}
.ihint{position:relative;display:inline-block;margin-left:4px;line-height:1;vertical-align:middle}
.ihint > a{color:var(--pg-muted);text-decoration:none;cursor:pointer}
.ihint > a:hover,.ihint > a:focus{color:var(--pg-acc);text-decoration:none;outline:none}
.ihint .glyphicon{font-size:13px;top:2px}
/* Коробочка — как `.popover` у «Средней стоимости»: та же тень, скругление и
   кегль. Держится на `fixed`, координаты ставит скрипт по месту значка. */
.ihint .pop{position:fixed;left:0;top:0;z-index:1060;width:290px;
  padding:9px 14px;background:var(--pg-panel);color:var(--pg-text2);border:1px solid var(--pg-border);border-radius:6px;
  box-shadow:0 5px 10px rgba(0,0,0,.2);text-align:left;font-family:inherit;font-size:13px;
  font-weight:400;line-height:1.5;white-space:normal;opacity:0;visibility:hidden;
  transition:opacity .12s}
.ihint .pop b{color:var(--pg-text);font-weight:600}
/* Открывается и по наведению, и по фокусу: со смартфона наведения не бывает,
   а по касанию ссылка получает фокус. */
.ihint:hover .pop,.ihint:focus-within .pop{opacity:1;visibility:visible}
/* Хвостик — в два слоя, как у `.popover` бутстрапа: снаружи треугольник в цвет
   рамки, поверх него на пиксель меньше — в цвет фона. Одним слоем выходил
   глухой серый клин, приклеенный к углу коробочки. */
.ihint .pa,.ihint .pa:after{position:absolute;display:block;width:0;height:0;
  border-color:transparent;border-style:solid}
.ihint .pa{bottom:-11px;margin-left:-11px;border-width:11px 11px 0;border-top-color:var(--pg-border)}
.ihint .pa:after{content:"";bottom:1px;left:-10px;border-width:10px 10px 0;border-top-color:var(--pg-panel)}
.ihint .pa.up{bottom:auto;top:-11px;border-width:0 11px 11px;border-top-color:transparent;
  border-bottom-color:var(--pg-border)}
.ihint .pa.up:after{bottom:auto;top:1px;border-width:0 10px 10px;border-top-color:transparent;
  border-bottom-color:var(--pg-panel)}
@media (max-width:700px){
  /* На телефоне коробочка в 290px у края экрана уезжает за него — разворачиваем
     полосой внизу, читать удобнее, и деваться ей некуда. */
  .ihint .pop{left:12px!important;right:12px!important;top:auto!important;bottom:14px!important;
    width:auto!important;font-size:14px}
  .ihint .pa{display:none!important}
}
/* Долговечность и срок годности стоят рядом с названием: по ним видно,
   сколько вещи осталось жить, а это половина её цены. Нетронутое и
   несгорающее говорим спокойным серым, горящее — красным. */
/* Строки о вещи стоят так же, как в игре: подпись и значение, каждая со
   своей строки. Человек уже читал эту карточку тысячу раз — пусть узнаёт её,
   а польза наша: сгорающее подсвечено, початое видно сразу. */
.iv .fact{display:block;font-size:12px;color:var(--pg-muted);white-space:normal}
.iv .fact b{font-weight:400;color:var(--pg-text2)}
.iv .fact.used b{color:#a4590f}
.iv .fact.dead b{color:#b03a2e}
.iv .fact.soon b{color:#b03a2e}
.iv .fact .mark{color:#b03a2e}
.iv ol.top{margin:0 0 8px;padding-left:22px;color:var(--pg-text2)}
.iv ol.top li{margin:0 0 5px}
/* Характеристики: у вещей с параметрами цену задают именно они, и по ним же
   видно, какое из двух одинаковых с виду колец лучше. Показываем целиком —
   обрезанный список хуже, чем никакого: по трём строкам из восьми чарку
   с чаркой не сравнить. */
.iv .par{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--pg-muted)}
/* Описание — слова игры о самой вещи, надпись — чужие слова (дарителя, города).
   Курсив отделяет их от фактов: факты сверяют, слова читают. Пометки идут
   последними и потому чуть темнее — на них взгляд останавливается. */
.iv .descr{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--pg-muted)}
.iv .note{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--pg-muted);font-style:italic}
.iv .fact.flags{margin-top:5px;padding-top:3px;border-top:1px dashed var(--pg-border);font-size:11px;line-height:1.45;color:var(--pg-muted)}
.iv .pic{display:inline-block;width:34px;height:34px;margin:-3px 9px 0 0;vertical-align:middle;object-fit:contain}
.iv .nopic{border:1px dashed var(--pg-border);border-radius:4px;box-sizing:border-box}
.iv td .nm{display:inline-block;vertical-align:middle;max-width:calc(100% - 46px)}
.iv ol.top .pic{width:30px;height:30px;margin:-2px 7px 0 0}
@media (max-width:700px){
  .iv h1{font-size:23px}
  /* Узкому экрану таблица не по росту: главный столбец — «что делать» —
     уезжал вправо за край, и ради него приходилось листать вбок.
     Поэтому строка становится карточкой. */
  .iv .wrap{overflow:visible;border:0;background:transparent}
  .iv table,.iv tbody,.iv tr,.iv td{display:block;width:auto}
  .iv thead{display:none}
  .iv tr{background:var(--pg-panel);border:1px solid var(--pg-border);border-radius:6px;
    margin:0 0 10px;padding:11px 13px}
  .iv tr.off{display:none}
  .iv td{border:0;padding:1px 0}
  .iv td.n{display:inline-block;text-align:left;margin:2px 15px 2px 0;font-size:13px}
  .iv td.n:before{content:attr(data-l) " ";color:var(--pg-muted)}
  .iv td .nm{max-width:calc(100% - 44px)}
  .iv .why{margin-top:2px}
  /* ⚠️ Подсказка шириной в 300px у правого края карточки уезжала за экран.
     На телефоне разворачиваем её полосой внизу — читать удобнее, и деваться
     ей некуда. */
}