/* =========================================================================
   CS-THEME-05 — account controls and save status.

   Styles the markup cs_player_nav_html() already emits (.cs-pl-nav*) plus
   the game page's account area. No new markup for the header: one
   navigation system, styled twice would be two.

   Tokens only — light and dark both come from tokens.css, so there is no
   duplicated block here and no icon to recolour.
   ========================================================================= */

/* ---- the header account slot -------------------------------------------
   The slot is pre-sized so swapping anonymous controls for signed-in ones
   moves nothing. player-nav.js only ever transitions in that direction,
   after the server has answered. */
#cs-pl-bar, .cs-pl-bar { display: contents; }

.cs-pl-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
}

.cs-pl-nav-anon, .cs-pl-nav-auth { display: flex; align-items: center; gap: var(--space-2); }
.cs-pl-nav-anon[hidden], .cs-pl-nav-auth[hidden] { display: none; }

.cs-pl-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: var(--tap-min);
    min-inline-size: var(--tap-min);
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.cs-pl-nav-btn:hover { background: var(--color-surface-2); }
.cs-pl-nav-btn:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.cs-pl-nav-name {
    max-inline-size: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

/* Account status, e.g. an unverified email. Never an id, never a token. */
.cs-pl-nav-badge {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

/* Phone: the account controls live inside the drawer the shell already
   owns, so there is no second menu to open. */
@media (max-width: 767px) {
    .site-header__bar .cs-pl-nav { display: none; }
    .menu-panel__account .cs-pl-nav { display: grid; gap: var(--space-2); }
    .menu-panel__account .cs-pl-nav-anon,
    .menu-panel__account .cs-pl-nav-auth { display: grid; gap: var(--space-2); }
    .menu-panel__account .cs-pl-nav-btn { justify-content: center; }
}

/* Tablet keeps the compact single control established in CS-THEME-02. */
@media (min-width: 768px) and (max-width: 1023px) {
    .cs-pl-nav-anon .cs-pl-nav-btn:not(:last-child) { display: none; }
}

/* ---- game page account area --------------------------------------------- */

.gp__account-msg { flex: 1 0 100%; margin: 0 0 var(--space-2); color: var(--color-muted);
                   font-size: var(--text-sm); }
.gp__account-actions { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.gp__account-actions[hidden] { display: none; }

/* The save label. Colour carries meaning, but so does the word — the word
   is the accessible name and the colour is only reinforcement. */
.gp__save {
    display: inline-flex;
    align-items: center;
    min-block-size: 28px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-lg);
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-muted);
    margin-inline-end: var(--space-2);
}
.gp__save[hidden] { display: none; }
.gp__save[data-state="synced"]   { color: var(--color-accent); border-color: var(--color-accent); }
.gp__save[data-state="syncing"]  { color: var(--color-muted); }
.gp__save[data-state="offline"]  { color: var(--color-focus); border-color: var(--color-focus); }
.gp__save[data-state="conflict"] { color: var(--color-focus); border-color: var(--color-focus);
                                   background: var(--color-surface); }

.gp__conflict {
    flex: 1 0 100%;
    margin-block-start: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-focus);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.gp__conflict[hidden] { display: none; }
.gp__conflict-msg { flex: 1 0 100%; margin: 0 0 var(--space-2); font-weight: 700;
                    font-size: var(--text-sm); }