/* The white label page, part "blocks": four static blocks under the hero, one point each. The block is the landing
   kit's (theme/assets/css/kit.css, the umbrella's marketing/landing/BRANDBOOK.md section 6): section.k-sec.k-blk on the
   warm grey and the white in turn, the words beside one large picture (.k-pic with its .k-sample), the picture's side
   alternating (.k-blk-flip). Blocks 01, 03 and 04 are white label components the agency page calls too
   (template-parts/wl-brand-page.php, wl-sign-in-link.php and wl-plan.php), and block 02's email is wl-mail.php: their
   styles are the kit's (.k-wl, "the sample agency's brand on the app"), the sample agency's ink and lime among them.
   This file holds only block 02's own window, the brand editor's Sending domain card in the Admin panel, which wears
   .k-wl so it takes the kit's resets and parts (.k-gs, .k-sl, .k-dot, .k-wl-lift for the email over its corner).
   Nothing moves and nothing needs a script. Every rule is scoped to .pg-white-label and every class of its own starts
   with wl-; the colours come from the theme's and the kit's tokens, so the dark theme follows. */

/* ---- 02 Emails: the brand's sending domain, and one email from the brand over its corner ---------------- */
.pg-white-label .wl-dom{width:86%}
.pg-white-label .wl-dom-in{display:flex;flex-direction:column;padding:18px 18px 0}
.pg-white-label .wl-dom-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pg-white-label .wl-dom-h b{font:600 17px/1.2 var(--sans);color:var(--ink)}
.pg-white-label .wl-dom-from{display:flex;align-items:center;gap:10px;margin-top:14px;padding:0 12px;height:44px;border:1px solid var(--line);border-radius:12px;background:var(--sunk);white-space:nowrap}
.pg-white-label .wl-dom-from small{font:400 13px/1 var(--sans);color:var(--mute)}
.pg-white-label .wl-dom-from span{min-width:0;overflow:hidden;text-overflow:ellipsis;font:500 13.5px/1 var(--mono);color:var(--ink)}
.pg-white-label .wl-recs{margin-top:8px}
.pg-white-label .wl-recs li{display:flex;align-items:center;justify-content:space-between;gap:12px;height:46px;border-bottom:1px solid var(--line-2);font:500 14.5px/1 var(--sans);color:var(--k-text)}
.pg-white-label .wl-found{display:inline-flex;align-items:center;gap:7px;font:500 13.5px/1 var(--sans);color:var(--k-ok-ink)}
.pg-white-label .wl-found svg{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--ok);color:#fff}
/* the foot line, the last row of the window: the email's card lifts over the empty right of it */
.pg-white-label .wl-dom-foot{display:flex;align-items:center;height:52px;font:400 13px/1 var(--sans);color:var(--mute)}

/* ---- widths ------------------------------------------------------------------------------------------- */
@media (max-width:760px){
  /* the window takes the width, the email tucks under its foot */
  .pg-white-label .wl-dom{width:100%}
  .pg-white-label .wl-dom-in{padding:14px 12px 0}
  .pg-white-label .wl-dom-from{gap:8px;padding:0 10px}
  .pg-white-label .wl-dom-from span{font-size:12.5px}
  .pg-white-label .wl-dom-foot{height:62px;align-items:flex-start;padding-top:14px}
}
/* the narrowest phones (320 to 360): the address keeps its whole width */
@media (max-width:360px){
  .pg-white-label .wl-dom-from small{display:none}
}