/* QuizVidya — auth (sign in / sign up / verify / forgot). Split brand panel + role-picker flow.
   All icons are inline SVG (identical on every OS/browser — no emoji/font dependency). */
:root{
  --ink:#1f3450; --ink-2:#4a5d78; --muted:#74849a; --line:#e2e8f1; --line-2:#edf1f7;
  --brand:#2f5fa6; --brand-2:#254c88; --brand-ink:#254c88;
  --parent:#2f5fa6; --parent-bg:#e9f1fc; --student:#e86e6c; --student-bg:#fdeeed;
  --field:#fcfdff; --field-line:#dbe3ee;
  --r-card:16px; --r-ctl:12px;
  --font:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
/* Auth is a locked full-viewport split (.ma-split=100vh/overflow:hidden); the document never
   page-scrolls, so opt out of the global scrollbar-gutter:stable reservation that would show
   as an empty ~15px strip on the right. :has() outranks the global `html` rule; internal
   .ma-formside scrolling is unaffected. */
html:has(body.ma-body){scrollbar-gutter:auto}
.ma-body{font-family:var(--font);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.ma-body svg{display:block}
/* Author-origin display rules (e.g. .ma-form{display:block}) would otherwise beat the UA
   [hidden]{display:none}; restore it explicitly so the `hidden` attribute always hides. */
[hidden]{display:none!important}

/* Desktop: pin the split to the viewport so the page itself never scrolls and the two halves are
   height-independent — an error/validation message changing the form's height can NEVER move the
   brand panel, add a browser scrollbar, or change the page height. (Identical architecture to the
   tournament auth — one shared layout system across both products.) */
.ma-split{display:grid;grid-template-columns:1.02fr 1.15fr;height:100vh;height:100dvh;overflow:hidden}

/* ── Brand panel (desktop) ─────────────────────────────────────────────────── */
/* Predominantly DARK hexagonal-depth panel — ported identical from the tournament auth. */
.ma-brand{position:relative;overflow:hidden;color:#fff;padding:48px 58px;display:flex;flex-direction:column;
  background:
    /* two-colour academic environment: refined coral atmosphere warms the lower-right (integrates with
       the hexagons, connects to the student-coral identity) — restrained so the deep blue stays dominant. */
    radial-gradient(66% 52% at 84% 82%, rgba(232,110,108,.32), transparent 62%),
    radial-gradient(58% 44% at 99% 16%, rgba(80,132,206,.30), transparent 60%),
    radial-gradient(85% 58% at 6% 110%, rgba(10,24,48,.5), transparent 60%),
    linear-gradient(176deg,#1c4682 0%,#173a68 26%,#1f4f8b 48%,#142f57 74%,#0d1d3a 100%)}
/* ambient light sources — drifting glows (top-left blue highlight + bottom-right coral) */
.ma-brand::before,.ma-brand::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.ma-brand::before{width:560px;height:560px;top:-230px;left:-160px;filter:blur(66px);opacity:.5;
  background:radial-gradient(circle,rgba(120,165,225,.5),transparent 68%);animation:maGlowB 34s ease-in-out infinite alternate}
.ma-brand::after{width:470px;height:470px;bottom:-175px;right:-120px;filter:blur(62px);opacity:.5;
  background:radial-gradient(circle,rgba(228,124,112,.3),transparent 66%);animation:maGlow 26s ease-in-out infinite alternate}
.ma-brand>*{position:relative;z-index:1}
/* ── hexagonal-depth background system (identical to the tournament auth) ─────────────────── */
.ma-brand-deco{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ma-brand-deco svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* top-left hexagonal planes — extend the hex system into the corner and softly light the dark logo */
.ma-hex-tl{position:absolute;z-index:0;pointer-events:none;display:block;
  clip-path:polygon(0% 50%,25% 0%,75% 0%,100% 50%,75% 100%,25% 100%)}
.ma-hex-tl-far{top:-244px;left:-216px;width:648px;height:561px;filter:blur(2.5px);
  background:linear-gradient(126deg,rgba(115,160,220,.2),rgba(95,140,205,.05) 56%,transparent 80%);
  border:1px solid rgba(255,255,255,.055);animation:maHexTLspin 120s linear infinite}
.ma-hex-tl-near{top:-182px;left:-136px;width:462px;height:400px;
  background:radial-gradient(118% 114% at 58% 66%,rgba(198,220,248,.55),rgba(120,165,225,.15) 42%,rgba(95,140,205,.04) 68%,transparent 90%);
  border:1px solid rgba(255,255,255,.055);animation:maHexTLa 46s ease-in-out infinite alternate}
/* depth-of-field hex planes (background blurred / midground glass / foreground sharp) */
.ma-hex-bg{fill:url(#maHexGlassFaint);stroke:rgba(255,255,255,.10);stroke-width:2;stroke-linejoin:round}
.ma-hex-glass{fill:url(#maHexGlass);stroke:rgba(255,255,255,.24);stroke-width:1.5;stroke-linejoin:round;
  filter:drop-shadow(0 8px 26px rgba(90,150,220,.4))}
.ma-hex-line{fill:url(#maHexGlassFaint);stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-linejoin:round}
.ma-hex-fg{fill:url(#maHexGlass);stroke:rgba(255,255,255,.46);stroke-width:1.6;stroke-linejoin:round;
  filter:drop-shadow(0 0 18px rgba(150,190,240,.55))}
.ma-hx-blur{filter:blur(4px)}
.ma-hxbg-float{animation:maHexFloat3 58s ease-in-out infinite alternate}
.ma-hxbg-fade{opacity:.26;animation:maHexBreathe2 26s ease-in-out infinite}
.ma-hx1-float{animation:maHexFloat 40s ease-in-out infinite alternate}
.ma-hx1-rot{transform-box:fill-box;transform-origin:center;animation:maHexSpin 100s linear infinite}
.ma-hx2{opacity:.8;animation:maHexBreathe 18s ease-in-out infinite}
.ma-hxF-float{animation:maHexFloatF 30s ease-in-out infinite alternate}
.ma-hxF-rot{transform-box:fill-box;transform-origin:center;animation:maHexSpin 120s linear infinite reverse}
.ma-hxF-fade{animation:maHexBreatheF 8s ease-in-out infinite}
.ma-logo{font-family:'Fredoka One',cursive;font-weight:400;font-size:1.5rem;letter-spacing:normal;color:#1a1a1a;text-decoration:none}
.ma-logo span{color:#e86e6c}
.ma-brand-body{margin-top:auto;margin-bottom:auto;max-width:465px}
.ma-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.77rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#dceaf8;margin-bottom:24px}
.ma-eyebrow svg{width:17px;height:17px}
.ma-headline{font-size:3.05rem;line-height:1.06;font-weight:700;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance}
.ma-tag{font-size:1.17rem;line-height:1.62;color:#e9f2fc;margin:0 0 40px;max-width:450px;font-weight:400}
.ma-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.ma-features li{display:flex;gap:16px;align-items:flex-start}
.ma-fi{flex:0 0 auto;width:47px;height:47px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.15)}
.ma-fi svg{width:23px;height:23px;color:#fff}
.ma-ft b{display:block;font-weight:600;font-size:1.07rem;margin-bottom:3px;letter-spacing:-.01em}
.ma-ft small{color:#d8e5f4;font-size:.93rem;line-height:1.5}
.ma-brand-foot{margin-top:40px;display:inline-flex;align-items:center;gap:9px;font-size:.88rem;color:#d0deef}
.ma-brand-foot svg{width:16px;height:16px}

/* ── Form side ─────────────────────────────────────────────────────────────── */
/* The form column fills the viewport-pinned cell and scrolls INTERNALLY if the content ever exceeds
   the available height, so the PAGE never scrolls and the brand can't move. Two EQUAL flex spacers
   vertically CENTRE the whole content group (card + security footer) — each page self-centres to its
   own height (role picker, login, signup, forgot), giving balanced top/bottom space. When the group
   is taller than the column both spacers collapse to 0, so the top stays reachable and the column
   scrolls gracefully (no clipping, no outer scrollbar). Centring is the reason an error can adjust
   the group's height by a small, controlled amount — never a page jump or a scrollbar. */
.ma-formside{display:flex;flex-direction:column;align-items:center;height:100%;overflow-y:auto;padding:24px 32px;
  background:radial-gradient(120% 90% at 100% 0%,#eef4fc 0%,transparent 55%),#fcfdff}
.ma-formside::before,.ma-formside::after{content:"";width:0;pointer-events:none;flex:1 1 0}
.ma-mobilebrand{display:none}
.ma-formwrap{width:100%;max-width:392px;flex:0 0 auto}
.ma-card{width:100%}
.ma-foot{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;font-size:.82rem;color:var(--muted);margin:26px 0 0}
.ma-foot svg{width:15px;height:15px;flex:0 0 auto}

/* ── Alerts ────────────────────────────────────────────────────────────────── */
.ma-alert-slot:empty{display:none}
.ma-alert{border-radius:11px;padding:11px 14px;font-size:.9rem;line-height:1.45;margin-bottom:18px}
.ma-alert-err{background:#fdeceb;color:#c0392b;border:1px solid #f6cfcb}
.ma-alert-ok{background:#eaf7ef;color:#1c7d46;border:1px solid #c6e9d3}
/* neutral/info tone (e.g. "your session has expired") — calm brand-tinted slate, not success/error */
.ma-alert-info{background:#eaf2fd;color:#254c88;border:1px solid #cbdcf3}

/* ── Steps ─────────────────────────────────────────────────────────────────── */
.ma-step{animation:maRise .46s cubic-bezier(.2,.8,.2,1) both}
.ma-step[hidden]{display:none}
.ma-h{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:0 0 6px;text-wrap:balance}
.ma-sub{font-size:.98rem;color:var(--ink-2);margin:0 0 24px;line-height:1.5}

/* role picker */
.ma-roles{display:flex;flex-direction:column;gap:14px}
.ma-role{display:flex;align-items:center;gap:15px;width:100%;text-align:left;cursor:pointer;font-family:var(--font);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-card);padding:17px 18px;
  transition:transform .22s cubic-bezier(.34,1.4,.5,1),box-shadow .24s ease,border-color .2s ease;
  animation:maRise .55s cubic-bezier(.2,.8,.2,1) both}
.ma-role:nth-child(1){animation-delay:.05s}.ma-role:nth-child(2){animation-delay:.13s}
.ma-role:hover{transform:translateY(-3px);border-color:#c6d6ea}
.ma-role.p:hover{border-color:#bccbdd;box-shadow:0 14px 30px rgba(47,95,166,.2)}
.ma-role.s:hover{border-color:#f2ccca;box-shadow:0 14px 30px rgba(232,110,108,.16)}
.ma-role:focus-visible,.ma-btn:focus-visible,.ma-link:focus-visible,.ma-eye:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.ma-role-ic{flex:0 0 auto;width:50px;height:50px;border-radius:13px;display:grid;place-items:center;transition:transform .24s cubic-bezier(.34,1.4,.5,1),box-shadow .24s ease}
.ma-role.p .ma-role-ic{background:var(--parent-bg);color:var(--parent)}
.ma-role.s .ma-role-ic{background:var(--student-bg);color:var(--student)}
.ma-role-ic svg{width:26px;height:26px}
.ma-role-tx{flex:1 1 auto;min-width:0}
.ma-role-tx b{display:block;font-size:1.06rem;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ma-role-tx span{font-size:.87rem;color:var(--muted)}
.ma-role-ch{flex:0 0 auto;color:#aab7c6;transition:transform .22s ease,color .2s ease}
.ma-role-ch svg{width:20px;height:20px}
.ma-role:hover .ma-role-ic{transform:scale(1.06)}
.ma-role.p:hover .ma-role-ic{box-shadow:0 6px 14px rgba(47,95,166,.24)}
.ma-role.s:hover .ma-role-ic{box-shadow:0 6px 14px rgba(232,110,108,.22)}
.ma-role:hover .ma-role-ch{transform:translateX(4px)}
.ma-role.p:hover .ma-role-ch{color:var(--parent)}.ma-role.s:hover .ma-role-ch{color:var(--student)}

/* back + who chip */
.ma-back{display:flex;width:fit-content;align-items:center;gap:6px;background:none;border:0;color:var(--ink-2);font:600 .9rem var(--font);cursor:pointer;padding:6px 8px 6px 0;margin:0 0 18px;border-radius:8px;transition:color .15s ease,transform .18s ease}
.ma-back svg{width:17px;height:17px}
.ma-back:hover{color:var(--ink);transform:translateX(-3px)}
.ma-who{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 8px;border-radius:999px;font-size:.84rem;font-weight:600;margin:0 0 26px;border:1px solid;box-shadow:0 1px 3px rgba(30,30,60,.05)}
.ma-who.p{background:linear-gradient(135deg,#eef4fb,#e4edfa);color:var(--brand-ink);border-color:#cbdcf3}
.ma-who.s{background:linear-gradient(135deg,#fdeeed,#fbe6e5);color:#b5433f;border-color:#f5d3d1}
.ma-who-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 1px 2px rgba(30,30,60,.12)}
.ma-who-ic svg{width:15px;height:15px}
.ma-who.p .ma-who-ic{color:var(--parent)}.ma-who.s .ma-who-ic{color:var(--student)}

/* ── Form primitives (shared: login / signup / verify / forgot / challenge) ──── */
.ma-form{display:block}
.ma-label{display:block;font-size:.9rem;font-weight:600;color:var(--ink);margin:0 0 7px}
.ma-labelrow{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px}
.ma-labelrow .ma-label{margin-bottom:7px}
.ma-form>.ma-label:not(:first-child){margin-top:16px}
/* #chGeneric / #chNewPwPanel wrap the challenge panel's fields one level deeper than the other
   forms (login.html #maChallenge), so the direct-child rule above needs a nested equivalent. */
#chGeneric .ma-label:not(:first-child),
#chNewPwPanel .ma-label:not(:first-child){margin-top:16px}
.ma-input{width:100%;height:50px;border:1.5px solid var(--field-line);border-radius:var(--r-ctl);background:var(--field);
  padding:0 14px;font:500 .98rem var(--font);color:var(--ink);transition:border-color .16s,box-shadow .16s,background .16s}
.ma-input::placeholder{color:#9aa7b8;font-weight:400}
.ma-input:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(47,95,166,.2)}
/* Browser autofill (Chrome/Edge/Safari): keep the field visually identical — no yellow/blue wash.
   The inset box-shadow paints the field background over the UA style; the 9999s transition defers
   the UA's own background repaint; text/caret stay legible. Focus keeps the field-white + focus ring. */
.ma-input:-webkit-autofill,.ma-input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--ink);caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--field) inset;box-shadow:0 0 0 100px var(--field) inset;
  transition:background-color 9999s ease-out 0s}
.ma-input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #fff inset,0 0 0 4px rgba(47,95,166,.2);
  box-shadow:0 0 0 100px #fff inset,0 0 0 4px rgba(47,95,166,.2)}
.ma-code{letter-spacing:.35em;text-align:center;font-weight:600}
.ma-pw{position:relative}
.ma-pw .ma-input{padding-right:46px}
.ma-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:none;color:#8794a6;cursor:pointer;border-radius:8px;display:grid;place-items:center;transition:color .15s,background .15s}
.ma-eye:hover{color:var(--ink-2);background:#eef4fb}
.ma-eye svg{width:19px;height:19px}
.ma-eye .ma-eye-off{display:none}
.ma-eye.is-on .ma-eye-open{display:none}
.ma-eye.is-on .ma-eye-off{display:block}
.ma-btn{position:relative;overflow:hidden;width:100%;height:52px;border:0;border-radius:var(--r-ctl);color:#fff;font:600 1rem var(--font);cursor:pointer;margin-top:22px;
  background:linear-gradient(135deg,#2f5fa6 0%,#254c88 100%);box-shadow:0 6px 18px rgba(30,66,128,.26);
  transition:transform .16s ease,box-shadow .2s ease,filter .2s ease}
/* hover sheen sweep (::before — ::after is reserved for the loading spinner) */
.ma-btn::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .6s ease}
.ma-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,66,128,.34);filter:brightness(1.04)}
.ma-btn:hover::before{left:135%}
.ma-btn:active{transform:translateY(0) scale(.988)}
.ma-btn.is-loading::before{display:none}
.ma-btn:disabled{cursor:default}
.ma-btn.is-loading{color:transparent;pointer-events:none}
.ma-btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:19px;height:19px;margin:-10px 0 0 -10px;border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:maSpin .6s linear infinite}
.ma-link{background:none;border:0;color:var(--brand);font:600 .9rem var(--font);cursor:pointer;padding:0;text-decoration:none;transition:color .15s ease,opacity .15s ease}
.ma-link:hover{color:#254c88;text-decoration:none}
.ma-link:disabled{opacity:.5;cursor:default;pointer-events:none}
.ma-forgot{font-weight:500}
.ma-switch{text-align:center;font-size:.92rem;color:var(--ink-2);margin:20px 0 0}
.ma-switch .ma-link{font-size:.92rem}
.ma-hint{display:flex;gap:9px;align-items:flex-start;background:#eef4fb;border:1px solid var(--line-2);border-radius:11px;padding:12px 14px;margin-top:18px;font-size:.86rem;color:var(--ink-2);line-height:1.5}
.ma-hint svg{flex:0 0 auto;width:18px;height:18px;color:var(--student);margin-top:1px}

/* password rules */
.ma-rules{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.ma-rules li{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--muted);transition:color .2s}
.ma-dot{width:7px;height:7px;border-radius:50%;background:#cad3df;transition:background .2s,transform .2s}
.ma-rules li.met{color:#1c7d46}
.ma-rules li.met .ma-dot{background:#2fae66;transform:scale(1.15)}

/* verify / forgot extras */
.ma-formtitle{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin:0 0 6px}
.ma-lead{font-size:.98rem;color:var(--ink-2);margin:0 0 24px;line-height:1.5}
.ma-inline-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}
.ma-inline-actions.ma-center{justify-content:center}
.ma-inline-form{display:inline}
.ma-muted{color:var(--ink-2);font-weight:500}

@keyframes maRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes maSpin{to{transform:rotate(360deg)}}
/* hexagonal-depth ambient motion (identical to the tournament auth), staggered so nothing loops in lockstep */
@keyframes maGlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-34px,26px,0)}}
@keyframes maGlowB{from{transform:translate3d(0,0,0)}to{transform:translate3d(30px,-18px,0)}}
@keyframes maHexSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes maHexFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(-18px,-32px,0)}}
@keyframes maHexFloatF{from{transform:translate3d(0,0,0)}to{transform:translate3d(16px,-28px,0)}}
@keyframes maHexFloat3{from{transform:translate3d(0,0,0)}to{transform:translate3d(10px,-14px,0)}}
@keyframes maHexBreathe{0%,100%{opacity:.62}50%{opacity:.96}}
@keyframes maHexBreathe2{0%,100%{opacity:.22}50%{opacity:.4}}
@keyframes maHexBreatheF{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes maHexTLa{from{transform:translate3d(0,0,0)}to{transform:translate3d(13px,10px,0)}}
@keyframes maHexTLspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Mobile (≤900) ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  /* Single column: release the desktop viewport-pin so the page scrolls naturally (keyboard-friendly),
     and disable the desktop centring spacers so the compact header sits at the top and the form flows. */
  .ma-split{grid-template-columns:1fr;height:auto;overflow:visible;min-height:100vh;min-height:100dvh}
  .ma-brand{display:none}
  .ma-formside{padding:0;flex-direction:column;align-items:stretch;height:auto;overflow:visible;min-height:100vh;min-height:100dvh;background:#fcfdff}
  .ma-formside::before,.ma-formside::after{display:none}
  /* Mobile header: light lavender band so the dark Quiz + coral Vidya logo reads crisply (matches
     the tournament auth); one faint hexagon accent echoes the desktop geometry. */
  .ma-mobilebrand{display:block;position:relative;overflow:hidden;padding:26px 24px 26px;
    background:linear-gradient(180deg,#eef4fc 0%,#dae7f8 56%,#c2daf5 100%);border-bottom:1px solid #cddfef}
  .ma-mobilebrand::after{content:"";position:absolute;width:150px;height:136px;top:-42px;right:-30px;pointer-events:none;opacity:.75;
    background:linear-gradient(180deg,rgba(47,95,166,.15),rgba(47,95,166,0));
    clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
  .ma-mobilebrand .ma-logo{font-size:1.25rem;position:relative;z-index:1;color:#1a1a1a}
  .ma-mobilebrand .ma-logo span{color:#e86e6c}
  .ma-mtag{position:relative;z-index:1;margin:9px 0 0;font-size:.92rem;color:#2f5fa6;line-height:1.5;max-width:300px;font-weight:500}
  /* Center the form in the space below the header so tall single-column screens (tablets) are
     balanced instead of leaving a bottom void; on short screens the auto margins collapse. */
  /* Top-anchored directly under the header (stable position — an error can't recentre the form on
     mobile); the page scrolls naturally when content exceeds the viewport. */
  .ma-formwrap{max-width:none;margin:0;padding:clamp(18px,3vh,34px) 22px 34px}
}
@media (max-width:380px){
  .ma-formwrap{padding:22px 16px 30px}
  .ma-h,.ma-formtitle{font-size:1.44rem}
}
@media (prefers-reduced-motion:reduce){
  .ma-body *{animation:none!important}
  .ma-brand::before,.ma-brand::after{animation:none!important}
  .ma-role,.ma-btn,.ma-btn::before,.ma-role-ch{transition:none!important}
}

/* ===== V19 IAC organic colour-field hero (ported from design lab 20260820-134040) ===== */
/* ============ ORGANIC BACKGROUND OVERRIDE ============ */
/* hide the geometric hexagon SVG + neutralise the clip-path corner planes */
.ma-brand-deco svg,.ta-brand-deco svg{display:none!important}
.ma-brand-deco,.ta-brand-deco{overflow:hidden}
.ma-hex-tl-far,.ma-hex-tl-near,.ta-hex-tl-far,.ta-hex-tl-near{clip-path:none!important;border:0!important;filter:none!important}
/* readability veil — dedicated top-of-deco layer keeping the LEFT headline/logo zone calm on every frame */
.ma-brand::after,.ta-brand::after{position:absolute!important;inset:0!important;top:0!important;left:0!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;border-radius:0!important;filter:none!important;opacity:1!important;transform:none!important;animation:none!important;background:linear-gradient(100deg,rgba(8,22,46,.62) 0%,rgba(8,22,46,.26) 30%,transparent 52%)!important;z-index:0}
@media (prefers-reduced-motion:reduce){
  .ma-brand-deco::before,.ma-brand-deco::after,.ta-brand-deco::before,.ta-brand-deco::after,
  .ma-brand::before,.ta-brand::before,.ma-hex-tl-far,.ma-hex-tl-near,.ta-hex-tl-far,.ta-hex-tl-near{animation:none!important}
}

/* V19 — IAC Organic Colour Fields: deep slate-blue base + one bold coral field sweeping in from the
   right via a broad organic curve (QuizVidya-original path, routed clear of the headline), with a
   darker-coral depth layer and a lighter-coral top-right cap. Very slow ambient drift. */
.ma-brand,.ta-brand{background:linear-gradient(162deg,#3c5c8a 0%,#324e79 48%,#274066 100%)!important}
.ma-hex-tl-near,.ta-hex-tl-near{display:none!important}
.ma-hex-tl-far,.ta-hex-tl-far{inset:auto!important;top:-3%!important;left:-3%!important;right:auto!important;bottom:auto!important;width:106%!important;height:106%!important;clip-path:none!important;filter:none!important;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20680%20960%27%20preserveAspectRatio%3D%27xMidYMid%20slice%27%3E%3Cpath%20d%3D%27M680%20-20%20L296%20-20%20C566%20210%20560%20560%20452%20980%20L700%20980%20Z%27%20fill%3D%27%23e86e6c%27%2F%3E%3Cpath%20d%3D%27M680%20980%20L452%20980%20C532%20824%20624%20866%20700%20800%20L700%20980%20Z%27%20fill%3D%27%23d95d59%27%20opacity%3D%270.55%27%2F%3E%3Cpath%20d%3D%27M680%20-20%20L520%20-20%20C612%2096%20604%20214%20700%20300%20L700%20-20%20Z%27%20fill%3D%27%23f0837e%27%20opacity%3D%270.5%27%2F%3E%3C%2Fsvg%3E") no-repeat center center!important;background-size:cover!important;animation:iacdrift 36s ease-in-out infinite alternate!important;will-change:transform}
.ma-brand::before,.ta-brand::before{width:72%!important;height:60%!important;top:-14%!important;left:-16%!important;filter:blur(52px)!important;opacity:.42!important;background:radial-gradient(circle,rgba(120,162,222,.24),transparent 66%)!important;animation:none!important}
.ma-brand-deco::before,.ta-brand-deco::before{content:"";position:absolute;left:-14%;bottom:-16%;width:52%;height:46%;pointer-events:none;background:radial-gradient(70% 100% at 22% 100%,rgba(70,120,190,.30),transparent 66%);animation:iacdrift2 44s ease-in-out infinite alternate}
@keyframes iacdrift{from{transform:translate3d(0,0,0) scale(1.02)}to{transform:translate3d(2.4%,1.4%,0) scale(1.05)}}
@keyframes iacdrift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(3%,-2%,0)}}


/* ── auth notice modal (signed-in-elsewhere) — coral+slate, blurred scrim, mobile-safe ── */
.ma-modal-open{overflow:hidden}
.ma-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.ma-modal-scrim{position:absolute;inset:0;background:rgba(31,52,80,.42);
  -webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%);
  opacity:0;transition:opacity .26s ease}
.ma-modal.is-open .ma-modal-scrim{opacity:1}
.ma-modal-card{position:relative;z-index:1;width:100%;max-width:400px;max-height:90vh;overflow-y:auto;
  background:#fff;border-radius:20px;padding:34px 30px 30px;text-align:center;
  box-shadow:0 24px 60px rgba(31,52,80,.28),0 2px 8px rgba(31,52,80,.10);
  opacity:0;transform:translateY(14px) scale(.965);
  transition:opacity .26s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)}
.ma-modal.is-open .ma-modal-card{opacity:1;transform:none}
.ma-modal-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:18px;background:var(--student-bg);color:var(--student);margin:0 0 18px}
.ma-modal-ic svg{width:30px;height:30px}
.ma-modal-title{font-size:1.3rem;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.25;letter-spacing:-.01em}
.ma-modal-body{font-size:1rem;line-height:1.6;color:var(--ink-2);margin:0 auto 24px;max-width:20rem}
.ma-modal-cta{display:inline-flex;align-items:center;justify-content:center;width:100%;height:50px;border:0;
  border-radius:var(--r-ctl);background:var(--brand);color:#fff;font:600 1rem var(--font);cursor:pointer;
  box-shadow:0 8px 20px rgba(47,95,166,.26);transition:background .16s ease,transform .12s ease,box-shadow .16s ease}
.ma-modal-cta:hover{background:var(--brand-2);transform:translateY(-1px);box-shadow:0 12px 26px rgba(47,95,166,.32)}
.ma-modal-cta:active{transform:translateY(0)}
.ma-modal-x{position:absolute;top:13px;right:13px;width:34px;height:34px;display:inline-flex;align-items:center;
  justify-content:center;border:0;background:none;color:var(--muted);border-radius:9px;cursor:pointer;
  transition:color .15s ease,background .15s ease}
.ma-modal-x:hover{color:var(--ink);background:var(--line-2)}
.ma-modal-x svg{width:18px;height:18px}
.ma-modal-cta:focus-visible,.ma-modal-x:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (max-width:480px){
  .ma-modal{padding:16px}
  .ma-modal-card{border-radius:18px;padding:30px 22px 24px}
  .ma-modal-ic{width:58px;height:58px;border-radius:16px}
  .ma-modal-title{font-size:1.18rem}
  .ma-modal-body{font-size:.96rem}
  /* 44x44 tap target (was 34x34): top/right shifted so the icon's visual center is unchanged,
     only the hit area grows. The svg itself stays 18x18. */
  .ma-modal-x{width:44px;height:44px;top:8px;right:8px}
}
@media (prefers-reduced-motion:reduce){.ma-modal-scrim,.ma-modal-card{transition:opacity .01s}}


/* ── QuizVidya × IAC co-brand lockup + mobile role-select centering (2026-08) ───────── */
.ma-lockup{display:flex;align-items:center;gap:14px;align-self:flex-start;position:relative;z-index:1}
.ma-lockup-sep{width:1px;height:27px;background:rgba(255,255,255,.30);flex:0 0 auto}
.ma-iac{display:inline-flex;align-items:center;background:#fff;border-radius:9px;padding:6px 10px;
  box-shadow:0 3px 12px rgba(12,26,50,.16);flex:0 0 auto}
.ma-iac-img{height:30px;width:auto;aspect-ratio:4668/1192;display:block}
@media (max-width:900px){
  .ma-mobilebrand .ma-lockup{gap:11px}
  .ma-mobilebrand .ma-lockup-sep{height:22px;background:rgba(47,95,166,.28)}
  .ma-mobilebrand .ma-iac{padding:5px 9px;box-shadow:0 2px 9px rgba(31,64,110,.18)}
  .ma-mobilebrand .ma-iac-img{height:24px}
  /* Root-cause fix for role-select top-heaviness: desktop centring spacers are disabled on mobile.
     Center ONLY the role-select step (no inputs => no error-reflow risk the dev warned about);
     form steps stay top-anchored, unchanged. :has() reacts live to the JS toggling [hidden]. */
  .ma-formwrap:has(#maStep1:not([hidden])){margin-top:auto;margin-bottom:auto}
}

/* Desktop: enlarge the QV × IAC lockup for presence (mobile band keeps its compact sizes) */
@media (min-width:901px){
  .ma-logo{font-size:1.85rem}
  .ma-lockup{gap:16px}
  .ma-lockup-sep{height:33px}
  .ma-iac{padding:7px 12px}
  .ma-iac-img{height:38px}
}

/* Auth UI refinement 2026-08-30: even corner inset (#1), tighten lockup→eyebrow (#2), larger logos (#3) */
@media (min-width:901px){
  .ma-brand{padding:58px 58px}
  .ma-brand-body{margin-top:clamp(34px,5vh,52px);margin-bottom:auto}
  .ma-logo{font-size:2rem}
  .ma-lockup{gap:17px}
  .ma-lockup-sep{height:36px}
  .ma-iac{padding:8px 13px}
  .ma-iac-img{height:42px}
}

/* ── Door 2 sign-up page (templates/auth/signup.html, 2026-09) ─────────────── */
.ma-features-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.ma-features-grid li{gap:12px}
.ma-features-grid .ma-fi{width:40px;height:40px;border-radius:11px}
.ma-features-grid .ma-fi svg{width:20px;height:20px}
.ma-features-grid .ma-ft b{font-size:.95rem}
.ma-features-grid .ma-ft small{font-size:.84rem}
.ma-brand-note{font-size:.88rem;line-height:1.55;color:#d8e5f4;margin:26px 0 0}
a.ma-role{text-decoration:none;color:inherit}
.ma-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ma-row2>*{min-width:0}
.ma-helper{margin:7px 0 0;font-size:.82rem;color:var(--muted);line-height:1.45}
.ma-fieldset{border:0;margin:0;padding:0;min-width:0}
.ma-fieldset[disabled]{opacity:.55}
.ma-fieldset>.ma-label,.ma-fieldset>.ma-row2{margin-top:16px}
.ma-terms{display:flex;align-items:flex-start;gap:10px;margin-top:16px;font-size:.87rem;line-height:1.5;color:var(--ink-2)}
.ma-terms input{margin-top:3px;flex:0 0 auto}
.ma-stop{text-align:center}

/* ── Task 2.5: small-screen (380-480px) pass ──────────────────────────────── */
/* Long emails ("Signed in as <b>...</b>", "For <b>...</b>", the new-email confirmations on
   setup/password/email) must wrap instead of pushing the card wider than the viewport. */
.ma-lead b,.ma-lead strong{overflow-wrap:anywhere}

/* Anchor styled as a full-width button. Replaces a repeated inline
   style="display:flex;align-items:center;justify-content:center;text-decoration:none" that lived on
   refused.html, setpw_used.html, setup.html, signup.html and account_email.html. */
.ma-btn-link{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* The grade/division two-column rows (setup.html's grid + signup.html's .ma-row2, above) never let
   an item force the track wider than its share, and stack to one column on the narrowest phones. */
@media (max-width:399px){
  .ma-row2{grid-template-columns:1fr}
}

@media (max-width:480px){
  /* iOS Safari zooms the page on focus of any text input/select under 16px; desktop sizing
     (.ma-input's .98rem) is untouched above this width. */
  .ma-input,select{font-size:16px}
}