/* 260923-cmx — COMMISSIONS per deal (setter, closer, confirmation portals). Self-contained. */
.cmx-sum, .cmx-panel {
  --x-line: hsl(214 32% 91%); --x-line-soft: hsl(214 32% 94%);
  --x-ink: hsl(215 28% 17%); --x-ink-2: hsl(215 16% 47%); --x-ink-3: hsl(215 14% 62%);
  --x-tint: hsl(210 33% 97.5%); --x-accent: #155eef; --x-accent-soft: rgba(21,94,239,.08);
  --x-green: hsl(160 84% 36%); --x-green-soft: hsla(160 84% 39% / .10);
  --x-amber: #d98a1e; --x-amber-soft: rgba(246,173,85,.16);
  --x-red: #e03e3e; --x-red-soft: rgba(224,62,62,.08);
  background: var(--card, #fff); border: 1px solid var(--x-line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.04);
  margin: 0 0 16px; font-variant-numeric: tabular-nums; color: var(--x-ink);
}
.cmx-sum-head, .cmx-panel-h {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
  padding: 16px 20px 14px; border-bottom: 1px solid var(--x-line-soft);
  font-size: 14px; font-weight: 700; line-height: 1.3;
}
.cmx-sum-note, .cmx-panel-sub { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--x-ink-3); }
.cmx-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--x-tint); color: var(--x-ink-2); border: 1px solid var(--x-line); white-space: nowrap; line-height: 1.2; }
.cmx-chip--blue { background: var(--x-accent-soft); color: var(--x-accent); border-color: rgba(21,94,239,.18); }
.cmx-chip--role { background: var(--x-accent-soft); color: var(--x-accent); border-color: rgba(21,94,239,.18); }
.cmx-sum-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmx-tile { padding: 18px 20px 16px; border-right: 1px solid var(--x-line-soft); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmx-tile:last-child { border-right: 0; }
.cmx-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--x-ink-2); }
.cmx-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cmx-sub { font-size: 12px; color: var(--x-ink-2); }
.cmx-green { color: var(--x-green); } .cmx-amber { color: var(--x-amber); } .cmx-muted { color: var(--x-ink-3); font-weight: 400; }

.cmx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; padding: 16px 20px 20px; }
.cmx-card {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 16px 18px; border: 1px solid var(--x-line); border-radius: 12px; background: var(--card, #fff);
  cursor: pointer; transition: box-shadow 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.cmx-card:hover { border-color: hsl(214 32% 84%); box-shadow: 0 6px 18px rgba(16,24,40,.08); transform: translateY(-1px); }
.cmx-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--x-accent-soft); border-color: var(--x-accent); }
.cmx-card[aria-expanded="true"] { grid-column: 1 / -1; cursor: default; transform: none; }
.cmx-card-top { display: flex; align-items: center; gap: 8px; }
.cmx-card-toggle { margin-left: auto; width: 18px; height: 18px; border-radius: 999px; background: var(--x-tint); position: relative; flex: 0 0 18px; }
.cmx-card-toggle::before { content: ''; position: absolute; left: 6px; top: 5px; width: 5px; height: 5px; border-right: 1.5px solid var(--x-ink-2); border-bottom: 1.5px solid var(--x-ink-2); transform: rotate(45deg); transition: transform 140ms ease; }
.cmx-card[aria-expanded="true"] .cmx-card-toggle::before { transform: rotate(225deg); top: 7px; }
.cmx-card-name { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmx-card-meta { font-size: 12px; color: var(--x-ink-2); }
.cmx-card-money { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.cmx-card-mine { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--x-green); }
.cmx-card-gross, .cmx-card-paid { font-size: 12px; color: var(--x-ink-2); }
.cmx-card-paid::before { content: '·'; margin-right: 6px; }
.cmx-st { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; line-height: 1.2; }
.cmx-st--paid { background: var(--x-green-soft); color: var(--x-green); border-color: hsla(160 84% 39% / .25); }
.cmx-st--part { background: var(--x-accent-soft); color: var(--x-accent); border-color: rgba(21,94,239,.2); }
.cmx-st--appr { background: var(--x-accent-soft); color: var(--x-accent); border-color: rgba(21,94,239,.2); }
.cmx-st--pend { background: var(--x-amber-soft); color: var(--x-amber); border-color: rgba(217,138,30,.25); }
.cmx-st--none { background: var(--x-tint); color: var(--x-ink-3); border-color: var(--x-line); }
.cmx-card[data-status="no commission"], .cmx-card[data-status="voided"] { opacity: .7; }

.cmx-card-body { display: none; margin-top: 10px; border-top: 1px solid var(--x-line-soft); padding-top: 6px; }
.cmx-card[aria-expanded="true"] .cmx-card-body { display: block; }
.cmx-pay { display: grid; grid-template-columns: 110px minmax(0, 1fr) 100px 100px auto; align-items: center; gap: 6px 14px; padding: 9px 4px; border-top: 1px solid var(--x-line-soft); font-size: 12.5px; }
.cmx-pay:first-child { border-top: 0; }
.cmx-pay--head { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--x-ink-3); padding-bottom: 4px; }
.cmx-pay--dead { color: var(--x-ink-3); }
.cmx-pay-date { font-weight: 600; }
.cmx-pay-desc { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmx-pay-gross, .cmx-pay-mine { text-align: right; font-weight: 600; }
.cmx-pay-mine { color: var(--x-green); }
.cmx-pay--dead .cmx-pay-mine { color: inherit; }
.cmx-pay-note { grid-column: 1 / -1; font-size: 12px; color: var(--x-ink-2); white-space: pre-wrap; }
.cmx-bonus { padding: 8px 20px 12px; }
.cmx-empty { padding: 26px 20px; font-size: 13px; color: var(--x-ink-2); }

/* inline line on the existing set / close cards */
.cmx-inline { font-weight: 600; }
.cmx-inline--paid { color: hsl(160 84% 36%); }
.cmx-inline--pend { color: #d98a1e; }
.cmx-inline--none { color: hsl(215 14% 62%); font-weight: 500; }

/* confirmation portal period bar */
.cmx-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.cmx-bar-lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: hsl(215 16% 47%); }
.cmx-select { font: 500 12px/1.2 Inter, system-ui, sans-serif; padding: 8px 30px 8px 12px; border: 1px solid hsl(214 32% 91%); border-radius: 8px; background: #fff; color: hsl(215 28% 17%); -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.cmx-bar-note { font-size: 12px; color: hsl(215 14% 62%); }

@media (max-width: 900px) {
  .cmx-sum-tiles { grid-template-columns: 1fr; }
  .cmx-tile { border-right: 0; border-bottom: 1px solid var(--x-line-soft); }
  .cmx-tile:last-child { border-bottom: 0; }
  .cmx-grid { grid-template-columns: 1fr; padding: 14px; }
  .cmx-pay { grid-template-columns: 1fr 1fr; }
  .cmx-pay--head { display: none; }
  .cmx-pay-desc { grid-column: 1 / -1; white-space: normal; }
  .cmx-pay-gross { text-align: left; }
  .cmx-pay-gross::before { content: 'Collected '; font-weight: 400; color: var(--x-ink-3); }
  .cmx-pay-mine::before { content: 'Yours '; font-weight: 400; color: var(--x-ink-3); }
  .cmx-sum-note, .cmx-panel-sub { margin-left: 0; flex-basis: 100%; }
}