/* =====================================================================================================================
   Supplies window (js/ui/pages/shop.js). Needs css/ui-tokens.css + css/ui-kit.css. Scoped to [data-win="shop"].
   Wide: depot panel (left) + two product cards side by side. Medium (tablet / phone landscape): depot panel + one
   column of cards. Narrow (portrait): everything in one column. The body is one .gscroll.
   ===================================================================================================================== */

[data-win="shop"] .sh {
  container: sh / inline-size;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
[data-win="shop"] .sh-grid {
  display: grid;
  grid-template-columns: minmax(calc(280 * var(--u)), calc(360 * var(--u))) minmax(0, 1fr);
  gap: calc(14 * var(--u));
  align-items: start;
  max-width: calc(1500 * var(--u));
}
[data-win="shop"] .sh-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(14 * var(--u));
  align-items: stretch;
}
[data-win="shop"] .sh .gcard {
  padding: calc(16 * var(--u));
}

/* ------------------------------------------------------------------------------------------------- depot panel */
[data-win="shop"] .sh-depot {
  display: flex;
  flex-direction: column;
  gap: calc(14 * var(--u));
  --bd: var(--line-strong);
}
[data-win="shop"] .sh-depot.is-away {
  --fill:
    var(--hazard-dim) 0 0 / 100% calc(4 * var(--u)) no-repeat,
    linear-gradient(180deg, var(--text-a04), transparent 70%),
    var(--panel2-a90);
}
[data-win="shop"] .sh-depot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(8 * var(--u));
}
[data-win="shop"] .sh-sign {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  min-width: 0;
}
[data-win="shop"] .sh-sign-glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(56 * var(--u));
  height: calc(56 * var(--u));
  color: var(--accent);
  background: var(--accent-a08);
  clip-path: polygon(calc(10 * var(--u)) 0, 100% 0, 100% calc(100% - calc(10 * var(--u))), calc(100% - calc(10 * var(--u))) 100%, 0 100%, 0 calc(10 * var(--u)));
}
[data-win="shop"] .sh-sign-glyph .gglyph {
  width: 60%;
  height: 60%;
}
[data-win="shop"] .sh-sign-txt {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
[data-win="shop"] .sh-sign-txt b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.2;
}
[data-win="shop"] .sh-sign-txt small {
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: 1.3;
}
[data-win="shop"] .sh-wallet {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  background: var(--text-a04);
  border-left: 2px solid var(--accent);
}
[data-win="shop"] .sh-wallet small {
  font-size: var(--fs-sm);
  color: var(--dim);
}
[data-win="shop"] .sh-wallet b {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--accent);
}
[data-win="shop"] .sh-status {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
}
[data-win="shop"] .sh-status.is-open {
  flex-direction: row;
  align-items: flex-start;
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  font-size: var(--fs-sm);
  line-height: 1.45;
  background: var(--info-a10);
  box-shadow: inset 2px 0 0 var(--info);
}
[data-win="shop"] .sh-status.is-open .gglyph {
  flex: none;
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  color: var(--info);
}
[data-win="shop"] .sh-away-head {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}
[data-win="shop"] .sh-away-head .gglyph {
  flex: none;
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  color: var(--accent);
}
[data-win="shop"] .sh-away-head b {
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.25;
  color: var(--accent);
}
[data-win="shop"] .sh-dist {
  font-size: var(--fs-xl);
  font-weight: 700;
}
[data-win="shop"] .sh-route {
  margin-top: calc(4 * var(--u));
}

/* ----------------------------------------------------------------------------------------------- product card */
[data-win="shop"] .sh-card {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--u));
}
[data-win="shop"] .sh-top {
  display: grid;
  grid-template-columns: calc(104 * var(--u)) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(14 * var(--u));
}
/* the item plate: consumables use the standard steel plate of the item cells */
[data-win="shop"] .sh-art {
  position: relative;
  display: block;
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  padding: calc(10 * var(--u));
  background:
    radial-gradient(70% 70% at 50% 40%, var(--r-std-a), transparent 75%),
    linear-gradient(180deg, var(--panel-3), var(--panel));
  box-shadow: inset 0 0 0 1px var(--line-strong);
  clip-path: polygon(calc(12 * var(--u)) 0, 100% 0, 100% calc(100% - calc(12 * var(--u))), calc(100% - calc(12 * var(--u))) 100%, 0 100%, 0 calc(12 * var(--u)));
}
[data-win="shop"] .sh-own {
  position: absolute;
  right: calc(6 * var(--u));
  bottom: calc(4 * var(--u));
  font-size: var(--fs-sm);
  font-weight: 700;
  text-shadow: 0 1px 2px #000, 0 0 4px #000;
}
[data-win="shop"] .sh-name {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(3 * var(--u));
  min-width: 0;
}
[data-win="shop"] .sh-name h3 {
  margin: 0;
  font-family: var(--f-head);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.2;
}
[data-win="shop"] .sh-use {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.3;
}
[data-win="shop"] .sh-use .gglyph {
  flex: none;
  width: calc(15 * var(--u));
  height: calc(15 * var(--u));
  color: var(--info);
}
[data-win="shop"] .sh-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(2 * var(--u));
  align-self: start;
}
[data-win="shop"] .sh-price small {
  font-size: var(--fs-label);
  color: var(--dim);
  white-space: nowrap;
}
[data-win="shop"] .sh-price b {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--accent);
}
[data-win="shop"] .sh-desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--dim);
  flex: 1 1 auto;
}
[data-win="shop"] .sh-qty {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(10 * var(--u));
  padding-top: calc(12 * var(--u));
  border-top: 1px solid var(--line);
}
[data-win="shop"] .sh-ql {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--dim);
  min-width: calc(54 * var(--u));
}
[data-win="shop"] .sh-presets {
  display: flex;
  gap: calc(6 * var(--u));
  margin-left: auto;
}
[data-win="shop"] .sh-pre {
  min-width: calc(48 * var(--u));
}
[data-win="shop"] .sh-pre.is-selected {
  --bd: var(--accent);
  color: var(--accent);
}
[data-win="shop"] .sh-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}
[data-win="shop"] .sh-sum {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
}
[data-win="shop"] .sh-total {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
}
[data-win="shop"] .sh-total small {
  font-size: var(--fs-sm);
  color: var(--dim);
}
[data-win="shop"] .sh-total b {
  font-size: var(--fs-title);
  font-weight: 700;
}
[data-win="shop"] .sh-after {
  font-size: var(--fs-label);
  color: var(--dim);
  line-height: 1.3;
}
[data-win="shop"] .sh-after.is-poor {
  color: var(--bad);
}
[data-win="shop"] .sh-buy {
  flex: none;
  min-width: calc(170 * var(--u));
}

/* ------------------------------------------------------------------------------------------------- phone tier */
html[data-tier="phone"] [data-win="shop"] .sh .gcard {
  padding: calc(12 * var(--u));
}
html[data-tier="phone"] [data-win="shop"] .sh-grid,
html[data-tier="phone"] [data-win="shop"] .sh-cards {
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] [data-win="shop"] .sh-depot,
html[data-tier="phone"] [data-win="shop"] .sh-card {
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] [data-win="shop"] .sh-top {
  grid-template-columns: calc(76 * var(--u)) minmax(0, 1fr) auto;
  gap: calc(10 * var(--u));
}
html[data-tier="phone"] [data-win="shop"] .sh-art {
  width: calc(76 * var(--u));
  height: calc(76 * var(--u));
  padding: calc(6 * var(--u));
}
html[data-tier="phone"] [data-win="shop"] .sh-name h3 {
  font-size: var(--fs-xl);
}
html[data-tier="phone"] [data-win="shop"] .sh-sign-glyph {
  width: calc(44 * var(--u));
  height: calc(44 * var(--u));
}
html[data-tier="phone"] [data-win="shop"] .sh-sign-txt b {
  font-size: var(--fs-lg);
}
html[data-tier="phone"] [data-win="shop"] .sh-sign {
  display: none;
}
html[data-tier="phone"] [data-win="shop"] .sh-wallet b {
  font-size: var(--fs-xl);
}
html[data-tier="phone"] [data-win="shop"] .sh-qty {
  padding-top: calc(10 * var(--u));
}

