/* Faramix apps gate (2026-11-14). Tokens from products/core/core.css and assets/glass.css; layout from work/design/apps-gate/gate-mock.html.
   Logical properties only, so one sheet serves Arabic (RTL) and English (LTR). Switched off when the approved app starts. */
:root{--night:#0B0F23;--line:#232A66;--violet:#5A2BBE;--beam:#8E4DFF;--glow:#C39BFE;--mist:#A9ADC8;--foam:#F2F4F8;--ok:#3EE58C;--warn:#FFB547;--bad:#FF6B81;--edge:rgba(195,155,254,.6);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:radial-gradient(60% 50% at 0% 0%,rgba(142,77,255,.18),transparent 60%),var(--night);color:var(--foam);font:16px/1.65 Poppins,"Segoe UI",system-ui,sans-serif}
html[lang=ar] body{font-family:Tajawal,Poppins,"Segoe UI",system-ui,sans-serif;font-size:17px}
:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.g{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.g-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px}
.g-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;line-height:1.3;min-width:0}
.g-brand b{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--beam),var(--violet));display:grid;place-items:center;font:700 12px Poppins,sans-serif;color:#fff;flex:none}
.g-brand small{display:block;font-weight:500;color:var(--mist);font-size:12.5px}
.g-lang{display:inline-flex;min-height:52px;border:1px solid var(--edge);border-radius:999px;padding:3px;flex:none}
.g-lang button,.g-lang span{min-width:44px;min-height:44px;display:grid;place-items:center;border-radius:999px;font:600 14.5px Poppins,sans-serif;padding:0 8px;color:var(--mist);background:none;border:0;cursor:pointer}
.g-lang span{cursor:default}
.g-lang [lang=ar]{font-family:Tajawal,sans-serif;font-size:17px}
.g-lang span[aria-current]{background:rgba(142,77,255,.32);color:#fff}
.g-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:16px}
.g-card{width:100%;max-width:440px;min-width:0;background:linear-gradient(160deg,#131840,#0E1232);border:1px solid var(--line);border-radius:18px;padding:24px 20px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.g-card:empty{visibility:hidden}
.g-tag{display:inline-block;font-size:13px;padding:3px 12px;border-radius:99px;background:rgba(142,77,255,.18);color:var(--glow)}
.g-tag.ok{background:rgba(62,229,140,.14);color:var(--ok)}
.g-tag.warn{background:rgba(255,181,71,.14);color:var(--warn)}
.g-tag.bad{background:rgba(255,107,129,.14);color:var(--bad)}
.g-card h1{font-size:24px;line-height:1.3;font-weight:800;margin:12px 0 8px;letter-spacing:0;outline-offset:6px}
.g-card p{margin:0 0 12px}
.g-sub{color:var(--mist);font-size:.9em}
.g-sub a,.g-notice a,.g-agree a{color:var(--glow);text-decoration:underline;text-underline-offset:3px}
.g-acts{display:grid;gap:10px;margin:18px 0 14px}
.g-btn{min-height:48px;border:1px solid var(--edge);background:#141940;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;font-size:15px;color:var(--foam);text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center;transition:border-color .15s}
html[lang=ar] .g-btn{font-size:16px}
.g-btn:hover{border-color:var(--glow)}
.g-btn.p{background:linear-gradient(135deg,var(--beam),var(--violet));border-color:transparent;font-weight:700;color:#fff;box-shadow:0 8px 22px rgba(142,77,255,.3)}
.g-btn[disabled]{opacity:.6;cursor:default}
.g-btn svg{width:20px;height:20px;flex:none;fill:currentColor}
/* Google button: light theme, pill, standard logo untouched (Google sign-in branding) */
.g-google{min-height:48px;width:100%;background:#fff;color:#1F1F1F;border:1px solid #747775;border-radius:999px;padding:0 12px;display:flex;align-items:center;justify-content:center;gap:10px;font:500 14px/20px Roboto,Tajawal,Arial,sans-serif;white-space:nowrap;cursor:pointer}
.g-google:hover{border-color:#1F1F1F}
.g-google:active{background:#F2F2F2}
.g-google[aria-disabled=true]{opacity:.6;cursor:default}
.g-google svg{width:18px;height:18px;flex:none}
.g-notice{font-size:13.5px;line-height:1.6;color:var(--mist);border-top:1px solid var(--line);padding-top:12px;margin:14px 0 0}
/* consent box (legal desk W2): the notice is the label, shown above the Google button */
.g-agree{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:13.5px;line-height:1.6;color:var(--foam);border-top:1px solid var(--line);padding-top:14px;margin:16px 0 0;cursor:pointer}
.g-agree input{width:24px;height:24px;margin:0;accent-color:var(--beam);cursor:pointer}
.g-agree-box{display:grid;place-items:center;min-width:44px;min-height:44px;margin:-10px}
/* in-app browser warning (UX S6): a box at the top of the card */
.g-warn{background:rgba(255,181,71,.12);border:1px solid var(--warn);color:var(--foam);border-radius:10px;padding:10px 12px;font-size:.9em;line-height:1.6;margin:0 0 14px}
.g-warn b{color:var(--warn);display:block}
.g-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.g-hint{font-size:13.5px;color:var(--warn);margin:8px 0 0;min-height:1.6em}
.g-who{background:#0B0F2A;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:14px 0 0;font-size:.85em;color:var(--mist);display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center}
.g-who bdi{min-width:0;color:var(--foam);font-family:Poppins,sans-serif;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.g-steps{margin:0 0 4px;padding:0;list-style:none;display:grid;gap:8px;color:var(--mist);font-size:.92em}
.g-steps li{position:relative;padding-inline-start:22px}
.g-steps li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--beam);box-shadow:0 0 0 4px rgba(142,77,255,.2)}
.g-status{font-size:.9em;color:var(--mist);margin:0;min-height:1.65em}
.g-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 16px;margin-top:6px}
.g-link{min-height:44px;display:inline-flex;align-items:center;color:var(--glow);text-decoration:underline;text-underline-offset:3px;font-size:.9em;background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.g-spin{width:28px;height:28px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--beam);animation:g-spin .9s linear infinite;margin:4px 0 0}
@keyframes g-spin{to{transform:rotate(360deg)}}
.g-foot{padding:10px 16px 18px;text-align:center;color:var(--mist);font-size:12.5px}
/* phones: the card sits at the top, so it does not jump when "Checking" becomes the sign-in screen (perf 3c: CLS 0.1465 -> 0) */
@media(max-width:699px){.g-main{align-items:start}}
@media(min-width:700px){.g-card{padding:32px}.g-card h1{font-size:28px}}
@media(min-width:1024px){.g-top,.g-foot{padding-inline:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}