/* Item database (items/), 2026-10-26. Loaded only by that page, after aion.css and hub.css: it reuses their tokens and the builder's
   .bld-ctl / .chip / .bld-src blocks, and keeps everything of its own under #items or an itm- name so nothing leaks into other pages.
   Grade colours are text colours, so each theme gets a readable set (the same as the crafting page). */
#items{--cg-rare:#2c7d36; --cg-legend:#1f5fc4; --cg-unique:#8a5f00; --cg-epic:#b8431a; --cg-bar-rare:#6fcf6f; --cg-bar-legend:#6fa8ff; --cg-bar-unique:#e0b040; --cg-bar-epic:#ff8a5b}
:root[data-theme="asmodian"] #items{--cg-rare:#9fe49f; --cg-legend:#a9c9ff; --cg-unique:#ffe29a; --cg-epic:#ffb08f; --cg-bar-unique:#ffd36f}
@media (prefers-color-scheme: dark){ :root:not([data-theme="elyos"]) #items{--cg-rare:#9fe49f; --cg-legend:#a9c9ff; --cg-unique:#ffe29a; --cg-epic:#ffb08f; --cg-bar-unique:#ffd36f} }
#items .cg-rare{--g:var(--cg-rare); --gb:var(--cg-bar-rare)} #items .cg-legend{--g:var(--cg-legend); --gb:var(--cg-bar-legend)}
#items .cg-unique{--g:var(--cg-unique); --gb:var(--cg-bar-unique)} #items .cg-epic{--g:var(--cg-epic); --gb:var(--cg-bar-epic)}
#items img,#items .noi{flex:none; border-radius:8px; border:1px solid var(--card-b); background:#1a1230}
#items .noi{display:inline-block}

#itm-ctl{margin-top:0}
#itm-ctl input[type=search],#itm-ctl input[type=number],#items select{font:15px "IBM Plex Sans",system-ui,sans-serif; padding:9px 12px; border-radius:10px; border:1px solid var(--rule-2); background:var(--gh-fill); color:var(--ink)}
#itm-ctl input[type=search]{flex:1; min-width:160px}
#itm-ctl input[type=number]{width:74px}
#itm-ctl input:focus-visible,#items select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.itm-lv{display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink-3)}
#itm-groups,#itm-cats{margin-top:12px}
#itm-cats .chip{min-height:32px; font-size:13px}
#items .chip i{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px; opacity:.7; margin-left:3px}
#itm-cats[hidden],#itm-more[hidden]{display:none}

.itm-layout{display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:24px; align-items:start; margin-top:18px}
.itm-list{display:flex; flex-direction:column; gap:5px}
.itm-row{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; padding:7px 10px; border-radius:10px; border:1px solid var(--rule); border-left:3px solid var(--gb,var(--rule-2));
  background:var(--bg-2); color:var(--ink-2); font:inherit; cursor:pointer}
.itm-row:hover{border-color:var(--accent); border-left-color:var(--gb,var(--accent))}
.itm-row[aria-pressed="true"]{border-color:var(--accent); border-left-color:var(--gb,var(--accent)); box-shadow:0 0 0 1px var(--accent)}
.itm-row b{display:block; font-family:"Marcellus",serif; font-weight:400; font-size:15.5px; line-height:1.15; color:var(--g,var(--ink))}
.itm-row small{display:block; font-size:12px; color:var(--ink-3); line-height:1.35; margin-top:2px}
.itm-row .pc{font:500 11px "IBM Plex Mono",monospace; color:var(--ink-3); padding:2px 6px; border-radius:999px; border:1px solid var(--rule-2); white-space:nowrap}
.itm-more{margin-top:10px; width:100%}
.itm-none{padding:18px 4px; color:var(--ink-3)}

.itm-detail{position:sticky; top:92px; padding:20px 22px 22px; border-radius:14px; background:var(--card); border:1px solid var(--card-b); box-shadow:var(--shadow); min-height:220px; max-height:calc(100vh - 116px); overflow:auto; scroll-margin-top:96px}
.itm-detail .hd{display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:center}
.itm-detail .hd img,.itm-detail .hd .noi{border-radius:10px}
.itm-detail .k{font:500 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.itm-detail h2{font-family:"Marcellus",serif; font-weight:400; font-size:26px; line-height:1.1; margin:3px 0 0; color:var(--g,var(--ink))}
.itm-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.itm-tags span{font:500 12px "IBM Plex Mono",monospace; color:var(--ink-2); padding:3px 9px; border-radius:999px; border:1px solid var(--rule-2)}
.itm-detail h3{font-family:"Marcellus",serif; font-weight:400; font-size:17px; margin:20px 0 6px; color:var(--ink)}
.itm-detail h3 small{font:400 12px "IBM Plex Sans",sans-serif; color:var(--ink-3); margin-left:6px}
.itm-st{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.itm-st li{display:flex; justify-content:space-between; gap:16px; padding:6px 2px; border-bottom:1px solid var(--rule); font-size:14.5px; color:var(--ink-2)}
.itm-st b{font-weight:600; color:var(--ink); text-align:right}
.itm-meta{margin:0; font-size:14.5px; color:var(--ink-2)}
.itm-link{margin:18px 0 0; font-size:14px; color:var(--ink-3)}
.itm-wait{margin:16px 0 0; color:var(--ink-3)}

@media (max-width:900px){
  .itm-layout{grid-template-columns:minmax(0,1fr)}
  .itm-detail{position:static; max-height:none}
}

.itm-desc{margin:14px 0 0; font-size:15px; color:var(--ink-2)}
.itm-refs{display:flex; flex-wrap:wrap; gap:6px}
.itm-ref{display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 5px; border-radius:999px; border:1px solid var(--rule-2); font-size:13.5px; color:var(--g,var(--ink-2)); text-decoration:none}
.itm-ref:hover{border-color:var(--accent)}
.itm-ref img,.itm-ref .noi{border-radius:6px}
.itm-ref i{font:500 11px "IBM Plex Mono",monospace; color:var(--ink-3); font-style:normal}