/* The hero's added element, the Send email step opened (parts/add-email-step.html), printed by the feature template in
   the hero's stage after the window (theme/template-parts/feature.php, the hero's "add"). The kit's .k-card in the demo's
   type and tokens: a quiet head with the step and its path, the recipient as the drawer's select, the two switches with
   the words the app writes under each, and a foot that says which setting is the sample's own. The window is the
   workflow cut to its steps, whose arms fade out at its lower edge, so the card follows the window on the right, lifted
   only over that faded edge, never over a word of it, as /website-visitor-identification/' card follows its window.
   Under 761 it follows the window just under it, a step in from the left. Nothing moves. Scoped to .pg-email-outreach,
   the class templates/page-parts.php puts on <main>. */

.pg-email-outreach .eo-step{position:relative;z-index:2;width:min(360px,100%);margin:-22px 0 0 auto}
.pg-email-outreach .eo-step .k-card-h{justify-content:space-between;gap:12px;height:42px;padding:0 16px}
.pg-email-outreach .eo-step .k-card-h span{font:600 14px/1.2 var(--sans);color:var(--ink)}
.pg-email-outreach .eo-step .k-card-h small{font:400 12.5px/1.2 var(--sans);color:var(--mute)}

.pg-email-outreach .eo-step-b{display:grid;padding:4px 16px}
.pg-email-outreach .eo-step-r{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0;margin:0;padding:10px 0;border-bottom:1px solid var(--line);font:400 13.5px/1.3 var(--sans);color:var(--k-text)}
.pg-email-outreach .eo-step-r:last-child{border-bottom:0}
.pg-email-outreach .eo-step-r>span{min-width:0}
.pg-email-outreach .eo-step-r small{display:block;margin-top:3px;font:400 12.5px/1.3 var(--sans);color:var(--mute);text-wrap:pretty}
/* the recipient, as the drawer's select shows its value */
.pg-email-outreach .eo-step-sel{
  flex:none;padding:5px 10px;border-radius:8px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line);
  font:500 12.5px/1.2 var(--sans);color:var(--ink);white-space:nowrap
}
/* a switch that is on, the demo's own (the settings' Auto-update, assets/css/demo-table.css .gsd-fe-tg) */
.pg-email-outreach .eo-tg{position:relative;flex:none;width:28px;height:16px;border-radius:999px;background:var(--ai)}
.pg-email-outreach .eo-tg::after{content:"";position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:#FFFFFF}
.pg-email-outreach .eo-step-f{margin:0;padding:10px 16px 12px;border-top:1px solid var(--line);font:400 12.5px/1.35 var(--sans);color:var(--mute);text-wrap:pretty}

/* under 761 the window takes the stage's width, its arms fading to its lower edge, so the card follows it just under, a
   step in from the left, over nothing */
@media (max-width:760px){
  .pg-email-outreach .eo-step{width:calc(100% - 44px);margin:12px 10px 0 auto}
}
@media (max-width:480px){
  .pg-email-outreach .eo-step{width:calc(100% - 24px);margin-right:0}
}