/* The «Инвентарь» tab of the account pages (account/inventory.js): «Покупки в пути» — the notice strip, the two
   tabs, the search and the table of paid skins the store still has to hand over in Steam — then the Steam inventory
   panel (tools, notices, cards, states) and the sticky «Выбрано N · Продать» bar. The cards reuse the «Продать»
   page's tile primitives (pages/sell.css .sell-tile*); the row thumbnails reuse the shared .asset-thumb
   (pages/cart.css). Flat CSS, no nesting. Breakpoints: mobile < 768, desktop >= 1100; the table folds into one
   card per row by the width of its own panel (@container), so it works beside anything. */

/* --- 1. «Покупки в пути» ------------------------------------------------------------------------------------- */
.pur { min-width: 0; padding: 18px 20px 22px; border-radius: var(--radius-xl); }
.pur__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
.pur__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.pur__count { margin: 0; font-size: var(--fs-sm); line-height: 1.4; font-variant-numeric: tabular-nums; }
.pur__count:empty { display: none; }

/* the strip: what this list is, the rules in force, and the only two actions that do something real */
.pur-note {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px 16px;
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.pur-note__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent-ink);
}
.pur-note__text { display: grid; gap: 6px; min-width: 0; }
.pur-note__text p { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.5; }
.pur-note__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pur__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 16px; }
.pur__tabs { flex: none; }
.pur__tab { gap: 8px; }
.pur__tabn {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}
.pur__tab[aria-pressed='true'] .pur__tabn { background: rgba(255, 255, 255, .22); color: #FFFFFF; }
.pur__search { flex: 1 1 240px; min-width: 0; }
.pur__search .input { min-height: 46px; border-radius: 13px; }
/* nothing on its way: the tabs keep their counts, but there is nothing to search */
.pur__tools.is-idle .pur__search { display: none; }

.pur__body { container-type: inline-size; margin-top: 14px; }
.pur__state { padding: 40px 16px; }

/* the table: НАЗВАНИЕ СКИНА · ID · ИГРА · СУММА · ДОСТУПЕН · СТАТУС · ДЕЙСТВИЕ */
.pur-t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pur-t th {
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.pur-t td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); vertical-align: middle; }
.pur-t tr:last-child td { border-bottom: 0; }
.pur-t th:last-child, .pur-t td:last-child { padding-right: 0; }
/* the two columns that carry words keep a floor, so a narrow panel squeezes the picture and the paddings first */
.pur-t__name { min-width: 178px; }
.pur-t__status { min-width: 150px; }
.pur-t__id, .pur-t__game, .pur-t__float, .pur-t__ready { color: var(--ink-2); white-space: nowrap; }
.pur-t__float { font-variant-numeric: tabular-nums; }
.pur-t__sum, th.pur-t__sum { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pur-t__sum { font-weight: 600; }
.pur-t__act, th.pur-t__act { text-align: right; }
.pur-t__lbl { display: none; }   /* shown when a row folds into a card (@container below) */

.pur-row__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pur-row__thumb { flex: none; width: 56px; border-radius: 10px; }
.pur-row__text { display: grid; gap: 2px; min-width: 0; }
.pur-row__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}
.pur-row__order { color: var(--ink-3); font-size: var(--fs-xs); }
.pur-row__game { display: inline-flex; align-items: center; gap: 7px; }
/* the two marks keep their own proportions (the CS2 one is twice as wide as it is tall) */
.pur-row__logo { flex: none; height: auto; }
.pur-row__logo.game-logo--cs2 { width: 26px; color: #C98A00; }
.pur-row__logo.game-logo--dota2 { width: 18px; }
.pur-row__status { margin: 0; line-height: 1.35; }
.pur-row__until { display: block; margin-top: 2px; padding-left: 16px; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.35; }
.pur-row__none { color: var(--ink-3); }
.pur-row__accept { white-space: nowrap; }

/* A table that still fits but has little room to spare. The picture and the paddings give way first; then two
   columns give up their WORDS, not their data — ИГРА keeps its mark and ДЕЙСТВИЕ its verb, while the words they
   drop stay in the accessibility tree (clipped, not display:none, and the link carries its own aria-label), so a
   screen reader still hears «Игра: Dota 2» and «Принять в Steam: …». Nothing is hidden from anyone. */
@container (max-width: 1039.98px) {
  .pur-t th, .pur-t td { padding-right: 10px; }
  .pur-t__id { font-size: var(--fs-xs); }
  .pur-row__thumb { width: 44px; }
  .pur-row__item { gap: 8px; }
  .pur-row__game { gap: 0; }
  .pur-row__gamename,
  .pur-row__accept-in {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* A narrow panel (a phone, or this tab beside anything else): every row becomes a small card — the name with the
   sum beside it, then ID with the day it becomes available, the game with the float, the status line, and the
   action last. The float shares its row with the game, so a row without one leaves no empty line. */
@container (max-width: 759.98px) {
  .pur-t thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .pur-t, .pur-t tbody { display: block; width: 100%; }
  .pur-t tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name sum' 'id ready' 'game float' 'status status' 'act act';
    align-items: center;
    gap: 6px 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .pur-t tr:last-child { border-bottom: 0; }
  .pur-t td { display: block; padding: 0; border: 0; }
  .pur-t__name { grid-area: name; }
  .pur-t__id { grid-area: id; font-size: var(--fs-xs); }
  .pur-t__game { grid-area: game; font-size: var(--fs-xs); }
  .pur-t__float { grid-area: float; text-align: right; font-size: var(--fs-xs); }
  .pur-t__sum { grid-area: sum; }
  .pur-t__ready { grid-area: ready; text-align: right; font-size: var(--fs-xs); }
  .pur-t__status { grid-area: status; margin-top: 2px; }
  .pur-t__act { grid-area: act; text-align: left; }
  .pur-t__act:has(.pur-row__none) { display: none; }
  .pur-t__float.is-empty { display: none; }   /* .pur-t__game holds the row open, so no gap is left behind */
  .pur-t__lbl { display: inline; color: var(--ink-3); font-weight: 400; }
  .pur-row__logo.game-logo--cs2 { width: 22px; }
  .pur-row__logo.game-logo--dota2 { width: 15px; }
  .pur-row__accept { width: 100%; justify-content: center; margin-top: 4px; }
  /* a card has the room the narrow TABLE did not: the game and the action say their words again */
  .pur-row__game { gap: 7px; }
  .pur-row__gamename,
  .pur-row__accept-in {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
}

/* --- 2. the Steam inventory panel --------------------------------------------------------------------------- */
.inv { min-width: 0; padding: 18px 20px 22px; border-radius: var(--radius-xl); }
.inv__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.inv__heading { display: grid; gap: 3px; min-width: 0; }
.inv__title { margin: 0; font-size: var(--fs-lg); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.inv__lead { margin: 0; max-width: 58ch; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; }
.inv__count { margin: 0; font-size: var(--fs-sm); line-height: 1.4; }
.inv__count:empty { display: none; }
.inv__refresh { display: flex; align-items: center; gap: 10px; min-height: 36px; }
.inv__refresh:empty { display: none; }
.inv__refresh-btn[disabled] { opacity: .6; }
.inv__stamp { font-size: var(--fs-xs); white-space: nowrap; }
.inv__stamp:empty { display: none; }

.inv__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 14px; }
.inv__games { height: 46px; }
.inv__search { flex: 1 1 240px; min-width: 0; }
.inv__search .input { min-height: 46px; border-radius: 13px; }
.inv__sort { flex: 0 1 320px; min-width: 220px; }
.inv__sort .select { width: 100%; min-height: 46px; border-radius: 13px; }
.inv__switch { flex: none; gap: 10px; font-size: var(--fs-sm); }
.inv__switch .switch__label { font-size: var(--fs-sm); }
/* a hidden / empty inventory or an error on screen: only the game switch is of use */
.inv__tools.is-idle .inv__search,
.inv__tools.is-idle .inv__sort,
.inv__tools.is-idle .inv__switch { display: none; }

.inv__note { margin: 12px 0 0; border-radius: var(--radius-md); line-height: 1.5; }
.inv__note-retry { padding: 0; font: inherit; font-weight: 600; color: inherit; text-decoration: underline; }

/* the list takes focus after «Повторить» / «Снять выбор» */
.inv__grid { border-radius: 16px; }
.inv__grid:focus-visible { outline-offset: 4px; }
.inv__state { padding: 44px 16px; }
.inv__more { display: flex; justify-content: center; margin-top: 16px; }

/* --- cards: the «Продать» tile + rarity line, trade badge, «Продать» link ----------------------------------- */
.inv-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 184px), 1fr)); }
/* the card: the tile takes the height of the grid row (its last row — the price — takes what is left); on phones the
   «Продать» link sits under the tile, inside the card */
