/* ============================================================
   Score7 — the account screens (C01 to C04)

   Global rather than colocated, and that is the one place in this app where it is. The four
   screens share a shell, a field and a gauge, and they are static-SSR components: scoped CSS
   is scoped per component, so a shared class would need ::deep from every one of them. One
   sheet is the smaller thing.
   ============================================================ */

/* ---- The two-column shell ------------------------------------ */
.s7-auth {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
}

.s7-auth__form {
    padding: 30px 34px 26px;
    background: var(--cream-panel);
}

.s7-auth__aside {
    padding: 30px 34px 26px;
    background: var(--cream);
    border-left: 1px solid var(--teal-cream-edge);
}

.s7-auth--single {
    grid-template-columns: 1fr;
}

.s7-auth--single .s7-auth__aside {
    border-left: none;
    border-top: 1px solid var(--teal-cream-edge);
}

.s7-auth__title {
    margin: 0;
    font-size: 30px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-auth__intro {
    margin: 8px 0 22px;
    max-width: 46ch;
    font-size: 13px;
    line-height: 1.7;
    color: var(--neutral-500);
}

/* ---- Fields --------------------------------------------------- */
/* Not ".s7-field" either: that one belongs to the Fluent text fields, whose overrides style
   their inner ::part(root). A bare rule here reached every input in the game and spaced them
   all out by 18px. Same mistake, quieter symptom. */
.s7-authfield {
    margin-bottom: 18px;
}

.s7-authfield__label {
    display: block;
    margin-bottom: 7px;
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-authfield__input {
    width: 100%;
    box-sizing: border-box;
    /* 44px is the floor for a finger, and these forms are filled on a phone at a table. */
    min-height: 46px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--ink-900);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
}

.s7-authfield__input:focus-visible {
    outline: 2px solid var(--azure-500);
    outline-offset: 1px;
    border-color: var(--azure-500);
}

.s7-authfield__input--wrong {
    border-color: var(--danger-500);
}

.s7-authfield__help {
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--neutral-500);
}

.s7-authfield__error {
    margin: 7px 0 0;
    font-size: 13px;
    color: var(--danger-600);
}

/* ---- The password row: reveal, then the gauge ------------------ */
.s7-password {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
}

.s7-password__toggle {
    flex: none;
    min-height: 38px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink-900);
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.s7-password__toggle:hover {
    background: var(--surface-sunken);
}

.s7-gauge {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.s7-gauge__track {
    display: flex;
    flex: 1;
    gap: 7px;
    min-width: 0;
}

.s7-gauge__step {
    flex: 1;
    height: 5px;
    border-radius: var(--radius-pill);
    background: var(--neutral-200);
}

/* Set by the script from the length of what has been typed. Nothing is sent anywhere to
   decide this: the gauge is arithmetic in the page. */
.s7-gauge__step[data-lit="weak"] { background: var(--danger-500); }
.s7-gauge__step[data-lit="fair"] { background: var(--warning-500); }
.s7-gauge__step[data-lit="good"],
.s7-gauge__step[data-lit="strong"] { background: var(--success-600); }

.s7-gauge__label {
    flex: none;
    font-size: 13px;
    font-weight: var(--weight-bold);
    color: var(--neutral-500);
}

.s7-gauge__label[data-lit="weak"] { color: var(--danger-600); }
.s7-gauge__label[data-lit="fair"] { color: var(--warning-700); }
.s7-gauge__label[data-lit="good"],
.s7-gauge__label[data-lit="strong"] { color: var(--success-700); }

/* ---- Actions: the button, and the way past it ------------------ */
/* A column, because the design stacks them: the button, then the way past it underneath. Side
   by side they read as a pair of equal choices, which is not what the second one is — it is the
   same choice, declined. */
.s7-auth__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 22px;
}

/* Also worn by an <a> on the welcome screen, where the "button" is a link to a form. Hence the
   inline-flex and the reset of the link's own decoration. */
.s7-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    min-height: 52px;
    padding: 14px 30px;
    font-family: inherit;
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--text-on-brand);
    background: var(--azure-600);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-brand);
    cursor: pointer;
}

.s7-auth__submit:hover {
    background: var(--azure-700);
}

.s7-auth__submit:focus-visible {
    outline: 2px solid var(--azure-500);
    outline-offset: 3px;
}

