/* cards.css — p45 Cards (cards.js): Connect tools → Cards, the add-card sheet, and a card payment's approval card.
   Only the app's own variables (--card, --card2, --line, --line2, --text, --muted, --faint), so a restyle of the
   variables restyles this too. Colour only where it means something: ok #10A37F, bad #E5484D, warn #D9930C. */

.cn-card.cd-card{grid-column:1/-1}
.cd-list .cd-row{align-items:center}
.cd-mark{flex:none;display:grid;place-items:center;width:42px;height:28px;border-radius:6px;background:var(--card2,#3c3d40);
  color:var(--text,#ececec);font-size:10px;font-weight:700;letter-spacing:.06em}
.cd-row[data-frozen="1"] .cd-mark{opacity:.5}
.cd-name{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.35em}
.cd-nick{font-weight:600}
.cd-num{color:var(--muted,#a8a8a8);font-variant-numeric:tabular-nums}
.cd-frozen{background:rgba(217,147,12,.16);color:#D9930C}
.cd-acts{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.cd-empty{color:var(--muted,#a8a8a8);line-height:1.5}

.cd-log{margin:2px 4px 0}
.cd-loghead{display:flex;align-items:center;justify-content:space-between}
.cd-lognone{margin:4px 0 0;color:var(--faint,#7c7c7c);font-size:12.5px}
.cd-logtbl{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.45}
.cd-logtbl th{text-align:left;font-weight:500;color:var(--faint,#7c7c7c);padding:6px 8px 6px 0;border-bottom:1px solid var(--line2,#414245)}
.cd-logtbl td{padding:6px 8px 6px 0;border-bottom:1px solid var(--line,#323336);color:var(--text,#ececec);vertical-align:top}
.cd-logtbl .cd-when,.cd-logtbl .cd-amt{white-space:nowrap;font-variant-numeric:tabular-nums}
.cd-logtbl tr.cd-paid .cd-what{color:#10A37F}
.cd-logtbl tr.cd-refused .cd-what,.cd-logtbl tr.cd-fill_failed .cd-what,.cd-logtbl tr.cd-not_paid .cd-what{color:#E5484D}
.cd-logtbl tr.cd-declined .cd-what,.cd-logtbl tr.cd-asked .cd-what{color:var(--muted,#a8a8a8)}

.sheet.cd-form .cd-advice{margin:0 0 14px;padding:10px 12px;border-radius:10px;background:var(--card2,#3c3d40);
  color:var(--text,#ececec);font-size:12.5px;line-height:1.5}
.sheet.cd-form .cd-sub{margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--muted,#a8a8a8)}
.sheet.cd-form .cd-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.sheet.cd-form .cd-two>.field{margin-bottom:var(--s-l,12px)}

/* the approval card of a payment with a company card */
.cd-pay .cd-cvc{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
.cd-pay .cd-cvc label{font-size:13px;color:var(--muted,#a8a8a8);white-space:nowrap}
.cd-pay .cd-cvcin{width:92px;height:32px;padding:0 10px;font-size:16px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.talk-apcard.cd-apcard .talk-payamt{font-weight:600}

@media (max-width:720px){
  .cd-logtbl th:nth-child(4),.cd-logtbl td:nth-child(4){display:none}
  .sheet.cd-form .cd-two{grid-template-columns:minmax(0,1fr)}
}