/* ============================================================
   tool-cbm.css — CBM & Chargeable Weight Calculator
   Logical properties only (RTL-ready). Loaded after main.css.
   ============================================================ */

.tool-main { padding-block: var(--space-8); }
.tool-head { max-inline-size: 60ch; margin-block-end: var(--space-6); }
.tool-head h1 { font-size: var(--fs-xl); line-height: 1.25; }
.tool-head p { color: var(--color-text-muted); margin-block-start: var(--space-2); }

.cbm-layout {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .cbm-layout { grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr); }
}

/* ---------- Option groups (mode / units) ---------- */
.option-group { margin-block-end: var(--space-4); }
.option-group > .legend {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-block-end: var(--space-2);
}
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  background: var(--color-bg);
  padding: var(--space-1);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;

  & input { position: absolute; opacity: 0; pointer-events: none; }
  &:has(input:checked) { background: var(--color-primary); color: #fff; }
  &:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
}

.unit-row { display: flex; flex-wrap: wrap; gap: var(--space-6); }

/* ---------- Carton rows (responsive grid, mobile-friendly) ---------- */
.carton-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.carton-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
@media (min-width: 40rem) {
  .carton-row { grid-template-columns: 0.8fr repeat(3, 1fr) 1.1fr auto; align-items: end; }
}
.carton-row .row-remove {
  min-block-size: var(--tap-min);
  min-inline-size: var(--tap-min);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  &:disabled { opacity: 0.4; cursor: not-allowed; }
}

.row-actions { display: flex; gap: var(--space-3); margin-block: var(--space-4); flex-wrap: wrap; }
.form-actions { display: flex; gap: var(--space-3); margin-block-start: var(--space-4); flex-wrap: wrap; }

/* ---------- Results panel ---------- */
.result-panel {
  position: sticky;
  inset-block-start: 5rem;
  padding: var(--space-6);
}
.result-panel[hidden] { display: none; }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-4); }
.result-head h2 { font-size: var(--fs-lg); }

.result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-block-end: 1px dashed var(--color-border);
}
.result-row small { display: block; color: var(--color-text-muted); font-size: var(--fs-xs); }
.result-val { font-variant-numeric: tabular-nums; font-weight: 600; text-align: end; }
.result-row--key {
  margin-block-start: var(--space-2);
  padding-block: var(--space-3);
  border-block-end: none;
  & span:first-child { font-weight: 700; }
  & .result-val { font-size: var(--fs-lg); color: var(--color-primary); }
}
.result-note { font-size: var(--fs-xs); color: var(--color-text-muted); margin-block-start: var(--space-2); }

.badge {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  padding-inline: var(--space-2);
  padding-block: 2px;
  border-radius: 999px;
}
.badge--heavy { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.badge--volumetric { background: color-mix(in srgb, var(--color-buyer) 16%, transparent); color: var(--color-buyer); }

.container-ref {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}
.container-ref h3 { font-size: var(--fs-sm); color: var(--color-text-muted); margin-block-end: var(--space-2); }

.form-error { color: var(--color-danger); font-size: var(--fs-sm); min-block-size: 1.2em; margin-block-start: var(--space-2); }
.field-error { font-size: var(--fs-xs); color: var(--color-danger); min-block-size: 1em; }