/* =====================================================================================================================
   Inventory window "คลังไอเทม" (js/ui/pages/inventory.js, id 'inventory', layout 'list-detail'). Page agent P-INV.
   Tokens and components come from css/ui-tokens.css + css/ui-kit.css; this file only lays out the page (iv- prefix).
   Regions (windows.js): list = sort bar + item grid + weight foot; detail = item card + fixed actions (portrait: a
   bottom sheet opened by tapping a cell).
   ===================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------- list region */
.iv-tools {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  flex: none;
  margin-bottom: calc(8 * var(--u));
  min-width: 0;
}
.iv-tools .gseg {
  flex: 0 1 auto;
  min-width: 0;
}
.iv-tools .gseg > button {
  min-width: 0;
  padding-left: calc(14 * var(--u));
  padding-right: calc(14 * var(--u));
}
.iv-count {
  flex: none;
}
.iv-gridwrap {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 calc(-4 * var(--u));
}
.iv-grid {
  padding: calc(5 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u)) calc(5 * var(--u));
}
.iv-blank {
  pointer-events: none;
  opacity: 0.55;
}
.iv-blank .gc-slot {
  outline-color: var(--line-a60);
}
.iv-none {
  margin: calc(-6 * var(--u)) calc(8 * var(--u)) calc(10 * var(--u));
  text-align: center;
}