@container sh (max-width: 1180px) {
  [data-win="shop"] .sh-grid {
    grid-template-columns: minmax(calc(220 * var(--u)), calc(290 * var(--u))) minmax(0, 1fr);
  }
  [data-win="shop"] .sh-cards {
    grid-template-columns: minmax(0, 1fr);
  }
  html:not([data-tier="phone"]) [data-win="shop"] .sh-depot {
    position: sticky;
    top: 0;
  }
}
@container sh (max-width: 640px) {
  [data-win="shop"] .sh-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-win="shop"] .sh-depot {
    position: relative;
  }
  [data-win="shop"] .sh-presets {
    margin-left: 0;
  }
  [data-win="shop"] .sh-foot {
    flex-wrap: wrap;
  }
  [data-win="shop"] .sh-buy {
    flex: 1 1 100%;
  }
}

/* --- wide windows: tall product cards with a big item plate, the whole set centred in the window --- */
@container sh (min-width: 1181px) {
  [data-win="shop"] .sh {
    display: flex;
    flex-direction: column;
  }
  [data-win="shop"] .sh-grid {
    margin: auto;
    width: 100%;
    height: min(100%, calc(720 * var(--u)));
    min-height: min-content;
    align-items: stretch;
  }
  [data-win="shop"] .sh-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: minmax(calc(180 * var(--u)), 1fr) auto auto auto auto;
    grid-template-areas: "art art" "name price" "desc desc" "qty qty" "foot foot";
    gap: calc(14 * var(--u));
    padding: calc(20 * var(--u));
  }
  [data-win="shop"] .sh-top {
    display: contents;
  }
  [data-win="shop"] .sh-art {
    grid-area: art;
    width: 100%;
    height: 100%;
    padding: 12%;
    background:
      radial-gradient(50% 55% at 50% 50%, var(--r-std-a), transparent 75%),
      var(--grid-faint),
      linear-gradient(180deg, var(--panel-3), var(--panel));
    clip-path: polygon(calc(18 * var(--u)) 0, 100% 0, 100% calc(100% - calc(18 * var(--u))), calc(100% - calc(18 * var(--u))) 100%, 0 100%, 0 calc(18 * var(--u)));
  }
  [data-win="shop"] .sh-art > :first-child {
    max-width: calc(260 * var(--u));
    margin: 0 auto;
  }
  [data-win="shop"] .sh-own {
    right: calc(16 * var(--u));
    bottom: calc(12 * var(--u));
    font-size: var(--fs-xl);
  }
  [data-win="shop"] .sh-name { grid-area: name; }
  [data-win="shop"] .sh-price { grid-area: price; align-self: end; }
  [data-win="shop"] .sh-desc { grid-area: desc; }
  [data-win="shop"] .sh-qty { grid-area: qty; }
  [data-win="shop"] .sh-foot { grid-area: foot; }
  [data-win="shop"] .sh-name h3 {
    font-size: var(--fs-h1);
  }
  [data-win="shop"] .sh-wallet {
    margin-top: auto;
  }
}

/* depot hologram: a faint supply glyph that fills the tall depot column on wide windows only */
[data-win="shop"] .sh-holo {
  display: none;
}
@container sh (min-width: 1181px) {
  [data-win="shop"] .sh-holo {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    min-height: calc(120 * var(--u));
    color: var(--info);
    opacity: 0.07;
    background:
      radial-gradient(45% 45% at 50% 50%, var(--info-a22), transparent 70%),
      repeating-linear-gradient(0deg, rgba(57, 198, 217, 0.5) 0 1px, transparent 1px 4px);
    -webkit-mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent 75%);
    mask-image: radial-gradient(50% 50% at 50% 50%, #000 40%, transparent 75%);
  }
  [data-win="shop"] .sh-holo .gglyph {
    width: 55%;
    height: auto;
    aspect-ratio: 1;
  }
  [data-win="shop"] .sh-depot.is-away .sh-holo {
    color: var(--accent);
  }
}