/* Block 04's added element, Maya L.'s AI SDR cell opened (parts/add-sdr.html), printed by the product template inside
   the block's figure after the demo's still (theme/template-parts/product.php, the run block's "add"). The kit's
   .k-card in the demo's type and tokens, the same card as block 01's Log: the drawer's bar (the mode pill, the
   scenario's chip), the reply it read, then the cue, a hollow amber ring for the draft that waits. The still is the
   context columns for five people (part=context, rows=5), so the card never sits over a word: the figure becomes a
   column, the window and under it the card on the window's right, lifted a little over its bottom edge, below the
   last row's text. Under 760 the card follows the still, full width, with nothing over the window. Nothing moves.
   Scoped to .pg-data-enrichment, the class templates/page-parts.php puts on <main>. */

.pg-data-enrichment .k-pic:has(>.de-sdr){grid-template-columns:minmax(0,1fr);justify-items:stretch;align-content:center}
.pg-data-enrichment .k-pic:has(>.de-sdr)>.gsd{grid-column:1;grid-row:1;width:auto;min-width:0;margin:0}
.pg-data-enrichment .de-sdr{
  --de-ok:var(--ok,#12995F);--de-ai:#6B5CE7;--de-wait:#C77700;
  position:relative;z-index:2;grid-column:1;grid-row:2;justify-self:end;width:268px;margin:-8px -22px 0 0;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .pg-data-enrichment .de-sdr{--de-ai:#A99BFF;--de-wait:#F2C46B}
}
:root[data-theme=dark] .pg-data-enrichment .de-sdr{--de-ai:#A99BFF;--de-wait:#F2C46B}

.pg-data-enrichment .de-sdr .k-card-h{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;height:auto;padding:11px 16px}
.pg-data-enrichment .de-sdr .k-card-h span{font:600 14px/1.2 var(--sans);color:var(--ink)}
.pg-data-enrichment .de-sdr .k-card-h small{font:400 12.5px/1.2 var(--sans);color:var(--mute)}

.pg-data-enrichment .de-sdr-b{display:grid;gap:11px;padding:12px 16px 14px}
.pg-data-enrichment .de-sdr-b p{margin:0}
/* the drawer's bar: the mode pill and the scenario */
.pg-data-enrichment .de-sdr-bar{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.pg-data-enrichment .de-sdr-mode{display:inline-flex;align-items:center;gap:5px;padding:1px 8px;border-radius:999px;font:600 11.5px/1.5 var(--sans);color:var(--de-ai);background:color-mix(in srgb,var(--de-ai) 11%,var(--panel))}
.pg-data-enrichment .de-sdr-mode i{width:6px;height:6px;border-radius:50%;background:var(--de-ai)}
.pg-data-enrichment .de-sdr-sc{padding:1px 7px;border-radius:999px;font:600 11.5px/1.5 var(--sans);color:var(--de-ok);background:color-mix(in srgb,var(--de-ok) 11%,var(--panel))}
/* the reply it read: a small name over the words */
.pg-data-enrichment .de-sdr-q{display:grid;gap:3px;min-width:0}
.pg-data-enrichment .de-sdr-q small{font:500 12px/1.35 var(--sans);color:var(--mute)}
.pg-data-enrichment .de-sdr-q span{font:400 13px/1.4 var(--sans);color:var(--k-text)}
/* the cue: the hollow ring of a wait, the cue over the mode's promise */
.pg-data-enrichment .de-sdr-w{display:flex;align-items:flex-start;gap:9px;padding-top:11px;border-top:1px solid var(--line)}
.pg-data-enrichment .de-sdr-w i{flex:none;width:12px;height:12px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--de-wait)}
.pg-data-enrichment .de-sdr-w span{display:grid;gap:2px;font:400 12.5px/1.35 var(--sans);color:var(--mute)}
.pg-data-enrichment .de-sdr-w b{font:600 13px/1.35 var(--sans);color:var(--ink)}

/* under 760 the card follows the still, full width, and nothing sits over the window */
@media (max-width:760px){
  .pg-data-enrichment .de-sdr{justify-self:stretch;width:auto;margin:12px 0 0}
}