@charset "UTF-8";
/*!
 * StaticPress theme "Blocksy" - member.css
 *
 * The look of the sharing and points system: the two member pages
 * (templates/member.html, templates/member_points.html) and the "register or
 * share" dialog (templates/partials/member_dialog.html) every page carries.
 *
 * The dialog is part of base.html, so this file is linked from base.html as
 * well - there is no page of the site that can be sure the visitor never opens
 * it. It is small on purpose.
 *
 * Two rules are worth knowing before editing:
 *
 *   * the four building blocks of a form (`.sp-field` / `.sp-field-label` /
 *     `.sp-input` / `.sp-button`) are declared by `interact.css` too, because
 *     the comment block and the support widget share them. The two files must
 *     stay in step; they are repeated here - not borrowed - because the
 *     interaction feature is optional: on a site that switched it off
 *     `interact.css` is not sent at all, and a member page without its forms
 *     styled is not an option. Every rule below is therefore scoped to the
 *     member surfaces (`[data-sp-member-page]` / `.sp-member-dialog`), so it
 *     outranks the unscoped copy of `interact.css` and the load order of the
 *     two stylesheets cannot change the result either way;
 *
 *   * `[hidden]` is restated for the same reason the comment block documents
 *     it: an author rule that sets `display` outranks the user agent rule, and
 *     a dialog that stays on screen after it was closed is exactly what that
 *     looks like. The script shows and hides every view with the attribute.
 *
 * Every colour, radius and shadow comes from `tokens.css`, so a theme token
 * change reaches these pages like it reaches the rest of the site.
 */

/* ---------------------------------------------------------- visibility */
[hidden] {
    display: none !important;
}

/* ------------------------------------------------------ form building blocks */
[data-sp-member-page] .sp-field,
.sp-member-dialog .sp-field {
    display: block;
    margin-bottom: 1em;
}

[data-sp-member-page] .sp-field-label,
.sp-member-dialog .sp-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-headings-color);
    margin-bottom: 0.35em;
}

[data-sp-member-page] .sp-input,
.sp-member-dialog .sp-input {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.5em 0.7em;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-8);
    border: 1px solid var(--theme-border-color);
    border-radius: var(--theme-border-radius);
    transition: var(--theme-transition);
}

[data-sp-member-page] .sp-input:focus,
.sp-member-dialog .sp-input:focus {
    outline: 0;
    border-color: var(--theme-link-initial-color);
    box-shadow: 0 0 0 0.15rem rgba(40, 114, 250, 0.18);
}

[data-sp-member-page] .sp-button,
.sp-member-dialog .sp-button {
    display: inline-block;
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-button-background-initial-color);
    border: 1px solid var(--theme-button-background-initial-color);
    border-radius: var(--theme-button-border-radius);
    cursor: pointer;
    transition: var(--theme-transition);
}

[data-sp-member-page] .sp-button:hover,
[data-sp-member-page] .sp-button:focus,
.sp-member-dialog .sp-button:hover,
.sp-member-dialog .sp-button:focus {
    color: var(--theme-button-text-hover-color);
    background-color: var(--theme-button-background-hover-color);
    border-color: var(--theme-button-background-hover-color);
}

[data-sp-member-page] .sp-button:disabled,
.sp-member-dialog .sp-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* The plain button of these two pages: "share without registering", "copy",
   "back", "sign out". `interact.css` spells the same idea `.sp-button-ghost`;
   the member markup uses `is-plain`, so the name is declared here as well. */
[data-sp-member-page] .sp-button.is-plain,
.sp-member-dialog .sp-button.is-plain {
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-8);
    border-color: var(--theme-border-color);
}

[data-sp-member-page] .sp-button.is-plain:hover,
[data-sp-member-page] .sp-button.is-plain:focus,
.sp-member-dialog .sp-button.is-plain:hover,
.sp-member-dialog .sp-button.is-plain:focus {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-6);
    border-color: var(--theme-palette-color-5);
}

/* ------------------------------------------------------------- the dialog */
/* Fixed overlay + backdrop, the same shell as the unlock dialog of
   downloads.css - only that this one is a plain element with the `hidden`
   attribute, because it has to work in a browser without `<dialog>`. The
   z-index sits above the floating interaction widget (1070 / 1080) and below
   the full screen reading layer (99998), so a dialog opened from an article
   covers the page it belongs to and nothing else. */
.sp-member-dialog {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
}

.sp-member-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(18, 28, 46, 0.6);
}

.sp-member-panel {
    position: relative;
    width: 100%;
    max-width: var(--modal-panel-width);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    box-sizing: border-box;
    padding: 1.75rem;
    background-color: var(--theme-palette-color-8);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow-strong);
}

.sp-member-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--theme-text-color);
    background: none;
    border: 0;
    border-radius: var(--theme-border-radius);
    cursor: pointer;
}

.sp-member-close:hover,
.sp-member-close:focus {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-6);
}

/* The way out of a forgotten login code: the corner of the login view and
   nothing else, because it is a child of that view (a hidden view hides it
   too). The panel is the positioned ancestor, so ``absolute`` pins it to the
   top right corner of the box and one step left of the close button, where the
   reader who has nothing to type looks first. */
.sp-member-recover-link {
    position: absolute;
    top: 0.9rem;
    right: 3rem;
    font-size: 0.875rem;
    color: var(--theme-link-initial-color);
}

.sp-member-recover-link:hover,
.sp-member-recover-link:focus {
    color: var(--theme-palette-color-2);
    text-decoration: underline;
}

.sp-member-title {
    margin: 0 0 0.6em;
    padding-right: 2.5rem;
    font-size: 1.25rem;
    color: var(--theme-headings-color);
}

.sp-member-lead {
    margin: 0 0 1em;
    color: var(--theme-text-color);
}

.sp-member-note {
    margin: 0.75em 0 0;
    font-size: 0.875rem;
    color: var(--theme-text-color);
}

.sp-member-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0.75em 0 0;
}

/* A nickname is drawn by the node and not typed by a member: the field stays
   in the form (it is what a submit carries) and is marked as read only, so
   nobody wonders why the keyboard does nothing. */
.sp-member-dialog .sp-input[readonly],
[data-sp-member-page] .sp-input[readonly] {
    color: var(--theme-text-color);
    background-color: var(--theme-palette-color-8);
    border-style: dashed;
    cursor: default;
}

.sp-member-cred {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    margin: 0 0 1em;
}

.sp-member-cred dt {
    font-weight: 600;
    color: var(--theme-headings-color);
}

.sp-member-cred dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: 0.06em;
    word-break: break-all;
}

/* A refusal or a confirmation. The script sets `data-sp-level`, so the two
   states are one rule each - and neither of them is ever empty on screen. */
.sp-member-message {
    margin: 0.75em 0 0;
    padding: 0.6em 0.8em;
    font-size: 0.9375rem;
    border-radius: var(--theme-border-radius);
}

.sp-member-message[data-sp-level="error"] {
    color: #8a1f11;
    background-color: #fdecea;
    border: 1px solid #f5c6c0;
}

.sp-member-message[data-sp-level="ok"] {
    color: #14532d;
    background-color: #ecfdf3;
    border: 1px solid #bbe7c9;
}

/* ----------------------------------------------------------------- pages */
/* The sub navigation of the member centre (partials/member_nav.html). The two
   pages it links are built from the same container, hero and cards, so the
   active entry is the only thing on screen telling the reader which of them he
   is reading - hence a coloured underline and not only a colour change on the
   label. */
.sp-member-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--grid-columns-gap);
    border-bottom: 1px solid var(--theme-border-color);
}

.sp-member-tab {
    padding: 0.5em 0.9em;
    margin-bottom: -1px;
    font-size: 0.9375rem;
    color: var(--theme-link-initial-color);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--theme-border-radius) var(--theme-border-radius) 0 0;
}

.sp-member-tab:hover,
.sp-member-tab:focus {
    color: var(--theme-palette-color-2);
}

.sp-member-tab.is-active {
    font-weight: 600;
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-8);
    border-color: var(--theme-border-color);
    border-bottom-color: var(--theme-palette-color-1);
}

.sp-member-waiting {
    padding: 2rem 0;
    color: var(--theme-text-color);
}

.sp-member-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-columns-gap);
    margin-bottom: var(--grid-columns-gap);
}

.sp-member-card {
    padding: 1.5rem;
    background-color: var(--theme-palette-color-8);
    border: var(--card-border);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow);
}

.sp-member-card + .sp-member-card {
    margin-top: var(--grid-columns-gap);
}

/* Inside the two column grid the cards sit side by side, so the stacking
   margin above must not add a gap the grid already made. */
.sp-member-grid .sp-member-card + .sp-member-card {
    margin-top: 0;
}

.sp-member-card-title {
    margin: 0 0 0.75em;
    font-size: 1.0625rem;
    color: var(--theme-headings-color);
}

.sp-member-recover {
    margin-top: 1em;
}

.sp-member-recover > summary {
    font-weight: 600;
    color: var(--theme-link-initial-color);
    cursor: pointer;
}

/* The profile facts: label left, value right, one pair per row. */
.sp-member-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin: 0 0 1.25em;
}

