/* Newsletter · subscribe — the live preview beside the form (the form itself: newsletter/signup.css).
   The preview is the latest issue drawn as the email Admin › Newsletter sends (nws_mail()), abridged and saying so;
   chosen topics mark their stories and sources. */

.nwl-subscribe__body{position:relative}

.nwl-pv{display:flex;flex-direction:column;gap:14px;min-width:0}
.nwl-pv__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;min-height:28px}
.nwl-pv__lbl{display:inline-flex;align-items:center;gap:10px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d)}
.nwl-pv__sum{font-size:var(--t-sm);line-height:1.5;color:var(--ink);font-weight:500}

.nwl-pv__win{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--sh-2);overflow:hidden}
.nwl-pv__bar{display:flex;align-items:center;gap:14px;height:44px;padding:0 16px;border-bottom:1px solid var(--line-2);background:var(--paper-2);font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.nwl-pv__bar-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nwl-pv__min{flex:none;margin-left:auto;padding:3px 9px;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);color:var(--ink);transition:background var(--d2) var(--e),color var(--d2) var(--e),border-color var(--d2) var(--e)}
.nwl-pv.is-picked .nwl-pv__min{background:var(--blue-wash);border-color:var(--blue-line);color:var(--blue-d)}
.nwl-pv__env{display:grid;gap:2px;padding:12px 22px;border-bottom:1px solid var(--line-2)}
.nwl-pv__env>div{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;font-size:var(--t-xs);line-height:1.6}
.nwl-pv__env dt{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-top:.15em}
.nwl-pv__env dd{min-width:0;color:var(--ink);overflow-wrap:anywhere}
.nwl-pv__env [data-nwl-to].is-typed{color:var(--blue-d)}

/* the email body, in the email's own order and type (Outfit headings, a mono masthead line) */
.nwl-pv__body{padding:20px 22px 22px;background:var(--paper)}
.nwl-pv__mast{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.nwl-pv__mast b{font-family:var(--f-h);font-size:.8125rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.nwl-pv__mast span{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.nwl-pv__title{margin-top:16px;font-family:var(--f-h);font-size:clamp(1.25rem,1.7vw,1.5rem);font-weight:500;line-height:1.2;letter-spacing:-.016em;color:var(--ink)}
.nwl-pv__dek{margin-top:8px;font-size:var(--t-sm);line-height:1.55;color:var(--txt)}
.nwl-pv__cover{position:relative;display:block;margin-top:14px;aspect-ratio:3 / 1;border-radius:var(--r-sm);overflow:hidden;background:var(--paper-4)}
.nwl-pv__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.03)}
.nwl-pv__note{margin-top:14px;font-size:var(--t-xs);line-height:1.6;color:var(--muted)}

.nwl-pv__stories{margin-top:14px;border-top:1px solid var(--line-2)}
.nwl-pv__story{position:relative;display:flex;flex-direction:column;gap:4px;padding:12px 0 12px 12px;border-bottom:1px solid var(--line-2);transition:background var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.nwl-pv__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.nwl-pv__k{flex-basis:100%;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-d)}
.nwl-pv__t{font-family:var(--f-h);font-size:1rem;font-weight:500;line-height:1.3;color:var(--ink);transition:color var(--d2) var(--e)}
.nwl-pv__you{display:none;align-self:center;padding:2px 7px;border-radius:var(--r-pill);background:var(--blue);color:var(--on-ink);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.nwl-pv__x{font-size:var(--t-xs);line-height:1.55;color:var(--muted);transition:color var(--d2) var(--e)}
.nwl-pv__sub{margin-top:18px;padding-bottom:8px;border-bottom:1px solid var(--line-2);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.nwl-pv__link{display:flex;flex-direction:column;gap:2px;padding:9px 0 9px 12px;border-bottom:1px solid var(--line-2);transition:background var(--d2) var(--e),box-shadow var(--d2) var(--e)}
.nwl-pv__lt{font-family:var(--f-h);font-size:.9375rem;font-weight:500;line-height:1.35;color:var(--ink);transition:color var(--d2) var(--e)}
.nwl-pv__ls{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.03em;color:var(--muted)}
.nwl-pv__btn{display:inline-flex;align-items:center;height:40px;margin-top:18px;padding:0 18px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:var(--t-xs);font-weight:600}
.nwl-pv__foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);font-size:var(--t-lbl);line-height:1.7;color:var(--faint);text-align:center}
.nwl-pv__foot u{color:var(--muted);text-underline-offset:2px}
.nwl-pv__ab{font-size:var(--t-xs);line-height:1.55;color:var(--muted)}

/* before the first issue: the same window, its stories still blank */
.nwl-pv__ln{display:block;height:8px;width:86%;margin-top:6px;border-radius:var(--r-pill);background:var(--paper-4)}
.nwl-pv__ln.is-s{width:58%}
.nwl-pv__win--empty .nwl-pv__title{color:var(--muted)}

/* topics chosen: matching rows lead, the rest step back (still legible — every story is still sent) */
.nwl-pv.is-picked .nwl-pv__story.is-match,.nwl-pv.is-picked .nwl-pv__link.is-match{background:var(--blue-wash);box-shadow:inset 3px 0 0 var(--blue)}
.nwl-pv.is-picked .nwl-pv__story.is-match .nwl-pv__you{display:inline-flex}
.nwl-pv.is-picked .nwl-pv__story:not(.is-match) .nwl-pv__t,.nwl-pv.is-picked .nwl-pv__link:not(.is-match) .nwl-pv__lt{color:var(--muted)}

/* role alerts: a plain note (never a mock email) — always shown without JS, with JS only while Open roles is ticked */
.nwl-pv__roles{display:flex;gap:10px;padding:12px 14px;border:1px dashed var(--line-3);border-radius:var(--r);font-size:var(--t-xs);line-height:1.55;color:var(--txt)}
.nwl-pv__roles::before{content:"";flex:none;width:8px;height:8px;margin-top:.45em;border-radius:50%;background:var(--ink)}
.nwl-pv.is-js .nwl-pv__roles{display:none}
.nwl-pv.is-js.is-roles .nwl-pv__roles{display:flex;animation:nwl-pv-in .45s var(--e) both}
@keyframes nwl-pv-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (max-width:1023px){
  .nwl-pv{padding:18px;border-radius:var(--r-lg);background:var(--paper-2);border:1px solid var(--line-2)}
}
@media (max-width:600px){
  .nwl-pv{padding:14px;margin-inline:calc(var(--gutter) * -.5)}
  .nwl-pv__body{padding:16px}
  .nwl-pv__env{padding:10px 16px}
  .nwl-pv__env>div{grid-template-columns:56px minmax(0,1fr)}
  .nwl-pv__x,.nwl-pv__dek{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nwl-pv.is-js.is-roles .nwl-pv__roles{animation:none}
  .nwl-pv__story,.nwl-pv__link,.nwl-pv__t,.nwl-pv__lt,.nwl-pv__min{transition:none}
}