/* The members' pages (PLAN 42): sign in, your collections, a collection's memories. The shared reader styles
   carry the rest. */
.members-out { justify-self: end; }
.members-sign-in { display: grid; gap: 14px; max-width: 30rem; margin-inline: auto; padding-top: 24px; }
.members-sign-in h1, .members-heading { font: var(--title2); }
.members-step { display: grid; gap: 10px; }
.members-sign-in label { font: var(--subheadline); color: var(--muted); }
.members-sign-in input { font: var(--body); min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: inherit; }
.members-button { font: var(--headline); min-height: 44px; border: 0; border-radius: 12px; background: var(--accent); color: var(--on-accent); }
.members-problem { font: var(--body); color: var(--danger); min-height: 1.2em; }
.members-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.members-list a { display: grid; gap: 2px; padding: 12px 0; border-bottom: 0.5px solid var(--rule); color: inherit; text-decoration: none; }
.members-list .members-title { font: var(--headline); }
.members-list .members-meta { font: var(--subheadline); color: var(--muted); }
.members-note { font: var(--body); color: var(--muted); padding-top: 12px; }
.members-memories { display: grid; gap: 28px; padding-top: 16px; }
.members-memory { display: grid; gap: 12px; padding-bottom: 20px; border-bottom: 0.5px solid var(--rule); }
.members-memory h2 { font: var(--title3); }
.members-memory audio, .members-memory video { width: 100%; }
.members-memory .strip img { height: 160px; width: auto; border-radius: 10px; }
.members-photo-note { font: var(--footnote); color: var(--muted); }
.members-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.members-words .members-speaker { font: var(--footnote); color: var(--muted); margin-right: 6px; }
.members .bar-inner { grid-template-columns: 44px minmax(0, 1fr) auto; }

/* Accounts (PLAN 50E.1): the ways in, the username, the Account page and confirming it's you. */
.members-ways { display: grid; gap: 10px; }
.members-provider { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 12px; font: var(--headline); text-decoration: none; border: 1px solid var(--rule); background: var(--paper); color: inherit; }
button.members-provider { width: 100%; }
.members-subhead { font: var(--headline); margin: 0; }
/* Continue with Apple, to Apple's rules for a custom button (developer.apple.com/design/human-interface-guidelines/
   sign-in-with-apple, "Creating a custom Sign in with Apple button", read 2026-10-06): Apple's left-aligned logo file
   as it comes, as tall as the button (44px), its own padding the space before the logo and between it and the title;
   the title 43% of the button's height (19px) in the system font; logo and title white on black, or black on white
   in the dark; at least 8% of the button's width after the title, and no smaller than Google's beside it.
   apple-logo-white.svg and apple-logo-black.svg are Apple's "Logo - SIWA - Left-aligned - White - Medium.svg" and
   "... Black - Medium.svg" as they come (Apple Design Resources, developer.apple.com/design/resources, Sign in with
   Apple), each on its own black or white ground, which the button's fill matches; Medium is the size nearest Google's
   G. Downloaded for Chase on 2026-10-06 under the Apple Design Resources licence he accepted that day (EA1677). */
.members-apple { gap: 0; border: 0; background: #000; color: #fff; font-size: 19px; font-weight: 500; }
.members-apple-logo { display: block; flex: none; width: auto; height: 44px; }
.members-apple-logo-black { display: none; }
/* Continue with Google, to Google's custom-button guidelines (developers.google.com/identity/branding-guidelines,
   read 2026-10-05): the standard G unaltered, 12px before it and 10px after, Google Sans Medium 14/20; light: fill
   #FFFFFF, stroke #747775, text #1F1F1F; dark: fill #131314, stroke #8E918F, text #E3E3E3. google-g.svg is the G of
   Google's icon-only button in signin-assets.zip (that page, downloaded 2026-10-05, assets dated 2026-04-15), its frame
   taken away and its canvas cropped to the G, the G's own paths untouched. fonts/google-sans-500-latin.woff2 is Google
   Sans Medium's Latin cut as Google Fonts serves it (fonts.gstatic.com, v71, downloaded 2026-10-05), under the SIL Open
   Font License 1.1 beside it in fonts/OFL.txt (google/fonts, ofl/googlesans). */
@font-face { font-family: 'Google Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/m/fonts/google-sans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.members-google { padding: 0 12px; background: #fff; border-color: #747775; color: #1f1f1f; font: 500 14px/20px 'Google Sans', system-ui, sans-serif; }
.members-google-g { width: 20px; height: 20px; flex: none; }
@media (prefers-color-scheme: dark) {
  .members-apple { background: #fff; color: #000; }
  .members-apple-logo-white { display: none; }
  .members-apple-logo-black { display: block; }
  .members-google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
}
.members-notice { font: var(--body); color: var(--muted); }
.members-notice:empty { display: none; }
.members-group { display: grid; gap: 8px; padding: 16px 0; border-bottom: 0.5px solid var(--rule); }
.members-group h2 { font: var(--title3); margin: 0; }
.members-row { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
/* A link that acts (Add Apple, Add Google, the bar's Account) reads as the buttons beside it. */
.members a.text-button { display: inline-flex; align-items: center; text-decoration: none; }
.members-out[aria-current="page"] { visibility: hidden; }
.members-group > .text-button { justify-self: start; }
.members-way { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 0.5px solid var(--rule); }
.members-way .members-meta { grid-column: 1; font: var(--subheadline); color: var(--muted); overflow-wrap: anywhere; }
.members-way .members-title { grid-column: 1; font: var(--headline); }
.members-way > .text-button { grid-column: 2; grid-row: 1 / span 3; }
.members-ask { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 6px; }
.members-ask p { margin: 0; flex-basis: 100%; }
.members-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.members-suggestion { font: var(--subheadline); min-height: 36px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 18px; background: var(--paper); color: inherit; }
.members-question { font: var(--headline); margin: 0; }
.members-danger { color: var(--danger); }
.members-danger-button { background: var(--danger); }
#username input, .members-group input { font: var(--body); min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); color: inherit; }
#username label, .members-group label { font: var(--subheadline); color: var(--muted); }