.sp-member-facts dt {
    font-size: 0.875rem;
    color: var(--theme-text-color);
}

.sp-member-facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--theme-headings-color);
    word-break: break-all;
}

.sp-member-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.sp-member-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem;
    text-align: center;
    background-color: var(--theme-palette-color-7);
    border-radius: var(--theme-border-radius);
}

.sp-member-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-link-initial-color);
}

.sp-member-stat-label {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
}

/* The share row: the address, then the two buttons. */
.sp-member-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.sp-member-share .sp-input {
    flex: 1 1 16rem;
    min-width: 0;
}

/* The recent shares and the downline tree are built by static/js/member.js. */
.sp-member-list {
    margin-top: 1em;
}

.sp-member-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-top: 1px solid var(--theme-border-color);
}

.sp-member-row-main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sp-member-row-title {
    font-weight: 600;
    color: var(--theme-headings-color);
}

.sp-member-row-meta {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
    word-break: break-all;
}

.sp-member-tree {
    margin-top: 1em;
}

.sp-member-tree-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: none;
}

.sp-member-tree-list .sp-member-tree-list {
    margin-top: 0.5rem;
    border-left: 1px dashed var(--theme-border-color);
}

.sp-member-tree-item {
    margin-bottom: 0.5rem;
}

.sp-member-tree-head {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.sp-member-tree-who {
    font-weight: 600;
    color: var(--theme-headings-color);
}

.sp-member-tree-meta {
    font-size: 0.8125rem;
    color: var(--theme-text-color);
}

.sp-member-empty {
    margin: 1em 0 0;
    font-size: 0.9375rem;
    color: var(--theme-text-color);
}

/* ------------------------------------------------------------- the ledger */
.sp-member-table-wrap {
    overflow-x: auto;
}

.sp-member-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.sp-member-table th,
.sp-member-table td {
    padding: 0.6rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--theme-border-color);
    white-space: nowrap;
}

.sp-member-table th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--theme-headings-color);
}

.sp-member-table td {
    color: var(--theme-text-color);
}

.sp-member-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.25em;
}

.sp-member-page {
    font-size: 0.875rem;
    color: var(--theme-text-color);
}

/* ------------------------------------------------ the quick app member gate */
/* The panel of docs/initdoc/10 section 6.6, printed by
   partials/quickapp_gate.html on the full page mode of a gated app and by a
   quick app itself on its bare address (templates/quickapp_app.html and
   static/js/sp-quickapp-gate.js). It covers the app - `position: fixed` with
   `inset: 0` is the viewport, both inside the fixed shell of
   css/quickapp_app.css and on the bare address, where the app's own document
   may well scroll - and it is opaque on purpose: the gate exists so that
   nothing of the app is read before the reader answered.
   The panel carries its own copy of the button block, the one rule that
   differs: the buttons of the panel are all the same weight, and `.is-plain`
   is the outline one the dialog already has. */
.sp-quickapp-gate {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.25rem;
    overflow-y: auto;
    background-color: var(--sp-app-bg, #000000);
}

.sp-quickapp-gate-card {
    width: 100%;
    max-width: 34rem;
    padding: 1.75rem;
    text-align: left;
    background-color: var(--theme-palette-color-8);
    border: var(--card-border);
    border-radius: var(--theme-border-radius);
    box-shadow: var(--theme-box-shadow);
}

.sp-quickapp-gate-title {
    margin: 0 0 0.75em;
    font-size: 1.25rem;
    color: var(--theme-headings-color);
}

.sp-quickapp-gate-lead {
    margin: 0 0 1.25em;
    color: var(--theme-text-color);
}

.sp-quickapp-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1em;
}

.sp-quickapp-gate-button,
.sp-quickapp-account-button {
    display: inline-block;
    min-height: var(--theme-button-min-height);
    padding: var(--theme-button-padding);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-button-background-initial-color);
    border: 1px solid var(--theme-button-background-initial-color);
    border-radius: var(--theme-button-border-radius);
    cursor: pointer;
    transition: var(--theme-transition);
}

.sp-quickapp-gate-button:hover,
.sp-quickapp-gate-button:focus,
.sp-quickapp-account-button:hover,
.sp-quickapp-account-button:focus {
    color: var(--theme-button-text-hover-color);
    background-color: var(--theme-button-background-hover-color);
    border-color: var(--theme-button-background-hover-color);
}

.sp-quickapp-gate-button.is-plain,
.sp-quickapp-account-button.is-plain {
    color: var(--theme-button-background-initial-color);
    background-color: transparent;
}

