/* Inventory panel (src/ui/inventory-view.mjs): on Backpack, two tiles (the
   load on a bar, the purse), a card for each kind of thing carried and one
   for what lies nearby; on Stashes a card each with its reach; the rows are
   shared with the slot picker in the item dialog. Equipment: two tiles (the
   armour, the damage), then the full figure with its places laid on it.
   Tokens from tokens.css. */
/* The panel pads its body already; the sections line up with the tabs, as on the other panels. */
.panel-body .inventory-content{padding:0;overflow:visible}
.inventory-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 0 14px;border:1px solid var(--stone-700);background:var(--stone-700)}
.inventory-tiles.single{grid-template-columns:minmax(0,1fr)}
.inventory-tile{display:grid;align-content:start;gap:3px;min-width:0;padding:10px 12px;background:var(--surface)}
.inventory-tile>small{color:var(--muted);font:600 var(--size-tiny)/1.3 var(--head);letter-spacing:.12em;text-transform:uppercase}
.inventory-tile>b{color:var(--text);font:500 var(--size-title)/1.1 var(--head);font-variant-numeric:tabular-nums}
.inventory-tile>b i{font-style:normal;color:var(--muted);font-size:var(--size-small)}
.inventory-tile>.tile-note{color:var(--text-dim);font:var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.inventory-tile>.tile-over{color:var(--danger);font:500 var(--size-caption)/1.35 var(--head)}
.inventory-tile.over>b{color:var(--danger)}
.load-meter{display:block;height:5px;margin-top:4px;background:linear-gradient(90deg,var(--accent-600),var(--accent)) 0 0/var(--fill,0%) 100% no-repeat,var(--stone-850)}
.inventory-tile.over .load-meter{background:var(--danger)}
.purse{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;margin:0;color:var(--muted);font:var(--size-small)/1.3 var(--head)}
.purse b{color:var(--text);font:500 var(--size-title)/1.1 var(--head);font-variant-numeric:tabular-nums}
.inventory-head{display:flex;align-items:center;gap:var(--space-4);margin:0;padding-bottom:8px;border-bottom:1px solid var(--stone-850)}
.inventory-card .inventory-head h2{min-width:0;margin:0;color:var(--accent);overflow-wrap:anywhere}
.inventory-head small{margin-left:auto;color:var(--muted);font:500 var(--size-caption) var(--head);text-align:right;overflow-wrap:anywhere}
.inventory-head .stash-reach+small{margin-left:0}
.stash-reach{margin-left:auto;padding:1px 6px;border:1px solid var(--ok);color:var(--ok);font:600 var(--size-micro)/1.5 var(--head);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.stash-reach.far{border-color:var(--stone-600);color:var(--muted)}
.stash-card.remote{opacity:1}
.stash-card .stash-where{margin:6px 0 2px;color:var(--text-dim);font:var(--size-caption)/1.4 var(--head);overflow-wrap:anywhere}
.item-card .empty{margin:0;padding-top:10px}
.item-card>.empty:first-child{padding-top:0}
.item-group{display:grid}
.item-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:var(--space-5);width:100%;min-height:60px;margin:0;padding:8px 2px;border:0;border-top:1px solid var(--stone-850);border-radius:0;background:none;color:inherit;text-align:left}
.inventory-head+.item-row,.stash-where+.item-row,.item-group>.item-row:first-child{border-top:0}
.item-row:hover,.item-row:focus-visible{background:var(--accent-950)}
.item-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.item-tile{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:var(--surface-low)}
.item-row.equipped .item-tile{border-color:var(--accent);background:var(--accent-950)}
.item-glyph{display:block;width:28px;height:28px;fill:var(--accent-450)}
.item-row.equipped .item-glyph{fill:var(--accent)}
.item-glyph.dim{fill:var(--stone-700)}
.item-row-name{display:grid;gap:2px;min-width:0}
.item-row-name b{color:var(--text);font:500 var(--size-small)/1.3 var(--head);overflow-wrap:anywhere}
.item-row-name small{color:var(--text-dim);font:var(--size-caption)/1.35 var(--head);overflow-wrap:anywhere}
.item-row-name small i{font-style:normal;color:var(--accent-300)}
.item-row-name .item-claim{color:var(--muted)}
.item-row-name .item-claim.owned{color:var(--danger)}
.item-row-meta{display:grid;justify-items:end;gap:2px;color:var(--muted);font:var(--size-caption)/1.3 var(--head);font-variant-numeric:tabular-nums;white-space:nowrap}
.item-row-meta b{color:var(--text-soft);font:500 var(--size-small)/1.2 var(--head)}
.pill{font:600 var(--size-micro) var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--on-accent);background:var(--accent);border-radius:var(--radius-xs);padding:2px 5px;max-width:140px;overflow:hidden;text-overflow:ellipsis}
/* Equipment: the figure with its places laid on it, each a tile with its
   name and what is in it, the worn ones down the left, rings and what is held
   down the right; the rest at hand below as chips. */
.gear-figure{position:relative;overflow:hidden;width:100%;max-width:440px;aspect-ratio:9/15;min-height:calc(var(--rows,6) * 88px);margin:0 auto;border:1px solid var(--stone-700);border-radius:var(--ledger-radius,2px);background:radial-gradient(ellipse at 50% 35%,var(--surface-warm-high),var(--surface-low) 70%)}
.gear-figure-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.gear-figure-shape{position:absolute;left:50%;top:46%;width:72%;height:80%;transform:translate(-50%,-50%);fill:var(--stone-850)}
.gear-figure::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--bg-rgb) / .72),transparent 30%,transparent 70%,rgb(var(--bg-rgb) / .72));pointer-events:none}
.gear-figure-hint{position:absolute;left:24%;right:24%;bottom:14px;z-index:1;margin:0;color:var(--muted);font:var(--size-caption)/1.4 var(--head);text-align:center}
.gear-pin{position:absolute;z-index:1;display:grid;justify-items:center;align-content:start;gap:1px;width:68px;min-height:44px;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;text-align:center;transform:translateY(-50%)}
.gear-pin.l{left:6px}
.gear-pin.r{right:6px}
.gear-pin-tile{display:grid;place-items:center;width:48px;height:48px;border:1px dashed var(--stone-500);border-radius:var(--ledger-radius,2px);background:rgb(var(--surface-low-rgb) / .62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.gear-pin.filled .gear-pin-tile{border:1px solid var(--accent-600);background:rgb(var(--surface-low-rgb) / .84)}
.gear-pin .item-glyph{width:28px;height:28px;fill:var(--stone-500)}
.gear-pin.filled .item-glyph{fill:var(--accent)}
.gear-pin small{color:var(--text);font:600 var(--size-micro)/1.25 var(--head);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 1px 3px var(--bg),0 0 8px var(--bg)}
.gear-pin b{max-width:68px;color:var(--text-soft);font:500 var(--size-micro)/1.2 var(--head);text-shadow:0 1px 3px var(--bg),0 0 8px var(--bg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.gear-pin .gear-layer{max-width:68px;color:var(--text-soft);font:italic 400 var(--size-micro)/1.15 var(--head);text-shadow:0 1px 3px var(--bg),0 0 8px var(--bg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gear-pin:hover,.gear-pin:focus-visible{border-color:transparent;outline:none}.gear-pin:focus-visible .gear-pin-tile{outline:2px solid var(--accent);outline-offset:2px}
.gear-pin:hover .gear-pin-tile,.gear-pin:focus-visible .gear-pin-tile{border-color:var(--accent);background:var(--accent-950)}
.gear-pin:focus-visible .gear-pin-tile{outline:2px solid var(--accent);outline-offset:2px}
.gear-group{display:flex;align-items:baseline;margin:16px 0 8px;color:var(--accent);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.16em;text-transform:uppercase}
.gear-group small{margin-left:auto;color:var(--muted);font:500 var(--size-caption) var(--head);letter-spacing:0;text-transform:none}
.gear-hand{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.gear-chip{display:flex;align-items:center;gap:var(--space-3);min-width:44px;min-height:44px;max-width:100%;margin:0;padding:0 10px 0 6px;border:1px dashed var(--stone-600);border-radius:var(--ledger-radius,2px);background:var(--surface-low);color:var(--muted);font:500 var(--size-caption)/1.3 var(--head);text-align:left}
.gear-chip.filled{border:1px solid var(--stone-700);color:var(--text-soft)}
.gear-chip:hover,.gear-chip:focus-visible{border-color:var(--accent);background:var(--accent-950)}
.gear-chip:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.gear-chip .item-glyph{flex:none;width:24px;height:24px;fill:var(--stone-500)}
.gear-chip.filled .item-glyph{fill:var(--accent)}
.gear-chip span{min-width:0;overflow-wrap:anywhere}
.gear-chip i{font-style:normal;color:var(--muted)}
.gear-hint{margin:14px 0 0;color:var(--muted);font:var(--size-caption)/1.4 var(--head);text-align:center}
/* The item dialog: the picture with its kind, where it is and its numbers,
   what it is like, then its facts ruled like a ledger; and the slot picker. */
.item-hero{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:var(--space-6);margin:0 0 4px}
.item-hero .item-tile{width:56px;height:56px}
.item-hero .item-glyph{width:36px;height:36px}
.item-hero.equipped .item-tile{border-color:var(--accent);background:var(--accent-950)}
.item-hero.equipped .item-glyph{fill:var(--accent)}
.item-hero small{display:block;color:var(--muted);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase;overflow-wrap:anywhere}
.item-hero .item-stats{display:block;margin-top:3px;color:var(--accent-300);font:500 var(--size-small)/1.35 var(--head);overflow-wrap:anywhere}
.item-detail .item-description{margin:6px 0 4px;color:var(--text-soft);font-family:var(--read-font);font-size:calc(var(--read-scale) * var(--size-body));line-height:1.5;overflow-wrap:anywhere}
.item-facts{margin:0;padding:0;list-style:none;border-top:1px solid var(--stone-750)}
.item-facts li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-6);padding:7px 0;border-bottom:1px solid var(--stone-850);font:var(--size-caption)/1.4 var(--head)}
.item-facts span{flex:none;color:var(--muted);font:600 var(--size-tiny)/1.4 var(--head);letter-spacing:.1em;text-transform:uppercase}
.item-facts b{min-width:0;color:var(--text-soft);font-weight:500;text-align:right;overflow-wrap:anywhere}
.item-facts li.owned b{color:var(--danger)}
#item-actions{flex-wrap:wrap}
#item-actions button{min-height:44px;border-radius:var(--ledger-radius,2px)}
#item-actions button.danger{border-color:var(--danger-700);color:var(--danger)}
#item-actions .item-destroy-ask{flex-basis:100%;margin:0 0 4px;color:var(--text-soft)}
.item-detail .item-group{margin-top:6px}
.item-detail .item-contents{margin:1.33em 0 .4em;font-size:1em}