/* The block "When an address fails"'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"). Drawn as /data-enrichment/'s block 01 Log is (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 column's waterfall (part=sequence, the verifier marked), so the card never sits
   over a word: 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 sequence's rows end in blank space. Under 760 the card sits under the still
   instead, full width.
   Nothing moves. Scoped to .pg-email-verification, the class templates/page-parts.php puts on <main>. */

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

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

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

.pg-email-verification .ev-log-s{font:500 12px/1.35 var(--sans);color:var(--mute)}
.pg-email-verification .ev-log-r{min-width:0;font:400 13px/1.35 var(--sans);color:var(--k-text);overflow-wrap:anywhere}
.pg-email-verification .ev-done .ev-log-r{font-weight:600;color:var(--ink)}
.pg-email-verification .ev-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-email-verification .ev-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-email-verification .k-pic:has(>.ev-log){padding-left:24px;padding-right:24px}
  .pg-email-verification .ev-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-email-verification .k-pic:has(>.ev-log){grid-template-columns:minmax(0,1fr)}
  .pg-email-verification .ev-log{grid-column:1;grid-row:2;align-self:auto;margin:12px 0 0}
}
