/* Справочник людей: сетка карточек и страница человека.
   Общая палитра и сброс — в style.css, тут только своё. */

#page{display:flex;flex-direction:column;height:100%}
#top{display:flex;align-items:center;gap:18px;padding:11px 20px;background:var(--panel);
  border-bottom:1px solid var(--line);flex:0 0 auto}
#top h1{margin:0;font-size:16px;letter-spacing:.02em}
#top nav{display:flex;gap:4px}
#top nav a{padding:5px 11px;border-radius:6px;color:var(--dim);text-decoration:none;font-size:13px}
#top nav a:hover{color:var(--text);background:var(--panel-2)}
#top nav a.on{color:#12141a;background:var(--accent);font-weight:600}
#top .grow{flex:1}
#top .count{color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}

/* ── фильтры ─────────────────────────────────────────────────────────── */
#filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px 20px;border-bottom:1px solid var(--line);background:var(--panel)}
#filters input[type=search]{padding:7px 11px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:13px;min-width:210px}
#filters input[type=search]:focus{outline:none;border-color:var(--accent)}
#filters select{padding:7px 9px;border-radius:6px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);font-size:13px}
#filters label.chk{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12.5px;
  cursor:pointer;user-select:none}
#filters label.chk input{accent-color:var(--accent);cursor:pointer}

/* ── сетка карточек ──────────────────────────────────────────────────── */
#grid{flex:1;overflow-y:auto;padding:16px 20px 26px;
  display:grid;gap:12px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.hcard{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);text-decoration:none;color:var(--text);
  transition:border-color .12s,transform .12s}
