@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);
}

.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;
}

.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);
}

/* -------------------------------------------------------------- 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;
    }
}