.brine-comparison {
  margin: 0.5rem 0 1.25rem;
}
.brine-comparison__note {
  margin: 0 0 0.5rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid #383C50;
  background: #fbfaf6;
  font-style: italic;
  font-size: 0.92rem;
  color: #444;
}

.brine-widget {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f8f6f1;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 0.95rem;
  color: #3b3b3b;
}
.brine-widget__head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2dfd8;
}
.brine-widget__head strong { color: #000; font-size: 0.95rem; }
.brine-widget__link {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-decoration: underline;
  color: #383C50;
}
.brine-widget__error { color: #a33; font-size: 0.85rem; margin: 0; }

.brine-widget__modes {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.brine-widget__mode {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border: 1px solid #d0ccc4;
  border-radius: 3px;
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  user-select: none;
}
.brine-widget__mode input { display: none; }
.brine-widget__mode.is-active {
  background: #383C50;
  color: #fff;
  border-color: #383C50;
}
.brine-widget__mode.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.brine-widget__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.brine-widget__row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr 4.5rem;
  gap: 0.6rem;
  align-items: center;
}
.brine-widget__label { font-size: 0.85rem; color: #555; }
.brine-widget__num {
  width: 5.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  font: inherit;
}
/* Let number inputs fill their grid cell so the right edge lines up with
   the sliders in adjacent rows. */
.brine-widget__row > .brine-widget__num {
  width: 100%;
  min-width: 0;
}
/* If the third grid cell is empty (e.g. the thickness row), the number
   input should still stop where the sliders do — span only column 2. */
.brine-widget__row > .brine-widget__num:last-child {
  grid-column: 2 / 3;
}
.brine-widget__unit {
  width: auto;
  justify-self: start;
  padding: 0.35rem 1.5rem 0.35rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  font: inherit;
  /* Restore the native dropdown caret that some global resets strip out. */
  appearance: auto;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
.brine-widget__readout {
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: #000;
  min-width: 4rem;
  text-align: right;
}
.brine-widget input[type="range"] {
  width: 100%;
  accent-color: #383C50;
}

.brine-widget__result {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid #e2dfd8;
}
.brine-widget__result--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.6rem 1rem;
}
.brine-widget__small {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #777;
}
.brine-widget__big {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  font-variant-numeric: tabular-nums;
}
.brine-widget__note {
  margin: 0.75rem 0 0;
  font-size: 0.82rem;
  font-style: italic;
  color: #666;
}

@media (max-width: 540px) {
  .brine-widget__row {
    grid-template-columns: 1fr auto;
  }
  .brine-widget__row > input[type="range"] {
    grid-column: 1 / -1;
    order: 3;
  }
  .brine-widget__row > .brine-widget__unit {
    grid-column: 2 / 3;
    justify-self: end;
  }
}