/* Keep the underlying page, draft and offline groceries intact while signing in. */
.family-access { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; padding: 24px 16px; background: var(--bg); color: var(--ink); overflow: auto; }
.family-access[open] { display: grid; place-items: center; }
.family-access-panel { width: min(100%, 440px); padding-block: 24px; }
.family-access-mark { display: grid; place-items: center; width: 64px; height: 64px; background: var(--lemon); color: var(--on-lemon); border-radius: var(--radius-lg); margin-bottom: 32px; }
.family-access-mark::before { content: ""; width: 32px; height: 32px; background: currentColor; }
.family-access h1 { max-width: 15ch; }
.family-access input { min-height: 56px; }
.family-access input[aria-invalid="true"] { border-color: var(--tomato); }
.family-access .button { margin-block: 8px; }
.family-access .small { margin-top: 24px; }
.family-access-status { min-height: 24px; margin-block: 16px 8px; color: var(--tomato); font-size: 14px; overflow-wrap: anywhere; }
.family-account { margin-top: 32px; border-top: 1px solid var(--divider); padding-top: 12px; color: var(--ink-muted); font-size: 14px; }
.family-account .small { margin-block: 12px 0; }
@media print { .family-access, .family-account { display: none !important; } }