/* WIDGET: inventory-board — states switch by opacity only */
.ib-body { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }

.ib-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--text-3);
}

.ib-legend li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ib-legend strong { font-weight: 500; color: var(--text-1); font-variant-numeric: tabular-nums; }
.ib-swatch { flex-shrink: 0; width: 7px; height: 7px; border-radius: 2px; background: var(--sw); }

.ib-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }

.ib-cell {
  position: relative;
  aspect-ratio: 1.35;
  border-radius: 5px;
  background: var(--surface-3);
  border: 1px solid var(--line-1);
  overflow: hidden;
}

.ib-fill {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-4) var(--ease-out);
}

.ib-held { background: linear-gradient(180deg, rgba(79, 169, 245, 0.55), rgba(79, 169, 245, 0.28)); }
.ib-deposit { background: linear-gradient(180deg, rgba(255, 51, 102, 0.75), rgba(255, 51, 102, 0.4)); }
.ib-sold { background: #2A2C33; }

.ib-cell.is-held .ib-held,
.ib-cell.is-deposit .ib-deposit,
.ib-cell.is-sold .ib-sold { opacity: 1; }

.ib-code {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-3);
  transition: opacity var(--dur-3) ease;
}

.ib-cell.is-held .ib-code, .ib-cell.is-deposit .ib-code { color: var(--text-1); }
.ib-cell.is-sold .ib-code { opacity: 0.45; }

.ib-ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid #FFFFFF;
  opacity: 0;
  pointer-events: none;
}

.ib-feed { display: flex; flex-direction: column; gap: 2px; min-height: 104px; }

.ib-feed li {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-2);
  border-top: 1px solid var(--line-1);
  transition: opacity var(--dur-3) ease, transform var(--dur-3) var(--ease-out);
}

.ib-feed li:first-child { border-top: 0; color: var(--text-1); }
.ib-feed li:nth-child(n + 3) { opacity: 0.55; }
.ib-feed li.is-new { opacity: 0; transform: translate3d(0, -6px, 0); }
.ib-feed li.is-blocked span { color: #FF9DB3; }
.ib-feed time { flex-shrink: 0; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-4); font-variant-numeric: tabular-nums; padding-top: 1px; }

/* Unit codes only where a cell is wide enough to hold them */
@container (min-width: 420px) {
  .ib-code { display: grid; }
}

@container (max-width: 340px) {
  .ib-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}