/* the tutorial's "equip your reward" item: a slow amber ring (the one loop the design allows for guidance) */
.gcell.iv-quest {
  --bd: var(--accent);
}
.gcell.iv-quest .gc-art::before {
  content: "";
  position: absolute;
  inset: -14%;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: iv-ping 1.6s var(--ease) infinite;
  pointer-events: none;
}
@keyframes iv-ping {
  0% {
    opacity: 0.85;
    transform: scale(0.82);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

.iv-foot {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  flex: none;
  padding-top: calc(10 * var(--u));
  margin-top: calc(2 * var(--u));
  border-top: 1px solid var(--line);
  font: 600 var(--fs-sm) / 1.2 var(--f-head);
  color: var(--dim);
  min-width: 0;
}
.iv-foot-l {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  flex: none;
  white-space: nowrap;
}
.iv-foot-l .gglyph {
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  color: var(--dim);
}
.iv-wbar {
  flex: 1 1 auto;
  min-width: calc(60 * var(--u));
}
.iv-wnum {
  flex: none;
  font-size: var(--fs-body);
  color: var(--text);
  white-space: nowrap;
}
.iv-wnum small {
  font-size: var(--fs-label);
  color: var(--dim);
  margin-left: 1px;
}
.iv-wnum.is-over {
  color: var(--bad);
}
.iv-legend {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  flex: none;
  margin-left: calc(6 * var(--u));
  font: 500 var(--fs-label) / 1 var(--f-body);
  color: var(--faint);
  white-space: nowrap;
}
.iv-legend .gc-eq {
  display: inline-grid;
}
.iv-lg-lock {
  display: inline-flex;
  margin-left: calc(8 * var(--u));
}
.iv-lg-lock .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  color: var(--dim);
}

/* -------------------------------------------------------------------------------------------------- detail region */
.iv-back {
  display: none;
}
.iv-dscroll {
  flex: 1 1 auto;
  min-height: 0;
  margin-right: calc(-6 * var(--u));
  padding-right: calc(8 * var(--u));
  /* a flex column so short screens can move the description below the numbers (order) */
  display: flex;
  flex-direction: column;
}
.iv-dscroll > * {
  flex: none;
}
.iv-titles {
  min-width: 0;
}
.iv-band {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-bottom: calc(10 * var(--u));
  min-width: 0;
}
.iv-band .g-eyebrow {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-hero {
  --rc: var(--r-std);
  --rc-a: var(--r-std-a);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: calc(176 * var(--u));
  padding: calc(18 * var(--u)) calc(16 * var(--u));
  margin-bottom: calc(12 * var(--u));
  flex: none;
}
.iv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  --c: var(--cut-md);
  -webkit-clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  background:
    linear-gradient(0deg, var(--rc) 0 2px, transparent 2px),
    radial-gradient(60% 70% at 50% 48%, var(--rc-a), transparent 75%),
    repeating-linear-gradient(90deg, var(--text-a04) 0 1px, transparent 1px calc(24 * var(--u))),
    var(--panel);
  box-shadow: inset 0 0 0 1px var(--line);
}
.iv-hero.r-tuned {
  --rc: var(--r-tuned);
  --rc-a: var(--r-tuned-a);
}
.iv-hero.r-special {
  --rc: var(--r-special);
  --rc-a: var(--r-special-a);
}
.iv-hero.r-top {
  --rc: var(--r-top);
  --rc-a: var(--r-top-a);
}
.iv-hero-art {
  /* absolute, so the picture's natural size never sizes the box (a 256 px image in an auto grid row overflowed) */
  position: absolute;
  inset: calc(22 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  display: block; /* not grid: a grid row would size to the picture again; object-fit centres it */
}
.iv-hero-art > img,
.iv-hero-art > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}
.iv-hero .gpips {
  position: absolute;
  left: calc(14 * var(--u));
  bottom: calc(12 * var(--u));
}
.iv-hero-tier {
  position: absolute;
  top: calc(10 * var(--u));
  left: calc(14 * var(--u));
  font: 700 var(--fs-sm) / 1 var(--f-num);
  color: var(--dim);
}
.iv-hero-qty {
  position: absolute;
  right: calc(14 * var(--u));
  bottom: calc(10 * var(--u));
  font: 700 var(--fs-xl) / 1 var(--f-num);
  color: var(--text);
}
.iv-hero-eq {
  position: absolute;
  top: calc(10 * var(--u));
  right: calc(12 * var(--u));
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font: 600 var(--fs-label) / 1 var(--f-head);
  color: var(--accent);
}
.iv-name {
  margin: 0;
  font: 600 var(--fs-title) / 1.2 var(--f-head);
  color: var(--text);
  overflow-wrap: anywhere;
}
.iv-type {
  margin: calc(2 * var(--u)) 0 0;
  font: 500 var(--fs-sm) / 1.4 var(--f-head);
  color: var(--info);
}
.iv-desc {
  margin: calc(6 * var(--u)) 0 0;
  font: 400 var(--fs-sm) / 1.55 var(--f-body);
  color: var(--dim);
}
.iv-cap {
  display: block;
  margin: 0 0 calc(6 * var(--u));
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* socket choice (weapons that fit more than one socket) */
.iv-sockets {
  margin-top: calc(14 * var(--u));
}
.iv-sockrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(150 * var(--u)), 1fr));
  gap: calc(8 * var(--u));
}
.iv-sock.gcard {
  display: grid;
  grid-template-columns: calc(46 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: var(--tap);
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  cursor: pointer;
}
.iv-sock .gcell {
  width: calc(46 * var(--u));
}
.iv-sock-t {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
.iv-sock-t small {
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--dim);
}
.iv-sock-t b {
  font: 500 var(--fs-sm) / 1.25 var(--f-head);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.iv-sock.is-selected {
  --bd: var(--accent);
}
.iv-sock.is-selected .iv-sock-t small {
  color: var(--accent);
}
.iv-sock.is-no {
  --fill: var(--hatch), var(--panel-a72);
}
.iv-sock.is-no .iv-sock-t b {
  color: var(--dim);
}
.iv-sock-x {
  position: absolute;
  top: calc(6 * var(--u));
  right: calc(6 * var(--u));
}
.iv-sock-x .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  color: var(--dim);
}

.iv-stats {
  margin-top: calc(14 * var(--u));
}
.iv-stats .gstat.iv-dps {
  margin-top: calc(4 * var(--u));
}
.iv-opts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 * var(--u));
  margin-top: calc(12 * var(--u));
}
.iv-opt {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--u));
  min-height: calc(30 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(8 * var(--u));
  font: 600 var(--fs-sm) / 1.2 var(--f-head);
  color: var(--text);
  background: linear-gradient(90deg, rgba(57, 198, 217, 0.16), rgba(57, 198, 217, 0.04));
  box-shadow: inset 2px 0 0 var(--info), inset 0 0 0 1px rgba(57, 198, 217, 0.28);
}
.iv-opt .gglyph {
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  color: var(--info);
  flex: none;
}
.iv-hint {
  margin: calc(12 * var(--u)) 0 0;
  font: 400 var(--fs-label) / 1.5 var(--f-body);
  color: var(--faint);
}
.iv-weight {
  margin-top: calc(14 * var(--u));
}
.iv-weight-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  margin-bottom: calc(6 * var(--u));
  font: 600 var(--fs-label) / 1.2 var(--f-head);
  color: var(--dim);
}
.iv-weight-h b {
  font-size: var(--fs-body);
  color: var(--text);
}
.iv-weight-h b small {
  font-size: var(--fs-label);
  color: var(--dim);
}
.iv-weight-h b.is-over {
  color: var(--bad);
}
.iv-note {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  margin-top: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u));
  font: 400 var(--fs-sm) / 1.45 var(--f-body);
  color: var(--dim);
  background: var(--text-a04);
  box-shadow: inset 2px 0 0 var(--line-strong);
}
.iv-note .gglyph {
  flex: none;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  margin-top: calc(2 * var(--u));
  color: var(--dim);
}
.iv-note.k-accent,
.iv-note.k-quest {
  color: var(--text);
  background: linear-gradient(90deg, rgba(255, 178, 30, 0.12), rgba(255, 178, 30, 0.02));
  box-shadow: inset 2px 0 0 var(--accent);
}
.iv-note.k-accent .gglyph,
.iv-note.k-quest .gglyph {
  color: var(--accent);
}
.iv-note.k-good {
  color: var(--text);
  background: var(--good-a14);
  box-shadow: inset 2px 0 0 var(--good);
}
.iv-note.k-good .gglyph {
  color: var(--good);
}

