/* =====================================================================
   WallPixCode - authentication surfaces (login, device pairing)
   =====================================================================
   A two-column split: context on the left, the task on the right.

   The palette is unchanged - the same #FF69B4 -> #FF1493 brand gradient and
   the same #667eea -> #764ba2 purple the panel already uses. What changes is
   how they are applied: a full-bleed saturated gradient behind a small card
   reads as a consumer sign-up, while a soft tint on one half and a calm
   surface on the other reads as an admin tool. Same colours, different
   weight.

   Mobile first. The split only appears once there is room for it; below that
   the left panel becomes a compact header and the form takes the full width.
   ===================================================================== */

:root {
    --brand-pink:    #FF69B4;
    --brand-magenta: #FF1493;
    --brand-indigo:  #667eea;
    --brand-purple:  #764ba2;

    --ink:      #2b1b3d;
    --ink-2:    #5c5470;
    --muted:    #857f95;
    --line:     #e7e1f0;
    --line-2:   #d9d1e8;
    --surface:  #ffffff;
    --ground:   #faf8fd;
    --field:    #f7f5fb;

    --ok-bg:    #e8f6ee;  --ok-ink:    #1f6b45;  --ok-line:   #bfe3cf;
    --warn-bg:  #fdf3e3;  --warn-ink:  #8a5a12;  --warn-line: #f0d8ae;
    --err-bg:   #fdecef;  --err-ink:   #a8283f;  --err-line:  #f3c6cf;

    --radius:   14px;
    --radius-s: 10px;
    --shadow:   0 1px 2px rgba(43, 27, 61, .05), 0 12px 32px -14px rgba(43, 27, 61, .18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.auth {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                 'Helvetica Neue', Arial, 'Noto Sans Arabic', sans-serif;
    background: var(--ground);
    color: var(--ink);
    min-height: 100vh;
    min-height: 100dvh;          /* mobile browser chrome */
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- shell */

.auth-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* ------------------------------------------------------------ left side */

.auth-aside {
    position: relative;
    overflow: hidden;
    padding: 32px 24px 36px;
    background:
        radial-gradient(120% 90% at 8% 4%,  rgba(255, 105, 180, .28) 0%, rgba(255, 105, 180, 0) 55%),
        radial-gradient(110% 85% at 92% 96%, rgba(118, 75, 162, .26) 0%, rgba(118, 75, 162, 0) 58%),
        linear-gradient(155deg, #fdecf6 0%, #f5eefd 50%, #efeafc 100%);
}

/* A soft brand bloom, drawn rather than shipped as an image. */
.auth-aside::after {
    content: "";
    position: absolute;
    width: 520px; height: 520px;
    right: -190px; bottom: -240px;
    background: radial-gradient(circle,
                rgba(255, 20, 147, .10) 0%, rgba(255, 20, 147, 0) 70%);
    pointer-events: none;
}

.auth-aside-inner { position: relative; max-width: 460px; }

.auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    text-decoration: none;
}
.auth-brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-magenta) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(255, 20, 147, .3);
    flex: none;
}
.auth-brand-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--brand-purple);
    letter-spacing: -.01em;
}

.auth-headline {
    font-size: clamp(25px, 5.2vw, 38px);
    line-height: 1.15;
    letter-spacing: -.025em;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
    text-wrap: balance;
}
.auth-sub {
    font-size: 15px;
    color: var(--ink-2);
    max-width: 42ch;
}

/* feature list */
.auth-points { list-style: none; margin: 26px 0 0; display: grid; gap: 18px; }
.auth-point  { display: flex; gap: 13px; align-items: flex-start; }
.auth-point-icon {
    flex: none;
    width: 24px; height: 24px;
    margin-top: 2px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-magenta) 100%);
    color: #fff;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 20, 147, .28);
}
.auth-point-title { font-weight: 600; font-size: 15px; color: var(--ink); }
.auth-point-body  { font-size: 14px; color: var(--ink-2); margin-top: 1px; }

/* ----------------------------------------------------------- right side */

.auth-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 40px;
    background: var(--ground);
}
.auth-main-inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-topbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 18px;
    min-height: 34px;
}

.auth-title { font-size: 27px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.auth-lede  { font-size: 14.5px; color: var(--muted); margin-bottom: 20px; }

/* ---------------------------------------------------------------- card */

.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

.field { margin-bottom: 16px; }
.field:last-of-type { margin-bottom: 18px; }

.field label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 6px;
}
.field .req { color: var(--brand-magenta); }

.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--ink);
    background: var(--field);
    border: 1.5px solid transparent;
    border-radius: var(--radius-s);
    transition: border-color .15s, background .15s;
}
.field input::placeholder { color: #a89fbb; }
.field input:hover { border-color: var(--line-2); }
.field input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--brand-pink);
    box-shadow: 0 0 0 3px rgba(255, 105, 180, .16);
}
.field input:focus-visible { outline: none; }

/* the pairing code: large, spaced, unambiguous */
.field input.code-input {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
    font-size: 24px;
    letter-spacing: 5px;
    text-align: center;
    text-transform: uppercase;
    padding: 15px 12px;
}

.btn-auth {
    width: 100%;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-magenta) 100%);
    border: none;
    border-radius: var(--radius-s);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn-auth:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255, 20, 147, .3); }
.btn-auth:active { transform: translateY(0); filter: brightness(.96); }
.btn-auth:focus-visible { outline: 3px solid var(--brand-purple); outline-offset: 2px; }

.btn-auth.ghost {
    background: var(--surface);
    color: var(--ink-2);
    border: 1.5px solid var(--line-2);
    margin-top: 10px;
}
.btn-auth.ghost:hover { background: #f6f3fb; box-shadow: none; transform: none; border-color: var(--brand-pink); color: var(--ink); }

/* --------------------------------------------------------------- notes */

.note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: var(--radius-s);
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid;
}
.note i { margin-top: 2px; flex: none; }
.note-error { background: var(--err-bg);  color: var(--err-ink);  border-color: var(--err-line); }
.note-ok    { background: var(--ok-bg);   color: var(--ok-ink);   border-color: var(--ok-line); }
.note-warn  { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }

.auth-foot {
    margin-top: 18px;
    font-size: 13.5px;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.auth-foot a { color: var(--brand-magenta); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { text-decoration: underline; }
.auth-foot a:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 2px; border-radius: 3px; }

/* language switcher */
.lang-select {
    padding: 7px 30px 7px 11px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--ink-2);
    background-color: var(--surface);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23857f95' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--line-2);
    border-radius: 8px;
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
}
.lang-select:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 2px; }
[dir="rtl"] .lang-select { padding: 7px 11px 7px 30px; background-position: left 10px center; }

/* --------------------------------------------------- device summary card */

.device-card {
    background: var(--field);
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: 15px 16px;
    margin-bottom: 18px;
}
.device-row + .device-row { margin-top: 12px; }
.device-k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.device-v { font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.device-v.code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 19px; letter-spacing: 3px; color: var(--brand-magenta);
}

.auth-status { text-align: center; padding: 8px 0 4px; }
.auth-status-mark {
    width: 62px; height: 62px; border-radius: 50%;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 27px; color: #fff;
    background: linear-gradient(135deg, var(--brand-pink) 0%, var(--brand-magenta) 100%);
    box-shadow: 0 8px 22px rgba(255, 20, 147, .3);
}
.auth-status-mark.neutral {
    background: var(--field);
    color: var(--muted);
    box-shadow: none;
    border: 1px solid var(--line);
}

.hint { font-size: 13.5px; color: var(--muted); margin-top: 14px; }
.hint.center { text-align: center; }
.hint i { color: var(--brand-purple); margin-inline-end: 5px; }
.hint.lead { display: flex; gap: 9px; align-items: flex-start; line-height: 1.55; }
.hint.lead i { margin: 3px 0 0; flex: none; }

.gsi-slot { display: flex; justify-content: center; margin: 4px 0 2px; min-height: 44px; }

/* screen-reader only */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ================================================================
   Responsive
   ================================================================ */