.sp-quickapp-gate-button.is-plain:hover,
.sp-quickapp-gate-button.is-plain:focus,
.sp-quickapp-account-button.is-plain:hover,
.sp-quickapp-account-button.is-plain:focus {
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-button-background-initial-color);
}

.sp-quickapp-gate-note {
    margin: 0;
    font-size: 0.875rem;
    color: var(--theme-text-color);
}

.sp-quickapp-gate-message {
    margin: 0 0 1em;
    padding: 0.6rem 0.8rem;
    font-size: 0.875rem;
    color: #8a1f11;
    background-color: #fdecea;
    border: 1px solid #f5c6c0;
    border-radius: var(--theme-border-radius);
}

/* ------------------------------------------ the quick app account drawer */
/* The floating button of docs/initdoc/10 section 6.7 and the drawer it slides
   out, printed by partials/quickapp_account.html on the full page mode of a
   gated app and by the app itself on its bare address. It is the answer to the
   one gap the gate leaves open: the panel of the gate is hidden for good once
   the reader answered it, so without this a reader who walked in as a guest
   could not reach a real account while the app stays open.

   Three things to know before editing:

     * the state of the drawer is one attribute on the root -
       ``data-sp-account-open`` for the drawer itself, ``data-sp-account-
       identity`` for who the reader is - and everything below is a rule off
       those two. That is what keeps every sentence in the markup (a script
       carries no Chinese): the three paragraphs, the five buttons and the three
       notes of the points box are all printed, and exactly one set of them is
       shown. The points box carries a second attribute of its own,
       ``data-sp-account-points-state``, for the number and the note inside it;
     * the z-index is below the gate panel (10) on purpose. While the gate is
       still asking, its opaque panel covers this button, so a reader is never
       asked the same question twice at the same time;
     * the toggle paints in the accent colour rather than on the dark surface
       the theme uses for its header: the app underneath may be black (the full
       page shell) or white (an app's own document, as in quickapp/survey). */
.sp-quickapp-account-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 5;
    background-color: rgba(9, 16, 28, 0.5);
}

.sp-quickapp-account[data-sp-account-open="1"] .sp-quickapp-account-scrim {
    display: block;
}

.sp-quickapp-account-toggle {
    position: fixed;
    top: 0.6rem;
    top: max(0.6rem, env(safe-area-inset-top));
    right: 0.6rem;
    z-index: 7;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 2rem;
    padding: 0.25rem 0.7rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--theme-button-text-initial-color);
    background-color: var(--theme-button-background-initial-color);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    box-shadow: var(--theme-box-shadow-strong);
    cursor: pointer;
    opacity: 0.92;
    transition: var(--theme-transition);
}

.sp-quickapp-account-toggle:hover,
.sp-quickapp-account-toggle:focus {
    opacity: 1;
}

.sp-quickapp-account-icon {
    flex: 0 0 auto;
}

/* The drawer: parked off the right edge, slid in to the left when it opens.
   ``visibility`` travels with the transform so the closed drawer is not
   reachable by keyboard. */
.sp-quickapp-account-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: min(20rem, 80vw);
    max-width: 100%;
    padding: 1rem 1.1rem 1.25rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    overflow-y: auto;
    visibility: hidden;
    background-color: var(--theme-palette-color-8);
    color: var(--theme-text-color);
    box-shadow: var(--theme-box-shadow-strong);
    transform: translateX(100%);
    transition: transform 0.18s cubic-bezier(0.455, 0.03, 0.515, 0.955),
        visibility 0.18s linear;
}

.sp-quickapp-account[data-sp-account-open="1"] .sp-quickapp-account-drawer {
    visibility: visible;
    transform: translateX(0);
}

.sp-quickapp-account-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.sp-quickapp-account-title {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--theme-headings-color);
}

.sp-quickapp-account-close {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--theme-text-color);
    border-radius: 50%;
    cursor: pointer;
}

.sp-quickapp-account-close:hover,
.sp-quickapp-account-close:focus {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-6);
}

/* One paragraph and one set of buttons per reader; the identity attribute on
   the root picks them. A guest and a stranger see the same three answers the
   gate panel asks for (register, sign in, enter as a guest); a signed in member
   sees the way out. "会员中心" is the fourth row and the one nobody is refused:
   it is where the recovery form lives, and a reader who lost his login code
   needs it before he has an account to sign in with. */