/* fixed actions under the scrolling card */
.iv-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(8 * var(--u));
  flex: none;
  padding-top: calc(12 * var(--u));
  margin-top: calc(4 * var(--u));
  border-top: 1px solid var(--line);
}
.iv-act-main {
  grid-column: 1 / -1;
  display: grid;
}
/* main + a single secondary action: the secondary takes the full row too */
.iv-actions > .gbtn:nth-child(2):last-child {
  grid-column: 1 / -1;
}
/* supplies carry no rarity: no pips on their cells */
.gcell.iv-supply .gpips {
  display: none;
}
.iv-actions .gbtn {
  width: 100%;
  min-width: 0;
}
.iv-act-main .gbtn {
  min-height: var(--tap-lg);
  font-size: var(--fs-lg);
}

.iv-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  color: var(--faint);
  text-align: center;
}
.iv-empty .gglyph {
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  opacity: 0.6;
}
.iv-empty p {
  margin: 0;
  font: 400 var(--fs-sm) / 1.5 var(--f-body);
}

/* ------------------------------------------------------------------------------------------- dismantle dialog body */
.iv-dlg {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  margin-bottom: calc(10 * var(--u));
}
.iv-dlg > .gcell {
  flex: none;
  width: calc(92 * var(--u));
}
.iv-dlg-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(6 * var(--u));
  min-width: 0;
}
.iv-dlg-t b {
  font: 600 var(--fs-lg) / 1.25 var(--f-head);
  color: var(--text);
}
.gd-body .iv-dlg-t p {
  margin: 0;
  color: var(--text);
}
.gd-body .iv-dlg-t p.iv-dlg-sub {
  font-size: var(--fs-sm);
  color: var(--dim);
}
.gd-body p.iv-dlg-warn {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--bad);
}

