/* Block 01's added element, the cell's Log (parts/add-log.html), printed by the product template inside the block's
   figure after the demo's still (theme/template-parts/product.php, the block's "add"). The kit's .k-card in the
   demo's type and tokens: each step a dot on one hairline rail, its name over what it returned, the verdict as the
   app's chip. The still is the email column alone (part=email), so the card never sits over it: the figure becomes a
   row, the window on the left and the card on the right, its lower half lifted over the window's right edge, where the
   column has no text. The window there is under 600 px, so the demo prints the name alone in the Person column, as
   it does on a phone. Under 760 the card sits under the still instead, full width. Nothing moves. Scoped to
   .pg-data-enrichment, the class templates/page-parts.php puts on <main>. */

.pg-data-enrichment .k-pic:has(>.de-log){grid-template-columns:minmax(0,1fr) 224px;align-items:center;justify-items:stretch}
.pg-data-enrichment .k-pic:has(>.de-log)>.gsd{grid-column:1;grid-row:1;width:auto;min-width:0;margin:0}
.pg-data-enrichment .de-log{
  --de-ok:var(--ok,#12995F);--de-bad:#DE4B4B;
  position:relative;z-index:2;grid-column:2;grid-row:1;align-self:end;width:auto;margin:0 0 34px -30px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .pg-data-enrichment .de-log{--de-bad:#FF6B70}
}
:root[data-theme=dark] .pg-data-enrichment .de-log{--de-bad:#FF6B70}

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

.pg-data-enrichment .de-log-l{margin:0;padding:12px 16px 14px;list-style:none}
.pg-data-enrichment .de-log-l li{--d:var(--k-faint,var(--mute));position:relative;display:grid;gap:3px;min-width:0;padding:0 0 12px 22px}
.pg-data-enrichment .de-log-l li:last-child{padding-bottom:0}
/* the rail and the dots */
.pg-data-enrichment .de-log-l li::before{content:"";position:absolute;left:3.5px;top:12px;bottom:-4px;width:1px;background:var(--line)}
.pg-data-enrichment .de-log-l li:last-child::before{display:none}
.pg-data-enrichment .de-log-l li::after{content:"";position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%;background:var(--d)}
.pg-data-enrichment .de-log-l .de-no{--d:var(--de-bad)}
.pg-data-enrichment .de-log-l .de-yes{--d:var(--de-ok)}
.pg-data-enrichment .de-log-l .de-done{--d:var(--ink)}

.pg-data-enrichment .de-log-s{font:500 12px/1.35 var(--sans);color:var(--mute)}
.pg-data-enrichment .de-log-r{min-width:0;font:400 13px/1.35 var(--sans);color:var(--k-text);overflow-wrap:anywhere}
.pg-data-enrichment .de-done .de-log-r{font-weight:600;color:var(--ink)}
.pg-data-enrichment .de-log-v{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;margin-top:2px;font:400 12.5px/1.35 var(--sans);color:var(--mute)}
.pg-data-enrichment .de-log-v b{padding:1px 7px;border-radius:999px;font:600 11.5px/1.5 var(--sans);color:var(--d);background:color-mix(in srgb,var(--d) 11%,var(--panel))}

/* from 1201 to 1279 the stage is narrower than its 643 px and the addresses would reach the card: the stage gives up
   12 px of its side padding and the card lifts 10 px over the window's edge instead of 30 */
@media (min-width:1201px) and (max-width:1279px){
  .pg-data-enrichment .k-pic:has(>.de-log){padding-left:24px;padding-right:24px}
  .pg-data-enrichment .de-log{margin-left:-10px}
}

/* under 760 the still takes the figure's whole width and the card follows it, full width, so every row and the Log
   both stay in view */
@media (max-width:760px){
  .pg-data-enrichment .k-pic:has(>.de-log){grid-template-columns:minmax(0,1fr)}
  .pg-data-enrichment .de-log{grid-column:1;grid-row:2;align-self:auto;margin:12px 0 0}
}