/* Customer Detail — `Rackman - Customer Detail` 18159:43276, nine frames.

   EVERY STROKE IN THESE FRAMES IS strokeAlign INSIDE, without exception, and
   almost every stroked box is full-width or hugs its content — so a CSS border
   would add 2px the design never has. They are all inset box-shadows here. The
   one border in the file is the dashed add row, which CSS can only draw as a
   real border; its 2px comes back out of the 11/12 padding.

   The RULES between things are different animals: 1px RECTANGLE elements with
   a #000@15% fill, not strokes. Those are backgrounds on a 1px span.        */

/* ---- page chrome -------------------------------------------------------- */

.cd .panel { gap: 12px; }             /* the frame's panel gap, not the 20 */

.cd__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.cd__back { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cd__backl { font-size: 13px; font-weight: 600; color: var(--wrc-rackman); white-space: pre; }
.cd__backl:hover { text-decoration: underline; }
.cd__backt { font-size: 13px; color: var(--text-light); white-space: pre; overflow: hidden; text-overflow: ellipsis; }

.cd__nq {
  display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 18px; border-radius: 8px;
  background: var(--wrc-rackman); color: var(--white);
  font-size: 13px; font-weight: 600; white-space: pre; flex: none;
}
.cd__nq:hover { background: var(--wrc-rackman-dark); }

.cd__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.cd__tl { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.cd__tl h1 { font-size: 26px; font-weight: 600; color: var(--text-dark); line-height: 1.2; }
.cd__pill {
  padding: 3px 10px; border-radius: 999px; background: var(--grey-light);
  font-size: 11px; font-weight: 500; color: var(--text-medium); white-space: nowrap;
}
/* A record with no number yet. The same Stale tone the New Quote screen's own
   Draft chip carries, so the two unsaved states read as one idea. */
.cd__pill--draft { background: rgba(120, 113, 108, .12); color: #78716c; font-weight: 600; }

/* CREATE: the heading IS the field, once the sheet in front of it has been
   answered. Set to the h1's own type so the row does not change height when a
   saved record swaps it back for text — and left UNDERLINED ONLY while it is
   empty, hovered or focused, so a named draft reads as the heading it is
   rather than as a form control sitting in the title row. */
.cd__nameinput {
  font: 600 26px/1.2 inherit; font-family: inherit; color: var(--text-dark);
  border: 0; background: none; outline: none; padding: 0; min-width: 0;
  width: clamp(220px, 34ch, 560px); box-shadow: none;
  border-radius: 4px;
}
.cd__nameinput::placeholder { color: var(--text-light); font-weight: 500; }
/* the draft's name field once the title row is gone: it lives in the info
   row's own identity block and takes that block's 14px Semi Bold */
.cd__inameinput {
  font-size: 14px; line-height: 1.3; width: 100%;
  border-radius: 4px; padding: 1px 2px; margin: -1px -2px;
}
.cd__nameinput:placeholder-shown,
.cd__nameinput:hover { box-shadow: inset 0 -1px 0 0 var(--black-15); }
.cd__nameinput:focus { box-shadow: inset 0 -2px 0 0 var(--wrc-rackman); }
.cd__nameinput.is-bad { box-shadow: inset 0 -2px 0 0 var(--wrc-orange); }

/* Add payment method — checkout step 5 in a Rackman sheet. The `.copaycard`
   header is the storefront's own, reused so the brand marks sit the same way;
   everything under it is this surface's 32-tall field. */
.cd__pmform { display: flex; flex-direction: column; gap: 14px; }
.cd__pmform .copaycard > span:first-child { font: 600 14px/1.4 inherit; color: var(--text-dark); }
.cd__pmaddr {
  min-height: 32px; display: flex; align-items: center; padding: 0 10px;
  border-radius: 8px; background: var(--grey-light);
  font-size: 13px; font-weight: 600; color: var(--text-medium);
}
.cd__pmsecure {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px 10px 12px;
  border-radius: 10px; background: var(--wrc-green-7);
  font-size: 11.5px; font-weight: 500; color: var(--wrc-green); line-height: 1.4;
}
.cd__pmsecure svg { flex: none; margin-top: 1px; }

/* the new-customer sheet — two fields, the second a segmented control */
.cd__ncbody { display: flex; flex-direction: column; gap: 16px; }
.cd__seg { align-self: flex-start; }
.cd__seg button { min-width: 96px; }
.cd__ncbody .cd__in.is-bad { box-shadow: inset 0 0 0 1px var(--wrc-orange); }

/* Action/Customer Actions. The labels are literal capitals in the frame — no
   text-transform, so a label that ever needs mixed case can have it. */
.cd__acts { display: flex; align-items: center; gap: 8px; flex: none; }
.cd__act, .cd__save {
  display: inline-flex; align-items: center; gap: 4px; height: 32px;
  padding: 0 8px; border-radius: 8px; white-space: nowrap;
  font-size: 10px; font-weight: 500; letter-spacing: .05em;
}
.cd__act { background: var(--white); color: var(--text-light); box-shadow: inset 0 0 0 1px var(--black-15); }
.cd__act:hover { background: var(--grey-light); }
.cd__act svg { color: var(--text-medium); flex: none; }
.cd__act--close { gap: 8px; padding: 0 16px 0 14px; color: var(--text-medium); }
.cd__act--close svg { color: var(--text-light); }
.cd__save {
  gap: 6px; padding: 0 16px; background: var(--wrc-rackman); color: var(--white);
  font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
}
.cd__save:hover { background: var(--wrc-rackman-dark); }
.cd__save svg { color: var(--white); flex: none; }

/* ---- Rackman/Customer Info Row 1672x64 ---------------------------------- */

.cd__info {
  display: flex; align-items: center; gap: 12px; min-height: 64px;
  padding: 16px; border-radius: 10px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--black-7);
}
.cd__ig { display: flex; align-items: center; gap: 16px; flex: 1 1 0; min-width: 0; }
.cd__idiv { width: 1px; height: 32px; background: var(--black-15); flex: none; }
.cd__itile {
  width: 30px; height: 30px; border-radius: 8px; background: var(--grey-light);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-medium); flex: none;
}
.cd__ident { display: flex; flex-direction: column; min-width: 0; }
.cd__icode { font-size: 12px; font-weight: 500; color: var(--text-light); letter-spacing: .03em; }
.cd__iname { font-size: 14px; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd__iwho { display: flex; align-items: center; gap: 4px; min-width: 0; }
.cd__iav {
  width: 28px; height: 28px; border-radius: 999px; background: var(--grey-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600; color: var(--text-medium); flex: none;
}
.cd__iwhon { font-size: 14px; font-weight: 600; color: var(--text-dark); white-space: nowrap; }
.cd__iwhor { font-size: 10px; color: var(--text-light); }

/* Form/Field Density=Micro — the one type pair the whole screen is built on */
.cd__f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd__fk { font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: var(--text-light); }
.cd__fv { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.cd__fv.is-due, .cd__fv.is-tax { color: var(--wrc-orange); }
.cd__fv.is-yes { color: var(--wrc-green); }
.cd__fv.is-empty { color: var(--text-light); font-weight: 600; }
.cd__ig .cd__f + .cd__f { margin-left: 16px; }

/* ---- detail card + tab bar ---------------------------------------------- */

.cd__card {
  display: flex; flex-direction: column; gap: 18px;
  padding: 16px; border-radius: 12px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--black-7);
}

/* No rule under the bar — only the active tab's own underline, its own width. */
.cd__tabs { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.cd__tab { display: flex; flex-direction: column; gap: 9px; }
.cd__tabr {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--text-medium); white-space: pre;
}
.cd__tabr svg { flex: none; }
.cd__tabu { display: block; height: 2px; border-radius: 2px; background: transparent; }
.cd__tab.is-on .cd__tabr { font-weight: 600; color: var(--wrc-rackman); }
.cd__tab.is-on .cd__tabu { background: var(--wrc-rackman); }
.cd__tab:hover .cd__tabr { color: var(--text-dark); }
.cd__tab.is-on:hover .cd__tabr { color: var(--wrc-rackman); }

.cd__ch { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cd__ch h2 { font-size: 15px; font-weight: 600; color: var(--text-dark); }

/* the two 1px rules the frames draw as RECTANGLE elements */
.cd__hrule { display: block; height: 1px; background: var(--black-15); }
.cd__brule { display: block; height: 1px; background: var(--black-7); }
.cd__vrule { width: 1px; background: var(--black-15); align-self: stretch; }

/* ---- contacts: view ------------------------------------------------------ */

.cd__ct { display: flex; flex-direction: column; gap: 8px; }

/* The header row sits flush to the card edge and the data rows inset by their
   own 14px padding, so PHONE and EMAIL land 14px left of their values. That is
   what 18155:29046 draws; it is not a misalignment to correct. */
.cd__cthead {
  display: grid; grid-template-columns: 288px 140px minmax(0, 1fr) 120px; gap: 14px;
  font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--text-light);
}
.cd__cthr { text-align: right; padding-right: 18px; }
.cd__ctrule { display: block; height: 1px; background: var(--black-15); }

.cd__ctrow {
  display: grid; grid-template-columns: 34px 240px 140px minmax(0, 1fr) 120px;
  gap: 14px; align-items: center; min-height: 58px; padding: 12px 14px;
  border-radius: 10px; background: linear-gradient(180deg, #fbfbfb, var(--grey-light));
  box-shadow: inset 0 0 0 1px var(--black-7);
}
.cd__ct .cd__ctrow + .cd__ctrow { margin-top: 10px; }
.cd__av {
  width: 34px; height: 34px; border-radius: 999px; background: var(--grey-light);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--text-medium); flex: none;
}
.cd__ctn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd__ctnr { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cd__ctname { font-size: 13px; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd__ctrole { font-size: 11px; color: var(--text-light); }
.cd__ctv { font-size: 12px; color: var(--text-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd__ctd { display: flex; justify-content: flex-end; align-items: center; }

.cd__pbadge {
  padding: 1px 6px; border-radius: 999px; background: var(--wrc-rackman);
  font-size: 8px; font-weight: 600; color: var(--white); flex: none;
}
.cd__dchip {
  padding: 4px 10px; border-radius: 999px; background: var(--wrc-rackman-7);
  font-size: 11px; font-weight: 600; color: var(--wrc-rackman);
}
/* the address and card lists use the green chip, not the blue one */
.cd__gchip {
  padding: 3px 8px; border-radius: 999px; background: var(--wrc-green-7);
  font-size: 10px; font-weight: 600; color: var(--wrc-green); flex: none;
}

/* ---- contacts: edit — 360 | 1 | 1fr at 20px gutters --------------------- */

.cd__two { display: grid; grid-template-columns: 360px 1px minmax(0, 1fr); gap: 20px; align-items: stretch; }
.cd__pane { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* The only real border on the screen: CSS cannot dash an inset shadow. The 2px
   it costs comes out of the 11/12 padding so the row still measures 37. */
.cd__dash {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 37px; padding: 10px 11px; border-radius: 9px;
  border: 1px dashed var(--black-15); background: none;
  font-size: 12.5px; font-weight: 600; color: var(--wrc-rackman);
}
.cd__dash:hover { background: var(--wrc-rackman-7); }
.cd__dash svg { flex: none; }

.cd__search {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 8px; background: var(--white); box-shadow: inset 0 0 0 1px var(--black-15);
}
.cd__search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none; font-size: 12.5px; }
.cd__search input::placeholder { color: var(--text-light); }
.cd__searchi { display: inline-flex; color: var(--text-light); }

.cd__clist { display: flex; flex-direction: column; gap: 8px; }
.cd__ccard {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 54px; padding: 10px 12px; border-radius: 9px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--black-15);
}
.cd__ccard.is-on { background: var(--wrc-rackman-7); box-shadow: inset 0 0 0 1px var(--wrc-rackman); }
.cd__ccard.is-on .cd__av { background: var(--wrc-rackman); color: var(--white); }
.cd__ci { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd__cie { font-size: 11px; color: var(--text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd__foot { font-size: 11px; color: var(--text-light); }
.cd__none { font-size: 12.5px; color: var(--text-light); padding: 8px 2px; }

.cd__form { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cd__fhd { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 32px; }
.cd__fhd h3 { font-size: 16px; font-weight: 600; color: var(--text-dark); }
.cd__fhda { display: flex; align-items: center; gap: 18px; flex: none; }

.cd__chk { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text-medium); cursor: pointer; }
.cd__chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.cd__chkb {
  width: 18px; height: 18px; border-radius: 4px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--black-15); background: var(--white); color: transparent;
}
.cd__chk input:checked + .cd__chkb { background: var(--wrc-rackman); box-shadow: none; color: var(--white); }
.cd__chk input:focus-visible + .cd__chkb { outline: 2px solid var(--wrc-rackman); outline-offset: 2px; }

.cd__ghost {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px;
  border-radius: 8px; background: none; font-size: 12.5px; font-weight: 600; color: var(--text-medium);
}
.cd__ghost:hover { background: var(--grey-light); }

.cd__grid { display: flex; flex-direction: column; gap: 14px; }
.cd__gr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cd__gr:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.cd__ff { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cd__in {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 0;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--black-15);
  font-size: 13px; font-weight: 600; color: var(--text-dark); font-family: inherit;
  width: 100%; outline: none;
}
.cd__in:focus { box-shadow: inset 0 0 0 1px var(--wrc-rackman); }
.cd__in[readonly] { background: var(--grey-light); color: var(--text-medium); }

.cd__fft { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cd__btn1, .cd__btn2, .cd__btnDel {
  display: inline-flex; align-items: center; justify-content: center; height: 32px;
  padding: 0 16px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.cd__btn1 { background: var(--wrc-rackman); color: var(--white); }
.cd__btn1:hover { background: var(--wrc-rackman-dark); }
.cd__btn2 { background: var(--white); color: var(--text-medium); box-shadow: inset 0 0 0 1px var(--black-15); }
.cd__btn2:hover { background: var(--grey-light); }
/* tonal destructive — a 7% wash, no stroke */
.cd__btnDel { background: var(--wrc-orange-7); color: var(--wrc-orange); }
.cd__btnDel:hover { background: var(--wrc-orange-20); }

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

.cd__ab { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 20px; align-items: start; }
.cd__alist { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cd__alabel { font-size: 10px; font-weight: 600; letter-spacing: .05em; color: var(--text-light); }
.cd__acard {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 50px; padding: 10px 12px; border-radius: 9px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--black-15);
}
.cd__acard.is-on { background: var(--wrc-rackman-7); box-shadow: inset 0 0 0 1px var(--wrc-rackman); }
.cd__ai { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cd__ail { font-size: 12.5px; font-weight: 600; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd__acard.is-on .cd__ail { color: var(--wrc-rackman); }
.cd__ai2 { font-size: 11px; color: var(--text-light); }

.cd__adet {
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: 18px 20px 20px; border-radius: 12px;
  background: linear-gradient(180deg, #fbfbfb, var(--grey-light));
  box-shadow: inset 0 0 0 1px var(--black-7);
}
.cd__adhd { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cd__adhd h3 { font-size: 16px; font-weight: 600; color: var(--text-dark); }
.cd__map { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--wrc-rackman); white-space: nowrap; }
.cd__map:hover { text-decoration: underline; }
.cd__afields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cd__acol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* the same 32-tall field the contact form and the card panel use — see the
   note on addrField() for why the grid takes inputs at all */
.cd__afields.is-edit .cd__in { background: var(--white); }
.cd__afields.is-edit .cd__in[readonly] { background: rgba(0, 0, 0, .03); color: var(--text-light); }
.cd__insel {
  height: 32px; padding: 0 8px; border-radius: 8px; border: 0; width: 100%;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--black-15);
  font-size: 13px; font-weight: 600; color: var(--text-dark);
  font-family: inherit; outline: none;
}
.cd__insel:focus { box-shadow: inset 0 0 0 1px var(--wrc-rackman); }
/* an unanswered Yes/No reads like every other empty field, not like a value */
.cd__insel.is-unset { color: var(--text-light); font-weight: 500; }

/* ---- type-or-pick field (components/combo-field.js) --------------------- */
.combo { position: relative; }
.combo > input { width: 100%; padding-right: 30px; }
.combo__caret {
  position: absolute; top: 0; right: 0; width: 30px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-light); background: none;
}
.combo__list { display: none; }
/* the typeahead's measured skin — see the note in combo-field.js */
.combo.is-open .combo__list {
  display: block; position: absolute; z-index: 40; top: calc(100% + 4px);
  left: 0; right: 0; max-height: 284px; overflow-y: auto;
  background: var(--white); border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--black-7), 0 8px 24px -4px rgba(0, 0, 0, .14);
  padding: 4px 0;
}
.combo__row {
  height: 34px; display: flex; align-items: center; padding: 0 12px;
  font-size: 12.5px; font-weight: 500; color: var(--text-dark); cursor: pointer;
}
.combo__row:hover, .combo__row.is-hi { background: var(--wrc-rackman-7); color: var(--wrc-rackman); }
.cd__aft { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cd__aftr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- accounting --------------------------------------------------------- */

.cd__atop { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cd__subs { display: flex; align-items: center; gap: 8px; }
.cd__st {
  height: 31px; padding: 0 14px; border-radius: 8px;
  background: var(--grey-light); color: var(--text-light);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.cd__st.is-on { background: var(--wrc-rackman-7); color: var(--wrc-rackman); }
.cd__ameta { display: flex; align-items: flex-start; gap: 24px; }

.cd__abody { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 20px; align-items: start; }
.cd__pmlist { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cd__pm {
  display: flex; align-items: center; gap: 10px; text-align: left;
  min-height: 52px; padding: 11px 12px; border-radius: 9px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--black-15); color: var(--text-light);
}
.cd__pm.is-on { background: var(--wrc-rackman-7); box-shadow: inset 0 0 0 1px var(--wrc-rackman); color: var(--wrc-rackman); }
.cd__pm svg { flex: none; }
.cd__pmi { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.cd__pmn { font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
.cd__pm.is-on .cd__pmn { color: var(--wrc-rackman); }
.cd__pme { font-size: 11px; color: var(--text-light); }
.cd__req {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 16px; border-radius: 8px;
  background: var(--wrc-rackman); color: var(--white); font-size: 12.5px; font-weight: 600;
}
.cd__req:hover { background: var(--wrc-rackman-dark); }
.cd__req svg { flex: none; }

.cd__pmdet {
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: 16px; border-radius: 12px; background: var(--white);
  box-shadow: inset 0 0 0 1px var(--black-15);
}
.cd__pmh { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cd__pmh h3 { font-size: 16px; font-weight: 600; color: var(--text-dark); }
.cd__pmnote { font-size: 11.5px; color: var(--text-light); }
.cd__flags { display: flex; align-items: center; gap: 10px; }
.cd__flag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px 0 10px;
  border-radius: 999px; background: var(--wrc-green-7);
  font-size: 11.5px; font-weight: 600; color: var(--wrc-green); white-space: nowrap;
}
.cd__pmgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cd__pmcol { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cd__pmact { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.cd__tx { display: flex; flex-direction: column; gap: 8px; }
.cd__txhd, .cd__txrow { display: grid; grid-template-columns: 120px 140px minmax(0, 1fr) 120px; gap: 14px; align-items: center; }
.cd__txhd { font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--text-light); }
.cd__txrow { min-height: 40px; font-size: 12.5px; color: var(--text-medium); }
.cd__txr { text-align: right; }
.cd__txrow .cd__txr { font-weight: 600; color: var(--text-dark); font-variant-numeric: tabular-nums; }

/* ---- mobile — 18163:27674 / 27759 / 27840 -------------------------------- */

.cdm__top, .cdm__tabs, .cdm__label, .cdm__card, .cdm__bar, .cdm__add { display: none; }

@media (max-width: 900px) {
  .cd .panel { gap: 10px; }

  .cdm__top {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: -16px -16px 6px; padding: 8px 16px 12px;
    background: var(--white); box-shadow: inset 0 -1px 0 0 var(--black-7);
  }
  .cdm__name { font-size: 16px; font-weight: 600; color: var(--text-dark); line-height: 1.25;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* the phone has no title row, so the bar's heading IS the name field */
  .cdm__nameinput { font-size: 16px; width: 100%; line-height: 1.25; }
  .cdm__sub { font-size: 11px; color: var(--text-light); }
  .cdm__plus {
    width: 40px; height: 40px; border-radius: 10px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--wrc-rackman); color: var(--white);
  }

  .cdm__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cdm__tab {
    height: 31px; border-radius: 999px; background: var(--white);
    box-shadow: inset 0 0 0 1px var(--black-15);
    font-size: 12.5px; font-weight: 600; color: var(--text-medium);
  }
  .cdm__tab.is-on { background: var(--wrc-rackman); color: var(--white); box-shadow: none; }

  .cdm__label { display: block; padding-top: 6px; font-size: 10px; font-weight: 600;
                letter-spacing: .05em; color: var(--text-light); }

  .cdm__card {
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    border-radius: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--black-7);
  }
  .cdm__head { display: flex; align-items: center; gap: 8px; }
  .cdm__cn { font-size: 13px; font-weight: 600; color: var(--text-dark); flex: 1 1 auto; min-width: 0; }
  .cdm__chip { padding: 3px 8px; border-radius: 999px; background: var(--wrc-rackman-7);
               font-size: 10px; font-weight: 600; color: var(--wrc-rackman); flex: none; }
  .cdm__chip--g { background: var(--wrc-green-7); color: var(--wrc-green); }
  .cdm__role { font-size: 10px; color: var(--text-light); }
  .cdm__aline { font-size: 12.5px; font-weight: 500; color: var(--text-medium); }
  /* a hairline ABOVE the details, drawn as the card's own top-only stroke */
  .cdm__meta { display: flex; flex-direction: column; gap: 4px; padding-top: 9px;
               box-shadow: inset 0 1px 0 0 var(--black-7); }
  .cdm__email { font-size: 12.5px; font-weight: 500; color: var(--wrc-rackman); text-decoration: none; }
  .cdm__phone { font-size: 12.5px; font-weight: 500; color: var(--text-medium); }

  .cdm__acct { gap: 10px; }
  .cdm__trow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cdm__tile { display: flex; flex-direction: column; gap: 2px; min-height: 46px;
               padding: 9px 10px; border-radius: 8px; background: var(--grey-light); }
  .cdm__tk { font-size: 9.5px; font-weight: 500; letter-spacing: .05em; color: var(--text-light); }
  .cdm__tv { font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
  .cdm__tv.is-due { color: var(--wrc-orange); }

  .cdm__bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
  .cdm__b1, .cdm__b2 {
    display: inline-flex; align-items: center; justify-content: center;
    height: 42px; border-radius: 10px; font-size: 13px; font-weight: 600;
  }
  .cdm__b1 { background: var(--wrc-rackman); color: var(--white); }
  .cdm__b2 { background: var(--white); color: var(--text-medium); box-shadow: inset 0 0 0 1px var(--black-15); }
  .cdm__add {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px; border-radius: 8px; background: var(--white);
    box-shadow: inset 0 0 0 1px var(--black-15);
    font-size: 12.5px; font-weight: 600; color: var(--text-medium);
  }

  /* the desktop page chrome stands down — the phone draws its own. The CARD
     stays, because editing on a phone is the desktop editor re-guttered: no
     mobile Edit frame was ever drawn (see the note in customer-detail.js). */
  .cd__top, .cd__title, .cd__info { display: none; }

  .cd__card { padding: 14px; gap: 14px; }
  .cd__card > .cd__tabs { display: none; }      /* the pill row above says it */
  .cd__two, .cd__ab, .cd__abody { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cd__vrule { display: none; }
  .cd__afields, .cd__pmgrid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .cd__gr { grid-template-columns: minmax(0, 1fr); }
  .cd__adet { padding: 14px; }
  .cd__aft, .cd__pmact { flex-direction: column; align-items: stretch; }
  .cd__aftr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cd__aft .cd__btnDel, .cd__aftr > *, .cd__pmact > * { width: 100%; }
  .cd__fhd { flex-wrap: wrap; }
  .cd__fft { justify-content: stretch; }
  .cd__fft > * { flex: 1 1 0; }
  .cd__atop { flex-direction: column; align-items: stretch; }
  .cd__ameta { justify-content: space-between; }

  /* the contacts table becomes the phone's own card, not a squeezed grid */
  .cd__cthead, .cd__ctrule { display: none; }
  .cd__ctrow {
    grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px;
    padding: 12px; background: var(--white);
  }
  .cd__ctrow > .cd__ctv:nth-of-type(1) { grid-column: 2; font-size: 12px; }
  .cd__ctrow > .cd__ctv:nth-of-type(2) { grid-column: 2 / -1; }
}