/* "Get new pieces in your inbox" — the Gallery's subscribe strip (2026-10-17). Markiian's reference: a heading,
   one field with the button at its end, the count under it on the right. Ours: no rounded corners anywhere,
   the one .btn (L, 48 tall) joined to a 48 field in the cases' mute grey (black 5 % on paper), General Sans
   for the words, the count and the status line in the captions' 15. Logic in inbox.js; the server in the
   release repo's api/ (double opt-in through Resend). */
.inbox{width:100%;max-width:calc(560px + 2 * var(--margin));margin:160px auto 0;padding:0 var(--margin);box-sizing:border-box;scroll-margin-top:200px;}
.inbox h2{margin:0 0 20px;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:1.3;letter-spacing:-.005em;color:var(--black);}
.inbox .row{display:flex;height:48px;}
.inbox input[type=email]{flex:1 1 auto;min-width:0;height:48px;margin:0;padding:0 20px;box-sizing:border-box;border:0;border-radius:0;outline:none;
  background:color-mix(in srgb,#000 5%,var(--bg));color:var(--black);
  font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:18px;line-height:48px;letter-spacing:-.005em;
  -webkit-appearance:none;appearance:none;transition:background-color .2s ease;}
.inbox input[type=email]::placeholder{color:rgba(0,0,0,.35);opacity:1;}
.inbox input[type=email]:hover{background:color-mix(in srgb,#000 7%,var(--bg));}
.inbox input[type=email]:focus{background:color-mix(in srgb,#000 8%,var(--bg));box-shadow:inset 0 -2px 0 var(--black);}
.inbox input[aria-invalid=true]{box-shadow:inset 0 -2px 0 var(--red);}
.inbox input:disabled{color:rgba(0,0,0,.45);}
.inbox .btn{flex:0 0 auto;min-width:132px;}   /* one width for Subscribe / Sending / Sent, so the field never jumps */
.inbox .btn:disabled{cursor:default;}
.inbox .btn:disabled:hover{--btn-bg:var(--black);}
.inbox .btn:disabled .btn-l{visibility:hidden;}   /* no hover swing while it's working or done */
.inbox .btn:disabled .btn-t{transform:none;}
.inbox .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}
.inbox .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.inbox .foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-top:14px;
  font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;line-height:1.35;letter-spacing:.01em;color:rgba(0,0,0,.45);}
.inbox .msg{margin:0;min-width:0;}
.inbox .msg.err{color:var(--red);}
.inbox .msg.ok{color:var(--black);}
.inbox .count{flex:0 0 auto;white-space:nowrap;}
/* confirmed: the field goes, the heading says so */
.inbox.done .row{display:none;}
.inbox.done .foot{margin-top:0;}
.inbox.done .count{display:none;}
@media (max-width:640px){
  .inbox{margin-top:100px;}
  .inbox h2{font-size:18px;}
  .inbox input[type=email]{font-size:16px;padding:0 14px;}   /* 16 keeps iOS from zooming in on focus */
  .inbox .btn--l{padding:0 16px;font-size:18px;min-width:112px;}
}