/* =========================================================================
   CS-PLAYER-03 — player account UI.

   Self-contained. Loads no font, no framework, no external asset, and sets
   no global that could reach the CMS theme: every rule is under `.cs-pl`.

   RTL-FIRST, AND DIRECTION-AGNOSTIC. There is no `left`, no `right`, no
   `margin-left`, no `text-align: left` anywhere below. Everything uses
   logical properties — inline-start/end, padding-inline, border-inline —
   so the same stylesheet lays out correctly in Arabic and in English
   without a mirrored copy. The one place a direction IS pinned is
   `dir="ltr"` on the email/password/token inputs in the markup, because
   those hold Latin text inside an Arabic page and would otherwise render
   with their punctuation reordered.
   ========================================================================= */

:root {
    --cs-pl-bg: #12131a;
    --cs-pl-panel: #1c1e28;
    --cs-pl-panel-2: #232632;
    --cs-pl-text: #eef0f6;
    --cs-pl-muted: #9aa0b4;
    --cs-pl-accent: #4c7dff;
    --cs-pl-accent-text: #ffffff;
    --cs-pl-danger: #ff6b6b;
    --cs-pl-danger-bg: #3a1f24;
    --cs-pl-ok: #4ade80;
    --cs-pl-ok-bg: #16301f;
    --cs-pl-border: #333749;
    --cs-pl-radius: 10px;
    --cs-pl-gap: 16px;
}

@media (prefers-color-scheme: light) {
    :root {
        --cs-pl-bg: #f4f5f9;
        --cs-pl-panel: #ffffff;
        --cs-pl-panel-2: #f0f1f6;
        --cs-pl-text: #171923;
        --cs-pl-muted: #5b6076;
        --cs-pl-danger-bg: #fdeaea;
        --cs-pl-ok-bg: #e8f8ee;
        --cs-pl-border: #d8dae4;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body.cs-pl {
    margin: 0;
    padding: 0;
    background: var(--cs-pl-bg);
    color: var(--cs-pl-text);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
    /* No horizontal scroll is a hard requirement of the responsive matrix.
       This does not hide overflow — the test measures scrollWidth against
       clientWidth on documentElement, which `overflow-x: hidden` would mask.
       It is simply never produced: no fixed widths, no negative margins. */
    min-height: 100vh;
}

/* ---- skip link: visible only when focused, which is the point ---------- */
.cs-pl-skip {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: 8px;
    z-index: 10;
    padding: 10px 14px;
    background: var(--cs-pl-accent);
    color: var(--cs-pl-accent-text);
    border-radius: var(--cs-pl-radius);
    text-decoration: none;
}
.cs-pl-skip:focus { inset-block-start: 8px; }

/* ---- focus: one visible ring everywhere, never removed ----------------- */
.cs-pl :focus-visible,
.cs-pl a:focus-visible,
.cs-pl button:focus-visible,
.cs-pl input:focus-visible {
    outline: 3px solid var(--cs-pl-accent);
    outline-offset: 2px;
}

/* ---- header ------------------------------------------------------------ */
.cs-pl-header {
    display: flex;
    flex-wrap: wrap;                 /* 360px fits two lines rather than clipping */
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: var(--cs-pl-panel);
    border-block-end: 1px solid var(--cs-pl-border);
}
.cs-pl-brand { font-weight: 700; }
.cs-pl-whoami { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs-pl-whoami a { color: var(--cs-pl-accent); text-decoration: none; }
.cs-pl-whoami a:hover { text-decoration: underline; }
.cs-pl-who-name { font-weight: 600; }

.cs-pl-badge {
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--cs-pl-panel-2);
    border: 1px solid var(--cs-pl-border);
    color: var(--cs-pl-muted);
}

/* ---- layout ------------------------------------------------------------ */
.cs-pl-main {
    /* max-width, not width — the panel shrinks below 360px instead of
       forcing the document wider than the viewport. */
    max-width: 460px;
    margin-inline: auto;
    padding: var(--cs-pl-gap);
    display: flex;
    flex-direction: column;
    gap: var(--cs-pl-gap);
}

.cs-pl-card {
    background: var(--cs-pl-panel);
    border: 1px solid var(--cs-pl-border);
    border-radius: var(--cs-pl-radius);
    padding: 20px;
}
.cs-pl-title { margin: 0 0 16px; font-size: 20px; }

/* ---- forms ------------------------------------------------------------- */
.cs-pl-form { display: flex; flex-direction: column; gap: 14px; }
.cs-pl-field { display: flex; flex-direction: column; gap: 6px; }
.cs-pl-field label { font-size: 14px; color: var(--cs-pl-muted); }

.cs-pl-field input {
    width: 100%;
    /* 16px minimum: anything smaller makes iOS Safari zoom on focus, which
       shifts the layout and is a reachability problem, not a taste one. */
    font: inherit;
    font-size: 16px;
    padding: 12px;
    min-height: 44px;              /* comfortable touch target */
    color: var(--cs-pl-text);
    background: var(--cs-pl-panel-2);
    border: 1px solid var(--cs-pl-border);
    border-radius: 8px;
}
.cs-pl-field input[aria-invalid="true"] {
    border-color: var(--cs-pl-danger);
    /* The border is a second signal, never the only one — the message itself
       carries a ⚠ and the field is aria-invalid. */
    border-inline-start-width: 4px;
}

.cs-pl-hint { margin: 0; font-size: 13px; color: var(--cs-pl-muted); }

.cs-pl-btn {
    font: inherit;
    font-weight: 600;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--cs-pl-accent);
    color: var(--cs-pl-accent-text);
    cursor: pointer;
}
.cs-pl-btn:hover { filter: brightness(1.08); }
.cs-pl-btn[disabled] { opacity: .6; cursor: progress; }
.cs-pl-btn-secondary {
    background: var(--cs-pl-panel-2);
    color: var(--cs-pl-text);
    border-color: var(--cs-pl-border);
}

