/* ---------- the reorder-rule picker ----------------------------------------
   One control shared by a product, a group of sizes and an ingredient, so all
   three read the same on a phone: a stack of tappable sentences with the live
   verdict underneath. `rr-` is its own prefix — nothing else in the app uses it. */

.rr-pick { display: flex; flex-direction: column; gap: 8px; }

.rr-opt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-md, 10px);
  background: var(--card); cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.rr-opt:hover { border-color: var(--accent); }
.rr-opt.on { border-color: var(--accent); background: var(--accent-wash, rgba(127,176,105,.09)); }
/* The width is not decoration: the forms this picker drops into set
   `input { width: 100% }` on everything, which made the radio 920px wide and
   squeezed the label beside it to nothing. */
.rr-opt input[type="radio"] {
  width: auto; min-width: 0; flex: none;
  margin: 3px 0 0; accent-color: var(--accent);
}
.rr-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rr-body b { font-size: .95rem; }
.rr-body i { font-style: normal; color: var(--text-muted, var(--muted)); font-size: .82rem; line-height: 1.35; }

/* the extra question a rule asks once it's chosen */
.rr-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  margin-top: 8px; font-size: .86rem;
}
.rr-inline input, .rr-inline select {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg); color: var(--text); font: inherit; font-size: .86rem;
  width: auto; min-width: 0; flex: none;      /* same reason as the radio above */
}
.rr-inline input { width: 84px; }
.rr-inline select { max-width: 190px; }
.rr-inline i {
  font-style: normal; color: var(--text-muted, var(--muted)); font-size: .8rem;
  flex-basis: 100%;
}

/* what the rule does with the stock you have right now */
.rr-verdict, .rr-note {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 11px; border-radius: var(--r-md, 10px);
  background: var(--bg-soft, var(--bg)); border: 1px solid var(--line);
  font-size: .85rem; line-height: 1.4;
}
.rr-verdict .ic, .rr-note .ic { flex: none; margin-top: 1px; }
.rr-verdict.ok  { border-color: var(--green, var(--accent)); }
.rr-verdict.bad { border-color: var(--gold, var(--amber)); }
.rr-verdict.warn { border-color: var(--amber); }

.rr-off { align-self: flex-start; margin-top: 2px; }