/* Shared by the sheet (index.html) and the hub (edit.html): the equipment panel. */
/* Inventory: equipment tiles + one slot at a time */
.invlay{display:grid;grid-template-columns:minmax(17rem,20rem) minmax(0,1fr);gap:1.25rem;align-items:start}
.doll{padding:.7rem}
.doll .grp{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin:.9rem 0 .4rem;padding-bottom:.25rem;border-bottom:1px solid var(--rule)}
.doll .grp:first-child{margin-top:0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.tiles.three{grid-template-columns:1fr 1fr 1fr}
.tile{font:inherit;display:flex;align-items:center;gap:.55rem;padding:.45rem .55rem;border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink);cursor:pointer;text-align:left;min-width:0;position:relative}
.tile .ico{flex:0 0 auto;width:2.2rem;height:2.2rem;display:grid;place-items:center;border-radius:6px;background:var(--surface);color:var(--ink-soft)}
.tile .ico svg{width:1.7rem;height:1.7rem;fill:currentColor;display:block}
.tile .tl{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.tile .tl b{font-weight:500;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .tl small{font-size:.8rem;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .cnt{position:absolute;top:-.4rem;right:-.3rem;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:999px;background:var(--ink);color:var(--paper);font-size:.75rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--paper)}
.tile .cnt[hidden]{display:none}
.tile.has{border-color:var(--gilt)}
.tile.has .ico{background:var(--gilt-wash);color:var(--gilt)}
.tile:hover{border-color:var(--ink-soft)}
.tile[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tile[aria-selected="true"] .ico{background:rgba(255,255,255,.12);color:var(--paper)}
.tile[aria-selected="true"] .tl small{color:var(--paper);opacity:.75}
.tile[aria-selected="true"] .cnt{background:var(--gilt);color:var(--ink);border-color:var(--ink)}
.tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.tiles.three .tile{flex-direction:column;text-align:center;gap:.3rem;padding:.55rem .3rem}
.tiles.three .tile .tl{align-items:center;width:100%}
.tile .tl b,.tile .tl small{max-width:100%}
.credit{font-size:.78rem;color:var(--ink-soft);margin:.8rem 0 0}
.credit a{color:inherit}
.slot-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin:0 0 .6rem}
.slot-head h3{margin:0;border:0;padding:0;font-size:1.4rem}
.slot-head .muted{font-size:.95rem}
.empty-slot{padding:1.2rem;border:1px dashed var(--rule);border-radius:8px;color:var(--ink-soft);text-align:center}
.vitem{background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:.8rem 1rem;margin-bottom:.6rem}
.vitem h4{font-family:var(--display);font-weight:400;font-size:1.2rem;margin:0}
.vitem .vmeta{color:var(--ink-soft);font-size:.92rem;margin:.1rem 0 .4rem;display:flex;gap:.3rem .9rem;flex-wrap:wrap}
.vitem p{margin:0;max-width:none}
@media (max-width: 760px){
  .invlay{grid-template-columns:1fr}
}