.inv-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* (.inv-card + class: pages/sell.css, linked after this file, sets .sell-tile's own height and rows) */
/* media · name · sub · badges · price (the last row takes what is left) */
.inv-card .inv-card__tile { flex: 1 1 auto; height: auto; grid-template-rows: auto auto auto auto 1fr; gap: 3px; }
.inv-card.is-off .inv-card__tile { cursor: default; }
.inv-card.is-off .sell-tile__check:disabled + .sell-tile__box { display: none; }
/* the rarity colour Steam gives the item is drawn as a hairline under the picture by the shared tile
   (pages/sell.css .sell-tile__media::after), which reads the --rarity this card sets */
.inv-card__amount {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(25, 27, 32, .78);
  color: #FFFFFF;
  font-size: var(--fs-xs);
  font-weight: 600;
}
/* the name takes two lines on every card (pages/sell.css clamps it there), so the lines under it align */
.inv-card .sell-tile__name { min-height: 2.6em; }
.inv-card__badges { display: flex; flex-wrap: wrap; align-items: flex-start; align-self: start; gap: 4px; margin-top: 4px; }
.inv-card__badges .badge { min-height: 20px; padding: 0 6px; font-size: 11px; }
.inv-card .inv-card__price { margin-top: 6px; }
.inv-card .inv-card__nobuy { align-self: end; margin-top: 8px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.35; color: var(--ink-3); }
.sell-tile__hint { display: block; font-size: 11px; font-weight: 400; line-height: 1.3; color: var(--ink-3); }
.inv-card__sell {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--accent-ink);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.inv-card__sell:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent); }
.inv-card__sell:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* --- the sticky bar ------------------------------------------------------------------------------------------ */
.inv-bar-slot { position: sticky; bottom: 12px; z-index: 5; margin-top: 16px; pointer-events: none; }
.inv-bar-slot:empty { display: none; }
.inv-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px 12px 18px;
  border-radius: var(--radius-lg);
  background: var(--rail-bg, #191B20);
  color: #FFFFFF;
  box-shadow: 0 18px 40px -16px rgba(25, 27, 32, .55);
  pointer-events: auto;
}
.inv-bar__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-size: var(--fs-sm); }
.inv-bar__text b { font-weight: 600; }
.inv-bar__sum { color: rgba(255, 255, 255, .72); }
.inv-bar__sum .t-num { color: #FFFFFF; font-weight: 600; }
.inv-bar__actions { display: flex; align-items: center; gap: 8px; }
.inv-bar .btn--ghost { color: rgba(255, 255, 255, .85); }
.inv-bar .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; }