.hcard:hover{border-color:var(--accent);transform:translateY(-1px)}
.hportrait{position:relative;width:66px;height:66px;flex:0 0 66px;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#333a49,#1a1d25);
  border:2px solid var(--fac,#3d4658);display:grid;place-items:center;overflow:hidden}
.hportrait img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.hportrait .noimg{color:var(--dim);font-size:20px;font-weight:700}
.hbody{flex:1;min-width:0}
.hname{font-size:14.5px;font-weight:600;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmeta{margin-top:2px;color:var(--dim);font-size:11.5px;display:flex;gap:7px;flex-wrap:wrap}
.hmeta .lv{color:var(--accent);font-family:ui-monospace,monospace}
.hmeta .fac::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--fac,#5a637a);margin-right:5px;vertical-align:middle}

/* полоса иконок работ — как в игре: серая, если человек этого не умеет */
.hwork{display:flex;gap:2px;margin-top:7px;background:rgba(0,0,0,.28);
  border-radius:6px;padding:3px 4px;width:max-content;max-width:100%;flex-wrap:wrap}
.hwork span{position:relative;width:19px;height:19px;display:block}
.hwork img{width:100%;height:100%;object-fit:contain;opacity:.17;filter:grayscale(1)}
.hwork span.on img{opacity:1;filter:none}
.hwork b{position:absolute;right:-1px;bottom:-2px;font:700 9px/1 ui-monospace,monospace;
  color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}

/* ── страница человека ───────────────────────────────────────────────── */
#detail{flex:1;overflow-y:auto;padding:18px 20px 40px}
.wrap{max-width:1080px;margin:0 auto}
.dhead{display:flex;gap:18px;align-items:center;margin-bottom:18px}
.dhead .hportrait{width:104px;height:104px;flex:0 0 104px}
.dhead h2{margin:0;font-size:25px;letter-spacing:.01em}
.dhead .sub{margin:4px 0 0;color:var(--dim);font-size:12.5px;font-family:ui-monospace,monospace}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{background:var(--panel-2);border:1px solid var(--line);border-radius:999px;
  padding:3px 10px;font-size:12px;color:var(--text)}
.chip.lv{color:var(--accent);font-family:ui-monospace,monospace}
.chip.boss{border-color:#c1553f;color:#ff9a80}
.chip.lv.seen{border-style:dashed}          /* уровень замерен в игре, не из файла */

/* предупреждения над карточкой: чьи это статы и можно ли взять себе */
.wrap > .note{margin:0 0 10px;padding:9px 13px;border-radius:8px;font-size:12.5px;
  background:rgba(255,202,40,.09);border:1px solid rgba(255,202,40,.32);color:#e8cf8f}

.cols{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
/* Работам нужна ширина: шкала из десяти делений в узкой колонке
   нечитаема. На широком экране блок занимает две. */
@media (min-width:980px){ .box.work{grid-column:span 2} }
.box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.box h3{margin:0 0 9px;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:600}
.kv{display:grid;grid-template-columns:1fr auto;gap:3px 14px;font-size:13px}
.kv dt{color:var(--dim)}
.kv dd{margin:0;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* Работа: иконка, название, шкала делений, ранг. Одна колонка — полоски
   должны стоять друг под другом, иначе их не сравнить взглядом.
   Колонки фиксированы сеткой, чтобы деления у всех работ начинались на
   одной вертикали. */
.works{display:grid;gap:6px}
.works>div{position:relative;display:grid;
  grid-template-columns:20px 116px minmax(0,1fr) 42px;
  align-items:center;gap:9px;font-size:12.5px}
.works img{width:20px;height:20px;object-fit:contain}
.works>div>span:first-of-type{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.works b{text-align:right;font-family:ui-monospace,monospace;
  color:var(--dim);font-weight:600;font-size:12px}
.works b.grown{color:#6cc47a}
/* «+» книжки прижимаем к названию, отдельной колонки он не занимает.
   Селектор нарочно по тегу: класс `up` есть и у делений шкалы, и общий
   `.works .up` вырывал каждое зелёное деление из сетки — из-за этого
   шкала при переключении звёзд теряла деления на глазах. */
.works em.up{position:absolute;margin-left:-9px;color:var(--accent);
  font-style:normal;font-size:10px}

/* Деления шкалы: жёлтые — то, что есть в таблице, зелёные — то, что
   добавят звёзды, пустые — до потолка.

   Раскладка именно сеткой, а не флексом. У флекса деления делят место
   на глаз: при переключении звёзд одно из них схлопывалось до
   минимальной ширины, и шкала выглядела как девять делений вместо
   десяти. `grid-auto-columns:1fr` делает их равными по определению. */
.pips{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;min-width:0}
.pips i{height:11px;border-radius:3px;background:var(--line);min-width:0;
  transition:background .12s,box-shadow .12s}
.pips i.on{background:var(--accent)}
.pips i.grow{background:#6cc47a;box-shadow:0 0 6px rgba(108,196,122,.5)}

table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{text-align:left;color:var(--dim);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;padding-bottom:5px}
table.tbl td{padding:3px 0;border-top:1px solid rgba(255,255,255,.05)}
table.tbl td.num{text-align:right;font-family:ui-monospace,monospace;color:var(--dim)}

.srclist{list-style:none;margin:0;padding:0;font-size:12.5px}
.srclist li{padding:5px 0;border-top:1px solid rgba(255,255,255,.05)}
.srclist li:first-child{border-top:0}
.srclist .what{font-weight:600}
.srclist .note{color:var(--dim)}

#minimap{height:340px;border-radius:8px;overflow:hidden;background:#0e1014}
.empty{color:var(--dim);font-size:12.5px}
.back{display:inline-block;margin-bottom:12px;color:var(--dim);text-decoration:none;font-size:12.5px}
.back:hover{color:var(--text)}

@media (max-width:640px){
  #grid{grid-template-columns:1fr}
  .dhead{flex-direction:column;align-items:flex-start}
}
.hmeta .id{font-family:ui-monospace,monospace;font-size:10.5px;opacity:.65}

/* недоступные: показываются только по галочке, поэтому не прячем их
   совсем, а гасим — видно, что это не обычная добыча */
.hcard.unobt{opacity:.62}
.hcard.unobt:hover{opacity:1}
.hmeta .warn{color:#e8a13c;border:1px solid rgba(232,161,60,.4);border-radius:999px;
  padding:0 6px;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em}

/* врождённая пассивка: редкое отличие (15 строк из 433), и как раз оно
   разводит одноимённые карточки — поэтому цвет свой, не как у обычных
   строчек меты */
.hmeta .perk{color:#7fc7a4;border:1px solid rgba(127,199,164,.4);border-radius:999px;
  padding:0 6px;font-size:10.5px}
.chip.perk{border-color:rgba(127,199,164,.45);color:#7fc7a4}
.perkbox .perks{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.perkbox .perks li{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap}
.perkbox .perks b{color:#7fc7a4;font-weight:600}
.perkbox .perks span{color:var(--dim);font-size:12px}
.perkbox .foot{margin:9px 0 0;color:var(--dim);font-size:11px}

/* ── страница человека: новые блоки ─────────────────────────────────── */

/* полоски статов: число рядом с долей от максимума по всему справочнику */
.bars{display:grid;gap:5px;margin-bottom:10px}
.bar{display:grid;grid-template-columns:104px 1fr 44px;align-items:center;gap:9px;font-size:12.5px}
.bar .lbl{color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .track{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.bar .track i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--fac,#ffca28),#ffd766)}
.bar .val{text-align:right;font-family:ui-monospace,monospace;
  font-variant-numeric:tabular-nums}

/* «+» у работы — её ранг поднимается справочником из игры */
.works em.up{font-style:normal;color:#6cc47a;font-size:10px;margin-left:3px;
  align-self:flex-start;line-height:1.3}
.works b{margin-left:auto}

.plist{list-style:none;margin:0;padding:0;font-size:12.5px}
.plist li{padding:4px 0}
.plist .what{font-weight:600}
.plist .note{color:var(--dim)}

.hint{margin:0 0 8px;color:var(--dim);font-size:12.5px;line-height:1.5}
.hint.warnnote{margin:9px 0 0;padding-top:8px;border-top:1px solid var(--line);color:#c8a45e}
details summary{cursor:pointer;color:var(--accent);font-size:12.5px;margin-bottom:7px}
details[open] summary{margin-bottom:9px}

/* «кто ещё такой же» */
.kins{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
.kin{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);text-decoration:none;color:var(--text)}
.kin:hover{border-color:var(--accent)}
.kin .hportrait{width:34px;height:34px;flex:0 0 34px}
.kin .kname{font-size:12px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kin .klv{margin-left:auto;color:var(--dim);font-size:10.5px;font-family:ui-monospace,monospace}
.hnum{color:var(--dim);font-weight:400;letter-spacing:0}

.chip.warn{border-color:rgba(232,161,60,.45);color:#e8a13c}

/* переключатель звёзд конденсатора над статами */
.stars{display:flex;gap:5px;margin-bottom:11px;flex-wrap:wrap}
.stars button{flex:1;min-width:54px;display:flex;flex-direction:column;align-items:center;
  gap:1px;padding:5px 4px;border-radius:7px;cursor:pointer;font:600 11.5px/1.15 inherit;
  color:var(--dim);background:var(--panel-2);border:1px solid var(--line)}
.stars button span{font-weight:400;font-size:10px;font-family:ui-monospace,monospace}
.stars button:hover{color:var(--text);border-color:#3d4658}
.stars button.on{color:#12141a;background:var(--accent);border-color:var(--accent)}
.stars button.on span{color:#4a3c07}
.bar .val .gain{color:#6cc47a;font-size:10px;margin-left:4px}
.bar{grid-template-columns:104px 1fr 62px}

/* ── варианты одного человека ────────────────────────────────────────── */

/* Пять колонок в телефон не влезают: «где» сжималось до 46 пикселей и
   строка вставала столбиком в 210 пикселей высотой. Пусть таблица едет
   вбок внутри своей коробки — страница при этом не двигается. */
.scrollx{overflow-x:auto}
.tbl.vars{min-width:440px}
.tbl.vars td{vertical-align:top}
.tbl.vars .vid{font-family:ui-monospace,monospace;font-size:11px;color:var(--dim);
  padding-right:12px}
.tbl.vars .note{color:var(--dim);font-family:ui-monospace,monospace;font-size:11px}

/* ── вкладки справочника ─────────────────────────────────────────────── */

/* Вкладка — это раздел, а не фильтр: карточка лежит ровно в одной.
   Поэтому ряд стоит над фильтрами и выглядит как навигация, а не как
   очередной переключатель в одной куче с ними. */
#tabs{display:flex;gap:2px;padding:0 20px;background:var(--panel);
  border-bottom:1px solid var(--line);overflow-x:auto;flex:0 0 auto}
#tabs button{display:flex;align-items:center;gap:7px;padding:9px 14px;
  border:0;border-bottom:2px solid transparent;background:none;cursor:pointer;
  color:var(--dim);font:600 13px/1 inherit;white-space:nowrap}
#tabs button:hover{color:var(--text)}
#tabs button.on{color:var(--accent);border-bottom-color:var(--accent)}
#tabs .n{font:400 11px/1 ui-monospace,monospace;opacity:.7;
  background:var(--panel-2);border-radius:999px;padding:3px 6px}

.chip.shop{border-color:rgba(255,202,40,.45);color:#ffca28}

/* ── ассортимент лавки ───────────────────────────────────────────────── */

/* Плитками, а не списком: сорок строк текста никто не читает, а товар по
   иконке узнаётся сразу — в игре его выбирают так же. */
.goods{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))}
.good{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--line);min-width:0;min-height:48px}
.good .ibox{position:relative;width:34px;height:34px;flex:0 0 34px;border-radius:6px;
  background:rgba(0,0,0,.3);display:grid;place-items:center}
.good .ibox img{width:32px;height:32px;object-fit:contain}
.good .ibox b{position:absolute;right:-2px;bottom:-3px;font:700 10px/1 ui-monospace,monospace;
  color:#fff;text-shadow:0 0 3px #000,0 0 2px #000}
/* Название в две строки, дальше многоточие, полное — в подсказке.
   Просто обрезать нельзя: «Mysterious Accessory Box» в плитку шириной 148
   не влезает и на телефоне превращался бы в огрызок. Просто переносить
   тоже нельзя: у длинных названий плитка растягивалась на пять строк, и
   ряды получались рваными — от 48 до 115 пикселей. */
.good .iname{flex:1;min-width:0;font-size:12px;line-height:1.2;
  overflow:hidden;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.good .iprice{display:flex;align-items:center;gap:3px;font:600 11.5px/1 ui-monospace,monospace;
  color:var(--accent);font-variant-numeric:tabular-nums}
.good .iprice .coin{width:14px;height:14px;object-fit:contain}

/* паловая лавка — портреты вместо иконок предметов */
.palgrid{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.palgrid .pal{display:flex;align-items:center;gap:7px;min-width:0;font-size:11.5px}
.palgrid img{width:30px;height:30px;flex:0 0 30px;border-radius:50%;object-fit:cover;
  background:radial-gradient(circle at 50% 38%,#333a49,#1a1d25)}
.palgrid .pal>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Иконка предмета в таблице дропа. Нарочно не `display:flex` на ячейке:
   флекс вынимает её из табличной раскладки, и колонки перестают быть
   колонками. Обычный inline-block по средней линии. */
.tbl td.item img,.tbl td.item .noicon{width:22px;height:22px;margin-right:7px;
  object-fit:contain;vertical-align:middle;display:inline-block}