/* «السعر» at «النشر» (components/price.js), as the approved Demo draws it (DEMO.html .fline, .sugrow, .sugp, .ferr and the variants'
   table). The fields, lines, buttons and sheet are the shared ones (styles/settings.css .field .unitwrap .oneline .err,
   styles/sheet.css .mbtn .ssent .sacts, styles/report.css .lnk); this adds only the rows they stand in. Every value is a token. */
.pricebody {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap);
  min-width: 0;
}

.pricebody .oneline {
  margin: 0;
}

/* the rule and its ₪ field in one row */
.fline {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-sm);
}

.fline > .field {
  flex: 1 1 0;
  min-width: 0;
}

/* a refusal stands under its control; hidden until there is one */
.pricebody .err[hidden],
.msheet .err[hidden] {
  display: none;
}

/* the suggestion and the advert price: a chip each, wrapping on a narrow screen */
.sugrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.sugp {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--spacing-md);
  border: 1px solid var(--app-line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--app-surface);
  color: var(--app-ink);
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: 800;
  cursor: pointer;
}

.sugp:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pricebody .lnk {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  align-self: flex-start;
}

.pricebody .lnk svg {
  flex: none;
  width: 1em;
  height: 1em;
}

/* the variants: a row of name, price and stock; the price of a size that follows the product is the quiet colour */
.pvtable {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-width: 0;
}

.pvrow {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-sm);
}

.pvrow.head {
  font-size: var(--font-size-meta);
  font-weight: 700;
  color: var(--app-ink-soft);
}

.pvname {
  min-width: 0;
  font-size: var(--font-size-meta);
  overflow-wrap: anywhere;
}

.pvrow input[data-follows="true"] {
  color: var(--app-muted);
}