/* Not a small grey link under a big blue button. The account is optional, and a screen that
   whispers the way out is a screen that has stopped saying so. */
.s7-auth__decline {
    display: inline-block;
    margin-top: 16px;
    padding: 10px 12px;
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
    text-decoration: none;
}

.s7-auth__decline:hover {
    text-decoration: underline;
}

.s7-auth__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 4px 0 4px;
}

.s7-auth__stay {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-900);
}

.s7-auth__legal {
    margin: 22px 0 0;
    max-width: 52ch;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-subtle);
}

/* ---- The aside: what the account is for ------------------------ */
.s7-auth__panel {
    padding: 18px 20px;
    background: var(--neutral-0);
    border: 2px solid var(--game-ink);
    border-radius: var(--radius-lg);
    box-shadow: 3px 3px 0 var(--game-ink-22);
}

.s7-auth__panel + .s7-auth__panel {
    margin-top: 16px;
}

.s7-auth__note {
    margin-top: 16px;
    padding: 16px 20px;
    background: var(--surface-sunken);
    border: 1px dashed var(--neutral-200);
    border-radius: var(--radius-lg);
    font-size: 13px;
    line-height: 1.7;
    color: var(--game-ink-soft);
}

.s7-auth__note strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ink-900);
}

.s7-steps--numbered {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.s7-steps--numbered li {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--cream-panel);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
}

.s7-steps--numbered b {
    display: block;
    font-size: 14px;
    color: var(--ink-900);
}

.s7-steps--numbered p {
    margin: 3px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--game-ink-soft);
}

.s7-steps__badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    background: var(--game-ink);
    color: var(--neutral-0);
    font-size: 13px;
    font-weight: var(--weight-bold);
}

/* ---- C01: the teal table the welcome screen sits on -------------
   The same surface as E01's, written again rather than shared: E01's lives in a scoped
   stylesheet, and scoped means scoped. Two declarations of one surface is the cost of that,
   and it is smaller than ::deep reaching across a component boundary to borrow it. */
.s7-welcome-board {
    position: relative;
    flex: 1;
    overflow: hidden;
    padding: 40px 44px;
    background: var(--board-teal);
}

/* Below the breakpoint it stops filling and stops clipping, exactly as E01's, the victory
   board and the tiebreak board already do.
   This block was the part the copy did not carry: filling the screen is `flex: 1`, and a box
   with `flex: 1` is the height of its container rather than of its content. Clip that, and
   everything past the fold is cut off — with no scrollbar, because the scroller above it sees
   a child that fits. « Bienvenue » stopped at « Continuer sans compte » and the phone could
   not reach the rest. */
@media (max-width: 1023px) {
    .s7-welcome-board {
        flex: none;
        overflow: visible;
        padding: 20px 16px;
    }

    /* The drawn frame goes with the fill: inset 16px on a box that now runs past the screen is
       a rule nobody sees the bottom of. */
    .s7-welcome-board__rule {
        display: none;
    }
}

.s7-welcome-board__rule {
    position: absolute;
    inset: 16px;
    border: 2px solid var(--board-rule);
    border-radius: 12px;
    pointer-events: none;
}

.s7-welcome-board__inner {
    position: relative;
}

.s7-welcome-board__eyebrow {
    display: inline-block;
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    background: var(--cream);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    letter-spacing: .18em;
    color: var(--game-ink);
}

.s7-welcome-board__wordmark {
    margin-top: 18px;
}

/* ---- C01: the two ways in, side by side ------------------------ */
.s7-welcome {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 26px;
}

.s7-welcome__card {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 24px;
    border-radius: var(--radius-xl);
    border: 2px solid var(--game-ink);
    box-shadow: 3px 3px 0 var(--game-ink-22);
}

.s7-welcome__card--without {
    background: var(--cream);
}

.s7-welcome__card--with {
    background: var(--neutral-0);
}

.s7-welcome__title {
    margin: 6px 0 16px;
    font-size: 25px;
    font-weight: var(--weight-bold);
    color: var(--ink-900);
}

.s7-welcome__badge {
    margin-left: 10px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--flip7-yellow);
    color: var(--game-ink);
    font-size: 11px;
    font-weight: var(--weight-bold);
    letter-spacing: .04em;
}

.s7-welcome__points {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.5;
    color: var(--game-ink);
}

.s7-welcome__points li {
    display: flex;
    gap: 12px;
}

.s7-welcome__points li::before {
    content: "\2713";
    flex: none;
    color: var(--success-600);
}

/* The two lines that are costs rather than features. A dash, not a tick: a list where the
   limits wear the same mark as the benefits is a list nobody reads to the end of. */
.s7-welcome__points li[data-cost]::before {
    content: "\2014";
    color: var(--danger-500);
}

.s7-welcome__intro {
    margin: 14px 0 0;
    max-width: 58ch;
    font-size: 17px;
    line-height: 1.6;
    color: var(--neutral-0);
}

.s7-welcome__footnote {
    margin-top: 22px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .14);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--neutral-0);
}

/* ---- CM02: the aside folds instead of stacking ------------------
   Not a layout tweak with different words: the phone genuinely says less, because three cards
   stacked under a form is three cards nobody scrolls to. Both are rendered and one is hidden,
   which is what "the same component under a breakpoint" means when the copy differs. */
.s7-only-phone {
    display: none;
}

.s7-auth__fold {
    padding: 14px 16px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
}

.s7-auth__fold summary {
    cursor: pointer;
}

.s7-auth__fold summary b {
    display: block;
    font-size: 15px;
    color: var(--ink-900);
}

.s7-auth__fold summary span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--game-ink-soft);
}

/* ---- The pill in the top bar ----------------------------------- */
.s7-account-pill {
    display: flex;
    align-items: center;
    gap: 10px;
}

.s7-account-pill__name {
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--lang-pill-bg);
    color: var(--lang-pill-text);
    font-size: 12.5px;
    font-weight: var(--weight-bold);
}

.s7-account-pill__out {
    padding: 5px 10px;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-link);
    background: none;
    border: none;
    cursor: pointer;
}

.s7-account-pill__out:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

/* ---- Phone: one column, CM02's shape --------------------------- */
@media (max-width: 767px) {
    .s7-auth,
    .s7-welcome {
        grid-template-columns: 1fr;
    }

    .s7-auth__aside {
        border-left: none;
        border-top: 1px solid var(--teal-cream-edge);
    }

    .s7-auth__form,
    .s7-auth__aside {
        padding: 20px 16px;
    }

    .s7-auth__title {
        font-size: 25px;
    }

    .s7-auth__submit {
        width: 100%;
    }

    .s7-auth__decline {
        display: block;
        text-align: center;
    }

    .s7-only-phone {
        display: block;
    }

    .s7-only-wide {
        display: none;
    }
}


/* ---- C05: the import offer ------------------------------------- 
   A list of rows that are checkboxes first and cards second: the whole screen is one decision
   repeated, and the label has to be the hit area for it. */
.s7-import {
    max-width: 760px;
    padding: 26px 4px 8px;
}

.s7-import__list {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s7-import__row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--cream-panel);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
}

/* The game being played is the one whose loss would be felt, so it is the one that looks
   different — and it is pre-checked. */
.s7-import__row[data-in-progress] {
    background: var(--azure-50);
    border-color: var(--azure-500);
    box-shadow: 0 0 0 1px var(--azure-500) inset;
}

.s7-import__row[data-taken] {
    opacity: 0.62;
}

.s7-import__pick {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.s7-import__row[data-taken] .s7-import__pick {
    cursor: default;
}

.s7-import__pick input {
    width: 24px;
    height: 24px;
    flex: none;
    accent-color: var(--azure-500);
}

.s7-import__what {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s7-import__what b {
    font-size: 16px;
    color: var(--ink-900);
}

.s7-import__who {
    font-size: 13px;
    color: var(--game-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s7-import__score {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--ink-900);
    flex: none;
}

.s7-import__all {
    margin-top: 14px;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--azure-600);
    cursor: pointer;
}

@media (max-width: 767px) {
    .s7-import {
        padding: 18px 0 8px;
    }

    .s7-import__row {
        padding: 12px 14px;
    }
}


/* ---- C06 / CM06: the account screen -----------------------------
   Two columns on a wide screen, one on a phone. Same split as the auth screens, so the account
   section reads as one place rather than three. */
.s7-account {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 30px;
    padding: 26px 4px 8px;
}

.s7-account__column {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.s7-account__identity {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: var(--neutral-0);
    border: 2px solid var(--ink-900);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-brand);
    margin-bottom: 12px;
}

.s7-account__avatar {
    width: 52px;
    height: 52px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: var(--radius-circle);
    background: var(--ink-900);
    color: var(--flip7-yellow);
    font-family: var(--font-display);
    font-size: 24px;
}

.s7-account__who {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.s7-account__name {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 22px;
    font-weight: 700;
    color: var(--ink-900);
}

.s7-account__email {
    font-size: 14px;
    color: var(--game-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
}

.s7-account__rename {
    display: flex;
    align-items: center;
    gap: 10px;
}

.s7-account__panel,
.s7-account__device,
.s7-account__row {
    background: var(--cream-panel);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-lg);
}

.s7-account__panel {
    padding: 16px 18px;
    margin-bottom: 12px;
}

.s7-account__panel b {
    display: block;
    font-size: 16px;
    color: var(--ink-900);
}

.s7-account__panel p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--game-ink-soft);
}

.s7-account__caveat {
    font-size: 13px;
    line-height: 1.6;
    color: var(--game-ink-soft);
}

.s7-account__devices {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s7-account__device,
.s7-account__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
}

.s7-account__device[data-current] {
    background: var(--azure-50);
    border-color: var(--azure-500);
}

.s7-account__deviceWhat,
.s7-account__rowWhat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.s7-account__deviceWhat b,
.s7-account__rowWhat b {
    font-size: 15px;
    color: var(--ink-900);
}

.s7-account__deviceWhat span,
.s7-account__rowWhat span {
    font-size: 13px;
    color: var(--game-ink-soft);
}

.s7-account__link {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--azure-600);
    cursor: pointer;
    white-space: nowrap;
}

.s7-account__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.s7-account__tile {
    padding: 14px 8px;
    text-align: center;
    background: var(--neutral-0);
    border: 2px solid var(--ink-900);
    border-radius: var(--radius-lg);
}

.s7-account__tile b {
    display: block;
    font-family: var(--font-display);
    font-size: 30px;
    color: var(--ink-900);
}

.s7-account__tile span {
    font-size: 12px;
    color: var(--game-ink-soft);
}

.s7-account__data {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s7-account__row--danger b {
    color: var(--danger-600);
}

/* Named for the screen it belongs to, and that is not a cosmetic choice.
   ".s7-button" is an established class in this app: the Fluent buttons wear it, and
   score7-fluent-overrides.css styles their inner ::part(control) while leaving the host alone.
   A plain rule on the host, loaded after those overrides, gave every button in the game a white
   box around a blue fill that no longer reached its edges. */
.s7-account__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    background: var(--neutral-0);
    border: 1px solid var(--ink-900);
    border-radius: var(--radius-md);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-900);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.s7-account__button--danger {
    background: var(--danger-500);
    border-color: var(--danger-600);
    color: var(--neutral-0);
}

@media (max-width: 900px) {
    .s7-account {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 18px 0 8px;
    }
}


/* ---- C07: filtering the history, and where a game lives ---------
   The grid gains a sixth column only when there is an account to make the distinction mean
   something. Signed out there is nothing to distinguish, so the column is not there at all
   rather than there and empty. */
.s7-history__filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.s7-history__filter .s7-eyebrow {
    margin-right: 6px;
}

.s7-history__pill {
    min-height: 38px;
    padding: 0 16px;
    background: var(--neutral-0);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink-900);
    cursor: pointer;
}

.s7-history__pill--on {
    border-color: var(--azure-500);
    box-shadow: 0 0 0 1px var(--azure-500) inset;
    color: var(--azure-700);
}

.s7-history__state {
    justify-self: end;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--success-700);
    white-space: nowrap;
}

.s7-history__state[data-where="OnThisDeviceOnly"] {
    color: var(--ink-900);
}


/* One line, at the top of the home screen, for the browser that was signed out from another. */
.s7-app__notice {
    margin: 0 auto;
    max-width: 1180px;
    padding: 12px 18px;
    background: var(--cream);
    border-bottom: 1px solid var(--neutral-200);
    font-size: 14px;
    color: var(--ink-900);
}