/* newsletter.css: The Sunday Calm signup (newsletter.js): the slide-in
   card and the inline forms. Colours written out, as not every page
   defines the homepage's colour variables. */
.nl-inline{background:#FFFFFF;border:1px solid #E7E3D6;border-radius:16px;padding:22px 22px 16px;margin:36px 0 8px;color:#2B2A28;}
.nl-title{font-size:1.15rem;font-weight:800;margin:0 0 6px;color:#2B2A28;line-height:1.3;}
.nl-text{font-size:0.95rem;line-height:1.55;color:#6B695F;margin:0 0 14px;}
.nl-fields{display:flex;flex-wrap:wrap;gap:10px 12px;margin-bottom:12px;}
.nl-field{flex:1 1 180px;display:flex;flex-direction:column;gap:4px;}
.nl-field label{font-size:0.88rem;font-weight:700;color:#2B2A28;}
.nl-opt{font-weight:400;color:#6B695F;}
.nl-field input{font:inherit;font-size:16px;min-height:46px;padding:10px 12px;border:1px solid #D9D4C4;border-radius:8px;background:#FFFFFF;color:#2B2A28;box-sizing:border-box;width:100%;}
.nl-field input:focus{outline:2px solid #5C7A8A;outline-offset:1px;border-color:#6B8068;}
.nl-field input[aria-invalid="true"]{border-color:#B0532A;}
.nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.nl-btn{font:inherit;font-weight:700;font-size:1rem;min-height:48px;padding:12px 20px;border:none;border-radius:8px;background:#54695A;color:#FFFFFF;cursor:pointer;width:100%;}
.nl-btn:hover{background:#465A4C;}
.nl-btn:focus-visible{outline:2px solid #5C7A8A;outline-offset:2px;}
.nl-btn:disabled{opacity:0.7;cursor:wait;}
.nl-msg{font-size:0.92rem;margin:10px 0 0;min-height:0;}
.nl-msg:empty{display:none;}
.nl-msg:focus{outline:none;}
.nl-msg.nl-error{color:#8C3B21;}
.nl-msg.nl-done{color:#3F5244;font-weight:700;background:#F0F3EF;border-radius:8px;padding:10px 12px;}
.nl-sent .nl-fields,.nl-sent .nl-btn{display:none;}
.nl-small{font-size:0.8rem;line-height:1.5;color:#6B695F;margin:10px 0 0;}
.nl-small a{color:#5C7A8A;}

/* The slide-in card: bottom corner on larger screens, a bottom sheet on phones */
.nl-card{position:fixed;right:20px;bottom:20px;z-index:800;width:360px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow-y:auto;box-sizing:border-box;
  background:#FFFFFF;border:1px solid #E7E3D6;border-radius:16px;padding:20px 20px 14px;box-shadow:0 12px 32px rgba(43,42,40,0.16);color:#2B2A28;
  font-family:inherit;line-height:1.5;transform:translateY(16px);opacity:0;transition:transform .35s ease,opacity .35s ease;}
.nl-card.nl-in{transform:none;opacity:1;}
.nl-card.nl-measure{visibility:hidden;transition:none;}
.nl-card .nl-title{padding-right:36px;}
.nl-card .nl-field{flex-basis:100%;}
.nl-close{position:absolute;top:8px;right:8px;width:44px;height:44px;border:none;background:none;border-radius:50%;font-size:1.6rem;line-height:1;color:#6B695F;cursor:pointer;}
.nl-close:hover{color:#2B2A28;background:#F0F3EF;}
.nl-close:focus-visible{outline:2px solid #5C7A8A;outline-offset:0;}
.nl-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@media (max-width:600px){
  .nl-card{left:0;right:0;bottom:0;width:auto;max-width:none;max-height:85vh;border-radius:18px 18px 0 0;border-bottom:none;padding:20px 18px calc(14px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion:reduce){.nl-card{transition:none;transform:none;}}
@media print{.nl-card,.nl-inline{display:none;}}
[dir="rtl"] .nl-card{right:auto;left:20px;}
[dir="rtl"] .nl-card .nl-title{padding-right:0;padding-left:36px;}
[dir="rtl"] .nl-close{right:auto;left:8px;}
@media (max-width:600px){[dir="rtl"] .nl-card{left:0;right:0;}}

/* The popup from the papercalm.co/sunday-calm link: in the middle of the page */
.nl-backdrop{position:fixed;inset:0;z-index:950;background:rgba(43,42,40,0.45);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;transition:opacity .25s ease;}
.nl-backdrop.nl-in{opacity:1;}
.nl-card.nl-popup{position:relative;right:auto;bottom:auto;left:auto;width:420px;max-width:100%;max-height:calc(100vh - 32px);transform:none;opacity:1;border-radius:16px;border:1px solid #E7E3D6;}
html.nl-locked,html.nl-locked body{overflow:hidden;}
@media (max-width:600px){
  .nl-card.nl-popup{width:100%;max-height:calc(100vh - 32px);border-radius:16px;border-bottom:1px solid #E7E3D6;padding:20px 18px 14px;}
}
@media (prefers-reduced-motion:reduce){.nl-backdrop{transition:none;}}
[dir="rtl"] .nl-card.nl-popup{left:auto;right:auto;}
