.inventory-page { padding-bottom: 4rem; }
.inventory-intro { display: block; padding: 2.3rem 0 24px; border-bottom: 1px solid var(--line); }
.inventory-intro h1 { margin-top: 4px; }
.inventory-intro p { max-width: 680px; margin-top: 12px; color: var(--muted); }
.inventory-line-picker { display: grid; gap: 8px; }
.inventory-line-picker span, .inventory-search span { color: var(--muted); font: 700 12px var(--ui), sans-serif; letter-spacing: 0; text-transform: none; }
.inventory-line-picker select, .inventory-search input { width: 100%; min-height: 42px; padding: 12px 12px; color: var(--text); background: var(--ink2); border: 1px solid var(--line); border-radius: 4px; }

.inventory-owned-section { margin-top: 32px; }
.inventory-section-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inventory-section-heading h2 { font-size: 24px; }
.inventory-section-heading p { color: var(--muted); margin-top: 4px; }
.inventory-summary { display: flex; gap: 16px; flex-wrap: wrap; justify-content: flex-end; color: var(--muted); font-size: 12px; }
.inventory-summary strong { color: var(--text); font-size: 16px; margin-right: .22rem; }
.inventory-toolbar { display: grid; grid-template-columns: minmax(220px, 420px) 1fr; gap: 16px; align-items: end; padding: 16px 0; }
.inventory-search { display: grid; gap: 8px; }
.inventory-owned { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 310px; overflow: auto; padding: .15rem .2rem 8px 0; scrollbar-color: var(--line) var(--ink); }
/* Cards in one row share the height of the tallest (a "Craft · Trade" line
   makes one taller). The wrapper stretched but the card inside did not, which
   left ragged gaps under the shorter ones. */
