/* patient_cards_html — the form's stylesheet.
   Every rule is scoped :where(.pxm-pc-root), which adds no specificity, so no
   rule changes which declaration wins. The root rule itself stays a bare class
   so it still outranks the scoped reset.
   Order audit: no .pxm-pc-* selector exists in PXM_SHARED_CSS, PXM_TOKENS_CSS,
   MAR_FLAG_BADGE_CSS, _px_theme_css.py or MED_ROWS_CSS, and every host
   override of these classes is id-prefixed (#caph-cards-slot,
   #mar-patient-list-slot), so it wins on specificity whatever the document
   order. No second class is owed. */
/* patient_cards_html — card grid / details / photo slot CSS (contract §6:
   "Card grid, details, photo slot → patient_cards (C)"). New markup, so
   pxm- class prefix + --pxm-* tokens ONLY. <details> cards with a summary
   row. */
.pxm-pc-root { font-family: var(--pxm-font); color: var(--pxm-text-primary); }
:where(.pxm-pc-root) .pxm-pc-list { display: flex; flex-direction: column; gap: 8px; }
:where(.pxm-pc-root) .pxm-pc-list.pxm-pc-list-virtual {
  display: block; height: min(72vh, 960px); min-height: 420px;
  overflow-y: auto;
}
/* The hidden staging slot host. Its children are reparented into a card's
   .pxm-pc-medrows the instant they are slotted; the box itself never shows.
   It replaces the staging div's inline style="display:none", which had to
   leave the template. */
:where(.pxm-pc-root) .pxm-pc-staging { display: none; }
:where(.pxm-pc-root) .pxm-pc-virtual-item { padding-bottom: 8px; }
:where(.pxm-pc-root) .pxm-pc-card {
  background: var(--pxm-bg-card);
  border: 2px solid var(--pxm-border);
  border-radius: var(--pxm-radius-lg);
  overflow: hidden;
}
:where(.pxm-pc-root) .pxm-pc-summary {
  padding: 12px 16px; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  font-size: 0.95rem; list-style: none;
}
:where(.pxm-pc-root) .pxm-pc-summary::-webkit-details-marker { display: none; }
:where(.pxm-pc-root) .pxm-pc-summary::before {
  content: '\25B6'; font-size: 10px; transition: transform 0.2s;
  color: var(--pxm-text-muted);
}
:where(.pxm-pc-root) .pxm-pc-card[open] > .pxm-pc-summary::before { transform: rotate(90deg); }
:where(.pxm-pc-root) .pxm-pc-summary:hover { background: var(--pxm-bg-elevated); }
:where(.pxm-pc-root) .pxm-pc-name { font-weight: 600; flex: 1; }
:where(.pxm-pc-root) .pxm-pc-meta { color: var(--pxm-text-secondary); font-size: 0.85rem; }
:where(.pxm-pc-root) .pxm-pc-count {
  background: var(--pxm-bg-elevated); color: var(--pxm-text-secondary);
  padding: 2px 8px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 500; white-space: nowrap;
}
/* R10 card-header multi-tick — px-internal ca_screen_queue "all items"
   design language (19px accent checkbox + quiet label). */
:where(.pxm-pc-root) .pxm-pc-tickall-l {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
  color: var(--pxm-text-secondary); cursor: pointer;
  font-family: var(--pxm-font);
}
:where(.pxm-pc-root) .pxm-pc-tickall {
  width: 19px; height: 19px; margin: 0;
  accent-color: var(--pxm-accent); cursor: pointer;
}
/* F10 summary strip (AU.10.4): muted counts, ALWAYS visible on the
   header — collapsed and expanded. */
:where(.pxm-pc-root) .pxm-pc-selcounts {
  font-size: 0.75rem; color: var(--pxm-text-secondary);
  white-space: nowrap;
}
:where(.pxm-pc-root) .pxm-pc-photo-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.4;
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer; white-space: nowrap;
  font-family: var(--pxm-font);
}
:where(.pxm-pc-root) .pxm-pc-photo-add {
  background: transparent; color: var(--pxm-info);
  border: 1.5px dashed var(--pxm-info);
}
:where(.pxm-pc-root) .pxm-pc-photo-add:hover { background: var(--pxm-bg-elevated); }
:where(.pxm-pc-root) .pxm-pc-photo-has {
  background: transparent;
  background: color-mix(in srgb, var(--pxm-success) 12%, transparent);
  color: var(--pxm-success);
  border: 1px solid var(--pxm-success);
}
:where(.pxm-pc-root) .pxm-pc-photo-has:hover {
  background: var(--pxm-bg-elevated);
  background: color-mix(in srgb, var(--pxm-success) 20%, transparent);
}
:where(.pxm-pc-root) .pxm-pc-details {
  padding: 8px 16px; display: flex; gap: 8px 16px; flex-wrap: wrap;
  align-items: center; border-top: 1px solid var(--pxm-border);
  font-size: 0.8rem;
}
:where(.pxm-pc-root) .pxm-pc-detail { color: var(--pxm-text-primary); }
:where(.pxm-pc-root) .pxm-pc-detail-label { color: var(--pxm-text-muted); font-weight: 600; margin-right: 4px; }
:where(.pxm-pc-root) .pxm-pc-medrows { border-top: 1px solid var(--pxm-border); padding: 12px 16px; }
:where(.pxm-pc-root) .pxm-pc-actions { padding: 0 16px 12px; }
:where(.pxm-pc-root) .pxm-pc-tp-btn {
  padding: 4px 12px; font-size: 0.8rem; cursor: pointer;
  background: var(--pxm-bg-elevated); color: var(--pxm-text-primary);
  border: 1px dashed var(--pxm-border); border-radius: var(--pxm-radius-md);
  font-family: var(--pxm-font);
}
:where(.pxm-pc-root) .pxm-pc-tp-btn:hover { background: var(--pxm-bg-card); border-color: var(--pxm-border-strong); }
:where(.pxm-pc-root) .pxm-pc-empty { text-align: center; padding: 24px 16px; color: var(--pxm-text-muted); font-size: 0.9rem; }

@media (max-width: 768px) {
  :where(.pxm-pc-root) .pxm-pc-summary { flex-wrap: wrap; gap: 6px; font-size: 0.85rem; }
  :where(.pxm-pc-root) .pxm-pc-details { flex-direction: column; align-items: flex-start; }
  :where(.pxm-pc-root) .pxm-pc-medrows { padding: 8px; }
  :where(.pxm-pc-root) .pxm-pc-list.pxm-pc-list-virtual {
    height: 68vh; min-height: 360px;
  }
}