/* jar-loop local sheet — gui.css is the token layer; this adds jar-specific
   components. Bootstrap grid + form utilities kept for layout; everything
   visual uses gui.css vocabulary. 2026-09-14 GUI pass (issue #41). */

/* ---------- responsive grid (replaces Bootstrap row/col) ---------- */
.jar-row {
  display: flex; flex-wrap: wrap; gap: 1rem;
}
.jar-row > .jar-col { flex: 1 1 100%; }
@media (min-width: 768px) {
  .jar-row > .jar-half { flex: 1 1 calc(50% - 0.5rem); max-width: calc(50% - 0.5rem); }
}

/* ---------- toolbar (sticky location + radius strip) ---------- */
.jar-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: .8rem;
  position: sticky; top: 0; z-index: 10;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: .7rem 0;
  margin-bottom: 1.2rem;
}
.jar-toolbar .badge-soft { font-size: .82rem; }

/* radius select — pill shape */
.jar-toolbar select {
  border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem 1.1rem; min-height: 44px;
  font-size: 1rem; font-weight: 600; color: var(--ink);
  background: var(--paper); cursor: pointer;
  transition: border-color .15s ease;
}
.jar-toolbar select:hover { border-color: var(--accent); }
.jar-toolbar select:focus { outline: 3px solid rgb(14 116 144 / .3); border-color: var(--accent); }
.jar-toolbar label { font-size: .92rem; color: var(--muted); font-weight: 600; }

/* ---------- jar card ---------- */
.jar-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  transition: border-color .15s ease;
}
.jar-card:hover { border-color: var(--accent); }
.jar-head {
  display: flex; justify-content: space-between; gap: .75rem;
  align-items: flex-start; flex-wrap: wrap;
}
.jar-head h3 { margin: 0 0 .15rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.jar-head .jar-badges { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---------- action pills inside cards ---------- */
.jar-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; margin-top: .9rem;
}
.jar-actions a, .jar-actions button {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 10px; padding: .65rem 1.2rem;
  font-weight: 700; font-size: 1rem;
  min-height: 48px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  text-decoration: none;
}
.jar-actions a.primary, .jar-actions button.primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
}
.jar-actions a.primary:hover, .jar-actions button.primary:hover {
  background: var(--accent-deep); border-color: var(--accent-deep);
}
.jar-actions a.secondary, .jar-actions button.secondary {
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
}
.jar-actions a.secondary:hover, .jar-actions button.secondary:hover {
  border-color: var(--accent); color: var(--accent);
}

/* ---------- info boxes (offer jar, need vegetables) ---------- */
.jar-info {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  transition: border-color .15s ease;
}
.jar-info:hover { border-color: var(--accent); }
.jar-info h3 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 700; }

/* ---------- seed note ---------- */
.seed-note {
  font-size: .92rem; color: var(--muted);
  padding: .6rem 0; margin-bottom: .5rem;
}

/* ---------- small-caps ---------- */
.small-caps {
  text-transform: uppercase; letter-spacing: .1em;
  font-size: .78rem; font-weight: 700; color: var(--muted);
}

/* ---------- chips (market vocabulary, local; tokens live in gui.css) ---------- */
.chip.on { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.chip.warm { color: var(--warm); border-color: #e7c68e; background: var(--warm-soft); }
.chip.brand { color: var(--accent-deep); border-color: #9bc7d4; background: var(--brand-soft); }
.bge-brand { background: var(--brand-soft); color: var(--accent-deep); }
.bge-warm { background: var(--warm-soft); color: var(--warm); }
.bge-good { background: var(--good-soft); color: var(--good); }
.bge-warn { background: var(--warn-soft); color: var(--warn); }
.bge-bad { background: var(--bad-soft); color: var(--bad); }
.bge-line { background: var(--wash); color: var(--muted); border: 1px solid var(--line); }
.note { color: var(--muted); font-size: .95rem; }

/* ---------- empty state ---------- */
.empty-state {
  text-align: center; padding: 2.5rem 1rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper);
}
.empty-state h3 { margin: 0 0 .3rem; font-size: 1.15rem; font-weight: 700; }
.empty-state p { margin: 0; max-width: 52ch; margin-inline: auto; }