.inventory-owned-item { min-width: 0; display: grid; }
.inventory-owned-item > .inventory-item-link { height: 100%; }
.inventory-item-link { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; min-width: 0; padding: 8px 12px; color: var(--text); text-align: left; background: var(--ink2); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.inventory-item-link:hover { border-color: var(--green); background: var(--ink3); }
.inventory-item-link.is-static { border-color: transparent; cursor: default; }
.inventory-item-link.is-static:hover { border-color: transparent; background: var(--ink2); }
.inventory-item-link b, .inventory-item-link small { display: block; }
.inventory-item-link b { font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
.inventory-item-link small { margin-top: .2rem; color: var(--muted); font-size: 12px; }
.inventory-art { display: grid; place-items: center; width: 36px; height: 36px; color: var(--muted); font-weight: 800; }
.inventory-art img { display: block; width: 36px; height: 36px; object-fit: contain; }
.inventory-currency-art::after { content: ""; display: block; width: 18px; height: 1px; background: var(--muted); }

.inventory-plan-heading { margin-top: 2.6rem; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inventory-plan-heading p { margin-top: 4px; color: var(--muted); }
.inventory-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.inventory-panel { min-width: 0; padding: 16px; background: var(--ink2); }
.inventory-panel-heading { min-height: 76px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.inventory-panel-heading span { color: var(--green); font: 700 12px var(--ui), sans-serif; letter-spacing: 0; text-transform: none; }
.inventory-panel-heading h2 { margin-top: 4px; font-size: 24px; line-height: 1.15; }
.inventory-requirements { overflow: visible; }
.inventory-row { display: grid; grid-template-columns: minmax(150px, 1fr) 96px 96px 104px; gap: 8px; align-items: center; min-height: 46px; padding: 4px 4px; }
.inventory-row:nth-child(odd):not(.inventory-row-head) { background: var(--ink3); }
.inventory-row > :not(:first-child) { text-align: right; font: 700 12px var(--ui), sans-serif; }
.inventory-row.is-short > strong { color: var(--text); }
.inventory-row.is-covered > strong { color: var(--green); }
.inventory-row-head { position: sticky; z-index: 2; top: 0; min-height: 34px; color: var(--muted); background: var(--ink2); border-bottom: 1px solid var(--line); }
.inventory-row-head > span { font: 700 12px var(--ui), sans-serif; letter-spacing: 0; text-transform: none; }
.inventory-row .inventory-item-link { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 4px; background: transparent; }
.inventory-row .inventory-art, .inventory-row .inventory-art img { width: 28px; height: 28px; }
.inventory-row .inventory-item-link.is-static:hover { background: transparent; }
.inventory-total { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 16px; margin-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.inventory-total b { color: var(--text); margin-right: auto; }
.inventory-empty { display: grid; place-items: center; min-height: 150px; padding: 24px; text-align: center; color: var(--muted); }
.inventory-empty strong, .inventory-empty span { display: block; }
.inventory-empty strong { color: var(--text); font-size: 16px; }
.inventory-empty span { max-width: 360px; margin-top: 4px; font-size: 12px; }
.inventory-empty.is-finished strong { color: var(--green); }

@media (max-width: 1100px) {
  .inventory-owned { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .inventory-intro { grid-template-columns: 1fr; align-items: start; }
  .inventory-panels { grid-template-columns: 1fr; }
  .inventory-owned { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .inventory-section-heading { align-items: start; flex-direction: column; }
  .inventory-summary { justify-content: flex-start; }
  .inventory-toolbar { grid-template-columns: 1fr; }
  .inventory-owned { grid-template-columns: 1fr; max-height: 360px; }
  .inventory-panel { padding: 12px; }
  .inventory-row { min-width: 486px; grid-template-columns: 135px 108px 108px 112px; gap: 4px; }
  .inventory-row .inventory-item-link { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .inventory-row .inventory-art, .inventory-row .inventory-art img { width: 28px; height: 28px; }
  .inventory-row > :not(:first-child) { font-size: 12px; }
}

/* The Inventory tab used to open on an empty dropdown. It now names what it is
   showing, so the sentence carries the state and the picker is just a change
   control. */
.inventory-tracking { max-width: 62ch; color: var(--muted); }
.inventory-tracking b { color: var(--text); }

/* Stated once, above the table, rather than implied by a column of zeroes. */
.inventory-caveat {
  margin: 0 0 12px;
  padding: 12px 12px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}
.inventory-caveat b { color: var(--text); }


/* ---- Expanded list ------------------------------------------------------
   A 189-item questline does not fit in half a column. The panel keeps the
   readable two-column layout; this shows the same rows across the whole
   screen, several columns wide, for when you are actually shopping. */
.inventory-panel-heading { position: relative; }
.inventory-expand {
  position: absolute;
  right: 0;
  bottom: .8rem;
  padding: 4px 8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: 700 12px var(--ui), sans-serif;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.inventory-expand:hover { color: var(--text); border-color: var(--water); }

.inventory-overlay {
  position: fixed;
  inset: 0;
  /* The masthead is sticky at z-index 80, so a full-screen list has to sit
     above it or the site chrome prints straight through the title. */
  z-index: 90;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--ink);
}
.inventory-overlay[hidden] { display: none; }
.inventory-overlay-head {
  display: flex;
  gap: 16px 24px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 1.4rem clamp(1rem, 4vw, 3rem) 1rem;
  border-bottom: 1px solid var(--line);
}
.inventory-overlay-head h2 { font-size: 24px; }
.inventory-overlay-head p { color: var(--muted); font-size: 13px; }
.inventory-overlay-close {
  margin-left: auto;
  padding: 8px 16px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.inventory-overlay-close:hover { border-color: var(--water); color: var(--text); }
.inventory-overlay-body { overflow: auto; padding: 1rem clamp(1rem, 4vw, 3rem) 3rem; }
.inventory-wide {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 0 2.4rem;
  align-content: start;
}
/* A floor on the name column: without it a long value squeezes the name until
   it wraps one letter per line. */
.inventory-wide-row {
  display: grid;
  grid-template-columns: minmax(132px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}
.inventory-wide-nums { display: flex; gap: 16px; text-align: right; }
.inventory-wide-nums span { display: grid; min-width: 62px; }
.inventory-wide-nums i {
  color: var(--muted);
  font: 700 12px var(--ui), sans-serif;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}
.inventory-wide-nums b { font: 700 12px var(--ui), sans-serif; }
.inventory-wide-row.is-covered .inventory-wide-nums span:last-child b { color: var(--green); }

@media (max-width: 620px) {
  .inventory-wide { grid-template-columns: 1fr; }
}

/* Rows an older capture stored from Farm RPG's per-item description text. */
.inventory-ignored { color: var(--amber); }
.inventory-ignored strong { color: var(--amber); }

/* What the page computed, so an empty panel can be explained rather than guessed at. */
.inventory-diag { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }

.inventory-show-tracker { margin-top: 8px; padding: 4px 12px; font-size: 12px; }

/* Where the item comes from, under its name. */
.inventory-source { color: var(--muted); font-size: 12px; }

/* Items that serve the tracked questline and an unfinished Tower mastery at
   the same time. The single most useful thing this app can tell an endgame
   player, because their scarce resource is hours, not knowledge. */
.inventory-double { margin-top: 2.4rem; }
.inventory-double[hidden] { display: none; }
.inventory-double-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 8px 24px;
  margin-top: 16px;
}
/* The name needs a floor of its own: without one the two number columns
   squeezed it until it wrapped a letter at a time. */
.inventory-double-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 88px 116px;
  gap: 12px;
  align-items: center;
  padding: 8px .2rem;
  border-bottom: 1px solid var(--line);
}
.inventory-double-need { position: relative; min-width: 0; text-align: right; }
.inventory-double-need span { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; letter-spacing: .04em; text-transform: none; }
.inventory-double-need b { display: block; font-size: 13px; font-variant-numeric: tabular-nums; }
/* How far the mastery already is, drawn under its number rather than as a
   separate bar that would double the height of every row. */
.inventory-double-need i {
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  background: var(--green);
  opacity: .55;
}

@media (max-width: 620px) {
  .inventory-double-rows { grid-template-columns: 1fr; }
}