/* Просмотр предметов (.ib): дерево на пергаменте, список на коже верстака, детали — игровой тултип.
   Краски задаёт поверхность (materials.md): пергамент объявляет свои токены в uikit.css, тултип — здесь. */
.ib-bench{padding:14px}
/* Панель во всю высоту экрана, как окно аукциона: страница не растёт, колонки
   прокручиваются внутри. Высота = экран минус шапка, поля и кожаная рамка. */
.ib{display:grid;grid-template-columns:250px minmax(0,1fr) 320px;gap:16px;align-items:stretch;height:calc(100vh - 236px);min-height:560px}
@media (max-width:1180px){.ib{grid-template-columns:230px minmax(0,1fr);height:auto}.ib-detail{grid-column:1/-1;height:auto}.ib-tree{max-height:70vh}.ib-box{max-height:70vh}}
@media (max-width:720px){.ib{grid-template-columns:1fr}.ib-tree{max-height:40vh}}

/* Дерево: та же тёмная доска, что и список, — категории и результаты одна панель на коже.
   Ширина колонки фиксирована, место под сургучную точку зарезервировано у всех пунктов,
   жирность при выборе не меняется — иначе колонка «дышит» при каждом клике. */
.ib-tree{width:250px;box-sizing:border-box;height:100%;min-height:0;display:flex;flex-direction:column;padding:10px 8px 12px;font-family:var(--caps);font-size:14px;color:#e8dcc6}
.ib-tree h3{margin:0 0 8px;padding:0 6px 8px;font-size:15px;border-bottom:1px solid #6b4a22}
.ib-tree ul{list-style:none;margin:0;padding:0}
/* Прокручивается только список разделов, заголовок остаётся на месте. */
.ib-tree>ul{flex:1;min-height:0;overflow-y:auto}
/* Вложенные разделы — от того же края, без лесенки: уровень читается по плюсу у родителя. */
.ib-nl{color:#a08c6c;margin-left:3px;font-size:11px}

/* Список: тёмная доска на коже, строки с золотой чертой при наведении. */
.ib-main{min-width:0;min-height:0;display:flex;flex-direction:column;height:100%}
.ib-scroll{flex:1;min-height:0;overflow-y:auto}
.ib-bar{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-bottom:10px}
.ib-search{flex:1 1 180px;min-width:160px;height:38px;padding:0 12px;font:15px var(--body)}
.ib-total{font-family:var(--caps);font-size:13px;color:#cdbfa3;white-space:nowrap}
/* Рамка — у контейнера прокрутки, не у таблицы: при схлопнутых границах верхняя линия таблицы
   не прилипала вместе с шапкой, и в щели над шапкой просвечивали строки (владелец 03.10). */
.ib-list{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;color:#e8dcc6}
.ib-list th{font-family:var(--caps);font-weight:400;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#a08c6c;text-align:left;padding:8px 10px;border-bottom:1px solid #6b4a22}
.ib-list td{padding:7px 10px;border-bottom:1px solid rgba(107,74,34,.35);vertical-align:middle}
.ib-list th.num,.ib-list td.num{text-align:right;font-variant-numeric:tabular-nums}
.ib-list tbody tr{cursor:pointer}
.ib-list tbody tr:hover td{background:rgba(248,183,0,.07)}
.ib-list tbody tr.on td{background:rgba(248,183,0,.14)}
.ib-list tbody tr.on td:first-child{box-shadow:inset 2px 0 0 #f8b700}
.ib-list td.nm{min-width:0}
.ib-list td.nm .nm-in{display:flex;align-items:center;gap:8px;min-width:0}
.ib-ico{flex:0 0 22px;width:22px;height:22px;border:1px solid #6b4a22;background:linear-gradient(180deg,#2a1f17,#120d0b);box-shadow:0 0 0 1px #0a0704}
.ib-ico.big{flex-basis:40px;width:40px;height:40px}
.ib-empty{padding:26px 12px;text-align:center;font-family:var(--caps);color:#cdbfa3}
/* Подсказка занимает панель деталей целиком — тем же полотном, что и тултип. */
.ib-hint{height:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:26px 12px;text-align:center;font-family:var(--caps);color:#a08c6c}
.ib-err{margin:8px 0;padding:8px 12px;border:1px solid #7a1e12;background:rgba(122,30,18,.25);color:#f3d9c9;font-size:13px}
.ib-more{display:flex;justify-content:center;margin:14px 0 4px}

/* Детали: игровой тултип — почти чёрный, тонкая золотисто-коричневая кромка, без скругления. */
.ib-detail{height:100%;min-height:0}
.ib-tip{--surf-ink:#e8dcc6;--surf-soft:#a08c6c;--surf-head:#ffd254;height:100%;box-sizing:border-box;overflow-y:auto;padding:12px 14px;color:var(--surf-ink);font-size:14px}
.ib-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.ib-name{font-family:var(--disp);font-weight:700;font-size:17px;line-height:1.2}
.ib-id{font-size:11px;color:var(--surf-soft)}
.ib-lines{margin:6px 0 10px;line-height:1.45}
.ib-meta{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:13px}
.ib-meta dt{color:var(--surf-soft)}.ib-meta dd{margin:0;text-align:right}
.ib-tip h4{margin:12px 0 4px;font-family:var(--caps);font-weight:400;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--surf-head)}
.ib-obs{list-style:none;margin:0;padding:0;font-size:13px}
.ib-obs li{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid rgba(107,74,34,.35)}
.ib-obs .num{color:var(--surf-soft)}

/* Качество — цвета клиента. */
.q0{color:#9d9d9d}.q1{color:#ffffff}.q2{color:#1eff00}.q3{color:#0070dd}.q4{color:#a335ee}.q5{color:#ff8000}.q6{color:#e6cc80}.q7{color:#00ccff}
.ib-ico img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}
/* Страница предмета */
.it-page{max-width:560px}
.it-back{margin:0 0 12px;font-family:var(--caps);font-size:13px}
.it-back a{color:#f8b700;text-decoration:none}
.it-card .it-tip{padding:6px 4px}
.it-tip h1.ib-name{font-size:22px;margin:0}
.ib-open{display:inline-block;margin-top:12px;font-family:var(--caps);font-size:13px;color:#f8b700}
.ib-go{height:38px;padding:0 18px;white-space:nowrap}
/* Дерево категорий — аккордеон как боковая панель */
.ib-tree>ul>li{margin:0 0 3px}
.ib-row{display:flex;align-items:stretch;border:1px solid transparent;border-radius:var(--r-inset)}
.ib-top>.ib-row{background:linear-gradient(180deg,rgba(42,31,23,.9),rgba(20,14,10,.9));border-color:#3a2a17}
.ib-top>.ib-row:hover{border-color:#6b4a22}
.ib-row.on{background:rgba(248,183,0,.1);border-color:rgba(201,143,26,.45)}
.ib-top>.ib-row.on{background:linear-gradient(180deg,#5a3e12,#33220a);border-color:#c98f1a}
.ib-cat{flex:1;min-width:0;display:flex;align-items:center;gap:8px;text-align:left;padding:7px 8px;border:0;background:none;font:inherit;color:#e8dcc6;cursor:pointer}
.ib-cat:hover{color:#ffd254}
.ib-row.on>.ib-cat{color:#ffd254}
.ib-sub .ib-cat{font-size:13px;color:#cdb792;padding:5px 8px}
.ib-sub .ib-cat:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#6b4a22}
.ib-sub .ib-row.on>.ib-cat:before{background:var(--dot-on)}
.ib-chev{flex:0 0 30px;border:0;border-left:1px solid rgba(107,74,34,.35);background:none;cursor:pointer;position:relative}
.ib-chev:before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;border-right:2px solid #cdbfa3;border-bottom:2px solid #cdbfa3;transform:translate(-65%,-50%) rotate(-45deg);transition:transform .18s}
.ib-row.open>.ib-chev:before{transform:translate(-50%,-70%) rotate(45deg);border-color:#ffd254}
.ib-chev:hover:before{border-color:#ffd254}
.ib-sub{list-style:none;margin:2px 0 4px 12px;padding:2px 0 2px 8px;border-left:1px solid rgba(201,143,26,.35);animation:ib-drop .2s ease-out}
.ib-sub .ib-sub{margin-left:8px}
@keyframes ib-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ib-th{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 11px;background:#15100c;border-bottom:1px solid #6b4a22;font-family:var(--caps);font-weight:400;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#a08c6c}
.ib-count{font-family:var(--body);font-size:13px;letter-spacing:0;text-transform:none;color:#cdbfa3;font-variant-numeric:tabular-nums}
.ib-box{flex:1;min-height:0;display:flex;flex-direction:column}