/* ==========================================================================
   EVAL · css/curtains/inventory.css — the inside of the Lot curtain.
   Owner: inventory curtain agent. Tokens only; the card, tile, bar, pill and
   sec-head primitives come from components.css.
   ========================================================================== */

/* ---------- head: the name, the headline, what is on the ground ---------- */
.inv-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; flex: 0 0 auto;
}
.inv-head .sp { flex: 1; min-width: 0; }

/* ---------- the three counts ------------------------------------------- */
.inv-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px;
}
.inv-tiles .tile { padding: 13px 14px; }

/* ---------- the age ladder ---------------------------------------------- */
.card.soft.inv-lad { margin-top: 12px; padding: 8px 15px; }

/* The head shares the row's track list to the pixel, so a name can only ever
   sit over the figure it names (the Gross curtain names its three columns the
   same way). It is not an .inv-b: it is not a row and never counts as one.
   Every track but the bar is a FIXED width: the head and the rows are separate
   grids, and an `auto` track resolves against each grid's own content — which
   is how a head with no pill in it drifts 108px off the figures below. */
.inv-b, .inv-cols {
  display: grid; align-items: center; width: 100%; text-align: left;
  grid-template-columns: 88px 1fr 40px 78px 118px; gap: 12px;
}
.inv-b {
  min-height: 60px; padding: 8px 0;
  transition: transform var(--dur-liftUp) var(--ease);
}
.inv-b + .inv-b, .inv-cols + .inv-b { border-top: 1px solid var(--line2); }

/* the column head: the row's geometry with the paint off, so "Days supply"
   stands over the days figure and the units count is no longer two numbers
   side by side with one of them unnamed */
.inv-cols { padding: 9px 0 3px; }
.inv-cols .bl, .inv-cols .bn, .inv-cols .bd {
  font-family: var(--font-body); font-size: var(--fs-pill); font-weight: 700;
  letter-spacing: .1px; color: var(--muted); line-height: 1.2;
}
.inv-cols .bn, .inv-cols .bd { text-align: right; }
.inv-b .bl {
  font-family: var(--font-head); font-size: var(--fs-row); font-weight: 700;
  letter-spacing: -.2px; color: var(--ink2); white-space: nowrap;
}
.inv-b .bw { min-width: 0; }
.inv-b .bn {
  font-family: var(--font-head); font-size: var(--fs-h2); font-weight: 800;
  letter-spacing: -.4px; color: var(--ink); text-align: right;
}
/* the days supply is a figure, not a status: it never takes the band's colour */
.inv-b .bd {
  font-size: var(--fs-sub); font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right;
}
.inv-b .pill { width: 100%; min-width: 0; justify-content: center; }
.inv-b.aged .bl { color: var(--ink); }

/* the 75-day line: everything above it is healthy, the bucket below is not */
.inv-75 { display: flex; align-items: center; gap: 10px; padding: 8px 0 9px; }
.inv-75 .ln { flex: 1; height: 1px; background: var(--line3); }

/* ---------- what is sitting past the line -------------------------------- */
.inv-call {
  flex-direction: row; align-items: center; gap: 20px;
  margin-top: 14px; padding: 17px 18px;
}
.inv-call .c1 { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.inv-call .c1 strong {
  font-family: var(--font-head); font-size: var(--fs-d1); font-weight: 800;
  letter-spacing: -1.2px; line-height: var(--lh-tight); color: var(--ink);
}
/* the aged count is a figure, so it is ink: the share pill next to it is where
   the reading lives (laws §5, and tests/suites/92-status.cjs measures it) */
.inv-call .cl { font-size: var(--fs-sub); font-weight: 500; color: var(--muted); white-space: nowrap; }
.inv-call .c2 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.inv-call .ct { display: flex; align-items: center; gap: 10px; }
.inv-call .ct b {
  font-family: var(--font-head); font-size: var(--fs-h3); font-weight: 800;
  letter-spacing: -.3px; color: var(--ink2); white-space: nowrap;
}
.inv-call .ct .sp { flex: 1; }

/* ---------- honest empty state: centred, not a strip left in a void ------ */
.inv-none {
  margin-top: 14px; min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
}
.inv-none .empty { width: 100%; max-width: 440px; padding: 16px 18px; }

/* ---------- a shorter iPad (1024x768): the ladder tightens, nothing else - */
@media (min-width: 1000px) and (max-height: 800px) {
  .inv-b { min-height: 54px; }
  .inv-call { padding: 15px 18px; }
}

/* ---------- phone: the ladder gives the bar its own line ----------------- */
@media (max-width: 999px) {
  .inv-head .sp { display: none; }
  .inv-tiles { gap: 8px; margin-top: 12px; }
  .inv-tiles .tile { padding: 11px 12px; }

  .card.soft.inv-lad { padding: 6px 13px; }
  .inv-b, .inv-cols { grid-template-columns: 1fr 76px 118px; gap: 8px 10px; }
  .inv-b {
    grid-template-areas: "bl bd bn" "bw bw bp";
    min-height: 58px; padding: 9px 0;
  }
  /* the head is placed by the SAME area names as the row, or its words land on
     the wrong columns: the phone row reads label / days / units, not label /
     units / days */
  .inv-b .bl, .inv-cols .bl { grid-area: bl; }
  .inv-b .bn, .inv-cols .bn { grid-area: bn; }
  .inv-b .bd, .inv-cols .bd { grid-area: bd; }
  .inv-b .pill { grid-area: bp; align-self: center; width: 100%; min-width: 0; }
  .inv-b .bw { grid-area: bw; align-self: center; }
  /* the head keeps its three names on one line; the bar and pill tracks it has
     nothing to say for are dropped so no phantom second row opens under it */
  .inv-cols { grid-template-areas: "bl bd bn"; padding: 6px 0 2px; }
  .inv-cols .bw { display: none; }

  .inv-call { flex-direction: column; align-items: stretch; gap: 13px; }
  .inv-call .c1 { flex-direction: row; align-items: baseline; gap: 10px; }
}