/* Gym profiles: two-tier equipment model (§7.2b) and plate/bar inventory
   (§7.2c). Every colour and size references a §12.2 token. */

.gym-sec {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
}

.gym-sec h3,
.inv h3,
.plates h3,
.bars h3 {
  margin: 0 0 var(--s-1);
  font-size: var(--fs-name);
  font-weight: 600;
}

/* ---- Specific-equipment inventory ---- */

.inv-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.inv-count {
  color: var(--text-dim);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}

.inv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
  margin-bottom: var(--s-2);
}

/* A selected item is a removable chip. */
.chip--inv {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-1) var(--s-3);
  border-color: var(--accent-line);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-label);
}

.chip--inv:hover {
  border-color: var(--accent);
}

.chip-x {
  color: var(--text-dim);
}

.inv-results {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  max-height: var(--h-inv);
  margin-top: var(--s-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.inv-group-name {
  position: sticky;
  top: 0;
  padding: var(--s-1) 0;
  background: var(--surface);
  color: var(--text-dim);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

.inv-group-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--col-inv), 100%), 1fr));
  gap: 0 var(--s-3);
}

/* The category tag trailing each row, and the count on category checkboxes. */
.inv-cat {
  margin-left: auto;
  padding-left: var(--s-2);
  color: var(--text-dim);
  font-size: var(--fs-label);
  font-variant-numeric: tabular-nums;
}

.inv-add {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
}

.inv-add-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2) var(--s-3);
}

.inv-add-row .lib-search {
  flex: 1 1 var(--w-search);
}

/* The label is a flex item wrapping a <select>, and both default to
   `min-width: auto` — so the select sizes to its widest option, the label sizes
   to the select, and neither can shrink. `shoulders · posterior deltoid` then
   pushes the control past a 360px screen (§12.4). Both halves are needed: the
   cap on .sel does nothing while its parent grows to fit it. */
.inv-add-row .plan-field {
  min-width: 0;
  max-width: 100%;
}

.inv-status {
  display: inline-block;
  margin-top: var(--s-2);
  color: var(--text-dim);
  font-size: var(--fs-label);
}

/* ---- Plates & bars (§7.2c) ---- */

.plates,
.bars {
  margin-top: var(--s-3);
}

.plate-list,
.bar-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* kg | pairs | remove on one line, even at 360px — a plate list is long and
   should read as a table, not as a stack of cards. */
.plate-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: var(--s-2);
  padding: var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-shade);
  border-bottom-color: var(--edge-lit);
  border-radius: var(--r-md);
}

.bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-shade);
  border-left: var(--edge-active) solid transparent;
  border-radius: var(--r-md);
}

.bar-row--default {
  border-left-color: var(--accent);
}

.bar-row .slot-field {
  max-width: var(--w-field-max);
}

.bar-row .gym-name {
  flex: 1 1 var(--w-gym-name);
}

.bar-row .btn-sm {
  margin-left: auto;
}

.plate-add {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
}

.plate-add .slot-field {
  max-width: var(--w-field-max);
}