/*
 * Styles for js/newsletter.js: the signup forms, the confirmation banners and
 * the issue page's signup box. Only classes that file adds are styled here;
 * the page itself is the design's (.newsletter-page, .newsletter-heading,
 * .letter-art, .issue-row, .note-reading in styles.css). Colours are the
 * design tokens, so both themes follow; the Market recap box keeps the
 * board's own fixed palette, which is the same in light and dark.
 */

/* The form under the Newsletter heading, and in the issue page's box. */
.newsletter-form{margin-top:30px;max-width:540px}
.newsletter-lists{border:0;margin:0 0 16px;padding:0;display:grid;gap:10px;min-width:0}
.newsletter-lists legend{padding:0;margin-bottom:12px;color:var(--muted)}
.newsletter-choice{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;padding:14px 16px;border:1px solid var(--rule);background:var(--panel);cursor:pointer;transition:border-color .15s ease}
.newsletter-choice:hover{border-color:var(--muted)}
.newsletter-choice:has(input:checked){border-color:var(--ink)}
.newsletter-choice input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--ink)}
.newsletter-choice input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.newsletter-choice strong{display:block;font:600 15px/1.3 var(--sans);color:var(--ink)}
.newsletter-choice small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--muted)}
.newsletter-field{display:flex;gap:10px}
.newsletter-field input{flex:1;min-width:0;min-height:46px;padding:12px 14px;border:1px solid var(--rule);border-radius:0;background:var(--panel);color:var(--ink);font:16px var(--sans)}
.newsletter-field input::placeholder{color:var(--muted)}
.newsletter-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--ink)}
.newsletter-heading .newsletter-field .pill,.newsletter-field .pill{flex:none;margin:0;cursor:pointer;font:600 13px var(--sans)}
.newsletter-field .pill:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.newsletter-field .pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.newsletter-field .pill:disabled{opacity:.6;cursor:progress}
.newsletter-form p.newsletter-consent{margin:14px 0 0;max-width:58ch;font-size:12px;line-height:1.6}
.newsletter-form p.newsletter-status{margin:12px 0 0;max-width:58ch;font-size:14px;line-height:1.5;color:var(--ink)}
.newsletter-form p.newsletter-status[data-tone=ok]{font-weight:600}
.newsletter-form p.newsletter-status[data-tone=error]{color:var(--accent)}
.newsletter-form p.newsletter-status[data-tone=pending]{color:var(--muted)}
.newsletter-status:empty{display:none}

/* When subscriptions are not open on this server. */
.newsletter-form p.newsletter-closed{margin:0;font-size:16px;color:var(--ink)}
.newsletter-substack{display:inline-block;margin-top:14px;font-size:13px;color:inherit;border-bottom:1px solid currentColor;padding-bottom:4px;text-decoration:none}
.newsletter-substack:hover{color:var(--accent)}

/* After a confirmation or unsubscribe link: what just happened. */
.newsletter-banner{max-width:760px;margin:0 0 34px;padding:18px 22px;border:1px solid var(--rule);border-left:3px solid var(--accent);background:var(--panel)}
.newsletter-banner .micro{color:var(--accent);margin:0 0 6px}
.newsletter-banner p:not(.micro){font-size:15px;line-height:1.6;color:var(--ink);max-width:65ch}

/* The box at the end of an issue. */
.newsletter-signup-box{margin-top:60px;padding:30px;border:1px solid var(--rule);background:var(--panel)}
.newsletter-signup-box>p.micro{margin:0;font-size:11px;line-height:1.5;color:var(--muted)}
.newsletter-signup-box h2{font:600 34px/1.05 var(--display);letter-spacing:-.02em;margin:10px 0 0}
.newsletter-signup-box .newsletter-form{margin-top:22px;max-width:none}
.newsletter-signup-box .newsletter-choice{background:var(--paper)}
.newsletter-signup-box .newsletter-field input{background:var(--paper)}

.newsletter-missing>p:not(.micro){margin:20px 0;color:var(--muted)}

/* The Market recap's Daily recap box: the design's row, plus the status line. */
.recap-signup form[data-newsletter-form]{flex-wrap:wrap}
.recap-signup .newsletter-foot{flex:0 0 100%;display:grid;gap:6px}
.recap-signup .newsletter-foot p{margin:0}
.recap-signup form[data-newsletter-form] .newsletter-status{font-size:13px;color:#203d43}
.recap-signup form[data-newsletter-form] .newsletter-status[data-tone=ok]{font-weight:600}
.recap-signup form[data-newsletter-form] .newsletter-status[data-tone=error]{color:#9a3a22}
.recap-signup form[data-closed=true]{align-items:baseline;gap:8px 20px}
.recap-signup form[data-newsletter-form] .newsletter-closed{margin:0;font-size:14px;color:#203d43}
.recap-signup form[data-newsletter-form] .newsletter-substack{margin-top:0;color:#203d43}
.recap-signup form[data-newsletter-form] input:focus-visible{outline:2px solid #203d43;outline-offset:2px}
.recap-signup form[data-newsletter-form] button{cursor:pointer}
.recap-signup form[data-newsletter-form] button:focus-visible{outline:2px solid #203d43;outline-offset:3px}
.recap-signup form[data-newsletter-form] button:disabled{opacity:.6;cursor:progress}

@media(max-width:800px){
  .newsletter-form{margin-top:26px}
  .newsletter-banner{margin-bottom:26px;padding:16px 18px}
  .newsletter-signup-box{margin-top:45px;padding:22px 18px}
  .newsletter-signup-box h2{font-size:28px}
}
@media(max-width:480px){
  .newsletter-field{flex-direction:column}
  .newsletter-heading .newsletter-field .pill,.newsletter-field .pill{width:100%}
  .newsletter-choice{padding:13px 14px}
}
@media(prefers-reduced-motion:reduce){
  .newsletter-choice{transition:none}
}