/* Contact-post graph/list component only; existing product typography/tokens. */
.cp-graph-workspace { color: var(--ws-ink); background: var(--ws-bg); font: var(--ws-text-body)/1.55 var(--ws-font); color-scheme: var(--ws-scheme); min-width: 0; overflow-wrap: anywhere; }
.cp-graph-workspace *, .cp-graph-workspace *::before, .cp-graph-workspace *::after { box-sizing: border-box; }
.cp-graph-workspace [hidden] { display: none !important; }
.cp-graph-workspace :is(h3,h4,p,ul) { margin: 0; }
.cp-graph-workspace h3 { font-size: var(--ws-text-subheading); font-weight: 650; text-wrap: balance; }
.cp-graph-workspace h4 { font-size: var(--ws-text-body); font-weight: 650; text-wrap: balance; margin-bottom: var(--ws-space-sm); }
.cp-graph-workspace p { max-width: 72ch; margin-block: var(--ws-space-sm); }
.cp-graph-workspace :is(.cp-graph-muted,small) { color: var(--ws-muted); font-size: var(--ws-text-meta); }
.cp-graph-workspace :is(button,select) { font: inherit; color: var(--ws-ink); background: var(--ws-surface); min-width: 0; max-width: 100%; min-height: 44px; padding: var(--ws-space-sm); border: 1px solid var(--ws-muted); border-radius: 6px; box-shadow: none; }
.cp-graph-workspace button { white-space: normal; text-align: left; cursor: pointer; }
.cp-graph-workspace button:hover:not(:disabled) { background: var(--ws-soft); }
.cp-graph-workspace button[aria-pressed="true"] { background: var(--ws-accent-soft); border-color: var(--ws-accent); }
.cp-graph-workspace :is(button,select):disabled { color: var(--ws-muted); background: var(--ws-soft); cursor: default; }
.cp-graph-workspace :is(button,select,[tabindex]):focus-visible { outline: 3px solid var(--ws-accent); outline-offset: -3px; scroll-margin: var(--ws-space-md); }
.cp-graph-workspace .cp-graph-controls { display: flex; flex-wrap: wrap; gap: var(--ws-space-sm); margin-block: var(--ws-space-md); }
.cp-graph-workspace .cp-graph-controls button { flex: 0 1 auto; }
.cp-graph-workspace .cp-graph-panel { border-block: 1px solid var(--ws-line); padding-block: var(--ws-space-md); margin-block: var(--ws-space-md); }
.cp-graph-workspace .cp-graph-canvas { min-width: 0; width: 100%; height: min(55vh,28rem); height: min(55svh,28rem); min-height: 12rem; position: relative; overflow: hidden; background: var(--ws-surface); }
.cp-graph-workspace .cp-graph-layout { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ws-space-lg); margin-block: var(--ws-space-lg); }
.cp-graph-workspace .cp-graph-layout > section { min-width: 0; }
.cp-graph-workspace .cp-graph-picker { display: flex; flex-direction: column; gap: var(--ws-space-xs); margin-bottom: var(--ws-space-md); }
.cp-graph-workspace :is(.cp-graph-list,.cp-graph-relations) { list-style: none; padding: var(--ws-space-xs); max-height: min(55vh,32rem); max-height: min(55svh,32rem); overflow: auto; overscroll-behavior: auto; scroll-padding: var(--ws-space-sm); }
.cp-graph-workspace .cp-graph-list button { display: block; width: 100%; margin-bottom: var(--ws-space-xs); }
.cp-graph-workspace .cp-graph-list :is(strong,small) { display: block; }
.cp-graph-workspace .cp-graph-list small { margin-top: var(--ws-space-xs); }
.cp-graph-workspace .cp-graph-relations li { display: flex; flex-direction: column; align-items: stretch; gap: var(--ws-space-sm); padding-block: var(--ws-space-md); border-bottom: 1px solid var(--ws-line); }
.cp-graph-workspace .cp-graph-relations li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .cp-graph-workspace .cp-graph-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 480px) { .cp-graph-workspace .cp-graph-controls > button { flex: 1 1 auto; } }
@media (prefers-reduced-motion: reduce) { .cp-graph-workspace *, .cp-graph-workspace *::before, .cp-graph-workspace *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }