/* pa-auth.css - the Login pop-up and the account pop-up, on every page. */
.pa-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.pa-modal[hidden] { display: none; }
.pa-card {
  width: min(100%, 380px); display: flex; flex-direction: column; gap: 12px; padding: 26px 24px 20px; border-radius: 28px;
  background: var(--solid); box-shadow: var(--pop-shadow); color: var(--ink);
}
.pa-card h2 { margin: 0 0 2px; font-size: 26px; font-weight: 300; letter-spacing: -.02em; }
.pa-card p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink2); }
.pa-input {
  width: 100%; height: 46px; padding: 0 16px; border: 0; border-radius: 999px; outline: 0;
  background: var(--field); box-shadow: inset 0 0 0 1px var(--ctl-line); color: var(--ink); font: 400 15px var(--font);
}
.pa-input::placeholder { color: var(--placeholder); }
.pa-input:focus { box-shadow: inset 0 0 0 1.5px var(--ac-text); }
.pa-go {
  height: 46px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--ac); color: #fff; font: 500 15px var(--font);
}
.pa-go:hover { background: var(--ac-hover); }
.pa-go:disabled { opacity: .6; cursor: default; }
.pa-msg { min-height: 18px; font-size: 13px; line-height: 1.4; color: var(--bad); }
.pa-msg.is-ok { color: var(--ink2); }
.pa-links { display: flex; justify-content: center; align-items: center; gap: 14px; }
.pa-links button { padding: 6px 2px; border: 0; background: none; color: var(--ink2); font: 400 13px var(--font); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.pa-links button:hover { color: var(--ink); }
.pa-links button[hidden] { display: none; }
.pa-out { height: 44px; border: 0; border-radius: 999px; cursor: pointer; background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-line); color: var(--ink); font: 400 14px var(--font); }
.pa-out:hover { box-shadow: inset 0 0 0 1px var(--line-hover); }
.pa-go:focus-visible, .pa-out:focus-visible, .pa-links button:focus-visible { outline: 2px solid var(--ac-text); outline-offset: 2px; }
/* the bell's small pop-up, under the bell */
.pa-pop { position: fixed; z-index: 150; width: min(300px, calc(100vw - 24px)); padding: 16px 18px; border-radius: 20px; background: var(--solid); box-shadow: var(--pop-shadow); color: var(--ink); }
.pa-pop[hidden] { display: none; }
.pa-pop h2 { margin: 0 0 6px; font-size: 15px; font-weight: 500; }
.pa-pop p { margin: 0; font-size: 13.5px; color: var(--ink2); }
.pa-bell-body { font-size: 13.5px; color: var(--ink2); }
.pa-bell-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-bell-list li { display: flex; flex-direction: column; gap: 1px; }
.pa-bell-list b { color: var(--ink); font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
.pa-bell-list small { font-size: 12px; }
.pa-bell-go { display: inline-block; margin-top: 4px; color: var(--ac-text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }