/* Quote → Logistics tab.

   MEASURED off `Rackman - Quote Detail - Logistics - Edit - Desktop`
   18153:29872 and its view twin 18152:29666 — do not eyeball.

   Every 1px line in these frames is a Figma stroke with strokeAlign INSIDE,
   which is an inset box-shadow here and never a CSS border: a border would add
   2px the frame does not have, and these cards are measured to the pixel
   (812 + 16 + 812 = 1640). The only real 1px elements are the two vertical
   RECTANGLE dividers and the section rule, which are filled nodes.           */

/* ---------- cards --------------------------------------------------------- */

/* THE TAB BODY TAKES THE SLACK AND SCROLLS INSIDE THE CARD. The quote screen
   pins itself to the viewport (`.qd { height: 100svh; overflow: hidden }`), so
   a pane taller than the card is simply cut off — this one runs to ~1650px on
   a three-shipment quote against a 1000px panel, and every leg past the first
   was unreachable. min-height:0 is the half that makes it work: a flex item
   defaults to min-height:auto and refuses to shrink below its content, so the
   overflow never engages and the card grows instead. Same shape as
   `.qd__contents > .li-scroll` on the Contents tab. */
.lg {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding-right: 6px;                    /* clear of the scrollbar */
}
.lg::-webkit-scrollbar { width: 4px; }
.lg::-webkit-scrollbar-thumb { background: var(--black-35); border-radius: var(--radius-full); }
.lg::-webkit-scrollbar-track { background: transparent; }
.lg { scrollbar-width: thin; scrollbar-color: var(--black-35) transparent; }

/* 812 + 16 + 812 = 1640 — two equal halves, not a fill/hug pair */
.lg__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }

.lg__card {
  padding: 18px 20px 20px;              /* the top is 18, the other three 20 */
  border-radius: 12px;
  background: linear-gradient(180deg, #fbfbfb 0%, #f8f8f8 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
  display: flex; flex-direction: column; gap: 14px;
  min-width: 0;
}

/* Layout/Section Label. Divider=Off on the two top cards, On for the freight
   section — the rule is a 1px filled rectangle, so it is a block, not a border */
.lg__sec { display: flex; flex-direction: column; gap: 10px; }
.lg__seck {
  font-size: 10px; font-weight: 600; letter-spacing: .05em; color: #656772;
}
.lg__secrule { display: block; height: 1px; background: rgba(0, 0, 0, .07); }

/* ---------- addresses ----------------------------------------------------- */

.lg__arow { display: flex; align-items: flex-start; gap: 28px; }
.lg__arow--info { gap: 32px; }
.lg__acol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
/* a filled 1px RECTANGLE that stretches the row, not a border on a neighbour */
.lg__vrule { flex: none; align-self: stretch; width: 1px; background: rgba(0, 0, 0, .15); }

.lg__ahead { display: flex; align-items: center; justify-content: space-between; }
.lg__eyebrow {
  font-size: 9.5px; font-weight: 500; letter-spacing: .04em; color: #656772;
  white-space: nowrap;
}

/* the select, and the bare value it becomes in view mode */
.lg__sel, .lg__selro {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; text-align: left; min-width: 0;
}
.lg__sel {
  height: 29px; padding: 0 8px 0 10px; border-radius: 8px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.lg__selv {
  font-size: 12.5px; font-weight: 600; color: #101828;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* view drops the box and goes a half-point larger */
.lg__selro { padding: 0; }
.lg__selro .lg__selv { font-size: 13px; }

/* The caret the frame draws on BOTH modes — near-invisible grey, and on the
   read-only value it is vestigial by design rather than an oversight. */
.lg__caret {
  flex: none; width: 0; height: 0; margin-right: 3px;
  border-left: 3.3px solid transparent; border-right: 3.3px solid transparent;
  border-top: 3.9px solid #d9d9d9;
}
.lg__drop .lg__caret { border-top-color: #656772; }

/* the derived SHIP FROM value: the frame's box, without the promise of a menu */
.lg__sel.is-ro { cursor: default; }
.lg__sel.is-ro:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* a checkbox that cannot be ticked still has to be legible — the frame gives
   it no disabled state, so it keeps its shape and loses only the pointer */
.lg__cb.is-ro { cursor: default; }
.lg__cb.is-ro .lg__box { background: #f8f8f8; }
.lg__cb.is-ro input:checked + .lg__box { background: var(--wrc-rackman); }

.lg__addr {
  margin: 0; font-size: 13px; line-height: 1.55; color: #364153;
}

.lg__aacts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lg__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; color: var(--wrc-rackman);
}
.lg__link--pin { gap: 5px; font-size: 12px; padding-top: 2px; }
.lg__link--ink { color: #364153; }
.lg__link:hover { text-decoration: underline; }

/* ---------- additional information ---------------------------------------- */

.lg__cbs { flex: none; width: 204px; display: flex; flex-direction: column; gap: 11px; }
.lg__locs { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

.lg__cb { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.lg__cb input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg__box {
  flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
}
.lg__cb input:checked + .lg__box {
  background: var(--wrc-rackman); box-shadow: none;
}
.lg__cb input:checked + .lg__box::after {
  content: ""; width: 8px; height: 4.5px; margin-top: -2px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff;
  transform: rotate(-45deg);
}
.lg__cb input:focus-visible + .lg__box { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }
.lg__cbt { font-size: 12.5px; font-weight: 500; color: #364153; }

.lg__kv { display: flex; align-items: center; gap: 12px; }
.lg__kvk { font-size: 12px; font-weight: 500; color: #656772; }
.lg__kvv { font-size: 12.5px; font-weight: 600; color: #101828; }
.lg__kvv.is-muted { color: #656772; }

/* ---------- the freight section -------------------------------------------- */

.lg__legs { display: flex; flex-direction: column; gap: 14px; }

/* a #F8F8F8 card on the section's own #FBFBFB→#F8F8F8 gradient: at the bottom
   the two match exactly, so the whole separation is the inset ring */
.lg__leg {
  padding: 16px; border-radius: 12px; background: #f8f8f8;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; gap: 14px;
}

.lg__leghd { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg__leghdl { display: flex; align-items: center; gap: 12px; }
.lg__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lg__field--type { width: 150px; flex: none; gap: 4px; }
.lg__sel--origin { width: 276px; }
.lg__legmeta { font-size: 12px; font-weight: 500; color: #656772; white-space: nowrap; }

/* Data/Chip. Size=S is 18 tall on pad 3/8 at 10px; Size=M is 16 tall on pad
   4/10 at 11px — M is SHORTER than S, because its label is cap-height trimmed */
.lg__chip {
  display: inline-flex; align-items: center; border-radius: 999px;
  font-weight: 600; white-space: nowrap;
}
.lg__chip--solid { padding: 3px 8px; font-size: 10px; background: var(--wrc-rackman); color: #fff; }
.lg__chip--info  { padding: 4px 10px; font-size: 11px; background: rgba(39, 92, 211, .07); color: var(--wrc-rackman); }
.lg__chip--ok    { padding: 4px 10px; font-size: 11px; background: rgba(0, 128, 95, .07); color: var(--status-green); }

/* children are BOTTOM-aligned: the labelled field is 47 tall, the button 32 */
.lg__typerow { display: flex; align-items: flex-end; gap: 14px; }
.lg__typerow.is-ro { align-items: center; gap: 28px; }
.lg__suggest { display: flex; align-items: center; gap: 14px; }
.lg__rec { display: flex; align-items: center; gap: 4px; }
.lg__btn { height: 32px; padding: 0 16px; gap: 6px; font-size: 12.5px; font-weight: 600; }

/* ---------- the handling table (edit) -------------------------------------- */

.lg__dims {
  border-radius: 10px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  overflow: hidden;
}
/* ROW NO 56 · QTY 80 · HANDLING 150 · WEIGHT 110 · L/W/H 90 · CLASS 110,
   then a 10px spacer and the 30px delete — which HUGS class rather than
   sitting at the right edge. The frame leaves 634px empty to its right and
   that is the design, confirmed against the rendered frame. */
.lg__thead, .lg__drow, .lg__addrow {
  display: grid;
  grid-template-columns: 56px 80px 150px 110px 90px 90px 90px 110px 10px 30px;
  gap: 10px; padding: 0 14px; align-items: center;
  justify-content: start;
}
.lg__thead { height: 31px; background: #f8f8f8; align-items: start; padding-top: 9px; }
.lg__th {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
  white-space: nowrap;
}
.lg__drow {
  min-height: 48px; padding-top: 8px; padding-bottom: 8px;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .07);
}
.lg__c { min-width: 0; }
.lg__rn { font-size: 12.5px; font-weight: 500; color: #656772; }
.lg__sp { display: block; }

.lg__in {
  width: 100%; height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--white); border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font-size: 12.5px; font-weight: 500; color: #101828;
  font-variant-numeric: tabular-nums;
}
.lg__in:focus { outline: 2px solid var(--wrc-rackman); outline-offset: -1px; }
.lg__in--type { width: 150px; font-weight: 600; }

/* 29 tall against the inputs' 32, and TOP-aligned in the cell — the 3px
   mismatch is in the frame, not a rounding error here */
.lg__drop {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; height: 29px; padding: 0 8px 0 10px; border-radius: 8px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}
.lg__c--handling, .lg__c--cls { align-self: start; }
.lg__dropv {
  font-size: 12.5px; font-weight: 500; color: #101828;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lg__rm {
  width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center;
  color: #656772;
}
.lg__rm:hover { background: rgba(0, 0, 0, .05); color: var(--status-red); }

.lg__addrow {
  height: 35px; padding: 0 14px; gap: 8px;
  display: flex; align-items: center; justify-content: flex-start;
  font-size: 12.5px; font-weight: 600; color: var(--wrc-rackman);
}
.lg__addrow:hover { background: rgba(39, 92, 211, .04); }

/* the strip under the legs — an outlined row with no fill of its own */
.lg__addorigin {
  height: 40px; padding: 0 16px; gap: 8px;
  display: flex; align-items: center; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font-size: 12.5px; font-weight: 600; color: #364153;
}
.lg__addorigin:hover { background: rgba(0, 0, 0, .02); }
.lg__addorigin svg { color: #364153; }

/* ---------- the read-only table -------------------------------------------- */

/* four columns, and the table has NO fill and no row rules — only its own ring */
.lg__vtbl {
  border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  overflow: hidden;
}
.lg__vthead, .lg__vtrow {
  display: grid; grid-template-columns: 90px 110px 1fr 160px;
  padding: 0 14px; align-items: center;
}
.lg__vthead { height: 29px; background: #f8f8f8; }
.lg__vth {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
}
.lg__vtrow { height: 37px; background: var(--white); }
.lg__vc--no, .lg__vc--qty { font-size: 12.5px; font-weight: 500; color: #364153; }
.lg__vc--eq { font-size: 12.5px; font-weight: 600; color: #101828; }
.lg__vc--wt {
  font-size: 12.5px; font-weight: 600; color: #101828; text-align: right;
  font-variant-numeric: tabular-nums;
}
.lg__vth.lg__vc--wt { font-weight: 500; color: #656772; }

/* ---------- the leg footer -------------------------------------------------- */

.lg__legfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-top: 4px; flex-wrap: wrap; row-gap: 12px;
}
.lg__legfoot.is-ro { padding-top: 6px; }
.lg__metrics { display: flex; align-items: center; gap: 24px; }
.lg__metrics.is-ro { gap: 32px; }
.lg__metrics.is-ro .lg__vrule { height: 30px; align-self: center; }
.lg__metric { display: flex; flex-direction: column; gap: 2px; }
.lg__mk {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
  white-space: nowrap;
}
.lg__mv { font-size: 13px; font-weight: 600; color: #101828; }

.lg__legacts { display: flex; align-items: center; gap: 16px; }
.lg__price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.lg__pv {
  font-size: 20px; font-weight: 700; color: var(--status-orange);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* ---------- Calculate freight — `modal - freight-carrier` 18153:134142 ------ */

/* 11 columns measured off the frame: # 40 · SELECT 64 · CODE 120 · NAME 226 ·
   TRANSIT 80 · LANE 80 · COST 120 · QTY 56 · TOTAL 110 · MARGIN 96 · PRICE 120,
   the last five right-aligned so the money lines up. */
.fc { display: flex; flex-direction: column; gap: 14px; }
.fc__thead, .fc__tr {
  display: grid;
  grid-template-columns: 40px 64px 120px minmax(160px, 1fr) 80px 80px 120px 56px 110px 96px 120px;
  align-items: center;
}
.fc__thead { height: 32px; }
.fc__th {
  font-size: 10px; font-weight: 500; letter-spacing: .05em; color: #656772;
  white-space: nowrap;
}
.fc__tr {
  height: 40px; cursor: pointer;
  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .07);
}
.fc__tr:hover { background: rgba(0, 0, 0, .02); }
/* opaque, not a tint: a translucent blue over the hover wash bands the row */
.fc__tr.is-picked { background: #f0f4fc; }
.fc__tr.is-picked:hover { background: #f0f4fc; }
.fc__td { font-size: 12.5px; color: #364153; min-width: 0; }
.fc--n { color: #656772; }
.fc--code { font-weight: 600; color: #101828; }
.fc--name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc--lane, .fc--margin { color: #656772; }
.fc--cost, .fc--qty, .fc--total, .fc--margin, .fc--price {
  text-align: right; font-variant-numeric: tabular-nums;
}
.fc--total, .fc--price { font-weight: 600; color: #101828; }
.fc__tr.is-picked .fc--code, .fc__tr.is-picked .fc--price { color: var(--wrc-rackman); }

.fc__box {
  width: 16px; height: 16px; border-radius: 4px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  display: grid; place-items: center; color: #fff;
}
.fc__box.is-on { background: var(--wrc-rackman); box-shadow: none; }

.fc__sel {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 20px; border-radius: 12px; background: rgba(39, 92, 211, .07);
}
.fc__sell { display: flex; flex-direction: column; gap: 3px; }
.fc__selv { font-size: 15px; font-weight: 600; color: #101828; }
.fc__selr { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fc__price {
  font-size: 24px; font-weight: 700; color: var(--wrc-rackman);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}

/* the 38px tile the big table modals put left of the title */
.sheet__badge {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  background: #f8f8f8; display: grid; place-items: center; color: #364153;
}

/* ---------- mobile ---------------------------------------------------------- */

@media (max-width: 900px) {
  .lg__row2 { grid-template-columns: 1fr; }
  .lg__card { padding: 14px 14px 16px; }
  .lg__arow, .lg__arow--info { flex-direction: column; gap: 14px; }
  /* the vertical rule becomes the horizontal one between stacked halves */
  .lg__vrule { width: auto; align-self: stretch; height: 1px; }
  .lg__cbs { width: auto; }

  .lg__leghd { flex-direction: column; align-items: stretch; gap: 10px; }
  .lg__sel--origin { width: 100%; }
  .lg__legmeta { white-space: normal; }
  .lg__typerow { flex-direction: column; align-items: stretch; gap: 12px; }
  .lg__field--type, .lg__in--type { width: 100%; }
  .lg__suggest { flex-wrap: wrap; }

  /* the handling sheet keeps its columns and scrolls — collapsing eight
     numeric fields into cards makes a dimension sheet unreadable */
  .lg__dims, .lg__vtbl { overflow-x: auto; }
  .lg__thead, .lg__drow, .lg__addrow { min-width: 780px; }
  .lg__vthead, .lg__vtrow { min-width: 480px; }

  .lg__legfoot { flex-direction: column; align-items: stretch; }
  .lg__legacts { flex-wrap: wrap; }
  .lg__price { align-items: flex-start; }

  .fc__thead { display: none; }
  .fc__tr {
    display: flex; flex-wrap: wrap; gap: 4px 10px; height: auto;
    padding: 10px 0; align-items: baseline;
  }
  .fc--name { flex: 1 1 100%; font-weight: 600; color: #101828; }
  .fc__sel { flex-direction: column; align-items: stretch; gap: 10px; }
  .fc__selr { align-items: flex-start; }
}

/* ---------- Additional Quote Info — `modal - additional-quote-info` 18153:133547
   three 192-wide columns on a 16px gap, separated by 1px rules that are VECTOR
   strokes in the frame and so are drawn here as elements, not borders.

   `aqi`, NOT `ai`: the Add Items picker already owns the `.ai__` namespace
   (css/pickers.css), and pickers.css loads after this file — so `.ai__row`
   there, a 97px-tall row with a bottom border, silently swallowed these and
   turned a 387px modal into a 900px one with rules between every field. */

.aqi { display: flex; align-items: stretch; gap: 16px; }
.aqi__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.aqi__rule { flex: none; width: 1px; background: rgba(0, 0, 0, .07); }

.aqi__hd { display: flex; align-items: center; gap: 6px; height: 30px; }
.aqi__tile {
  flex: none; width: 28px; height: 28px; border-radius: 8px; background: #f8f8f8;
  display: grid; place-items: center; color: #364153;
}
.aqi__t { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #101828; }

.aqi__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 16px; }
.aqi__k { font-size: 12.5px; font-weight: 500; color: #364153; }
.aqi__v { font-size: 13px; font-weight: 600; color: #101828; font-variant-numeric: tabular-nums; }
.aqi__chip {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: rgba(0, 0, 0, .05); color: #656772;
}
.aqi__chip.is-ok { background: rgba(0, 128, 95, .07); color: var(--status-green); }

.aqi__stack { display: flex; flex-direction: column; gap: 4px; }
.aqi__sk { font-size: 10px; font-weight: 500; letter-spacing: .04em; color: #656772; }
.aqi__sv { font-size: 13px; font-weight: 600; color: #101828; }

/* ---------- the reject-reason dialog on the public approval page ----------- */

.sh__reasonk { font-size: 10px; font-weight: 500; letter-spacing: .05em; color: #656772; }
.sh__reason {
  width: 100%; min-height: 96px; padding: 10px 12px; border-radius: 8px;
  background: var(--white); border: 0; resize: vertical;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font: inherit; font-size: 13px; line-height: 1.5; color: #101828;
}
.sh__reason:focus { outline: 2px solid var(--wrc-rackman); outline-offset: -1px; }

/* The answer, read back to the customer under the confirmation.

   CENTRED BLOCK, LEFT-ALIGNED PROSE. The head is a centred column, so the pill
   and the reason card centre with it — but the reason itself is a sentence the
   customer wrote, and centred prose wraps into a ragged hourglass that is
   harder to read the longer it gets. The card centres; its text does not. */
.sh__after { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sh__why {
  margin: 0; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 14px; border-radius: 10px; background: rgba(0, 0, 0, .03);
  font-size: 13px; line-height: 1.5; color: #364153; max-width: 560px;
  text-align: left;
}
.sh__whyk { font-size: 10px; font-weight: 500; letter-spacing: .05em; color: #656772; }

@media (max-width: 900px) {
  .aqi { flex-direction: column; gap: 14px; }
  .aqi__rule { width: auto; height: 1px; }
}

/* ---------- Add Contact / Add Address — 18153:133519 and 18153:133470 -------
   `cf` (customer forms), not `ai`/`ad`/`f` — short namespaces in this build are
   already spoken for, and the last one that collided turned a 387px modal into
   a 900px one (see the note above `.aqi__`).                                  */

.cf__wrap { display: flex; flex-direction: column; gap: 16px; }
/* row gap differs between the two: add-contact 16, add-address 14 */
.cf { display: grid; column-gap: 16px; }
.cf--2 { grid-template-columns: 1fr 1fr; row-gap: 16px; }
.cf--3 { grid-template-columns: 1fr 1fr 1fr; row-gap: 14px; }
/* JOB TITLE runs the width of the dialog; the name and contact pairs do not */
.cf__f--full, .cf .cf__f--full { grid-column: 1 / -1; }

.cf__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf__k {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
  white-space: nowrap;
}

.cf__in, .cf__sel {
  width: 100%; height: 32px; padding: 0 10px; border-radius: 8px;
  background: var(--white); border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font: inherit; font-size: 13px; font-weight: 600; color: #101828;
}
/* the frame's placeholders are SEMI BOLD and the same grey as the label, not
   the lighter regular weight a browser defaults to */
.cf__in::placeholder { font-weight: 600; color: #656772; }
/* a select still showing "Select state" / "None" is showing a placeholder, so
   it reads like one — only the three the frame fills (COUNTRY, FORKLIFT, TAAS)
   start dark */
.cf__sel.is-ph .cf__selv { font-weight: 600; color: #656772; }
.cf__in:focus, .cf__sel:focus-visible { outline: 2px solid var(--wrc-rackman); outline-offset: -1px; }
/* SAP mints the address id, so the field shows what will happen and takes
   nothing — greyed rather than merely unfocusable, or it reads as a bug */
.cf__in.is-ro { background: #f8f8f8; color: var(--text-light); cursor: default; }

.cf__sel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left;
}
.cf__selv { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf__sel svg { flex: none; color: var(--text-light); }

.cf__cb { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; font-weight: 500; color: #364153; }
.cf__cb input { position: absolute; opacity: 0; width: 0; height: 0; }
.cf__box {
  flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
}
.cf__cb input:checked + .cf__box { background: var(--wrc-rackman); box-shadow: none; }
.cf__cb input:checked + .cf__box::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg);
}
.cf__cb input:focus-visible + .cf__box { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }

/* the billing block the checkbox unlocks — set apart so it reads as a second
   address rather than more of the first */
.cf__bill {
  padding: 14px; border-radius: 10px; background: #f8f8f8;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
}

@media (max-width: 900px) {
  .cf--2, .cf--3 { grid-template-columns: 1fr; }
  .cf { gap: 12px; }
  /* the frame's mobile twin stacks its actions full width, Cancel on top */
  .sheet__ft { flex-direction: column-reverse; gap: 10px; }
  .sheet__ft .btn { width: 100%; justify-content: center; }
}

/* ---------- the badged modal family ----------------------------------------
   add-contact 18153:133519, add-address :133470, additional-quote-info :133547,
   freight-carrier :134142, relationship-map :134534 and delivery-log :133677 all
   measure the SAME chrome, and it is not the chrome the older sheets were ported
   to: radius 16 rather than 12, header padding 20/20/20/24 rather than 18/20, a
   15%-black divider rather than 7%, body padding 18/24, and a #f8f8f8 footer on
   16/20/16/24. Scoped to sheets that carry a badge so the older, smaller dialogs
   keep the spec they were measured against. */
.sheet:has(.sheet__badge) { border-radius: 16px; }
.sheet:has(.sheet__badge) .sheet__hd {
  padding: 20px 20px 20px 24px; border-bottom-color: rgba(0, 0, 0, .15);
}
.sheet:has(.sheet__badge) .sheet__body { padding: 18px 24px; }
.sheet:has(.sheet__badge) .sheet__ft {
  padding: 16px 20px 16px 24px; gap: 10px; background: #f8f8f8;
  border-top: 0;
}
/* Action/Button is 32 in every one of these frames, and .btn's 9px padding on a
   15px line box makes it 35 — so the footer came out 67 against a measured 64 */
.sheet:has(.sheet__badge) .sheet__ft .btn { height: 32px; padding: 0 16px; }

.lg__vc--eq { display: flex; align-items: center; gap: 8px; }

/* one block per shipment, the frame's own group repeated. The rule between them
   is what stops three stacked blocks reading as one long list. */
.lg__vblock { display: flex; flex-direction: column; gap: 14px; }
.lg__vblock + .lg__vblock {
  padding-top: 16px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .07);
}
.lg__vhead { display: flex; align-items: center; gap: 12px; }

/* the sum, drawn only when the freight is actually split */
.lg__vtotal {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
  padding-top: 14px; box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, .07);
}

/* the Procurement column's checkboxes — the one interactive thing in an
   otherwise read-only modal, so they carry a disabled state the frame's other
   fields never need */
.aqi__cb { display: flex; align-items: center; gap: 9px; cursor: pointer;
           font-size: 12.5px; font-weight: 500; color: #364153; }
.aqi__cb input { position: absolute; opacity: 0; width: 0; height: 0; }
.aqi__box {
  flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
  display: grid; place-items: center;
}
.aqi__cb input:checked + .aqi__box { background: var(--wrc-rackman); box-shadow: none; }
.aqi__cb input:checked + .aqi__box::after {
  content: ""; width: 8px; height: 4.5px; margin-top: -2px;
  border-left: 1.8px solid #fff; border-bottom: 1.8px solid #fff; transform: rotate(-45deg);
}
.aqi__cb input:focus-visible + .aqi__box { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }
.aqi__cb.is-ro { cursor: default; }
.aqi__cb.is-ro .aqi__box { background: #f8f8f8; }
.aqi__cb.is-ro input:checked + .aqi__box { background: var(--wrc-rackman); }