/* Quote → Credit Card Log, and the Tax Certificate modal.

   MEASURED off `Rackman - New Quote - 5 Accounting - Desktop` 18153:132872,
   its mobile twin 18506:71373, and `modal - tax-cert` 18153:134668 / mobile
   18513:71972 — do not eyeball.

   Every 1px ring here is a Figma stroke with strokeAlign INSIDE, so it is an
   inset box-shadow and never a CSS border: a border would add 2px the frame
   does not have and break the measured 32/54 heights. The two card-head rules
   and the summary divider ARE filled 1px rectangles, so those are elements. */

.cl { display: flex; flex-direction: column; }

/* pay-body: HORIZONTAL, gap 20, padding 16/0/0/0. The left column FILLs, the
   totals column is FIXED 360, and the two are TOP-aligned — the totals card is
   191 tall against a 369 left column and must not stretch to match it. */
.cl__body {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: 20px; align-items: start;
}
.cl__l { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* both section cards: pad 16, r12, white on the tab card behind them, and a
   15%-black ring rather than the 7% the outer contents-card uses */
.cl__card {
  padding: 16px; border-radius: 12px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; gap: 14px;
}

/* Layout/Section Label, Divider=On */
.cl__sec { display: flex; flex-direction: column; gap: 10px; }
.cl__seck { font-size: 10px; font-weight: 600; letter-spacing: .05em; color: #656772; }
.cl__secrule { display: block; height: 1px; background: rgba(0, 0, 0, .07); }

/* ---------- payment terms ------------------------------------------------- */

/* the two fields are FIXED 200 and 220 and do NOT fill the row — the 794px to
   their right is empty in the frame, and filling it would be an invention */
.cl__trow { display: flex; align-items: flex-start; gap: 14px; }
.cl__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl__f--terms { width: 200px; }
.cl__f--dep   { width: 220px; }
.cl__k {
  font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: #656772;
  white-space: nowrap;
}

.cl__sel {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  text-align: left; cursor: pointer;
}
.cl__sel:hover { background: var(--grey-light); }
.cl__sel:focus-visible { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }
.cl__selv {
  font-size: 13px; font-weight: 600; color: #101828;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl__selc { color: #656772; flex: none; }

/* view drops the box and keeps the value — the same fork Logistics makes */
.cl__ro { height: 32px; display: flex; align-items: center;
          font-size: 13px; font-weight: 600; color: #101828; }

/* ---------- payment method ------------------------------------------------ */

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

/* 54 = 12 + 30 + 12 */
.cl__pm {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 54px; padding: 12px 14px; border: 0; border-radius: 10px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  text-align: left;
}
button.cl__pm { cursor: pointer; }
button.cl__pm:hover { background: var(--grey-light); }
button.cl__pm:focus-visible { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }
/* the selected row is the brand at 7% behind a full-strength brand ring */
.cl__pm.is-sel {
  background: rgba(39, 92, 211, .07);
  box-shadow: inset 0 0 0 1px var(--wrc-rackman);
}
button.cl__pm.is-sel:hover { background: rgba(39, 92, 211, .12); }

.cl__pmi { flex: none; display: grid; place-items: center; color: #656772; }
.cl__pm.is-sel .cl__pmi { color: var(--wrc-rackman); }
.cl__pmt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cl__pmn { font-size: 13px; line-height: 16px; font-weight: 600; color: #101828; }
.cl__pm.is-sel .cl__pmn { color: var(--wrc-rackman); }
.cl__pme { font-size: 11px; line-height: 13px; color: #656772; }

.cl__none { margin: 0; font-size: 12.5px; color: var(--text-light); }

/* Action/Button Type=Secondary at 32 — height, not padding, or the 1px ring
   and the 15px line box make it 33 */
.cl__btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl__btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px;
  padding: 0 16px; border: 0; border-radius: 8px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font-size: 12.5px; font-weight: 600; color: #364153;
  white-space: nowrap; cursor: pointer;
}
.cl__btn:hover { background: var(--grey-light); }
.cl__btn:focus-visible { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }
.cl__btn svg { flex: none; }

/* ---------- order summary ------------------------------------------------- */

.cl__totals {
  padding: 16px; border-radius: 12px; background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  display: flex; flex-direction: column; gap: 10px;
}
.cl__tk { font-size: 10px; font-weight: 600; letter-spacing: .05em; color: #656772; }

.cl__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cl__rk { font-size: 12.5px; line-height: 15px; font-weight: 500; color: #656772; }
.cl__rv {
  font-size: 13px; line-height: 16px; font-weight: 600; color: #101828;
  font-variant-numeric: tabular-nums;
}
/* the divider is the emphasis boundary on BOTH sides of the row: below it the
   labels go ink and the values go orange */
.cl__row.is-big .cl__rk { font-size: 13px; line-height: 16px; font-weight: 600; color: #101828; }
.cl__row.is-big .cl__rv { font-size: 16px; line-height: 19px; color: #e55a33; }

/* 15%, not the 7% the card heads use */
.cl__div { display: block; height: 1px; background: rgba(0, 0, 0, .15); }

/* ---------- tax certificate modal ----------------------------------------- */

/* The sheet chrome is already right: the badge scopes it to the r16 / 20-20-20-24
   / 18-24 / #f8f8f8-footer family the other measured modals share. */
.cl__tc { display: flex; flex-direction: column; gap: 14px; }
.cl__tf { display: flex; flex-direction: column; gap: 6px; }
.cl__tf--hug { align-items: flex-start; }
.cl__tk2 {
  font-size: 10.5px; font-weight: 500; letter-spacing: .03em; color: #656772;
}
/* (392 - 12) / 2 */
.cl__trow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }

.cl__tin {
  width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font: 600 13px/1.23 Inter, sans-serif; color: #101828;
}
.cl__tin::placeholder { font-weight: 500; color: var(--black-35); }
.cl__tin:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--wrc-rackman); }

/* the frame's select hugs to 34 while the two inputs beside it are fixed at 32,
   so their bottoms miss each other by 2px. Built at 32 — the mismatch is a slip
   in the file, not a design, and the row is what makes it visible. */
.cl__tsel {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 32px; padding: 0 12px; border: 0; border-radius: 8px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  text-align: left; cursor: pointer;
}
.cl__tsel:hover { background: var(--grey-light); }
.cl__tsel:focus-visible { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }
/* Medium, where the two real inputs are Semi Bold — that is what the file has */
.cl__tsv {
  font-size: 13px; font-weight: 500; color: #101828;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl__tsv.is-ph { color: var(--black-35); }
.cl__tsc { color: #656772; flex: none; }

.cl__tchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px 6px 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
}
.cl__tdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cl__tchip.is-ok  { background: rgba(0, 128, 95, .07);  color: var(--status-green); }
.cl__tchip.is-bad { background: rgba(229, 90, 51, .07); color: #e55a33; }
.cl__tchip.is-off { background: #f8f8f8; color: #656772; }

/* Action/Button Type=Destructive — a tonal fill, no ring */
.cl__trm {
  display: inline-flex; align-items: center; height: 32px; padding: 0 16px;
  border: 0; border-radius: 8px; background: rgba(229, 90, 51, .07);
  font-size: 12.5px; font-weight: 600; color: #e55a33; cursor: pointer;
}
.cl__trm:hover { background: rgba(229, 90, 51, .12); }
.cl__trm:focus-visible { outline: 2px solid #e55a33; outline-offset: 2px; }

/* ---------- request payment method — 18153:134642 ------------------------- */

.cl__req { display: flex; flex-direction: column; gap: 16px; }

/* 48 = 10 + 28 + 10, the copy running to two lines at 512 wide. A tint, not a
   card: no stroke anywhere on it. */
.cl__secure {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 12px; border-radius: 10px;
  background: rgba(0, 128, 95, .07); color: var(--status-green);
  font-size: 11.5px; line-height: 14px; font-weight: 500;
}
.cl__secure svg { flex: none; }

/* Form/Field Density=Micro — the same 9.5/4/32 stack the tab's fields use */
.cl__rf { display: flex; flex-direction: column; gap: 4px; }
.cl__rin {
  width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 8px;
  background: var(--white); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font: 600 13px/1.23 Inter, sans-serif; color: #101828;
}
/* Content=Placeholder is the muted twin of the filled value, same weight */
.cl__rin::placeholder { color: #656772; }
.cl__rin:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--wrc-rackman); }

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

@media (max-width: 900px) {
  /* the totals column drops under the cards rather than beside them; the frame
     moves it to the mobile quote footer, which this tab does not have */
  .cl__body { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* mobile cards are r10 on 12 padding behind a 7% hairline, not r12/16/15% */
  .cl__card, .cl__totals {
    padding: 12px; border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
    gap: 10px;
  }
  .cl__seck, .cl__tk { color: #364153; }

  /* the two fields stack and fill the gutter */
  .cl__trow { flex-direction: column; gap: 10px; }
  .cl__f--terms, .cl__f--dep { width: 100%; }
  .cl__sel, .cl__ro { height: 40px; }
  .cl__sel { padding: 0 14px; }

  .cl__pms { gap: 10px; }
  .cl__pm { min-height: 50px; padding: 10px 12px; gap: 10px; border-radius: 8px; }
  .cl__pm.is-sel { box-shadow: inset 0 0 0 1.5px var(--wrc-rackman); }
  .cl__pmn { font-size: 12px; line-height: 15px; }
  .cl__pmt { gap: 2px; }

  /* stacked and full width — the frame's own 16px button height is the instance
     failing to hug, so they take the mobile control height instead */
  .cl__btns { flex-direction: column; align-items: stretch; gap: 8px; }
  .cl__btn { height: 40px; justify-content: center; }

  .cl__rk { color: #364153; }

  /* the sheet becomes the bottom sheet the mobile twin draws; its grabber and
     rounded top come from the shared modal chrome */
  .cl__trow2 { grid-template-columns: 1fr 1fr; }

  /* THE BADGED MODALS RE-LAY THEIR FOOTER ON A PHONE, and the two shapes are
     not the same — so this is not one rule.

     WITHOUT a left slot (request-payment-method 18513:71938): a column on a 12
     gap, both buttons full width, Cancel ABOVE the primary — which is the DOM
     order openModal already emits, so nothing needs reordering.

     WITH one (tax-cert 18513:72004): the destructive button takes a full row of
     its own and Cancel/Save SHARE the next, 174 each of a 358 gutter. Wrap plus
     a 100% basis on the left slot is what splits the rows; a plain column would
     have stacked all three and stretched a pair the frame keeps side by side. */
  .sheet:has(.sheet__badge) .sheet__ft {
    flex-direction: column; align-items: stretch; gap: 12px;
    padding: 14px 16px 18px;
  }
  .sheet:has(.sheet__badge) .sheet__ft .btn { width: 100%; justify-content: center; }

  .sheet:has(.sheet__badge) .sheet__ft.has-left {
    flex-direction: row; flex-wrap: wrap; align-items: stretch;
    justify-content: flex-start; gap: 12px 10px;
  }
  .sheet:has(.sheet__badge) .sheet__ft.has-left > :first-child {
    flex: 1 0 100%; margin-right: 0; justify-content: center;
  }
  .sheet:has(.sheet__badge) .sheet__ft.has-left .btn { flex: 1 1 0; width: auto; }
}