/* --- responsive ------------------------------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
  .inv, .pur { padding: 14px 12px 16px; border-radius: var(--radius-lg); }
  /* the strip's two actions take their own row under the text, side by side while they fit */
  .pur-note { grid-template-columns: 38px minmax(0, 1fr); padding: 12px 14px; }
  .pur-note__actions { grid-column: 1 / -1; }
  .pur-note__actions .btn { flex: 1 1 160px; justify-content: center; }
  .pur__tabs { width: 100%; }
  .pur__tab { flex: 1 1 0; min-width: 0; padding: 0 10px; }
  .pur__tab > span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .pur__search { flex: 1 1 100%; }
  .pur__state { padding: 32px 8px; }
  .inv__head { flex-direction: column; align-items: stretch; }
  .inv__refresh { justify-content: space-between; }
  /* its own full-width row under the search (as on «Продать»): squeezed beside it the select overflowed the page */
  .inv__sort { flex: 1 1 100%; min-width: 0; }
  .inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* the corner link would cover the name on narrow cards: it moves under the tile as a text link */
  .inv-card__sell { position: static; justify-content: center; width: 100%; min-height: 32px; margin-top: 6px; border-radius: 10px; }
  .inv-bar-slot { bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .inv-bar { padding: 10px 12px 10px 14px; }
  .inv-bar__actions { flex: 1 1 100%; justify-content: flex-end; }
}
/* the support chat launcher (56 px, 24 px from the bottom right corner) shares that corner: the bar stops short of it */
body:has(> .support-launcher) .inv-bar { margin-right: 68px; }