/* ------------------------------------------------------------------------------------------------- tiers / layouts */
html[data-tier="compact"] .iv-hero {
  height: calc(150 * var(--u));
}
html[data-tier="phone"] .iv-tools {
  gap: calc(6 * var(--u));
  margin-bottom: calc(6 * var(--u));
}
html[data-tier="phone"] .iv-tools .gseg > button {
  padding-left: calc(10 * var(--u));
  padding-right: calc(10 * var(--u));
}
html[data-tier="phone"] .iv-legend,
html[data-tier="phone"] .iv-foot-l span {
  display: none;
}
html[data-tier="phone"] .iv-foot {
  padding-top: calc(6 * var(--u));
}
/* phone: picture beside the name (square), numbers before the description */
html[data-tier="phone"] .iv-top,
html[data-orient="portrait"] .iv-top {
  display: grid;
  grid-template-columns: calc(96 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(12 * var(--u));
}
html[data-tier="phone"] .iv-hero,
html[data-orient="portrait"] .iv-hero {
  height: calc(96 * var(--u));
  padding: 0;
  margin: 0;
}
html[data-tier="phone"] .iv-hero-art,
html[data-orient="portrait"] .iv-hero-art {
  inset: calc(10 * var(--u));
}
html[data-tier="phone"] .iv-hero-eq,
html[data-orient="portrait"] .iv-hero-eq {
  top: calc(5 * var(--u));
  right: calc(5 * var(--u));
}
html[data-tier="phone"] .iv-hero-eq > span,
html[data-orient="portrait"] .iv-hero-eq > span {
  display: none;
}
html[data-tier="phone"] .iv-hero .gpips,
html[data-orient="portrait"] .iv-hero .gpips {
  left: calc(8 * var(--u));
  bottom: calc(8 * var(--u));
}
html[data-tier="phone"] .iv-hero-qty,
html[data-orient="portrait"] .iv-hero-qty {
  right: calc(8 * var(--u));
  bottom: calc(6 * var(--u));
  font-size: var(--fs-body);
}
html[data-tier="phone"] .iv-desc,
html[data-orient="portrait"] .iv-desc {
  order: 5;
  margin-top: calc(12 * var(--u));
}
html[data-tier="phone"] .iv-note,
html[data-orient="portrait"] .iv-note {
  order: 6;
}
html[data-tier="phone"] .iv-band {
  margin-bottom: calc(8 * var(--u));
}
html[data-tier="phone"] .iv-name {
  font-size: var(--fs-xl);
}
/* phone landscape: one row of actions; dismantle / workshop become icon buttons (long-press shows the tip) */
html[data-tier="phone"]:not([data-orient="portrait"]) .iv-actions {
  display: flex;
  padding-top: calc(8 * var(--u));
}
html[data-tier="phone"]:not([data-orient="portrait"]) .iv-act-main,
html[data-tier="phone"]:not([data-orient="portrait"]) .iv-actions > .gbtn {
  flex: 1 1 0;
  min-width: 0;
}
html[data-tier="phone"]:not([data-orient="portrait"]) .iv-act-main .gbtn {
  min-height: var(--tap);
  font-size: var(--fs-body);
}
html[data-tier="phone"]:not([data-orient="portrait"]) .iv-actions > :is(.iv-act-dm, .iv-act-ws) {
  flex: none;
  width: var(--tap);
  padding: 0;
  justify-content: center;
}
html[data-tier="phone"]:not([data-orient="portrait"]) :is(.iv-act-dm, .iv-act-ws) .gk-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html[data-tier="phone"]:not([data-orient="portrait"]) :is(.iv-act-dm, .iv-act-ws) .gk-g {
  margin: 0;
}

/* portrait: the detail is a bottom sheet (windows.js) closed by its own handle bar; .iv-back stays hidden (it only
   keeps the old backInventory act for tests) */
html[data-orient="portrait"] .iv-legend {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .gcell.iv-quest .gc-art::before {
    animation: none;
    opacity: 0.8;
    transform: none;
  }
}