/* Small phones: reclaim vertical space. The feature list is supporting
   context, not the task, so it steps aside rather than pushing the form
   below the fold. */
@media (max-width: 899px) {
    /* Stacked: flow from the top. Centring in a tall viewport leaves a dead
       band between the header and the form. */
    .auth-main-inner { justify-content: flex-start; flex: none; }
    .auth-main { justify-content: flex-start; }
    .auth-topbar { margin-bottom: 12px; }
}

@media (max-width: 599px) {
    .auth-aside { padding: 22px 20px 24px; }
    .auth-points { display: none; }
    .auth-sub { font-size: 14px; }
    .auth-card { padding: 18px 16px; }
    .auth-main { padding: 22px 16px 32px; }
}

/* Large phones and small tablets: the list returns, still stacked. */
@media (min-width: 600px) and (max-width: 899px) {
    .auth-aside { padding: 40px 40px 44px; }
    .auth-main  { padding: 36px 40px 48px; }
    .auth-points { grid-template-columns: 1fr 1fr; gap: 16px 26px; }
}

/* The split. Two independently scrolling columns, each vertically centred. */
@media (min-width: 900px) {
    .auth-shell { flex-direction: row; }
    .auth-aside {
        flex: 0 0 46%;
        display: flex;
        align-items: center;
        padding: 56px 48px;
    }
    .auth-main {
        flex: 1;
        justify-content: center;
        padding: 48px 48px;
    }
    .auth-main-inner { max-width: 400px; }
}

@media (min-width: 1200px) {
    .auth-aside { flex-basis: 48%; padding: 64px 72px; }
    .auth-aside-inner { max-width: 500px; }
    .auth-main { padding: 56px 64px; }
    .auth-main-inner { max-width: 424px; }
}

/* Very wide: stop the form drifting to the far edge. */
@media (min-width: 1700px) {
    .auth-aside { flex-basis: 46%; }
    .auth-main-inner { max-width: 440px; }
}

/* Short landscape (a phone turned sideways): drop the aside entirely so the
   form is reachable without scrolling. */
@media (max-height: 560px) and (max-width: 899px) {
    .auth-aside { padding: 16px 20px; }
    .auth-headline { font-size: 20px; margin-bottom: 4px; }
    .auth-sub, .auth-points { display: none; }
}

/* ---------------------------------------------------------------- RTL */

[dir="rtl"] .auth-aside::after { right: auto; left: -160px; }
[dir="rtl"] .auth-topbar { justify-content: flex-start; }
[dir="rtl"] .field input.code-input { letter-spacing: 5px; direction: ltr; }

/* No flex-direction override for RTL. A `row` flex container already lays
   out right-to-left when dir="rtl", so the aside lands on the right and the
   form on the left - the mirror image of the LTR layout, which is what an
   Arabic reader expects. An earlier `row-reverse` here cancelled that and
   put the split back the LTR way round. */

/* -------------------------------------------------------- preferences */

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
    .btn-auth:hover { transform: none; }
}

@media (prefers-contrast: more) {
    .auth-card, .device-card { border-color: var(--ink-2); }
    .field input { border-color: var(--line-2); }
    .auth-lede, .hint, .device-k { color: var(--ink-2); }
}

@media print {
    .auth-aside, .auth-topbar { display: none; }
    body.auth { background: #fff; }
}

/* =====================================================
   Arabic
   -----------------------------------------------------
   The shell mirrors from dir="rtl" alone - the split is
   flex and deliberately carries no flex-direction
   override, since one would cancel the natural reversal.
   Only the typeface and its leading change here.
   ===================================================== */
[dir="rtl"] body.auth,
[dir="rtl"] .auth-shell,
[dir="rtl"] .auth-form input,
[dir="rtl"] .auth-form button,
[dir="rtl"] .auth-title,
[dir="rtl"] .auth-brand {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[dir="rtl"] body.auth {
    line-height: 1.7;
}

/* The pairing code is digits and Latin letters: it stays LTR whatever the
   page direction, or the group separators read backwards. */
[dir="rtl"] .code-input,
[dir="rtl"] .pair-code {
    direction: ltr;
    text-align: center;
}