/* Inventory — page layout only: the query row, the facet grid, the lens grid, the bay mini-map in the Where column,
   the stencil and drawer identity grids, and the hover rack. Every component look comes from the kit. */
@layer page {
  .inv-facet { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--s3); align-items: start; }
  .inv-facet__k { padding-top: 8px; }

  /* Where these results are: the switch over three racks drawn at one bay scale. */
  .inv-lens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s6); align-items: start; }
  .inv-lens__on { grid-column: 1 / -1; justify-self: start; }
  .inv-lens__racks { display: contents; }
  .inv-lensrack { display: grid; gap: var(--s2); min-width: 0; justify-items: start; }

  /* Results table cells */
  .inv-qty { display: grid; gap: 4px; justify-items: end; }
  .inv-note { max-width: 110px; line-height: 1.3; }
  .inv-off { display: inline-flex; gap: 6px; align-items: center; max-width: 160px; }
  .inv-group { display: grid; gap: var(--s2); font-size: var(--t-small); font-weight: 400; color: var(--text); }
  .inv-cov-sub { max-width: 520px; }
  .inv-cov-cell { min-width: 220px; max-width: 360px; }
  .inv-cycles { display: grid; gap: 6px; justify-items: end; }

  /* The bay mini-map: one line per tier, the bay's place on its tier marked (--x). */
  .inv-bayg { display: inline-grid; gap: 1px; width: 30px; }
  .inv-hand { max-width: 112px; }
  .inv-who { min-width: 156px; }
  .inv-bayg > i { display: block; height: 2px; border-radius: 2px; background: var(--line-2); position: relative; }
  .inv-bayg > i[data-on] { background: var(--ink-300); }
  .inv-bayg > i[data-on]::after { content: ''; position: absolute; top: -2px; width: 4px; height: 6px; border-radius: 2px; background: var(--accent); left: var(--x); }
  @media (forced-colors: active) { .inv-bayg > i, .inv-bayg > i[data-on]::after { background: CanvasText; } }

  /* The rack with the bay marked, placed under a hovered or focused row (inventory.js). */
  .inv-where { position: absolute; z-index: 40; display: grid; gap: 4px; padding: var(--s2); pointer-events: none; font-size: var(--t-cap); color: var(--text-2); }

  /* Stencils: the tower beside its words. */
  .inv-stn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s8); align-items: end; }

  /* Drawer: quantity beside the tier strip. */
  .inv-ident { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s5); align-items: end; }

  /* Columns: its popover opens under its button. */
  .inv-cols__btn { anchor-name: --inv-cols; }
  #inv-cols { position-anchor: --inv-cols; }
  /* An export is a desk job: the phone leaves it out. */
  @media (max-width: 560px) { .inv-export, .inv-cols { display: none; } }
  @media (max-width: 700px) {
    .inv-lens, .inv-ident { grid-template-columns: minmax(0, 1fr); }
    .inv-facet { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
    .inv-facet__k { padding-top: 0; }
    .inv-stn { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
    .inv-keys { display: none; }
  }
  /* Reel cards on phones keep reel, part, quantity, where and state; handling and last movement stay in the drawer. */
  @container table (max-width: 640px) { .inv-wide-only { display: none; } }
}