.sp-quickapp-account-state {
    display: none;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.sp-quickapp-account[data-sp-account-identity="anon"] [data-sp-account-state="anon"],
.sp-quickapp-account[data-sp-account-identity="guest"] [data-sp-account-state="guest"],
.sp-quickapp-account[data-sp-account-identity="member"] [data-sp-account-state="member"] {
    display: block;
}

.sp-quickapp-account[data-sp-account-identity="anon"] [data-sp-account-act="signout"],
.sp-quickapp-account[data-sp-account-identity="guest"] [data-sp-account-act="signout"],
.sp-quickapp-account[data-sp-account-identity="member"] [data-sp-account-act="register"],
.sp-quickapp-account[data-sp-account-identity="member"] [data-sp-account-act="login"],
.sp-quickapp-account[data-sp-account-identity="member"] [data-sp-account-act="guest"] {
    display: none;
}

.sp-quickapp-account-actions {
    display: grid;
    gap: 0.5rem;
    order: 4;
}

/* The answers above and the member centre below them. A stranger and a guest
   read "会员中心" on a row of its own at the bottom, a member reads it above
   the way out - the order he always had. The drawer is a column of flex
   children, so the two orders are the two ``order`` values here and nothing is
   moved in the markup: the heading, the paragraph and the points box keep the
   default ``order: 0`` and stay on top, and the note is last. */
.sp-quickapp-account-more {
    order: 5;
    padding-top: 0.75rem;
    border-top: 1px solid var(--theme-border-color);
}

.sp-quickapp-account[data-sp-account-identity="member"] .sp-quickapp-account-more {
    order: 4;
}

.sp-quickapp-account[data-sp-account-identity="member"] .sp-quickapp-account-actions {
    order: 5;
}

/* One short word and one icon per button, so the two are centred together and
   the icon keeps its size whatever the word is. */
.sp-quickapp-account-actions .sp-quickapp-account-button,
.sp-quickapp-account-more .sp-quickapp-account-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    text-align: center;
}

.sp-quickapp-account-button-icon {
    flex: 0 0 auto;
}

/* The points of the member (docs/initdoc/10 section 6.7): the balance as the
   node holds it now, with a small refresh button beside it. Read when the
   drawer is opened and again on every press, so a member can look it up at any
   time without leaving the app. Only a member ever sees the box, and the three
   notes inside are all printed - the state attribute on the box picks one, the
   way the three paragraphs above are chosen. */
.sp-quickapp-account-points {
    display: none;
    padding: 0.5rem 0.6rem;
    background-color: var(--theme-palette-color-6);
    border-radius: var(--theme-border-radius);
}

.sp-quickapp-account[data-sp-account-identity="member"] .sp-quickapp-account-points {
    display: block;
}

.sp-quickapp-account-points-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sp-quickapp-account-points-label {
    font-size: 0.8125rem;
}

.sp-quickapp-account-points-value {
    margin-right: auto;
    font-size: 1.125rem;
    color: var(--theme-headings-color);
}

.sp-quickapp-account-refresh {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--theme-text-color);
    border-radius: 50%;
    cursor: pointer;
}

.sp-quickapp-account-refresh:hover,
.sp-quickapp-account-refresh:focus {
    color: var(--theme-headings-color);
    background-color: var(--theme-palette-color-5);
}

.sp-quickapp-account-points[data-sp-account-points-state="loading"] .sp-quickapp-account-refresh {
    opacity: 0.6;
}

.sp-quickapp-account-points[data-sp-account-points-state="loading"] .sp-quickapp-account-refresh svg {
    animation: sp-quickapp-account-spin 0.9s linear infinite;
}

@keyframes sp-quickapp-account-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.sp-quickapp-account-points-note {
    display: none;
    margin: 0.25rem 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.sp-quickapp-account-points[data-sp-account-points-state="idle"] [data-sp-account-points-note="idle"],
.sp-quickapp-account-points[data-sp-account-points-state="loading"] [data-sp-account-points-note="loading"],
.sp-quickapp-account-points[data-sp-account-points-state="error"] [data-sp-account-points-note="error"] {
    display: block;
}

.sp-quickapp-account-note {
    order: 10;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: var(--theme-text-color);
}

/* -------------------------------------------------------------- narrow view */
@media (max-width: 782px) {
    .sp-member-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sp-member-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-member-panel {
        padding: 1.25rem;
        max-height: calc(100vh - 1.5rem);
    }

    .sp-member-actions .sp-button {
        flex: 1 1 auto;
    }

    .sp-quickapp-gate {
        padding: 1rem 0.75rem;
    }

    .sp-quickapp-gate-card {
        padding: 1.25rem;
    }

    /* One button per line: on a phone the three choices are the whole content
       of the screen, and a wrapped row of half width buttons reads like a
       paragraph of buttons. */
    .sp-quickapp-gate-actions .sp-quickapp-gate-button {
        flex: 1 1 100%;
        text-align: center;
    }
}