/* The mailing list's look on a site's pages (aws-platform
   docs/design/mailing-list.md, "Embedding in the site's pages"), served at
   /_platform/list.css on the site's own hostname: the sign-up form
   (form.html) and the list's pages, each a notice panel in the error pages'
   style. Layout here; colours from the site's own custom properties, set in
   its CSS, each defaulting to the platform's maintenance page:
     --list-accent   kicker, button and links (#0f7a55)
     --list-on-accent  the button's text (#ffffff)
     --list-rule     the panel's coloured rule (#1fae7c)
     --list-panel    the panel's head (#eef3f0)
     --list-muted    the status line and notes (#5b6460)
     --list-line     borders (rgba(0,0,0,.15)) */

/* The sign-up form, shown by /_platform/list.js once the list answers. */
.list-signup:not([hidden]){display:block;margin:2rem 0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--list-line,rgba(0,0,0,.15));border-radius:.5rem;}
.list-signup label{display:block;font-weight:700;margin-bottom:.5rem;}
.list-signup .list-row{display:flex;flex-wrap:wrap;gap:.5rem;}
.list-signup input[type=email]{flex:1 1 14rem;min-width:0;padding:8px 12px;border:1px solid var(--list-line,rgba(0,0,0,.15));border-radius:4px;background:transparent;color:inherit;font:inherit;}
.list-signup .list-note{margin:.75rem 0 0;font-size:.85rem;color:var(--list-muted,#5b6460);}
/* The field people never see: a bot that fills it in gets nothing sent. */
.list-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden;}

/* The list's pages: a panel with a coloured rule, a small kicker over a heavy
   heading and a status line, and the message beside it. */
.list-panel{display:flex;margin:40px 0 30px;border:1px solid var(--list-line,rgba(0,0,0,.15));text-align:left;}
.list-head{flex:0 0 38%;display:flex;flex-direction:column;padding:28px 24px;background:var(--list-panel,#eef3f0);border-right:6px solid var(--list-rule,#1fae7c);}
.list-kicker{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--list-accent,#0f7a55);font-weight:700;}
.list-head h1{margin:14px 0 0;font-size:30px;line-height:1.15;font-weight:800;text-transform:none;letter-spacing:0;}
.list-status{margin:auto 0 0;padding-top:22px;font-size:15px;color:var(--list-muted,#5b6460);}
.list-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 26px;}
.list-body p{font-size:17px;line-height:1.6;}
.list-body p:last-child{margin-bottom:0;}
.list-body form{margin:6px 0 22px;}
.list-button,.list-signup button{display:inline-block;padding:8px 18px;border:1px solid var(--list-accent,#0f7a55);border-radius:4px;background:var(--list-accent,#0f7a55);color:var(--list-on-accent,#ffffff);font:inherit;font-weight:700;cursor:pointer;}
.list-back a,.list-body a{color:var(--list-accent,#0f7a55);}
@media(max-width:767.98px){.list-panel{flex-direction:column;}.list-head{border-right:0;border-bottom:6px solid var(--list-rule,#1fae7c);}}
.list-signup .list-row[hidden]{display:none}