/* ============================================================================
   My Inventory modal (html/inventory/partial/modal.html) — the player's own shelf
   of files. The panel is the shared asset-modal skin (.regen-card, asset_modal.css);
   the meter, "+", tabs and "?" tip are the shared .meter-bar / .btn-plus /
   .filter-tab / .tip-help + .ide-tip (global.css). This file adds only the wide size
   and the modal's own layout. Loaded on EVERY page (base.html) because it opens from
   the header dropdown.
   ============================================================================ */

/* A wide, tall panel (it will hold a grid of asset cards): a fixed 760px, or the screen's height on
   a shorter one. The head stays put and the body fills the rest and scrolls. */
.inventory-card {
  width: 960px;
  height: min(760px, calc(100dvh - 44px));
  display: flex;
  flex-direction: column;
}
.inventory-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* ---- the header: the title with the room meter UNDER it (a small neon bar, "114 KB / 20 MB",
   and the "?" chip), the ✕ on the right ---- */
.inventory-card .regen-head { gap: 14px; }
.inventory-heading {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.inventory-space {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.inventory-meter { width: 120px; height: 12px; }
.inventory-space-label {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--color-text-dim);
  white-space: nowrap;
}
/* the "?" chip's tip opens DOWNWARD, from the chip's left edge (it sits under the title) */
.inventory-help { position: relative; display: inline-flex; }
.inventory-tip { bottom: auto; top: calc(100% + 10px); width: 290px; transform: translateY(-6px); }
.inventory-tip-line { display: block; }
.inventory-tip-format { white-space: nowrap; }
.inventory-tip-line + .inventory-tip-line { margin-top: 5px; }

/* ---- toolbar: the kind tabs on the left, the "+" on the right ---- */
.inventory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.inventory-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---- why the "+" is gone (the shelf is full, or file saving is off) ---- */
.inventory-reason {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-pink-light);
}

/* ---- picking for a new game (the wizard): how many are picked, and DONE under the scrolling
   body, always in reach (the shared .regen-actions row, holding just the one button, on the right) ---- */
.inventory-pick-note {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--color-text-dim);
}
.inventory-pick-done {
  flex: none;
  justify-content: flex-end;
  margin: 0;
  padding: 0 18px 18px;
}

/* ---- the cards (the shared .tv-grid of shared asset cards) ---- */
.inventory-grid { margin-top: 18px; }
.inventory-grid:empty { display: none; }

/* ---- the empty shelf: one friendly line in a dashed well that fills the rest of the body ---- */
.inventory-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 18px;
  padding: 44px 20px;
  border: 2px dashed #3a3670;
  text-align: center;
}
.inventory-empty-title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-pink-light);
}
.inventory-empty-text {
  margin: 0 auto;
  max-width: 440px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.35;
  color: var(--color-muted);
}

/* Phones: the panel takes the whole screen (a grid of cards needs every pixel), the meter is a
   little shorter, the tabs shrink to fit two rows at most, and the empty well is less tall. */
@media (max-width: 560px) {
  .inventory-meter { width: 90px; }
  .inventory-space-label { font-size: 15px; }
  .inventory-card .filter-tab { font-size: 9px; padding: 9px 11px; }
  .modal-inventory { padding: 0; }
  .inventory-card { height: 100dvh; border-width: 3px; }
  .inventory-empty { flex: none; padding: 30px 16px; }
}