/* inventory.css — the shared "what's planted" card list (js/inventory.js).

   Loaded by BOTH editor.html (the Plantings panel) and simple.html (the plant
   panel's own Plantings list), so one card style serves every surface instead of
   each page re-inventing a list of placed plants.

   Built on the plant-queue row's anatomy (css/editor.css .queue-row): a round
   species dot, the name on line 1, then a full-width line whose LEFT EDGE is always
   the quantity — as text, or as the shared .qty-stepper (css/widgets.css) where the
   row can change it — followed by the unit that number is in, with the row's actions
   at the right. Every row starts its number at the same x, so a column of them can
   be read down. The area is worth comparing too, so it gets its own aligned column
   in the top-right corner rather than trailing a sentence:

       (•) Tomato, slicing                 31.3 sq ft
       12 plants                              [⊡] [🛒]

       (▨) Strawberry patch                 8.2 sq ft
       — plants                               [⊡] [🛒]

   …and in simple mode, where the row also grows and shrinks the planting, the
   stepper occupies that same number slot:

       (▨) Carrot patch                     16.4 sq ft
       [− 200 +] seeds                              [🗑]

   Tokens come from css/style.css, which both pages already load. */

.inv-list {
  display: flex; flex-direction: column;
  gap: 0.4rem;
  margin: 0.4rem 0;
  list-style: none; padding: 0;
}

.inv-row {
  display: grid;
  /* dot | name | area on row 1; row 2 is one full-width line (see __meta). */
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 0.55rem;
  row-gap: 0.2rem;
  padding: 0.5rem 0.6rem;
  /* The card itself -- rule, radius, paper -- is .list-card (css/widgets.css). */
}

/* Species dot, wearing the fill the canvas paints for this kind of planting
   (js/inventory.js#inventorySwatchStyle supplies the gradients + border colour
   inline). 20px so the barber-pole bands actually read as bands. */
.inv-row__swatch {                /* the dot itself is .color-dot (style.css) */
  grid-column: 1; grid-row: 1;
  width: 20px; height: 20px;
  justify-self: center; align-self: center;
}

.inv-row__name {
  grid-column: 2; grid-row: 1;
  min-width: 0;
  font-weight: 600; font-size: 0.92rem;
  color: var(--ink, #111);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The quantity, where a row has no stepper. It is the number the row exists to
   report, so it gets the species name's weight and size rather than the small grey
   type of the line it sits on — and it starts hard against the card's left edge,
   the one x every row shares, with no box padding it out on either side. Tabular
   figures so a column of them still reads straight down. */
.inv-row__count {
  text-align: left;
  font-weight: 700; font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #111);
  flex: 0 0 auto;
}
/* The unit belongs to the number, so it sits closer to it than to the row's other
   parts. That used to mean cancelling part of the .inv-row__meta gap, which read as a
   separate item; the tighter .inv-row__nums gap does the job now, and the bracket around
   the harvest that follows keeps THAT from reading as part of the same phrase. */

/* Ground the line takes, top-right — the one number worth comparing between rows,
   so it gets its own aligned column instead of trailing a sentence. */
.inv-row__area {
  grid-column: 3; grid-row: 1;
  justify-self: end;
  font-size: 0.78rem; font-variant-numeric: tabular-nums;
  color: var(--slate, #666);
  white-space: nowrap;
}

/* Second row, spanning the WHOLE card — column 1 included, so the quantity starts
   under the species dot exactly as a plant-queue row's stepper does (css/editor.css
   .queue-row__controls). Running past the area's column is deliberate too: the area
   only needs the width of "31.3 sq ft", and the leftover is what leaves the unit
   room to sit beside a stepper in the narrow simple-mode panel. */
.inv-row__meta {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: center; gap: 0.4rem;
  min-width: 0;
  font-size: 0.78rem; line-height: 1.3;
  color: var(--slate, #666);
}
/* The count, its unit and its harvest, as one wrapping group — so a panel too narrow
   for all three drops the harvest under them instead of truncating the unit, and the
   row's actions stay pinned to the right whatever happens in here.
   The gap is tighter than the meta line's: these three ARE one reading ("5 plants
   (~50 fruit)"), and every pixel spent here is a pixel closer to wrapping in simple
   mode's 272px panel, where the row also carries a stepper. */
.inv-row__nums {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 0.25rem;
  min-width: 0;
}
/* Same reason: a two-digit quantity needs about half of the shared control's 44px, and
   the width it gives back is what lets the harvest sit on the count's own line. */
.inv-row .qty-stepper__input { width: 36px; }
/* The unit the number is in — "plants" / "seeds". Never the kind of planting: the
   row's NAME already says a patch is a patch. */
.inv-row__unit { white-space: nowrap; }

.inv-row__actions {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.2rem;
}
/* Icon-only action buttons are square, matching the queue row's focus/remove
   pair so the two lists line up when they sit in the same panel. */
.inv-row__actions .btn--sm {
  height: 28px; min-height: 28px;
  padding: 0 0.5rem;
  font-size: 0.78rem; line-height: 1;
}
.inv-row__actions .inv-btn--icon { width: 28px; padding: 0; }

.inv-empty { margin: 0.4rem 0; }

/* Section heading for a plantings block inside a bigger panel: a title on the
   left, the roll-up on the right. */
.inv-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem;
  margin: 0.2rem 0;
}
.inv-head h3 { margin: 0; font-size: 0.95rem; }
.inv-head__total { font-size: 0.78rem; color: var(--slate, #666); }

/* Buying the whole list — its own stanza under the rows, separated by a rule, so
   it reads as what you do AFTER reading the list rather than a header action. */
.inv-buy {
  margin-top: 0.85rem; padding-top: 0.85rem;
  border-top: 1px solid var(--slate-faint, #e6e6e6);
  display: flex;
}
.inv-buy .btn { flex: 1 1 auto; }

/* Grouping control + section headings for a panel that stacks the lines into
   sections (the editor's Plantings panel: by kind, or by species category). The
   heading reuses .species-list__cat, the same small-caps label the plant library
   puts above its own category runs, so the two lists read alike. */
.inv-groupby {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0.2rem 0 0.5rem;
  font-size: 0.78rem; color: var(--slate, #666);
}
.inv-groupby .mode-toggle { flex: 1 1 auto; }
.inv-section + .inv-section { margin-top: 0.5rem; }

/* ── Phone: the row's own controls grow with the rest ────────────────────────
   Same breakpoint as the rest of the site (css/style.css). The ± stepper is sized
   by css/widgets.css; these are the row's icon actions beside it, which have to
   match or the row reads at two heights. */
@media (max-width: 640px) {
  .inv-row { column-gap: 0.45rem; padding: 0.45rem 0.5rem; }
  .inv-row__actions .btn--sm { height: 38px; min-height: 38px; }
  .inv-row__actions .inv-btn--icon { width: 38px; }
  .inv-row__name { font-size: 0.95rem; }
}

/* A third line on a planting card: a fact the shared model has no opinion on —
   the plantings panel puts the harvest this line will give here (js/yield-panel.js
   #yieldNote). Spans the whole card under the quantity, so a long note wraps
   rather than squeezing the stepper. */
/* The harvest, in brackets right after the count it comes from — one clause of line 2,
   not a line of its own. Inherits the meta line's colour and size: it is the same
   sentence, and a second treatment made it look like a different kind of information. */
.inv-row__note {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}