/* ── Account: sign-in sheet and header entry ─────────────────────────────────
   Identical on the site and in the app. Styled from the platform's own tokens so
   it reads as part of the product rather than a bolted-on login box. */

/* Above every other sheet, deliberately. The gate is raised BY the other sheets
   — "Stake and join" and "Create and get the link" both sit inside the group
   panel — so anything less than the topmost layer opens it out of sight behind
   the panel that asked for it, and the tap appears to do nothing at all.
   Group panel is 310; keep this above it. */
.acct-sheet { position: fixed; inset: 0; z-index: 400; }
.acct-sheet[hidden] { display: none !important; }
.acct-scrim {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.78);
    opacity: 0; transition: opacity 0.22s ease;
}
.acct-sheet.is-in .acct-scrim { opacity: 1; }

.acct-panel {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -46%);
    width: min(430px, calc(100vw - 32px));
    max-height: calc(100dvh - 40px);
    overflow: auto;
    padding: 30px 28px 24px;
    background: rgba(10, 10, 10, 0.985);
    border: 1px solid var(--border-hi);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.22s ease, transform 0.22s ease;

    border-radius: var(--r-lg);
}
.acct-sheet.is-in .acct-panel { opacity: 1; transform: translate(-50%, -50%); }

.acct-close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: 0; cursor: pointer;
    color: var(--dim); font-size: 16px; line-height: 1; padding: 6px;
}
.acct-close:hover { color: var(--white); }

.acct-head { margin-bottom: 20px; }
.acct-title {
    font-size: 21px; font-weight: 700; color: var(--white);
    letter-spacing: calc(-0.01em * var(--track)); margin-bottom: 8px;
}
.acct-sub { font-size: 14px; line-height: 1.45; color: var(--dim); }

.acct-providers { display: flex; flex-direction: column; gap: 10px; }
.acct-provider {
    width: 100%; padding: 14px 16px; cursor: pointer;
    font-family: var(--sans); font-size: 14px; font-weight: 700;
    letter-spacing: calc(0.06em * var(--track));
    border: 1px solid var(--border-hi); background: #151515; color: var(--white);
    transition: border-color 0.15s, background 0.15s;

    border-radius: var(--r);
}
.acct-provider:hover { border-color: var(--yellow); }
.acct-apple  { background: #f0f0f0; color: #0c0c0c; border-color: #f0f0f0; }
.acct-google { background: #ffffff; color: #1f1f1f; border-color: #ffffff; }

.acct-or {
    text-align: center; font-size: 11px; letter-spacing: calc(0.2em * var(--track));
    text-transform: uppercase; color: #6f6a61; margin: 4px 0;
}

.acct-email { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.acct-email input {
    width: 100%; padding: 13px 14px;
    background: #101010; border: 1px solid var(--border-hi); color: var(--white);
    font-family: var(--sans); font-size: 15px;   /* 15px+ stops iOS zooming on focus */
;
    border-radius: var(--r-sm);
}
.acct-email input:focus { outline: none; border-color: var(--yellow); }
.acct-go {
    padding: 15px 0; cursor: pointer;
    background: var(--yellow-fill); border: 1px solid var(--yellow); color: #0c0c0c;
    font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: calc(0.18em * var(--track));
    text-transform: uppercase;

    border-radius: var(--r);
}
.acct-go:disabled { opacity: 0.6; cursor: default; }
.acct-msg { font-size: 13px; color: #e2553f; min-height: 18px; line-height: 1.4; }

.acct-foot {
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 11px; line-height: 1.5; color: #7a7a7a;
}

/* ── Header entry ─────────────────────────────────────────────────────────── */
/* The account control reads as its own button rather than as one more nav link:
   capitalised, gold, on the shaded panel background used across the interface.
   It previously inherited the category-link styling and sat inline among them,
   where it was easy to miss entirely. */
.header-meta { flex-wrap: wrap; justify-content: flex-end; }

.acct-entry {
    flex-basis: 100%;                 /* drops it onto its own line under the categories */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
/* The home page, Contact and the How It Works pages carry no category row, so
   the button is the only thing on this side and belongs level with the brand. */
.acct-entry.is-solo        { flex-basis: auto; margin-top: 0; }
.header-meta.has-solo-acct { align-self: flex-start; }

.acct-link {
    background: rgba(12, 12, 12, 0.55);
    border: 1px solid var(--border-hi);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: calc(0.18em * var(--track));
    text-transform: uppercase;
    color: var(--yellow);
    padding: 8px 15px;
    white-space: nowrap;
    transition: border-color 0.12s, background 0.12s;

    border-radius: var(--r);
}
.acct-link:hover    { border-color: var(--yellow); background: rgba(255, 204, 0, 0.10); }

/* ── The account panel ────────────────────────────────────────────────────── */
.acct-rows { margin: 4px 0 22px; }
.acct-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 11px 0; border-bottom: 1px solid var(--border-hi);
}
.acct-row span { font-size: 11px; letter-spacing: calc(0.16em * var(--track)); text-transform: uppercase; color: var(--dim); }
.acct-row b    { font-size: 14px; color: var(--white); font-weight: 600;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Deletion lives here rather than in the header: findable in two taps, which is
   what the app stores ask for, without sitting up top as an everyday choice. */
.acct-danger-zone { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border-hi); }
.acct-danger-link {
    background: none; border: 0; padding: 0; cursor: pointer;
    font-family: var(--sans); font-size: 12px; letter-spacing: calc(0.04em * var(--track));
    color: #8a7f78; text-decoration: underline; text-underline-offset: 3px;
}
.acct-danger-link:hover { color: #e2553f; }
.acct-danger-note { margin: 7px 0 0; font-size: 11px; line-height: 1.55; color: #6f6a61; }

/* Offered quietly under the form, and brought forward once a password has
   actually been refused, which is the moment it becomes the useful next step. */
.acct-forgot {
    display: block; margin: 12px auto 0; background: none; border: 0; padding: 4px;
    cursor: pointer; font-family: var(--sans); font-size: 12px; letter-spacing: calc(0.04em * var(--track));
    color: #6f6a61; text-decoration: underline; text-underline-offset: 3px;
}
.acct-forgot:hover            { color: var(--yellow); }
.acct-forgot.is-offered       { color: var(--yellow); }

/* Under 900px the category row collapses to a single toggle, so the button sits
   beside it rather than dropping to a line of its own. */
@media (max-width: 900px) {
    .acct-entry { flex-basis: auto; margin-top: 0; }
    .acct-link  { padding: 7px 11px; font-size: 10px; letter-spacing: calc(0.14em * var(--track)); }
}

/* ── Display name field ───────────────────────────────────────────────────── */
/* The name is checked while it is typed, because a collision is worth knowing
   before committing to it: this form appears mid-wager. */
.acct-name-note        { min-height: 1.3em; line-height: 1.3; font-size: 11.5px;
                         letter-spacing: calc(0.03em * var(--track)); color: #6f6a61; margin: -4px 0 2px; }
.acct-name-note.is-ok  { color: #6fbf73; }
.acct-name-note.is-bad { color: #e2553f; }

/* Changing it later, from the account panel. */
.acct-row-edit { display: flex; gap: 8px; align-items: center; }
.acct-row-edit input {
    flex: 1 1 auto; min-width: 0; background: rgba(0,0,0,0.35);
    border: 1px solid var(--border-hi); color: var(--white);
    font-family: var(--sans); font-size: 14px; padding: 8px 10px;

    border-radius: var(--r-sm);
}
.acct-inline-edit, .acct-inline-save {
    background: none; border: 1px solid var(--border-hi); cursor: pointer;
    font-family: var(--sans); font-size: 10px; font-weight: 700;
    letter-spacing: calc(0.16em * var(--track)); text-transform: uppercase; color: var(--yellow);
    padding: 6px 10px; margin-left: 10px; white-space: nowrap;

    border-radius: var(--r);
}
.acct-inline-edit:hover, .acct-inline-save:hover { border-color: var(--yellow); background: rgba(255,204,0,0.10); }
.acct-inline-save { margin-left: 0; }
.acct-note { font-size: 11.5px; line-height: 1.5; color: #6f6a61; margin: 6px 0 0; min-height: 1.3em; }

/* ── Consent line ─────────────────────────────────────────────────────────── */
/* One line, one tick, never pre-ticked. Sized so it reads as a considered
   choice rather than fine print, since a consent nobody noticed is worth
   nothing as a record. */
.acct-consent {
    display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
    font-size: 12.5px; line-height: 1.45; color: var(--dim);
    padding: 2px 0 4px;
}
.acct-consent input {
    flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0;
    accent-color: var(--yellow); cursor: pointer;
}
.acct-consent:hover span { color: var(--white); }
.acct-consent-panel {
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-hi);
}

/* The owner's way in. Shown only to the owner account, and styled as a quieter
   sibling of Sign out rather than as a primary action, since it is a
   destination rather than something to do. */
.acct-owner-link {
    display: block; text-align: center; text-decoration: none;
    margin-bottom: 10px; padding: 12px 0;
    border: 1px solid var(--border-hi); color: var(--yellow);
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: calc(0.18em * var(--track)); text-transform: uppercase;
    transition: border-color 0.12s, background 0.12s;

    border-radius: var(--r);
}
.acct-owner-link:hover { border-color: var(--yellow); background: rgba(255, 204, 0, 0.10); }

/* Inviting friends to the platform. Sits above the owner link and sign out as
   the one outward-facing thing in the panel. */
.acct-invite {
    display: block; width: 100%; cursor: pointer; margin-bottom: 10px; padding: 12px 0;
    background: rgba(12, 12, 12, 0.55); border: 1px solid var(--border-hi); color: var(--yellow);
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: calc(0.16em * var(--track)); text-transform: uppercase;
    transition: border-color 0.12s, background 0.12s;

    border-radius: var(--r);
}
.acct-invite:hover { border-color: var(--yellow); background: rgba(255, 204, 0, 0.10); }