/* Components. Every colour and size references a §12.2 token from
   tokens.css — no literals. */

/* ---- Gyms ---- */

.gym-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.gym-card {
  padding: var(--card-pad);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-left: var(--edge-active) solid transparent;
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.gym-card--active {
  border-left-color: var(--accent);
}

.gym-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}

.gym-name {
  flex: 1 1 var(--w-gym-name);
  min-width: 0;
  font-size: var(--fs-name);
  font-weight: 600;
}

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

.gym-meta {
  margin-top: var(--s-2);
  overflow-wrap: anywhere;
}

/* ---- Library (step 1 verification view) ---- */

.lib-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
}

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

/* Tier filter chips. Their own row rather than folded into .lib-controls: six
   chips plus a search box and three toggles on one wrapping row is a wall, and
   the tier filter is the one whose selected state has to be readable at a
   glance. */
.lib-tiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin-bottom: var(--s-3);
}

/* B8 — what the query matched, in the terms the ranking uses. It qualifies the
   summary above it, so it sits tight against it: one statement on two lines
   rather than two statements. Present only while a muscle term is matching. */
.lib-match {
  margin-top: calc(-1 * var(--s-2));
}

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

.ex-card {
  padding: var(--card-pad);
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-top-color: var(--edge-lit);
  border-radius: var(--r-md);
  box-shadow: var(--elev-1);
}

.ex-card--hidden {
  opacity: var(--op-hidden);
}

/* B9 — a record the user created. The accent left edge is §12.5a's "you are
   here" treatment, used here for "this one is yours": an edge, never a filled
   block. A retired one keeps the edge and loses the emphasis. */
.ex-card--mine {
  border-left: var(--edge-active) solid var(--accent);
}

.ex-card--retired {
  border-left-color: var(--line);
  opacity: var(--op-hidden);
}

.ex-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding-top: var(--s-2);
  border-top: var(--hair) solid var(--line-soft);
}

.ex-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.ex-name {
  font-size: var(--fs-name);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ex-meta {
  margin-top: var(--s-1);
}

.ex-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

.ex-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-top: var(--s-1);
  border-top: var(--hair) solid var(--line-soft);
  font-size: var(--fs-label);
}

/* B8 — the muscle row a search matched on, and therefore the row whose §4.3
   weight decided where this card sits in the list. An edge, never a fill:
   §12.5a's "you are here" treatment at the softer accent, so it locates the
   answer without competing with the tier badge beside it. The negative margin
   puts the bar in the card's own padding, leaving the text aligned with the
   rows above and below it. */
.ex-group--hit {
  margin-left: calc(-1 * var(--s-2));
  padding-left: calc(var(--s-2) - var(--edge-active));
  border-left: var(--edge-active) solid var(--accent-line);
}

.mg {
  min-width: var(--w-mg-label);
  font-weight: 550;
}

.pm,
.score {
  color: var(--text-dim);
}

.bucket {
  padding: 0 var(--s-2);
  background: var(--surface-alt);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: var(--fs-label);
}

.bucket--none {
  color: var(--text-dim);
}

.note {
  flex-basis: 100%;
  font-style: italic;
}

/* ---- B9 custom exercise editor ---- */

.cx-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.cx-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
}

.cx-section:first-child {
  padding-top: 0;
  border-top: none;
}

.cx-model {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.cx-muscles {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

/* One row per muscle. The §4.3 weight is printed rather than typed — it is the
   consequence of the radio beside it, not an input. */
.cx-muscle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--tap);
  padding: var(--s-1) var(--s-2);
  background: var(--surface-alt);
  border-left: var(--edge-active) solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-label);
}

.cx-muscle--main {
  border-left-color: var(--accent);
}

.cx-main-pick {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-width: var(--w-mg-label);
  min-height: var(--tap);
  color: var(--text-dim);
}

.cx-weight {
  margin-left: auto;
  color: var(--text-dim);
}

.cx-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.cx-notes {
  width: 100%;
  padding: var(--s-2);
  background: var(--surface-alt);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
}

.cx-problems:not(:empty) {
  margin: var(--s-2) 0;
}

.cx-problem-list {
  margin: 0;
  padding-left: var(--s-5);
  color: var(--bad);
  font-size: var(--fs-label);
}

.cx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--hair) solid var(--line-soft);
}