@font-face{font-family:Tajawal;src:url('/Tajawal-Regular.ttf')}@font-face{font-family:Tajawal;src:url('/Tajawal-Bold.ttf');font-weight:700}
:root{--navy:#092d64;--blue:#07509a;--teal:#009eaf;--muted:#536882}*{box-sizing:border-box}body{margin:0;color:var(--navy);font:20px/1.65 Tajawal,Arial,sans-serif;background:#edf6fc}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #d98a00;outline-offset:4px}h1,h2,p{margin:0}h1{font-size:34px;line-height:1.4}h2{font-size:28px;line-height:1.5}.brand{display:flex;align-items:center;gap:20px;line-height:1.2}.brand-ar{font-weight:700;font-size:26px;white-space:nowrap}.brand small{display:block;font:10px/1.8 Arial,sans-serif;letter-spacing:.1px}.brand-en{position:relative;font:bold 28px/1.2 Arial,sans-serif;border-right:1px solid #cfdeeb;padding-right:20px}.brand-en i{position:absolute;width:14px;height:6px;transform:skew(-35deg);background:#00a5b8;top:-8px;left:40px;border-top:3px solid #f5b600}.eyebrow{font-size:17px;color:#53728e;display:block;margin-bottom:8px}.login-panel{padding:32px 24px;background:rgba(255,255,255,.96)}.login-copy{margin:44px 0 28px}.login-copy p{color:var(--muted);margin-top:10px}.login-form{display:grid;gap:10px}.login-form label{font-weight:700;margin-top:8px}.login-form input{width:100%;min-width:0;border:1px solid #bccfdd;border-radius:12px;height:58px;padding:10px 16px;background:#fbfdff;color:var(--navy)}.password-field{position:relative}.password-field input{padding-right:78px}.password-field button{position:absolute;right:4px;top:4px;height:50px;border:0;background:transparent;color:var(--blue);padding:0 16px;font-size:18px}.primary{margin-top:22px;border:0;border-radius:12px;background:var(--blue);color:white;min-height:60px;padding:12px 22px;font-weight:700;font-size:24px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 8px 18px #07509a20}.primary:hover{background:#073a76;box-shadow:0 10px 24px #07509a35}.access-note{font-size:16px;color:var(--muted);margin:26px 0}.login-panel footer{border-top:1px solid #e1eaf2;padding-top:22px;font-size:17px}.login-art{min-height:320px;background-image:url('/assets/login.png');background-repeat:no-repeat;background-position:left top;background-size:145% auto}.error{background:#fff0ed;color:#9b271b;border:1px solid #efb7af;padding:14px;border-radius:10px;font-size:18px;margin-bottom:16px}.topbar{margin:16px;padding:22px 24px;background:#ffffffed;border:1px solid white;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:22px;box-shadow:0 8px 30px #104a7710}.topbar nav{display:flex;align-items:center;gap:22px;font-size:19px;font-weight:700}.topbar nav a{padding:10px 4px;border-bottom:3px solid transparent}.topbar nav a[aria-current]{border-color:var(--teal)}.topbar button{border:0;background:transparent;color:var(--navy);min-height:48px;padding:8px}.topbar form{margin:0}.dashboard{padding:24px 20px;position:relative}.welcome{margin-bottom:30px}.greeting{font-size:20px;margin-bottom:12px}.welcome h1{margin-bottom:14px}.welcome h1:after{content:'';display:block;width:64px;height:4px;background:var(--teal);border-radius:3px;margin-top:14px}.welcome>p:last-child{color:var(--muted)}.cards{display:grid;gap:20px}.card{background:#ffffffed;border:1px solid #fff;border-radius:18px;padding:24px;box-shadow:0 10px 30px #154f7910;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}.card:hover{transform:translateY(-3px);box-shadow:0 14px 32px #154f7925}.card-icon{width:66px;height:66px;background:#e2f1ff;color:#07509a;border-radius:15px;display:grid;place-items:center;margin-bottom:16px}.card-icon svg{width:40px;height:40px}.requirements .card-icon{background:#fff3d9}.discussion .card-icon,.files .card-icon{background:#ddf7f7}.card p{font-size:20px;color:var(--muted);margin:8px 0 22px;flex:1}.card-action{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--blue);color:white;border-radius:10px;padding:10px 16px;min-height:54px;font-weight:700}.requirements .card-action{background:#008894}.discussion .card-action{background:#0876cc}.dashboard footer{font-size:16px;color:#547089;text-align:center;margin-top:30px}.dashboard footer span{padding:0 12px;color:var(--teal)}.back{display:inline-block;background:white;padding:14px 22px;border-radius:12px}.portal-page{background:linear-gradient(135deg,#f7fbfe,#e5f3fc)}.dashboard-art{display:none}
@media(min-width:800px){.login-layout{display:grid;grid-template-columns:minmax(420px,40%) 1fr;min-height:100vh}.login-panel{padding:60px clamp(32px,4vw,76px);display:flex;flex-direction:column;justify-content:center}.login-art{background-size:auto 100%;background-position:left center}.login-copy{margin-top:54px}.topbar{margin:28px 3%;padding:20px 30px}.dashboard{width:68%;max-width:1050px;margin-right:3%;padding:24px 16px}.cards{grid-template-columns:1fr 1fr}.dashboard-art{display:block;position:fixed;inset:0;background-image:linear-gradient(to left,#edf7fde8 0%,#edf7fdeb 63%,transparent 82%),url('/assets/login.png');background-size:cover,auto 100%;background-position:center,left center;z-index:-1}.portal-page{background:#eaf5fc}h1{font-size:38px}.card{padding:25px}.welcome{margin-bottom:26px}}
@media(max-width:799px){.login-layout{display:flex;flex-direction:column}.login-art{order:-1;height:220px;min-height:220px;background-size:140% auto;background-position:left 8%;}.login-panel{border-radius:24px 24px 0 0;margin-top:-24px;position:relative}.login-panel .brand{justify-content:center}.login-copy{margin-top:30px}.topbar{flex-wrap:wrap;justify-content:center;padding:20px 15px;margin:12px}.topbar nav{width:100%;justify-content:space-between;border-top:1px solid #dfebf5;padding-top:10px;gap:12px}.topbar .brand{gap:15px}.brand-ar{font-size:23px}.brand-en{font-size:26px;padding-right:15px}h1{font-size:30px}.dashboard{padding-top:18px}.card{padding:24px}.welcome .greeting{font-size:19px}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}
@media(min-width:800px){.dashboard-art{width:32%;right:auto;left:0;background-image:linear-gradient(to bottom,#eaf5fc 0px,#eaf5fc 140px,transparent 240px),url('/assets/dashboard.png');background-size:cover,auto 100%;background-position:center,left center}.topbar{position:relative}.topbar,.card{background:#fff}}
/* Independent mobile layout; wide artwork is reserved for landscape desktops. */
.login-page{background:linear-gradient(145deg,#f5fbff,#e5f1f7)}
.login-layout{display:flex;flex-direction:column;align-items:center;min-height:100svh;padding:24px 16px;position:relative;isolation:isolate}
.login-art{display:none}.mobile-identity{margin:0 auto 22px;gap:14px}.mobile-identity .brand-ar{font-size:23px}.mobile-identity .brand-en{font-size:25px;padding-right:14px}
.login-panel{width:100%;max-width:480px;margin:0;padding:24px;border:1px solid white;border-radius:18px;background:#fffffff5;box-shadow:0 12px 38px #153c6415;display:block}
.login-copy{text-align:center;margin:0 0 20px}.login-lock{display:grid;place-items:center;width:48px;height:48px;background:#edf3f7;border-radius:50%;margin:0 auto 12px}.login-lock svg{width:28px;height:28px}.login-copy h1{font-size:27px;line-height:1.4}.login-english{display:none}.login-copy p{font-size:19px;line-height:1.5;margin-top:12px;color:var(--navy)}.login-copy small{display:none}
.login-form{gap:7px}.login-form label{font-size:19px;margin-top:4px}.login-form input{height:54px;background:white}.password-field button{height:46px}.login-form .primary{background:#092f5c;margin-top:14px;min-height:56px;justify-content:center;gap:18px;font-size:23px;padding:10px 16px}.login-form .primary:hover{background:#064b88}
.access-note{margin:20px 0 0;padding:14px 12px;background:#fff7e9;border-right:4px solid #f4a900;border-radius:10px;text-align:center;font-size:16px;line-height:1.5;color:var(--navy)}.access-note strong{display:block;font-size:17px}.access-note span{display:none}.access-note p{margin-top:10px;color:#536077}
.mobile-members{display:block;width:100%;max-width:480px;margin:20px auto 0;background:#ffffffdb;border:1px solid white;border-radius:16px;padding:24px}.mobile-members h2{font-size:23px}.mobile-members ol{padding-right:24px;margin-bottom:0}.mobile-members li{padding:10px 4px;font-size:20px}
@media(min-width:1051px) and (min-aspect-ratio:17/10){
 .login-layout{width:100%;min-height:100svh;padding:24px;justify-content:center}
 .login-art{display:block;position:absolute;inset:0;width:100%;height:100%;min-height:0;background:url('/assets/login.png') center/cover no-repeat;z-index:-1}
 .mobile-identity,.mobile-members{display:none}
 .login-panel{width:clamp(340px,28vw,440px);max-width:none;padding:24px}
 .login-english{display:block;font:18px/1.6 Arial,sans-serif;margin-top:3px}
 .login-copy small{display:block;font:12px/1.6 Arial,sans-serif;color:var(--muted);margin-top:5px}
 .access-note span{display:block;font:12px/1.6 Arial,sans-serif;margin-top:4px}
}
@media(min-width:1051px) and (min-aspect-ratio:17/10) and (max-height:800px){
 .login-layout{padding:16px}.login-panel{padding:18px}.login-copy small,.access-note span{display:none}
 .login-copy h1{font-size:25px}.login-copy{margin-bottom:14px}.login-lock{width:40px;height:40px;margin-bottom:8px}
 .access-note{margin-top:14px;padding:12px}.access-note p{margin-top:8px}
}
@media(min-width:1051px) and (min-aspect-ratio:17/10){.login-art{background-position:right center}}
.member-it{font-family:Arial,sans-serif;font-size:.85em;font-weight:700;margin-inline-start:5px}
.art-it{display:none}
@media(min-width:1051px) and (min-aspect-ratio:17/10){
 .login-art{container-type:size}
 .art-it{display:block;position:absolute;right:calc(max(100cqw,200cqh)*.213);top:calc(50% + max(50cqw,100cqh)*.164);transform:translateY(-50%);font:bold calc(max(100cqw,200cqh)*.0124)/1 Arial,sans-serif;color:#09245b}
}
/* Homepage only: full-width approved artwork below transparent content containers. */
.portal-page{isolation:isolate}
.portal-page>.dashboard-art{pointer-events:none;z-index:0}
.portal-page>.topbar,.portal-page>.dashboard{position:relative;z-index:1}
@media(min-width:800px){.portal-page{background:transparent}.portal-page>.dashboard-art{inset:0;width:100%;background-image:url('/assets/internal-background.png');background-size:100% 100%;background-position:center;background-repeat:no-repeat}.portal-page>.dashboard,.portal-page .cards{background:transparent}}
/* Desktop home: keep the four actions within the first screen without shrinking mobile controls. */
@media(min-width:1000px){
 .portal-page>.topbar{margin:16px 3%;padding:12px 24px}
 .portal-page>.dashboard{padding-top:4px;padding-bottom:8px}
 .portal-page .welcome{display:grid;grid-template-columns:1fr auto;column-gap:16px;margin-bottom:8px}
 .portal-page .welcome .eyebrow,.portal-page .welcome .greeting{margin:0;font-size:17px}
 .portal-page .welcome h1{grid-column:1/-1;font-size:32px;margin:6px 0}
 .portal-page .welcome h1:after{margin-top:8px}
 .portal-page .welcome>p:last-child{grid-column:1/-1;font-size:18px}
 .portal-page .dashboard>.back,.portal-page .dashboard>p>.back{padding:6px 16px;font-size:18px;margin-bottom:8px}
 .portal-page .cards{gap:14px}
 .portal-page .card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px 14px;padding:18px}
 .portal-page .card-icon{grid-column:1;grid-row:1;width:52px;height:52px;margin:0}
 .portal-page .card-icon svg{width:34px;height:34px}
 .portal-page .card h2{grid-column:2;grid-row:1;align-self:center;font-size:26px}
 .portal-page .card p{grid-column:1/-1;margin:2px 0 8px;font-size:19px;line-height:1.5}
 .portal-page .card-action{grid-column:1/-1;min-height:50px}
 .portal-page .dashboard footer{margin-top:12px}
}

/* Homepage introduction: clear hierarchy with the account shortcut alongside it. */
.portal-page .home-intro{margin-bottom:16px}
.portal-page .home-accounts{margin-bottom:0}
@media(min-width:1000px){
 .portal-page .home-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px}
 .portal-page .welcome{flex:1;min-width:0;margin-bottom:0;display:block}
 .portal-page .welcome .eyebrow{display:inline-block;margin-inline-end:18px}
 .portal-page .welcome .greeting{display:inline-block}
 .portal-page .welcome>p:last-child{margin:0}
 .portal-page .home-accounts{flex-shrink:0;padding:10px 14px;font-size:16px;min-height:44px}
}
@media(min-width:1000px) and (max-height:800px){
 .portal-page>.topbar{margin:10px 3%;padding:8px 20px}
 .portal-page .welcome h1{font-size:30px;margin:3px 0}
 .portal-page .welcome h1:after{margin-top:4px}
 .portal-page .card{padding:14px;gap:6px 14px;grid-template-columns:44px minmax(0,1fr)}
 .portal-page .card-icon{width:44px;height:44px}
 .portal-page .card h2{font-size:24px}
 .portal-page .card p{margin:0 0 4px}
 .portal-page .dashboard footer{margin-top:6px}
}
@media(min-width:1000px) and (max-width:1200px){
 .portal-page .home-intro{flex-wrap:wrap;gap:8px}
 .portal-page .welcome{flex-basis:100%}
}
/* Internal desktop pages: shared scenery outside an opaque reading/writing surface. */
@media(min-width:800px){
 body:is(.scope-page,.road-page,.req-page,.disc-page,.lib-page,.accounts-page){
  background-image:url('/assets/internal-background.png');
  background-size:100vw 100vh;
  background-position:center top;
  background-repeat:no-repeat;
  background-attachment:fixed;
 }
 body:is(.scope-page,.road-page,.req-page,.disc-page,.lib-page,.accounts-page)>main{
  background:#fff;
  border-radius:16px;
  margin-top:24px;
  margin-bottom:24px;
  box-shadow:0 8px 30px #153c6414;
 }
}
/* Owner name artwork: original transparent asset, scaled without cropping. */
.portal-page .home-member-name{display:block;width:280px;max-width:100%;height:auto;margin:0 auto;pointer-events:none}
@media(min-width:1000px){
 .portal-page .home-intro{position:relative}
 .portal-page .home-member-name{position:absolute;width:50%;max-width:520px;left:-15%;top:50%;transform:translateY(-50%);margin:0}
}
@media(min-width:1000px){.portal-page .home-member-admin{top:30%}}
.welcome-audio{margin:8px 0}.welcome-audio button{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:10px 16px;border:1px solid #c4dce8;border-radius:10px;background:#fff;color:#123e64;font:700 17px/1.5 Tajawal,Arial,sans-serif;cursor:pointer}.welcome-audio button:focus-visible{outline:3px solid #008c9c;outline-offset:3px}.welcome-audio audio{display:none}.welcome-audio #welcome-audio-status{font-size:17px;margin:8px 0;color:#123e64;background:white;padding:8px;border-radius:8px}@media(max-width:600px){.welcome-audio button{width:100%;justify-content:center}}
/* Mobile homepage identity: complete artwork, natural aspect ratio, readable vertical actions. */
.mobile-home-scene{display:none}
@media(max-width:799px){
 .portal-page>.topbar{margin:10px 12px;padding:16px 14px 8px;gap:12px}
 .portal-page>.topbar nav{padding-top:4px}
 .portal-page>.dashboard{padding:4px 14px 24px}
 .portal-page .mobile-home-scene{display:block;width:100%;height:auto;border-radius:14px}
 .portal-page .home-member-name{width:280px;max-width:100%;height:auto;margin:-32px auto -36px;position:relative}
 .portal-page .home-intro{margin-bottom:18px}
 .portal-page .welcome{margin-bottom:14px}
 .portal-page .welcome .eyebrow{margin-bottom:4px;font-size:16px}
 .portal-page .welcome .greeting{margin-bottom:6px}
 .portal-page .welcome h1{font-size:27px;margin-bottom:8px}
 .portal-page .welcome h1:after{margin-top:8px}
 .portal-page .welcome>p:last-child{font-size:18px;line-height:1.6}
 .portal-page .home-accounts{display:block;text-align:center;min-height:48px;padding:10px 12px;font-size:18px}
 .portal-page .cards{gap:14px}
 .portal-page .card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px 12px;padding:18px}
 .portal-page .card-icon{grid-column:1;grid-row:1;width:48px;height:48px;margin:0;border-radius:12px}
 .portal-page .card-icon svg{width:30px;height:30px}
 .portal-page .card h2{grid-column:2;grid-row:1;align-self:center;font-size:24px;line-height:1.5}
 .portal-page .card p{grid-column:1/-1;margin:0 0 4px;font-size:19px}
 .portal-page .card-action{grid-column:1/-1;min-height:54px;font-size:20px}
}
/* Clear, high-contrast optional audio control. */
.portal-page .welcome-audio button{background:#092d64;color:#fff;border:2px solid #092d64;box-shadow:0 3px 9px #092d6426;font-size:18px}
.portal-page .welcome-audio button:hover{background:#07509a;border-color:#07509a}
.portal-page .welcome-audio button[aria-pressed=true]{background:#006d78;border-color:#006d78}
.portal-page .welcome-audio button:focus-visible{outline:3px solid #d98a00;outline-offset:3px}

/* Leave the approved brand artwork visible beside desktop reading surfaces. */
@media(min-width:1200px){
 body:is(.scope-page,.road-page,.req-page,.disc-page,.lib-page,.accounts-page){background-size:100vw calc(100vh - 100px);background-position:center bottom}
 body:is(.scope-page,.road-page,.req-page,.disc-page,.lib-page,.accounts-page)>main{width:60%;margin-right:2%;margin-left:auto}
}
/* Keep the full brand mark below the homepage header and separate from member names. */
@media(min-width:800px){.portal-page>.dashboard-art{top:0;background-image:url('/assets/internal-background.png'),url('/assets/internal-background.png');background-size:100% calc(100% - 64px),100% 100%;background-position:center bottom,center top;background-color:transparent}.portal-page>.topbar{margin:16px 3%;padding:10px 24px;min-height:72px;background:#fff;border:1px solid var(--navy);box-shadow:0 6px 24px #153c6412}}
@media(min-width:1000px){.portal-page .home-member-name{left:0;width:40%;max-width:440px}}
.login-mobile-brand{display:none}
@media(max-width:799px){
 .login-page .login-layout{padding-top:0}
 .login-page .mobile-identity{height:91.59375px;width:100%;margin:0;justify-content:center;flex-shrink:0}
 .login-page .mobile-identity>span{display:none}
 .login-page .login-mobile-brand{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
}
/* Use the full phone width for the approved login artwork. */
@media(max-width:799px){
 .login-page .mobile-identity{height:auto;max-width:480px}
 .login-page .login-mobile-brand{width:100%;height:auto;max-height:none}
 .login-page .login-panel{padding-top:12px}
 .login-page .login-lock{width:36px;height:36px;margin-bottom:8px}
 .login-page .login-lock svg{width:24px;height:24px}
 .login-page .login-copy{margin-bottom:8px}
}
body .portal-credit{font-size:16px;line-height:1.7;text-align:center;color:#123e64;margin:12px 0 0;padding:8px 12px;overflow-wrap:anywhere}body .portal-credit bdi{font-family:Arial,sans-serif;font-size:15px}.portal-page .portal-credit{background:#fffffff2;border-radius:8px;display:table;margin:10px auto 0}
/* Mobile header identity only; the separate homepage illustration stays unchanged. */
.mobile-header-brand{display:none}
@media(max-width:799px){
 .portal-page>.topbar .brand{width:100%;display:block}
 .portal-page>.topbar .brand>span{display:none}
 body>header .mobile-header-brand{display:block;width:100%;height:auto;max-width:480px;margin:0 auto;flex:0 0 100%}
 body>header:is(.scope-header,.road-header,.req-header,.disc-header,.lib-header){flex-wrap:wrap;gap:10px}
 body>header:is(.road-header,.req-header,.disc-header,.lib-header)>strong,.scope-page>.scope-header>div{display:none}
}

/* Warm ivory surfaces on the desktop homepage. */
@media(min-width:800px){.portal-page>.topbar,.portal-page .cards>.card{background:#fdfbf7}.portal-page .cards>.card{border-color:#eee9e1}}
/* Shared desktop identity; existing phone headers and form fields remain unchanged. */
.internal-topbar{display:none}
@media(min-width:800px){
 body:is(.scope-page,.road-page,.req-page,.disc-page,.lib-page,.accounts-page){background-image:url('/assets/internal-background.png'),url('/assets/internal-background.png');background-size:100vw calc(100vh - 64px),100vw 100vh;background-position:center bottom,center top;background-repeat:no-repeat;background-attachment:fixed}
 body>.internal-topbar{display:flex;position:relative;margin:16px 3%;padding:10px 24px;min-height:72px;background:#fdfbf7;border:1px solid #092d64;border-radius:18px;box-shadow:0 6px 24px #153c6412;color:#092d64;align-items:center;justify-content:space-between;gap:16px}
 body>header:is(.scope-header,.road-header,.req-header,.disc-header,.lib-header){display:none}
 body>.internal-topbar nav a,body>.internal-topbar nav button{width:auto;display:inline-block;background:transparent;color:#092d64;border:0;border-radius:0;padding:10px 4px;min-height:44px;font:700 20px/1.65 Tajawal,Arial,sans-serif}
 body>.internal-topbar .brand{background:transparent;padding:0;min-height:0;color:#092d64}
 body:is(.scope-page,.road-page,.req-page,.disc-page,.lib-page,.accounts-page)>main{background:#fdfbf7}
 body :is(.scope-choice,.scope-domain,.scope-package,.scope-task,.scope-extra,.scope-output,.req-card,.req-explanation,.req-compose,.req-response,.req-admin,.disc-compose,.disc-thread,.lib-upload,.lib-card,.lib-pending,.lib-empty,.road-stage){background:#fdfbf7;border-color:#eee9e1}
 body .road-overview article:not(.road-launch),body .scope-counts span{background:#fdfbf7;border-color:#eee9e1}
}