/* fetch-1640. Shared tokens; scoped pre-primitive attention rows and data states. */
.crmx { min-width: 0; color: var(--ink); }
.crmx-embedded { margin-block: var(--s-4); }
.crmx-head, .crmx-detail-head, .crmx-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.crmx h2 { margin: 0; font-size: var(--t-section); }
.crmx h3 { font-size: var(--t-body); }
.crmx-controls { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-3); margin-block: var(--s-3); }
.crmx-controls label, .crmx-field { display: grid; gap: var(--s-1); font-size: var(--t-sub); color: var(--muted); min-width: 0; }
.crmx-controls label { flex: 0 1 9rem; }
.crmx-controls .crmx-search { flex: 1 1 14rem; }
.crmx :is(.crmx-controls,.crmx-editor) :is(select,input,textarea) { box-sizing: border-box; width: 100%; min-width: 0; min-height: var(--control-height-touch); font: inherit; font-size: var(--t-body); color: var(--ink); background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-s); padding: var(--s-2) var(--s-3); }
.crmx-header.pgh--compact .pgh-nav { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s-2); }
.crmx-header .pgh-navfield { flex: 1 1 5rem; min-width: 0; }
.crmx-header .pgh-navfield select { width: 100%; min-width: 0; }
.crmx-header .pgh-nav .btn { flex: 0 0 5rem; white-space: normal; }
.crmx-header .pgh-row { margin-top: var(--s-2); align-items: end; }
.crmx-header .pgh-search { padding-block: 0; }
.crmx-header .pgh-search input { height: var(--control-height-touch); }
.crmx textarea { resize: vertical; }
.crmx button, .crmx summary { min-height: var(--control-height-touch); }
.crmx :is(button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.crmx :disabled { opacity: .65; cursor: not-allowed; }
.crmx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--t-sub); color: var(--muted); margin-block: var(--s-2); }
.crmx-layout { display: grid; min-width: 0; gap: var(--s-4); }
.crmx-layout.has-detail { grid-template-columns: minmax(0,1.15fr) minmax(20rem,.85fr); align-items: start; }
.crmx-list { min-width: 0; }
.crmx-group { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 0; padding: var(--s-2) 0; color: var(--muted); font-size: var(--t-sub); text-transform: uppercase; letter-spacing: .06em; }
.crmx-group::after { content: ''; height: 1px; flex: 1; background: var(--line); }
.crmx-group span { font-variant-numeric: tabular-nums; }
.crmx-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(7rem,.3fr) 7rem 1rem; gap: var(--s-3); align-items: center; width: 100%; min-width: 0; text-align: left; background: var(--surface-card); border: 0; border-bottom: 1px solid var(--line); padding: var(--s-3); color: var(--ink); font: inherit; cursor: pointer; }
.crmx-row:hover, .crmx-row.is-selected { background: var(--wash); }
.crmx-row.is-selected { box-shadow: inset 3px 0 var(--gold); }
.crmx-identity, .crmx-person, .crmx-due { display: grid; gap: var(--s-1); min-width: 0; }
.crmx-identity > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmx-identity > span:not(.crmx-muted) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; }
.crmx-person, .crmx-due { font-size: var(--t-sub); }
.crmx-person small, .crmx-due small { font-size: var(--t-sub); color: var(--muted); }
.crmx-due { font-variant-numeric: tabular-nums; }
.crmx-due.is-overdue, .crmx-due.is-overdue small { color: var(--bad-fg); }
.crmx-muted { color: var(--muted); font-size: var(--t-sub); }
.crmx-more { margin-block: var(--s-3); }
.crmx-detail { min-width: 0; background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-m); overflow-wrap: anywhere; }
.crmx-detail-head { padding: var(--s-3); border-bottom: 1px solid var(--line); }
.crmx-detail-head h2 { scroll-margin-top: calc(var(--phone-nav-height, 55px) + var(--s-3)); }
.crmx-detail-body { padding: var(--s-3); }
.crmx-detail-body > :first-child { margin-top: 0; }
.crmx-context { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: center; font-size: var(--t-sub); }
.crmx-provenance { font-size: var(--t-sub); color: var(--muted); }
.crmx-provenance summary { display: flex; align-items: center; cursor: pointer; }
.crmx-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block: var(--s-3); }
.crmx-note, .crmx-error, .crmx-success { padding: var(--s-3); border-radius: var(--r-s); font-size: var(--t-sub); line-height: 1.5; overflow-wrap: anywhere; }
.crmx-note { background: var(--wash); }
.crmx-error { color: var(--warn-fg); background: var(--warn-bg); }
.crmx-success { color: var(--ok-fg); background: var(--ok-bg); }
.crmx-error .btn, .crmx-note .btn { margin-left: var(--s-2); }
.crmx-skeleton { display: grid; gap: var(--s-2); padding-block: var(--s-2); color: var(--muted); font-size: var(--t-sub); }
.crmx-skeleton i { display: block; min-height: 3rem; border-radius: var(--r-s); background: var(--wash); }
.crmx-editor { display: grid; gap: var(--s-3); min-width: 0; }
.crmx-editor fieldset { display: grid; gap: var(--s-3); margin: 0; padding: 0; border: 0; min-width: 0; }
.crmx-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s-3); }
.crmx-field-error { color: var(--bad-fg); }
.crmx [aria-invalid=true] { border-color: var(--bad-fg); }
.crmx-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-block: var(--s-3); background: var(--surface-card); border-top: 1px solid var(--line); }
.crmx-foot .btn-primary { margin-left: auto; }
.crmx-history { border-top: 1px solid var(--line); margin-top: var(--s-4); }
.crmx-history article { padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.crmx-history article p { margin: var(--s-1) 0; }
.crmx-history small { color: var(--muted); font-size: var(--t-sub); }
.crmx-conflict { padding: var(--s-3); border: 1px solid var(--line); background: var(--wash); }
.crmx-dialog { box-sizing: border-box; width: min(54rem,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-card); color: var(--ink); }
.crmx-dialog[open] { display: flex; flex-direction: column; }
.crmx-dialog::backdrop { background: var(--ink); opacity: .42; }
.crmx-dialog-head { flex: 0 0 auto; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.crmx-dialog-body { padding: var(--s-4); overflow-y: auto; min-height: 0; }
.crmx-dialog .crmx-foot { position: sticky; bottom: 0; margin-bottom: calc(-1 * var(--s-4)); }
@media(max-width: 1100px) { .crmx-layout.has-detail { grid-template-columns: minmax(0,1fr) minmax(20rem,1fr); } .has-detail .crmx-row { grid-template-columns: minmax(0,1fr) 6rem 1rem; } .has-detail .crmx-person { grid-column: 1; grid-row: 2; } .has-detail .crmx-due { grid-column: 2; grid-row: 1 / 3; } .has-detail .crmx-open { grid-column: 3; grid-row: 1 / 3; } }
@media(max-width: 760px) { .crmx-layout.has-detail { grid-template-columns: minmax(0,1fr); } .crmx-detail { grid-row: 1; } }
@media(max-width: 640px) {
  .crmx-controls { gap: var(--s-2); }
  .crmx-controls label { flex: 1 1 7rem; }
  .crmx-controls .crmx-search { flex-basis: 100%; }
  .crmx-row, .has-detail .crmx-row { grid-template-columns: minmax(0,1fr) 6rem; gap: var(--s-2); }
  .crmx-identity { grid-column: 1; }
  .crmx-person, .has-detail .crmx-person { grid-column: 1; grid-row: 2; }
  .crmx-person small { display: none; }
  .crmx-due, .has-detail .crmx-due { grid-column: 2; grid-row: 1 / 3; }
  .crmx-open { display: none; }
  .crmx-grid { grid-template-columns: minmax(0,1fr); }
  .crmx input, .crmx select, .crmx textarea { font-size: 1rem; }
  .crmx-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .crmx-dialog-body { padding: var(--s-3); }
  .crmx-dialog .crmx-foot { margin-bottom: calc(-1 * var(--s-3)); padding-bottom: max(var(--s-3),env(safe-area-inset-bottom)); }
  .crmx-foot .btn-primary { width: 100%; margin-left: 0; }
}