/* Block "In the table"'s added element, the cell's Log (parts/add-log.html), printed by the feature template inside the
   block's figure after the demo's still (theme/inc/feature.php gs_feature_block(), the block's "add"). The same card
   as /data-enrichment/'s block 01 (theme/pages/data-enrichment/parts/add-log.css), in the kit's .k-card and the demo's
   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 finder (part=finder rows=6: Person, Company and Work email), so the figure becomes a row, the window on
   the left and the card on the right, lifted over the window's right edge beside Sam K.'s row, where the email column
   has no text. 256 px holds each address on one line. Under 760 the card sits under the still instead, full width.
   Nothing moves. Scoped to .pg-waterfall-enrichment, the class templates/page-parts.php puts on <main>. */

.pg-waterfall-enrichment .k-pic:has(>.wf-log){grid-template-columns:minmax(0,1fr) 256px;align-items:center;justify-items:stretch}
.pg-waterfall-enrichment .k-pic:has(>.wf-log)>.gsd{grid-column:1;grid-row:1;width:auto;min-width:0;margin:0}
.pg-waterfall-enrichment .wf-log{
  --wf-ok:var(--ok,#12995F);--wf-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-waterfall-enrichment .wf-log{--wf-bad:#FF6B70}
}
:root[data-theme=dark] .pg-waterfall-enrichment .wf-log{--wf-bad:#FF6B70}

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

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

.pg-waterfall-enrichment .wf-log-s{font:500 12px/1.35 var(--sans);color:var(--mute)}
.pg-waterfall-enrichment .wf-log-r{min-width:0;font:400 13px/1.35 var(--sans);color:var(--k-text);overflow-wrap:anywhere}
.pg-waterfall-enrichment .wf-skip .wf-log-r{color:var(--mute)}
.pg-waterfall-enrichment .wf-done .wf-log-r{font-weight:600;color:var(--ink)}
.pg-waterfall-enrichment .wf-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-waterfall-enrichment .wf-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 figure is narrower and the addresses would reach the card: the figure gives up 12 px of its
   side padding and the card lifts 10 px over the window's edge instead of 30, as on /data-enrichment/ */
@media (min-width:1201px) and (max-width:1279px){
  .pg-waterfall-enrichment .k-pic:has(>.wf-log){padding-left:24px;padding-right:24px}
  .pg-waterfall-enrichment .wf-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-waterfall-enrichment .k-pic:has(>.wf-log){grid-template-columns:minmax(0,1fr)}
  .pg-waterfall-enrichment .wf-log{grid-column:1;grid-row:2;align-self:auto;margin:12px 0 0}
}