/* ---- alerts ------------------------------------------------------------ */
.cs-pl-alert, .cs-pl-notice {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    /* Colour AND a text prefix AND a border — the ⚠ / ✓ glyph is written
       into textContent by player-ui.js, so the state survives greyscale,
       high-contrast mode and colour blindness. */
    border-inline-start: 4px solid transparent;
}
.cs-pl-alert  { background: var(--cs-pl-danger-bg); border-inline-start-color: var(--cs-pl-danger); }
.cs-pl-notice { background: var(--cs-pl-ok-bg);     border-inline-start-color: var(--cs-pl-ok); }

/* ---- profile ----------------------------------------------------------- */
.cs-pl-profile { margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.cs-pl-row {
    display: flex;
    flex-wrap: wrap;               /* long emails wrap instead of overflowing */
    gap: 4px 12px;
    justify-content: space-between;
    padding-block-end: 10px;
    border-block-end: 1px solid var(--cs-pl-border);
}
.cs-pl-row dt { color: var(--cs-pl-muted); font-size: 14px; }
.cs-pl-row dd {
    margin: 0;
    font-weight: 600;
    /* An address with no spaces must break rather than widen the document. */
    overflow-wrap: anywhere;
    min-width: 0;
}
.cs-pl-muted { color: var(--cs-pl-muted); font-weight: 400; }

/* ---- guest note -------------------------------------------------------- */
.cs-pl-note {
    background: var(--cs-pl-panel-2);
    border: 1px solid var(--cs-pl-border);
    border-radius: var(--cs-pl-radius);
    padding: 16px;
}
.cs-pl-note-title { margin: 0 0 6px; font-weight: 700; }
.cs-pl-note-body { margin: 0 0 12px; font-size: 14px; color: var(--cs-pl-muted); }

/* ---- links ------------------------------------------------------------- */
.cs-pl-links {
    margin-block-start: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.cs-pl-links a { color: var(--cs-pl-accent); text-decoration: none; font-size: 14px; }
.cs-pl-links a:hover { text-decoration: underline; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .cs-pl * { transition: none !important; animation: none !important; }
}

/* ---- CS-PLAYER-06: save-conflict panel ---------------------------------
   Side-by-side above 520px, stacked below. The two sides are deliberately
   symmetrical: neither is styled as the "recommended" one, because the
   safe default is stated in words rather than implied by weight. */
.cs-pl-conflict {
    border: 1px solid var(--cs-pl-border);
    border-radius: var(--cs-pl-radius);
    padding: 14px;
    margin-block-end: 14px;
}
.cs-pl-conflict-slot { margin: 0 0 10px; font-weight: 700; }
.cs-pl-conflict-sides { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 520px) {
    .cs-pl-conflict-sides { grid-template-columns: 1fr 1fr; }
}
.cs-pl-conflict-side {
    background: var(--cs-pl-panel-2);
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 0;
}
.cs-pl-conflict-side-title { margin: 0 0 8px; font-size: 15px; }
.cs-pl-conflict-side .cs-pl-profile { margin: 0; }
.cs-pl-conflict-side .cs-pl-row:last-child { border-block-end: none; padding-block-end: 0; }

.cs-pl-conflict-safe {
    margin: 12px 0;
    font-size: 14px;
    font-weight: 600;
}
.cs-pl-conflict-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.cs-pl-conflict-nofree { font-size: 13px; }

/* The destructive corner, visually separated so it cannot be clicked by
   momentum on the way down the list. */
.cs-pl-conflict-danger {
    margin-block-start: 14px;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--cs-pl-border);
}
.cs-pl-btn-danger {
    background: transparent;
    color: var(--cs-pl-danger);
    border-color: var(--cs-pl-danger);
}
.cs-pl-btn-danger:hover { background: var(--cs-pl-danger-bg); }
.cs-pl-conflict-confirm {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: var(--cs-pl-danger-bg);
    border-inline-start: 4px solid var(--cs-pl-danger);
}
.cs-pl-conflict-danger-note { margin: 0; flex: 1 1 100%; font-size: 14px; }